DevFolio React - Modern Portfolio Template

Important Note

This project is a modern React + Vite application. The file dev-folio-tamplate.html is provided only as a legacy reference to the original HTML version. All main development and features are implemented in React components under the src/ directory. Please use index.html and the React code for all deployment and customization.

A professional, minimal portfolio template refactored from a monolithic HTML file into a modern, scalable React + Vite application following SOLID principles and Atomic Design.

---

✨ What Changed From Original

Architecture Improvements

Original	React Version
Single 500+ line HTML file	Modular component architecture (25+ files)
Inline onclick="downloadSource()"	Custom React hook useDownloadSource
Tailwind CDN (not tree-shakable)	npm Tailwind with production optimization
Generic <div> elements	Semantic HTML (<article>, <nav>, <main>)
No accessibility labels	Full ARIA labels on all interactive elements
No image error handling	Lazy loading + fallback UI for broken images

Approved Modernizations (Phase 2)

✅ Issue #1: Extracted inline handlers to useDownloadSource hook
✅ Issue #2: Added semantic HTML + ARIA labels for accessibility
✅ Issue #3A: Implemented lazy loading + error boundaries for images
✅ Issue #4: Migrated to npm Tailwind for production builds
✅ Issue #5: Kept original design (no mobile menu per your request)
✅ Issue #6: Optimized font loading with preconnect

---

📁 Project Structure

src/
├── components/
│   ├── common/
│   │   ├── MaterialIcon.jsx       # Reusable icon wrapper
│   │   └── Button.jsx             # Primary/Secondary button variants
│   │
│   ├── ui/
│   │   ├── BrowserChrome.jsx      # Traffic light dots for mockups
│   │   └── Badge.jsx              # Pill-shaped label component
│   │
│   ├── layout/
│   │   ├── Navbar.jsx             # Fixed nav with glassmorphism
│   │   └── Footer.jsx             # Social links footer
│   │
│   ├── cards/
│   │   └── ProjectCard.jsx        # Project card with hover effects
│   │
│   └── sections/
│       ├── HeroSection/
│       │   ├── HeroSection.jsx    # Main container
│       │   ├── HeroContent.jsx    # Left: Text + CTAs
│       │   └── IsometricMockup.jsx # Right: 3D cards (pure CSS)
│       │
│       ├── ProjectsSection/
│       │   ├── ProjectsSection.jsx
│       │   └── SectionHeader.jsx
│       │
│       └── CodeSection/
│           ├── CodeSection.jsx
│           ├── FeaturesList.jsx
│           └── CodeTerminal.jsx
│
├── hooks/
│   └── useDownloadSource.js       # Download functionality
│
├── data/
│   └── projects.js                # Project data (easily editable)
│
├── utils/
│   └── constants.js               # Site config & social links
│
├── styles/
│   └── global.css                 # Tailwind + custom CSS
│
├── pages/
│   └── Home.jsx                   # Main page composition
│
├── App.jsx                        # Root with Helmet provider
└── main.jsx                       # React 18 entry point

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

# Navigate to project
cd dev-folio-react

# Install dependencies
npm install

# Start development server
npm run dev

The app will open at http://localhost:3000 🎉

Build for Production

npm run build
npm run preview

---

🎨 Customization Guide

1. Update Personal Info

Edit src/utils/constants.js:

export const SITE_CONFIG = {
  name: 'DevFolio',
  tagline: 'Your Job Title Here',
  author: 'Your Name',
  description: 'Your bio...',
  socialLinks: [
    { name: 'GitHub', url: 'https://github.com/yourusername', label: '...' },
    // Add more...
  ]
};

2. Add/Edit Projects

Edit src/data/projects.js:

export const projectsData = [
  {
    id: 4,
    title: 'Your New Project',
    tech: 'Tech Stack',
    image: 'image-url',
    alt: 'Descriptive alt text'
  },
  // ...
];

3. Customize Colors

Edit tailwind.config.js:

colors: {
  accent: '#YOUR_BRAND_COLOR',
  navy: '#YOUR_DARK_COLOR',
  // ...
}

---

🛠️ Tech Stack

Technology	Purpose
React 18	UI library with hooks
Vite	Lightning-fast build tool
Tailwind CSS	Utility-first CSS (tree-shakable)
React Helmet Async	SEO meta tags
Material Symbols	Icon library

---

📋 Migration Notes (Original HTML → React)

JavaScript → React Hooks

// ❌ Original (inline handler)
<button onclick="downloadSource()">Download</button>

// ✅ React (custom hook)
const handleDownload = useDownloadSource();
<button onClick={handleDownload}>Download</button>

CSS Architecture

// ❌ Original (CDN)
<script src="https://cdn.tailwindcss.com"></script>

// ✅ React (npm + PostCSS)
// tailwind.config.js with tree-shaking

Image Handling

// ❌ Original
<img src="..." alt="..." />

// ✅ React (with error handling)
<img 
  src="..." 
  alt="..." 
  loading="lazy"
  onError={handleImageError}
/>

Accessibility

// ❌ Original
<a href="#">GitHub</a>

// ✅ React
<a href="#" aria-label="Visit my GitHub profile">GitHub</a>

---

🌐 Deployment

Vercel (Recommended)

npm install -g vercel
vercel

Netlify

npm run build
# Drag 'dist' folder to Netlify

GitHub Pages

Update vite.config.js:

export default defineConfig({
  base: '/your-repo-name/',
  // ...
})

---

📝 Development Guidelines

Component Rules (SOLID Principles)

• ✅ Single Responsibility: Each component does ONE thing
• ✅ No Direct DOM: Use useRef or state, NEVER querySelector
• ✅ Functional Only: No class components
• ✅ Extract Logic: Complex logic goes in src/hooks/
• ✅ Semantic HTML: Use <article>, <section>, <nav>, etc.

File Naming

• Components: PascalCase (HeroSection.jsx)
• Hooks: camelCase with use prefix (useDownloadSource.js)
• Data: camelCase (projects.js)
• Styles: kebab-case (global.css)

---

🤝 Contributing

This template was built following strict architectural standards. When contributing:

1. Follow the Atomic Design structure (common → ui → sections)
2. NO inline styles (use Tailwind or CSS modules)
3. Add accessibility labels to all interactive elements
4. Extract non-UI logic to custom hooks
5. Use semantic HTML elements

---

📄 License

MIT License - feel free to use for personal or commercial projects.

---

Built with ❤️ following Principal Frontend Architect standards

Original monolithic HTML → Modern React application with SOLID principles, Atomic Design, and production-ready architecture.