youssef.dev

Personal portfolio built with Next.js, Velite, Tailwind CSS v4, and Motion.

Stack

Layer	Tech
Framework	Next.js 16 (App Router, static export)
Content	Velite - typed MDX with frontmatter validation
Styles	Tailwind CSS v4
Animation	Motion (motion/react)
Deployment	Static Docker image served by nginx on Coolify

Running locally

npm install
npm run dev                  # velite build runs automatically

Open http://localhost:3000.

Project layout

For GitHub browsing, start here:

src/app          routes, layouts, and global styles
src/components   reusable UI
src/content      MDX project writeups
src/lib          typed data and helpers
deploy           production nginx config
public           static files served from /

Everything else in the repo root is framework or tooling configuration.

Deployment (Coolify)

1. Push this repo to GitHub.
2. In Coolify, create a new resource -> Docker -> point it at the repo.
3. Coolify will detect the Dockerfile and build automatically.
4. Set your domain in Coolify's domain settings.

The Dockerfile builds the static Next export into out/, then serves it from a small nginx:alpine image on port 80.

Content

Project guides live in src/content/projects/<slug>/index.mdx. Velite validates frontmatter at build time and outputs typed data to src/.velite/ (gitignored).

To add a project, copy an existing MDX file, update the frontmatter, and add the corresponding glyph variant to src/components/ui/Glyphs.tsx.