DEV Community

Lin Aung
Lin Aung

Posted on

I Built a Pixel Art CV Template (Open Source)

#webdev #cv #resume #react

A retro-styled portfolio website built with React and TypeScript that you can customize in minutes

Why Another Portfolio Template?

Let's be honest - most developer portfolios look the same. Clean, minimal, professional... and boring.

I wanted something different. Something that shows personality while still being functional. So I built a pixel art CV website that combines retro aesthetics with modern web technologies.

Live Demo: pixel-cv-seven.vercel.app

GitHub: github.com/dev-lin2/pixel-cv

What Makes This Different?

🎮 Pixel Art Aesthetic

Retro 8-bit style UI that stands out without being gimmicky. Perfect for developers who grew up on classic games or just appreciate the aesthetic.

📝 JSON-Driven Content

Your entire CV lives in a single cv.json file. No need to touch React components to update your experience, skills, or projects.

{
  "name": "Your Name",
  "title": "Your Title",
  "bio": "Your bio here",
  "experience": [...],
  "skills": [...],
  "projects": [...]
}
Enter fullscreen mode Exit fullscreen mode

⚡ Modern Tech Stack

  • React - Component-based UI
  • TypeScript - Type safety and better DX
  • Vite - Lightning-fast builds
  • Tailwind CSS - Utility-first styling
  • Framer Motion - Smooth animations

📱 Fully Responsive

Works seamlessly on desktop, tablet, and mobile devices.

Quick Start

1. Clone the repo 

git clone https://github.com/dev-lin2/pixel-cv.git
cd pixel-cv
Enter fullscreen mode Exit fullscreen mode

2. Install dependencies 

npm install
Enter fullscreen mode Exit fullscreen mode

3. Update your content

Edit public/cv.json with your information:

  • Personal details (name, title, email, location)
  • Bio
  • Work experience
  • Skills
  • Projects
  • Education
  • Social links

4. Customize branding

Replace public/logo.png with your own logo

5. Run locally 

npm run dev
Enter fullscreen mode Exit fullscreen mode

6. Deploy

Build for production:

npm run build
Enter fullscreen mode Exit fullscreen mode

Deploy to Vercel, Netlify, or any static hosting platform.

Project Structure 

pixel-cv/
├── public/
│   ├── cv.json          # Your CV data
│   └── logo.png         # Your logo/favicon
├── src/
│   ├── components/      # React components
│   ├── App.tsx          # Main app component
│   └── main.tsx         # Entry point
├── index.html
└── package.json
Enter fullscreen mode Exit fullscreen mode

Key Features Explained

Data-Driven Design

The entire homepage is rendered from cv.json. This means:

  • ✅ No code changes needed for content updates
  • ✅ Easy to maintain
  • ✅ Version control your CV
  • ✅ Multiple CVs for different roles (just swap the JSON file)

Pixel Perfect UI

Using custom fonts and carefully crafted components to achieve that authentic retro look while keeping the code clean and maintainable.

Performance Optimized

  • Vite for instant HMR during development
  • Optimized production builds
  • Lazy loading for images
  • Smooth animations without jank

Customization Tips

Change Color Scheme

The pixel aesthetic uses a limited color palette. You can customize colors in tailwind.config.ts:

theme: {
  extend: {
    colors: {
      'pixel-primary': '#your-color',
      'pixel-secondary': '#your-color',
      // ... more colors
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Add New Sections

Want to add a "Certifications" or "Publications" section?

  1. Add the data to cv.json
  2. Create a new component
  3. Import and render it in App.tsx

Modify Animations

All animations are handled by Framer Motion. Tweak timing, easing, and effects in the component files.

Why Open Source?

I believe good tools should be accessible to everyone. Not every developer has time to build a portfolio from scratch, but everyone deserves a unique one.

This template is:

  • ✅ Free to use
  • ✅ No attribution required (though appreciated!)
  • ✅ Open to contributions
  • ✅ MIT licensed

What's Next?

Some features I'm considering:

  • [ ] Dark/light mode toggle
  • [ ] Multiple CV templates (JSON-driven theming)
  • [ ] Blog integration
  • [ ] Print-friendly version
  • [ ] Multi-language support

Got ideas? Open an issue or submit a PR!

Try It Out

Demo: pixel-cv-seven.vercel.app

GitHub: github.com/dev-lin2/pixel-cv

If you use this template, I'd love to see what you build! Drop a link in the comments below.

And if you find it useful, a ⭐ on GitHub would mean a lot!

Tech Stack Summary

  • React 18
  • TypeScript
  • Vite
  • Tailwind CSS
  • Framer Motion
  • Lucide React (icons)

Happy coding! 🎮✨

Top comments (0)