Simple Responsive Portfolio (Svelte)

A single-page, responsive portfolio site built with Svelte 5 and Vite. It includes a hero intro, about section, two portfolio grids (work + play), a skills section, and an experience timeline, plus a sticky header with a mobile hamburger menu and a skip-to-content link.

Features

• Responsive single-page layout with smooth anchor navigation
• Sticky header that changes on scroll + mobile hamburger menu
• Hero, About, Work, Skills, Play, and Experience sections
• Data-driven portfolio cards and experience entries
• Accessible skip link and focus styles

Getting started

npm install
npm run dev

Available scripts

• npm run dev - start the Vite dev server
• npm run build - build for production
• npm run preview - preview the production build locally

Project structure

• src/App.svelte - page shell (header, main, footer) + skip link
• src/components/ - UI sections and layout components
• src/assets/project.js - "Work" portfolio items
• src/assets/play.js - "Play" portfolio items
• src/assets/experience.js - experience timeline entries
• src/app.css - global styles, layout, and CSS variables

Customize content

• Hero + section copy: update src/components/Hero.svelte and src/components/Main.svelte
• Navigation labels/anchors: update src/components/Nav.svelte
• Header logo text: update src/components/Header.svelte
• Skills list + icons: update src/components/Skills.svelte
• Footer name: update src/components/Footer.svelte
• Portfolio cards: edit src/assets/project.js and src/assets/play.js
• Experience entries: edit src/assets/experience.js

Tech stack

• Svelte 5
• Vite
• Vanilla CSS (global styles in src/app.css)

License

See LICENSE.