Portfolio

A modern portfolio website built with SvelteKit 2, Svelte 5, and Tailwind CSS v4.

Tech Stack

• SvelteKit 2 - Application framework
• Svelte 5 - Component framework with runes syntax
• Tailwind CSS v4 - Utility-first CSS framework
• shadcn/svelte - Re-usable component library
• TypeScript - Type safety
• mdsvex - Markdown for Svelte
• pnpm - Package manager

Project Structure

src/
├── lib/
│   ├── components/     # Reusable components
│   │   └── ui/        # shadcn/svelte components
│   ├── config/        # Application configuration
│   └── projects/      # Project data and types
├── routes/
│   ├── hackathons/    # Hackathon pages
│   └── projects/      # Project pages
└── app.html           # HTML template

Getting Started

Prerequisites

• Node.js 18.x or later
• pnpm 8.x or later

Installation

Install dependencies:

pnpm install

Development

Start the development server:

pnpm dev

The application will be available at http://localhost:5173.

Build

Create a production build:

pnpm build

Preview the production build:

pnpm preview

Scripts

Adding Components

Add shadcn/svelte components:

pnpm dlx shadcn-svelte@latest add <component>

Configuration

Tailwind CSS

Tailwind configuration is defined in vite.config.ts using the Vite plugin. Global styles are imported in src/routes/layout.css.

SvelteKit

SvelteKit is configured in svelte.config.js with the static adapter for pre-rendering.

TypeScript

TypeScript configuration is in tsconfig.json. Path aliases are configured for $lib and other imports.

Deployment

This project uses @sveltejs/adapter-static for static site generation. The built files in the build directory can be deployed to any static hosting service.

License

This project is licensed under the MIT License. See LICENSE for details.