DEV Community

Cover image for Migrating My Portfolio from Django Templates to React + Vite + TailwindCSS
Nicolás Andrés Cano Leal
Nicolás Andrés Cano Leal

Posted on

Migrating My Portfolio from Django Templates to React + Vite + TailwindCSS

After years of building robust backend systems with Django, I’ve decided to give my personal portfolio a frontend makeover. The new version is built using React and Vite for a lightning-fast development experience, with TailwindCSS v4 (plus Shadcn/UI) for clean and flexible styling.

This transition reflects a shift not only in tech stack but in how I present my work as a Backend Developer — embracing modular architecture and focusing on user experience across devices.

🛠️ Core Stack and Setup

React + Vite: Fast dev server, intuitive routing, and modular component design.

Tailwind v4: Manually integrated via @tailwindcss/postcss to support Shadcn/UI.

Shadcn/UI: Powerful UI components with headless accessibility.

🔧 Tailwind Setup Summary

npm install @tailwindcss/postcss
Enter fullscreen mode Exit fullscreen mode

With config files:

postcss.config.cjs using @tailwindcss/postcss

Tailwind purging content from src/*/.{js,ts,jsx,tsx}

Global styles defined in index.css for consistent theming

📁 Component Highlights

ProjectCard.jsx, ContactCard.jsx, SkillCard.jsx, TituloCard.jsx — each crafted with purpose to highlight key areas of my portfolio

Responsive layout powered by Tailwind utility classes

ESLint and Vite configuration for clean code and optimized builds

🌐 Going Live Soon!

The project will be deployed soon, but until then feel free to check out the current progress and explore my portfolio [insert your link here].

Thanks for reading — if you’re working on frontend transitions or integrating Tailwind v4 in your own setup, let’s connect!

Cambios Portafolio

🔗 #React #Vite #TailwindCSS #ShadcnUI #FrontendDev #PortfolioUpgrade #WebDevelopment #CleanArchitecture #Django #BackendToFrontend

Top comments (0)