🚀 Modern React Portfolio - From Static to Dynamic

A modern, performant portfolio website built with React 19.1, TypeScript, and cutting-edge animations. This project showcases a complete transformation from a static HTML5UP template to a fully interactive React application with advanced animations, real-time data, and optimized performance.

🎬 The Transformation Story

From Static HTML5UP to Dynamic React

What began in 2016 as a humble experiment in legacy web development (see the original website and repo) has grown into a showcase of modern React architecture. My journey took me from the confines of a lengthy GitHub Pages URL (mantej-singh.github.io/modern-portfolio-react/) to the pride of a professional custom domain (mantejsingh.dev), powered by a strategic investment in Cloudflare’s domain and CDN services. Read my complete domain migration journey🌐 →

Let me walk you through this transformation—and why every step mattered:

🔙 The HTML5UP Era (Static Template)

The original portfolio was built on HTML5UP's "Landed" template - a beautiful but static solution with several limitations:

<!-- Original stack: Multiple tracking scripts, jQuery dependencies -->
<script src="jquery.min.js"></script>
<script src="jquery.dropotron.min.js"></script>
<script src="jquery.scrollex.min.js"></script>
<script src="skel.min.js"></script>

<!-- Heavy tracking and analytics -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start'...</script>
<script>aid=43827;sid=49497;</script>

Pain Points Identified:

Manual Updates: Every project, skill, or experience required HTML editing
No Type Safety: JavaScript errors only discovered at runtime
jQuery Dependencies: 50KB+ of legacy JavaScript libraries
Static Content: No dynamic calculations (years worked, skill levels)
Performance Issues: Multiple tracking scripts, unoptimized images
Maintenance Overhead: Repetitive HTML for similar components
No Component Reusability: Copy-paste development patterns
SEO Limitations: Static meta tags, no dynamic content optimization

🚀 The React Renaissance (Modern Stack)

The transformation introduced systematic solutions to every limitation:

// Modern stack: Type-safe, component-based, optimized
React 19.1 + TypeScript + Vite + Tailwind CSS + shadcn/ui

Solutions Implemented:

Data-Driven Content: Edit src/data/ files instead of HTML
Type Safety: TypeScript catches errors before deployment
Component Architecture: Reusable, maintainable code structure
Dynamic Calculations: Automatic years worked, skill assessments
Performance Optimization: Code splitting, lazy loading, PWA features
Modern Animations: Smooth, accessible, performant effects
Developer Experience: Hot reload, intelligent debugging, path aliases

📊 Measurable Improvements

Metric	HTML5UP (Before)	React Portfolio (After)	Improvement
Build Time	Manual deployment	15s automated build	⚡ 95% faster
Bundle Size	~200KB (jQuery + deps)	~110KB (gzipped)	📦 45% reduction
Type Safety	0% (vanilla JS)	100% (TypeScript)	🛡️ Complete coverage
Component Reuse	0% (static HTML)	80%+ (shared components)	♻️ Massive efficiency
Update Speed	Hours (manual HTML)	Minutes (data files)	⏱️ 90% time savings
Lighthouse Score	78/100	95+/100	🎯 22% improvement

Why This Evolution Matters

This transformation demonstrates modern web development best practices and showcases the ability to:

Migrate Legacy Systems: Successfully evolved from jQuery-era to modern React
Performance Engineering: Achieved superior performance with more features
Developer Experience: Created a maintainable, scalable codebase
User Experience: Delivered smooth animations and responsive design
Future-Proofing: Built with latest React features and TypeScript

🚀 Quick Installation & Setup

Note

This setup assumes you have Node.js 18+ and npm installed. If not, download Node.js first.

1. Initialize React + Vite Project

Important

Why? Vite provides lightning-fast development server and optimized production builds

npm create vite@latest mantej-portfolio-react -- --template react-ts
cd mantej-portfolio-react && npm install

2. Install Core Dependencies

Tip

Why? These libraries provide the UI components, animations, and styling system

# UI Framework & Components  
npm install @radix-ui/react-slot @radix-ui/react-label @radix-ui/react-progress @radix-ui/react-tooltip

# Styling & Utilities
npm install tailwindcss postcss autoprefixer class-variance-authority clsx tailwind-merge

# Animations & Icons
npm install framer-motion lucide-react

3. Configure Tailwind CSS

Important

Why? Tailwind provides utility-first CSS framework for rapid UI development

npx tailwindcss init -p

4. Setup shadcn/ui Components

Tip

Why? shadcn/ui provides high-quality, customizable components with dark theme support

npx shadcn-ui@latest init
npx shadcn-ui@latest add button card input textarea label progress badge

5. Configure Path Aliases

Note

Why? Path aliases enable clean imports (@/components/ui/button vs ../../../components/ui/button)

Add to vite.config.ts and tsconfig.json - See detailed configuration →

6. Start Development

Warning

PWA Configuration? Progressive Web App features enable offline functionality and mobile installation

npm run dev  # Opens at http://localhost:5173

✨ Key Features

Latest Release:

🍎 iOS26-Inspired Glass Design - Premium navigation with ultra-transparent effects, backdrop-blur elements, and subtle elasticity animations matching iOS26 design language

Core Features:

📱 Horizontal Carousel Navigation - Mobile-only carousels for Work Experience, Skills & Technologies, and Featured Projects with smooth spring animations and desktop grid preservation
🎯 Dynamic Work Experience Timeline - Auto-calculates years worked with color-coded badges
📊 Interactive Skills Visualization - Realistic proficiency levels with animated progress bars
🎮 Smart Tooltip System - Context-aware tooltips with randomized engaging messages
⚡ Performance Optimized - Code splitting, lazy loading, and PWA capabilities
🎨 Advanced Animations - DecryptedText, SpotlightCard, PrismBackground, TargetCursor effects
📱 Responsive Design - Mobile-first approach with touch-friendly interactions
🌙 Dark/Light Theme - System preference detection with manual toggle
🔍 Type-Safe Development - Full TypeScript implementation with strict typing
🚀 Modern Architecture - React 19.1 with concurrent features and Suspense

Tip

Want detailed implementation examples? Check out our comprehensive Key Features Documentation →

⚡ Performance Features

This portfolio is built for speed and efficiency:

Code Splitting: Components load only when needed (11.29kB avg per section)
Lazy Loading: Images and heavy components load on demand
PWA Ready: Offline functionality and mobile installation
Bundle Optimization: 45% smaller than original jQuery-based version
Type Safety: 100% TypeScript coverage prevents runtime errors

Note

Performance Details: View complete performance analysis and metrics →

🛠️ Customization Guide

📝 Editing Personal Data

Want to add your information? All content is stored in easy-to-edit data files:

// src/data/personal.ts - Your basic information
export const personalInfo = {
  name: "Your Name",
  tagline: "Your Professional Title | Company",
  email: "your.email@example.com"
}

// src/data/experience.ts - Work experience
export const workExperience = [
  {
    title: "Your Job Title",
    company: "Company Name", 
    period: "2023 - Present",
    location: "City, State"
  }
]

// src/data/projects.ts - GitHub projects
export const featuredProjects = [
  {
    title: "Your Project",
    description: "Project description",
    github: "https://github.com/yourusername/project"
  }
]

🎨 Visual & Layout Changes

Need to modify the design? Here's where to look:

Header/Footer: Edit src/components/layout/Header.tsx and Footer.tsx
Section Cards: Modify src/components/sections/ for Skills, Contact, Experience
Colors & Theme: Update tailwind.config.js and src/index.css
Animations: Customize src/components/animations/ components

🔧 Component Modifications

Want to change how sections look? Each section is a separate component:

Skills Section: src/components/sections/SkillsVisualization.tsx
Project Cards: src/components/sections/ProjectCard.tsx
Contact Form: src/components/sections/ContactForm.tsx
Experience Timeline: src/components/sections/ExperienceCard.tsx

⚙️ App-Level Changes

For major layout or routing changes, edit src/App.tsx:

// Add new sections, reorder components, or modify app structure
function App() {
  return (
    <div className="App">
      <Header />
      <HeroSection />
      <SkillsSection />     // Reorder these sections
      <ExperienceSection /> // Or add new ones
      <ProjectsSection />
      <ContactSection />
      <Footer />
    </div>
  )
}

🎨 Animation Customizations

Want to modify animations? All animation components are in src/components/animations/:

DecryptedText: Matrix-style text reveal effect
SpotlightCard: Mouse-following spotlight on cards
PrismBackground: Animated particle background
TargetCursor: Custom cursor with trailing effect

Tip

Need comprehensive customization help? Check out our detailed Customization Guide → with step-by-step examples for every component and feature.

🏗️ Project Structure

src/
├── components/
│   ├── animations/          # DecryptedText, SpotlightCard, PrismBackground
│   ├── layout/             # Header, Footer components  
│   ├── sections/           # Skills, Contact, Experience, Projects
│   └── ui/                 # shadcn/ui components (Button, Card, etc.)
├── data/                   # ✏️ EDIT THESE: Personal info, projects, experience
├── lib/                    # Utilities and helper functions
├── types/                  # TypeScript interfaces and types
└── App.tsx                # ⚙️ EDIT FOR: App structure and routing

🌐 Deployment Guide

GitHub Pages (I am using this)

npm run build
# Deploy dist/ folder to gh-pages branch

Warning

Before deploying: Always run npm run build to ensure there are no TypeScript errors or build issues.

🔮 Future Enhancements

This portfolio is designed for continuous evolution. Planned improvements include:

Advanced Analytics with visitor insights and heat mapping
Theme Customizer with multiple color schemes
Multi-language Support for international reach
Blog Section with technical articles and tutorials (Maybe lol)

📚 Resources & Credits

Inspiration & Design

HTML5UP: html5up.net - Original template inspiration
TweakCN Theme Editor: tweakcn.com/editor/theme - Theme customization and editing
Canva Templates: canva.com/templates - Design templates and assets
Figma Community: figma.com/community/website-templates - Website templates and UI kits
React Bits Animations: reactbits.dev/animations - Animation examples and inspiration

Tip

I relied on these heavily for any new feature or ideas

🤝 Contributing

Development Setup

Fork the repository
Create feature branch: git checkout -b feature/amazing-feature
Make your changes following the project structure
Test thoroughly: npm run build and npm run dev
Commit changes: git commit -m 'Add amazing feature'
Push and create Pull Request

Code Standards

TypeScript: All components must be typed
ESLint: Follow established linting rules
Responsive: Mobile-first design approach
Accessibility: WCAG 2.1 compliance

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Built with ❤️ using React 19.1, TypeScript, and modern web technologies.

Last updated: August 2025

Name		Name	Last commit message	Last commit date
Latest commit History 43 Commits
.github/workflows		.github/workflows
docs		docs
images		images
public		public
src		src
tools		tools
CNAME		CNAME
LICENSE		LICENSE
README.md		README.md
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

License

Mantej-Singh/modern-portfolio-react

Folders and files

Latest commit

History

Repository files navigation

🚀 Modern React Portfolio - From Static to Dynamic

🎬 The Transformation Story

From Static HTML5UP to Dynamic React

🔙 The HTML5UP Era (Static Template)

🚀 The React Renaissance (Modern Stack)

📊 Measurable Improvements

Why This Evolution Matters

🚀 Quick Installation & Setup

1. Initialize React + Vite Project

2. Install Core Dependencies

3. Configure Tailwind CSS

4. Setup shadcn/ui Components

5. Configure Path Aliases

6. Start Development

✨ Key Features

Latest Release:

Core Features:

⚡ Performance Features

🛠️ Customization Guide

📝 Editing Personal Data

🎨 Visual & Layout Changes

🔧 Component Modifications

⚙️ App-Level Changes

🎨 Animation Customizations

🏗️ Project Structure

🌐 Deployment Guide

GitHub Pages (I am using this)

🔮 Future Enhancements

📚 Resources & Credits

Inspiration & Design

🤝 Contributing

Development Setup

Code Standards

📄 License

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 4

Packages 0

Languages

Packages