Modern Portfolio Website

A clean, professional, and accessible portfolio website built with semantic HTML5 and CSS3.

Project Overview

This portfolio website showcases a modern, responsive design with a focus on accessibility and performance. Built using semantic HTML5 and CSS3, it follows best practices for web development and provides an optimal viewing experience across all devices.

Features

• Responsive design that works on all screen sizes
• Semantic HTML5 structure for better accessibility
• Mobile-first CSS approach
• Dark/light theme toggle
• Optimized performance
• WCAG 2.1 compliant
• Cross-browser compatible

File Structure

/
├── index.html          # Main landing page
├── styles/
│   ├── main.css       # Core styles
│   ├── layout.css     # Layout/grid systems  
│   ├── components.css # Reusable components
│   └── variables.css  # Custom properties
└── assets/
    └── images/        # Optimized images

Style Guide

Colors

• Primary: #2563eb
• Secondary: #1e293b
• Accent: #3b82f6
• Background (Light): #ffffff
• Background (Dark): #0f172a
• Text (Light): #1e293b
• Text (Dark): #f8fafc

Typography

• Primary Font: 'Inter', sans-serif
• Heading Font: 'Inter', sans-serif
• Base Font Size: 16px
• Scale: 1.25 (Major Third)

Spacing

• Base Unit: 4px
• Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96

Breakpoints

• Mobile: 320px - 479px
• Tablet: 480px - 767px
• Laptop: 768px - 1023px
• Desktop: 1024px+

Component Documentation

Card Component

• Purpose: Display portfolio items or content blocks
• Structure:
  • Image container (16:9 ratio)
  • Title (H3)
  • Description
  • Call-to-action button/link

Navigation

• Mobile: Collapsible menu with hamburger icon
• Desktop: Horizontal menu with hover effects
• Always keyboard accessible

Setup Instructions

1. Clone the repository
2. Open index.html in a modern web browser
3. No build process required - pure HTML and CSS

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

Performance Optimizations

• Optimized images using modern formats
• Lazy loading for images
• Minified CSS
• System font stack
• Efficient CSS selectors
• Minimal CSS footprint

Accessibility Features

• Semantic HTML structure
• ARIA labels where needed
• Keyboard navigation support
• High contrast ratios
• Focus indicators
• Screen reader friendly
• Alternative text for images
• Skip to main content link

Best Practices

• BEM naming convention
• Mobile-first approach
• Progressive enhancement
• Logical HTML structure
• Consistent spacing system
• Modular CSS architecture