Portfolio Website

A modular portfolio website built with pure HTML, CSS, and JavaScript.

Project Structure

├── index.html              # Main portfolio page
├── detail.html             # Detail page for individual items
├── styles/
│   ├── main.css            # Main page styles
│   └── detail.css          # Detail page styles
├── components/
│   ├── sidebar.js          # Reusable sidebar component
│   └── card.js             # Reusable card component
├── js/
│   ├── navigation.js       # Navigation and smooth scrolling logic
│   ├── animations.js       # Scroll animations
│   ├── portfolio.js        # Main page logic
│   └── detail.js           # Detail page logic
└── data/
    └── content.js          # Centralized content configuration

Features

Reusable Components

• Sidebar Component: Vertical navigation with smooth scrolling
• Card Component: Interactive cards for portfolio items
• Navigation System: Active section highlighting and smooth scrolling

Responsive Design

• Mobile-friendly sidebar that transforms to horizontal layout
• Responsive content layout
• Touch-friendly interactions

Animations

• Scroll-triggered animations using Motion One library
• Smooth transitions and hover effects
• Progressive enhancement (works without JavaScript)

Modular Architecture

• Separated CSS, JavaScript, and content
• Centralized content management
• Easy to maintain and extend

Usage

Adding New Portfolio Items

Edit data/content.js to add new items:

// Add to portfolio section
portfolio: {
  works: [
    {
      id: 'new-project',
      title: 'New Project Title',
      description: 'Project description'
    }
  ]
},

// Add corresponding detail content
details: {
  'new-project': {
    title: 'Detailed Project Title',
    content: 'Full project description...',
    image: 'path/to/image.jpg',
    youtube: 'https://www.youtube.com/embed/VIDEO_ID'
  }
}

Customizing Styles

• Edit styles/main.css for main page styling
• Edit styles/detail.css for detail page styling
• Modify CSS variables for quick theme changes

Navigation

The sidebar automatically generates navigation based on sections with IDs:

• #intro - Introduction section
• #works - Portfolio works
• #cases - Case studies
• #log - Development log
• #contact - Contact information

Browser Support

• Modern browsers with ES6+ support
• Progressive enhancement for older browsers
• Mobile Safari, Chrome, Firefox, Edge

Dependencies

• Motion One - For scroll animations
• Google Fonts - Inter and Noto Sans fonts

Development

1. Open index.html in a web browser
2. Edit content in data/content.js
3. Modify styles in styles/ directory
4. Extend functionality in js/ and components/ directories

No build process required - works directly in the browser!