Joonas Nivala - Portfolio

Personal portfolio website built with Astro and SolidJS, featuring a file-explorer-inspired UI, smooth GSAP animations, and a dark/light theme.

Live site: https://jooniv.fi

Table of Contents

• Features
• Tech Stack
• Getting Started
• Commands
• Project Structure

---

---

Features

• Folder-based navigation with animated open/close transitions
• Dark/light theme with system preference detection
• Notes carousel with profanity filtering
• Project modals with descriptions and links
• Fully responsive layout
• GSAP animations throughout

---

Tech Stack

Tool	Purpose
Astro	Static site framework
SolidJS	Reactive UI components
Panda CSS	Type-safe CSS-in-JS styling
GSAP	Animations
solid-icons	Icon library

---

Getting Started

Prerequisites

• Node.js (astro combatible)
• npm

Install & Run

# Install dependencies
npm install

# Generate Panda CSS system
npm run prepare

# Start dev server
npm run dev

The site will be available at http://localhost:4321.

---

Commands

Command	Action
npm run dev	Start local dev server at localhost:4321
npm run build	Build production site to ./dist/
npm run preview	Preview production build locally
npm run prepare	Regenerate Panda CSS styled-system

---

Project Structure

/
├── public/              # Static assets (favicons, SVGs)
├── src/
│   ├── components/      # UI components (folders, modals, layout)
│   ├── content/         # JSON content (projects, skills, about, contact)
│   ├── layouts/         # Astro layout wrappers
│   ├── pages/           # Astro pages
│   └── utils/           # Helpers (text parsing, icon maps, CVA)
├── astro.config.mjs
├── panda.config.ts
└── package.json

---