Adnene tahri

Posted on Apr 1

How I built a React portfolio template with a LIVE color picker (and why it's a game-changer

#react #typescript #tailwindcss #portfolio

🎨 How I built a React portfolio template with a LIVE color picker (and why it's a game-changer)

The problem with most portfolio templates

Every developer needs a portfolio. But most templates are static. You want to change the primary color? You edit CSS, rebuild, redeploy. It's a waste of time.

I've built 10+ portfolios for clients, and I kept running into the same frustration.

So I decided to build something different.

💡 The solution: a live color picker

DevShowcase Pro is a React portfolio template with a live color picker. You click on a color, and the entire site updates instantly. No CSS editing. No rebuild. No redeploy.

🛠️ Tech stack

Technology	Purpose
React 18	UI Framework
TypeScript	Type safety
Tailwind CSS 4	Styling
Framer Motion	Animations
Recharts	Data visualization
Vite	Build tool

🎯 Key features

🎨 Live color picker (unique)

Users can change the primary color in real time. The preference is saved in localStorage.

🌓 Dark/Light mode

Smooth toggle with persistence.

🔍 Smart filtering

Filter projects by category AND search by technology in real time.

📊 Interactive dashboard

Activity graph with Recharts
Skills radar chart
Key metrics (projects, experience, technologies)

🎬 Smooth animations

📱 Fully responsive

Perfect on mobile, tablet, and desktop.

🏗️ Architecture

The template follows a clean, scalable structure:
src/
├── components/ # React components
├── context/ # Theme provider (color picker + dark/light)
├── data/ # portfolio.json (all content)
├── types/ # TypeScript interfaces
└── styles/ # Tailwind CSS

text

All content is centralized in portfolio.json. Edit it once, and everything updates.

🚀 Deployment

The template is optimized for Vercel and Netlify:

Build command: npm run build
Output directory: dist
Environment variables: GEMINI_API_KEY (optional)

📦 What's included

✅ Complete source code

✅ Live color picker (unique)

✅ Dark/light mode with persistence

✅ Smart filtering

✅ Interactive dashboard with Recharts

✅ Fully responsive design

✅ EmailJS contact form ready

✅ Full documentation

✅ 30 days email support

✅ Lifetime updates

👨‍💻 Try it yourself

Live Demo: devshowcase-pro.vercel.app

Get the template: payhip.com/b/9elSR

💬 Feedback

I'd love to hear your thoughts! Have you built a portfolio template before? What features would you add?

Built with ❤️ by Smartsniper31

DEV Community