Responsive Portfolio Website (Pure CSS3)

A production-ready, mobile-first portfolio built with semantic HTML, vanilla CSS3, and a small amount of JavaScript—no Tailwind, Bootstrap, or other CSS frameworks.

Website link

View in Chrome (no server): https://viinodha.github.io/website-css/

Features

• CSS Grid for macro layout (page shell, hero, bento grid, projects, footer)
• Flexbox for micro layout (navigation, cards, buttons, badges, form rows)
• Mobile-first responsive design with min-width breakpoints only
• Design tokens via CSS custom properties (colors, type, spacing, motion)
• Light / dark mode via prefers-color-scheme and manual [data-theme] toggle
• WCAG AA–oriented contrast, focus states, skip link, and semantic landmarks
• CLS-friendly images using aspect-ratio and explicit width / height
• Visual polish: gradients, backdrop blur on sticky header, smooth transitions

---

Tech stack

• HTML5
• CSS3 (Grid, Flexbox, Custom Properties, clamp(), aspect-ratio, backdrop-filter)
• Vanilla JavaScript (ES5-compatible IIFE)