Open source personal website builder with 62 beautiful production-ready templates.
Build your personal website in minutes with Claude's help. No coding required (but you can customize everything if you want).
Latest Update (March 2026):
- ✅ 60+ TEMPLATES! - 10 new premium templates (51-60) inspired by real-world sites
- ✅ Comprehensive QA Suite - Automated testing for HTML, CSS, JS, accessibility, responsive
- ✅ New designs include: Signature animation, brutalist /now pages, scrollytelling, Notion-style knowledge bases
- ✅ All templates pass QA - 0 errors, 89%+ pass rate across all test categories
Previous Update (Feb 2026):
- ✅ 50 TEMPLATES COMPLETE! - All 50 production-ready templates shipped
- ✅ 25 new templates added (Templates 26-50) - Specialized layouts & purpose-driven designs
- ✅ Layout innovations - One-page scroll, split screen, horizontal scroll, masonry grids
- ✅ Purpose-driven - Job seekers, course creators, podcasters, newsletter writers, and more
- 🎨 63 Beautiful Templates - Complete collection covering every style, layout, and use case
- 🧪 QA Suite - Automated testing for structure, HTML, CSS, JS, accessibility, responsive
- 🤖 Claude-Powered - Customize conversationally: "make it blue", "add a contact form"
- 📄 PDF Import - Extract info from LinkedIn, resumes, Twitter automatically
- 🚀 One-Click Deploy - Free hosting on Vercel
- 💯 No Build Tools - Pure HTML/CSS/JS, works everywhere
- 📱 Fully Responsive - Mobile-first design, looks great on all devices
- ⚡ Fast & Clean - Minimal, optimized, production-ready
- ♿ Accessible - WCAG 2.1 AA compliant, keyboard navigation
- 🎯 2026 Trends - Bento grids, glassmorphism, Y2K retro, and more
- Founders & Entrepreneurs
- Software Engineers & Developers
- Designers & Creatives
- Product Managers
- Researchers & Writers
- Anyone who needs a clean personal site
git clone https://github.com/debgotwired/clean-and-personal.git
cd clean-and-personal-
Start Claude Code
claude
-
Use the skill
/website-builder -
Tell Claude what you want
I'm a software engineer, want a dark mode portfolio -
Upload your data (optional)
- Drag and drop your LinkedIn PDF
- Or resume
- Or just type your info
-
Claude builds it for you!
- Picks the right template
- Customizes with your info
- Helps you deploy
-
Browse templates
- Open
index.htmlin your browser to see all 62 templates - Or explore the
templates/directory
- Open
-
Choose a template
cd templates/01-founder # or whichever you like
-
Edit index.html
- Update your name, bio, links
- Add your work experience
- Customize sections
-
Customize styles.css (optional)
- Change colors in CSS variables
- Modify fonts
- Adjust layout
-
Deploy
- See Deployment Guide
Click the button below for one-click deployment:
Or follow the Deployment Guide for other hosting options.
| # | Name | Style | Best For | Preview |
|---|---|---|---|---|
| 01 | Founder | Professional, light green gradient | Founders, entrepreneurs | View |
| 02 | Developer Dark | Terminal aesthetic, neon green | Engineers, technical founders | View |
| 03 | Text Scholar | Ultra-minimalist, long-form reading | Researchers, writers, academics | View |
| 04 | Minimal Clean | Markdown-style, ultra-simple | Designers, minimalists | View |
| 05 | Playful Developer | Colorful accents, fun | Developer advocates, educators | View |
| 06 | Blog-First | Content-focused essays | Technical writers, thought leaders | View |
| 07 | Resume/CV | Traditional one-page | Job seekers, freelancers | View |
| 08 | Startup | Business-focused, metrics | Startup founders, entrepreneurs | View |
| 09 | Creative Portfolio | Artistic, visual-first | Designers, photographers, artists | View |
| 10 | Project Showcase | Card layout for projects | Product managers, builders | View |
| # | Name | Style | Best For | Preview |
|---|---|---|---|---|
| 11 | Bento Grid | Modular card layout (2026 trend) | Modern portfolios | View |
| 12 | Glassmorphism | Frosted glass effects | Creative professionals | View |
| 13 | Y2K Retro | Nostalgic 90s/2000s aesthetic | Retro enthusiasts | View |
| 14 | Organic Shapes | Flowing natural forms | Nature-inspired brands | View |
| 15 | Hand-Drawn | Sketchy, anti-AI aesthetic | Human-touch focused | View |
| 16 | Bold Typography | Type-first design | Type enthusiasts | View |
| 17 | 3D Elements | Subtle depth effects | Modern tech portfolios | View |
| 18 | Brutalist | Raw, experimental | Bold creative work | View |
| 19 | Swiss Style | Grid-based, systematic | Professional portfolios | View |
| 20 | Memphis Design | 80s geometric, colorful | Playful brands | View |
| 21 | Neumorphism | Soft UI, embossed | Subtle elegant design | View |
| # | Name | Style | Best For | Preview |
|---|---|---|---|---|
| 22 | Software Engineer | Code-focused, technical | Software engineers, developers | View |
| 23 | UI/UX Designer | Case study driven | UI/UX designers | View |
| 24 | Product Designer | Product-focused, metrics | Product designers | View |
| 25 | Graphic Designer | Visual-first, image gallery | Graphic designers, artists | View |
| 26 | Marketing Pro | Campaign showcase, metrics | Marketing professionals, growth marketers | View |
| 27 | Consultant | Services-focused, professional | Business consultants, advisors | View |
| 28 | Freelancer | Versatile, availability status | Freelancers across disciplines | View |
| 29 | Illustrator | Artwork gallery, masonry grid | Digital illustrators, artists | View |
| 30 | Animator | Motion-focused, video showcase | Animators, motion designers | View |
| # | Name | Style | Best For | Preview |
|---|---|---|---|---|
| 31 | One Page Scroll | Full-screen scrolling sections | Product launches, presentations | View |
| 32 | Multi Page Classic | Traditional multi-page site | Corporate websites, professional services | View |
| 33 | Side Navigation | Fixed sidebar, doc-style | Documentation, developer portfolios | View |
| 34 | Full Screen Slides | Presentation-style slides | Conference speakers, storytellers | View |
| 35 | Magazine Layout | Editorial-style magazine | Writers, journalists, publishers | View |
| 36 | Card Grid | Pinterest-style cards | Photographers, visual portfolios | View |
| 37 | Timeline | Chronological timeline | Career journeys, project histories | View |
| 38 | Split Screen | Dual-pane design | Personal brands, minimal portfolios | View |
| 39 | Horizontal Scroll | Left-to-right scrolling | Creative agencies, experimental designs | View |
| 40 | Masonry Grid | Variable-height masonry | Photography, art galleries | View |
| # | Name | Style | Best For | Preview |
|---|---|---|---|---|
| 41 | Job Seeker Resume | ATS-friendly, hire-me focused | Job seekers, career changers | View |
| 42 | Startup Founder | Pitch-focused with traction | Startup founders, fundraisers | View |
| 43 | Blog First Writer | Content-primary portfolio | Writers, bloggers, journalists | View |
| 44 | Link In Bio | Social hub landing page | Influencers, content creators | View |
| 45 | Course Creator | Teaching portfolio, catalog | Educators, coaches, trainers | View |
| 46 | Speaker | Conference speaker showcase | Public speakers, thought leaders | View |
| 47 | Podcast Host | Episode showcase with player | Podcast hosts, audio creators | View |
| 48 | Newsletter Writer | Substack-style newsletter | Newsletter writers, essayists | View |
| 49 | Community Builder | Network-focused community | Community managers, organizers | View |
| 50 | Open Source Maintainer | GitHub-focused developer | OSS maintainers, library authors | View |
| # | Name | Style | Best For | Preview |
|---|---|---|---|---|
| 51 | Signature Minimal | Dark mode, signature animation | Personal brands, designers | View |
| 52 | Now Page Focus | Brutalist, Derek Sivers style | Writers, thinkers, /now enthusiasts | View |
| 53 | Warm Essayist | Magazine-style, warm earth tones | Newsletter writers, essayists | View |
| 54 | Craft Developer | Ultra-minimal, philosophy section | Thoughtful developers | View |
| 55 | Academic Researcher | Papers, lectures, codes sections | Professors, researchers | View |
| 56 | Angel Investor | Portfolio with antiportfolio | Angel investors, VCs | View |
| 57 | Knowledge Base | Notion-style, sidebar navigation | Digital gardeners, note-takers | View |
| 58 | Scrollytelling | Immersive parallax storytelling | Storytellers, creatives | View |
| 59 | AI Founder | Dark hacker, typewriter effect | AI founders, tech entrepreneurs | View |
| 60 | Creative Director | Services grid, testimonials | Creative directors, consultants | View |
| 61 | Friendly Blogger | Warm greetings, light/dark toggle | Tech bloggers, developers | View |
| 62 | Dark Engineer | Dark grid, noise overlay, animated counters | Software engineers, OSS creators | View |
See docs/50-TEMPLATES-TAXONOMY.md for the full roadmap.
This project includes a Claude Code skill that makes customization conversational:
# Load the skill
/website-builder
# Then talk naturally:
"I want a dark mode site for developers"
"Change the green to blue"
"Add a projects section"
"Make the font bigger"
"Import my LinkedIn PDF"The skill can:
- ✅ Help you choose templates
- ✅ Parse PDFs and extract information
- ✅ Make design changes conversationally
- ✅ Add/remove/modify sections
- ✅ Help with deployment
- ✅ Answer questions about customization
See skills/website-builder.md for details.
Claude can automatically import from:
- LinkedIn PDFs - Work history, education, skills
- Resume/CV - All professional information
- Twitter/X - Bio, links, recent posts
- Substack - Writing samples, articles
- GitHub - Projects, bio, activity
- Any PDF - Just upload and Claude extracts what it can
See docs/DATA-IMPORT.md for guide.
Each template uses CSS variables for easy customization:
:root {
--primary: #22c55e;
--background: #fafafa;
--text: #2d3d2d;
}Or ask Claude: "Make the primary color blue"
All templates use Google Fonts. Change in <head>:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet">Each template is fully customizable:
- Add/remove sections
- Change order
- Modify spacing
- Adjust responsive breakpoints
Claude can help with all of this conversationally!
Deploy for FREE to Vercel:
- Push to GitHub
- Import to Vercel
- Deploy (automatic)
See docs/DEPLOYMENT.md for full guide including:
- Custom domains
- HTTPS setup
- Performance optimization
- Analytics
Run automated tests on all templates:
# Install dependencies
npm install
# Run full QA suite
npm run qa
# Run with verbose output
npm run qa:verbose
# Test specific template
node qa/runner.js --template 51
# Generate screenshots + run QA
npm run qa:fullTest Categories:
- Structure (files, sizes, config)
- HTML (semantics, accessibility, SEO)
- CSS (variables, responsive, focus states)
- JavaScript (syntax, patterns, error handling)
- Accessibility (ARIA, focus, motion)
- Responsive (viewports, touch targets)
See qa/README.md for full documentation.
- Template Overview - All templates explained
- 50 Templates Taxonomy - Full roadmap of all templates
- QA Suite - Automated testing documentation
- Data Import Guide - How to import PDFs, LinkedIn, etc.
- Deployment Guide - Step-by-step deployment
- Claude Skill - How to use Claude for customization
This is an open source project! Contributions welcome:
- New templates - Add more designs
- Features - Improve existing templates
- Documentation - Help others get started
- Bug fixes - Report and fix issues
See CONTRIBUTING.md for guidelines.
Sites built with Clean and Personal:
- debmukherjee.com - Founder template
- Add yours! Submit a PR
- Pure HTML5, CSS3, JavaScript
- No framework required
- No build tools needed
- Works anywhere (Vercel, Netlify, GitHub Pages)
- Mobile-first responsive design
MIT License - use for personal or commercial projects, totally free.
See LICENSE for details.
If you find this useful, please star the repo and share with friends!
Fork it to make it your own.
Created by Deb Mukherjee
Inspired by the best personal websites on the internet:
- fareedmosavat.com - Dark mode terminal aesthetic
- gwern.net - Minimalist text-focused
- paco.me - Clean markdown style
- cassidoo.co - Playful and approachable
- swyx.io - Blog-first layout
- endler.dev - Warm, friendly blogger aesthetic
- parthjadhav.com - Dark grid engineer portfolio
And many more listed in docs/TEMPLATES.md
Questions? Found a bug? Want to contribute?
- Open an Issue
- Submit a Pull Request
- Email: debdut94@gmail.com
- Website: debmukherjee.com
- Templates Completed: 62 ✅
- Total Files: 300+ production-ready files
- Lines of Code: 35,000+ lines of HTML/CSS/JS
- QA Status: ✅ Automated test suite with 70+ tests per template
- Preview Screenshots: 186 screenshots (desktop, mobile, full-page)
- License: MIT (free for personal and commercial use)
Built with ♥ using Claude Opus 4.5