svelte-portfolio Svelte Themes

Svelte Portfolio

Portfolio Websites created with Svelte, Astro and Tailwind

#portfolio#scss#svelte#typescript#astro
Demo Download

Portfolio Website

A modern portfolio website built with Astro and Svelte, featuring a vintage-inspired design with smooth animations and a focus on performance.

šŸš€ Tech Stack

  • Astro - Static site generator with SSR support
  • Svelte - Component framework
  • TailwindCSS - Utility-first CSS framework
  • TypeScript - Type safety
  • Node.js - Server-side rendering adapter

šŸ“ Project Structure

/
ā”œā”€ā”€ public/              # Static assets (favicons, images)
ā”œā”€ā”€ src/
ā”‚   ā”œā”€ā”€ components/     # Svelte components
ā”‚   ā”‚   ā”œā”€ā”€ Sections/   # Page sections (AboutMe, Projects, ContactOptions)
ā”‚   ā”‚   ā”œā”€ā”€ Card.svelte
ā”‚   ā”‚   ā”œā”€ā”€ ContactForm.svelte
ā”‚   ā”‚   ā”œā”€ā”€ Navbar.svelte
ā”‚   ā”‚   ā”œā”€ā”€ Portfolio.svelte
ā”‚   ā”‚   ā”œā”€ā”€ VintageBackground.svelte
ā”‚   ā”‚   ā””ā”€ā”€ VintageMountains.svelte
ā”‚   ā”œā”€ā”€ layouts/        # Astro layouts
ā”‚   ā”œā”€ā”€ pages/          # Astro pages (routes)
ā”‚   ā”‚   ā”œā”€ā”€ index.astro
ā”‚   ā”‚   ā”œā”€ā”€ contact.astro
ā”‚   ā”‚   ā””ā”€ā”€ api/
ā”‚   ā””ā”€ā”€ styles/         # Global styles
ā””ā”€ā”€ static/             # Static files (icons, etc.)

šŸ§ž Commands

All commands are run from the root of the project:

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:4321
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run lint Run ESLint and Prettier checks
npm run format Format code with Prettier
npm run astro ... Run CLI commands like astro add, astro check

šŸŽØ Features

  • Vintage Design - Classic, parchment-inspired aesthetic with mountain illustrations
  • Smooth Animations - Parallax effects and scroll-based animations
  • Responsive Layout - Mobile-first design that works on all devices
  • Server-Side Rendering - Fast initial page loads with Astro SSR
  • Contact Form - Functional contact form with API endpoint
  • Project Showcase - Dynamic project cards with tags and links

šŸ› ļø Development

The project uses Astro's SSR mode with the Node.js adapter. Components are built with Svelte 5 and styled with TailwindCSS.

Key Components

  • Portfolio.svelte - Main portfolio page component
  • Navbar.svelte - Navigation bar with scroll detection
  • VintageBackground.svelte - Parchment-style background texture
  • VintageMountains.svelte - Parallax mountain illustrations
  • AboutMe.svelte - About section with skills and interests
  • Projects.svelte - Project showcase grid
  • ContactOptions.svelte - Contact links and social media

šŸ“ License

See LICENSE.txt for details.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes