ninahahne-portfolio-sveltekit

This is the SvelteKit-based portfolio of Nina Hahne.
It showcases selected projects, experiments, and design work.

Built with:

• ✅ SvelteKit 2 + Svelte 5
• ✅ TailwindCSS for layout and responsiveness
• ✅ TypeScript, ESLint, and Prettier for consistency
• ✅ Static site generation using @sveltejs/adapter-static

🚀 Getting Started

1️⃣ Install dependencies

npm install

2️⃣ Start the development server

npm run dev

Then visit http://localhost:5173.

---

📂 Project Structure (simplified)

src/
├── routes/               # Page routes
│   └── +page.svelte      # Main entry (portfolio homepage)
├── lib/
│   ├── components/       # Reusable Svelte components
│   ├── data/             # Project data as JS/TS files
│   └── utils/            # Optional helpers
├── styles/
│   └── app.css           # Tailwind base & custom styles
static/
├── images/               # Project images, icons, etc.
└── fonts/                # Optional fonts

---

📌 Customization

Tailwind

TailwindCSS is preconfigured. Modify styles in:

src/styles/app.css
tailwind.config.ts

Linting & Formatting

ESLint and Prettier are included:

npm run lint

Deployment

By default, this uses static site generation (adapter-static).

This portfolio is statically generated with adapter-static, and can be deployed to:

• GitHub Pages
• Netlify / Vercel
• Any static file host

---

📷 Image Optimization (WebP, AVIF)

This portfolio supports automatic image optimization using vite-imagetools. It allows you to convert images to WebP/AVIF at build time.

Install vite-imagetools

npm install vite-imagetools

Configure vite.config.ts

import { defineConfig } from 'vite';
import { imagetools } from 'vite-imagetools';

export default defineConfig({
  plugins: [imagetools()],
});

Usage in Svelte components

<script>
  import img from '$lib/images/sample.jpg?w=500&format=webp';
</script>

<img src={img} alt="Optimized Image" />

✅ Pros: No extra server needed, works seamlessly with adapter-static.

---

📄 License

This project is MIT licensed.
All project content © Nina Hahne.

---

👋 Contact

Visit: ninahahne.rocks
GitHub: @NinaHahne
Mail: [email protected]

---

🎨 Credits

All emojis designed by OpenMoji – the open-source emoji and icon project. License: CC BY-SA 4.0