Vertical Playground — Website

The public-facing marketing site for Vertical Playground. A single-page application showcasing our mission, approach, and flagship projects.

Stack

Layer	Technology
Framework	SvelteKit 2
Components	Svelte 5
Styling	Tailwind CSS 4
Build	Vite
Deployment	Vercel

External assets loaded via CDN: particles.js (animated background), Font Awesome (icons), Google Fonts (Poppins, Roboto).

Project Structure

src/
├── routes/
│   ├── +layout.svelte   # Root layout: wraps all pages with Header/Footer
│   └── +page.svelte     # Home page — renders the Main component
├── components/
│   ├── Header.svelte    # Sticky nav, changes style on scroll
│   ├── Main.svelte      # Landing page content (hero, approach, projects)
│   ├── Footer.svelte    # Social links (email, GitHub, LinkedIn)
│   └── Step.svelte      # Reusable project card
├── app.html             # HTML entry template
└── app.css              # Global styles (Tailwind imports + scroll behaviour)

The site is a single scrollable page with three anchor sections: #introPage, #approach, and #projects.

Local Development

Prerequisites: Node.js 20+

# Install dependencies
make install

# Start dev server (http://localhost:5173)
make dev

# Type check
make check

# Build for production
make build

# Preview the production build locally
make preview

# Remove build artifacts and node_modules
make clean

All commands have npm run equivalents if you prefer not to use Make.

CI

GitHub Actions runs on every push and pull request to main:

1. Install dependencies (npm ci)
2. Type check (npm run check)
3. Build (npm run build)

PRs that fail either step should not be merged.

Deployment

The site deploys automatically to Vercel on merge to main. No manual steps required. The @sveltejs/adapter-vercel adapter handles the build output.

Adding / Editing Content

• Hero text and CTAs — src/components/Main.svelte, intro section
• Approach columns — src/components/Main.svelte, approach section
• Project cards — src/components/Main.svelte, projects section (each uses the Step component)
• Navigation links — src/components/Header.svelte (nav tabs are currently commented out)
• Social links — src/components/Footer.svelte

Contact

info@vertical-playground.com