DIYbuilds4u — Youssef Abdallah's maker portfolio

A technical maker's blog + project archive. Every project is a build log: dated, step-by-step, with a bill of materials, figures, and a "what I'd do differently" outro.

Tech stack

Layer	Tech	Notes
Framework	Astro 7	Fully static output (astro build → dist/), zero client JS except the theme toggle
Content	MDX + Astro content collections	Build logs in src/content/builds/, frontmatter validated by a Zod schema
Styling	Tailwind CSS v4	CSS-first config via @theme in src/styles/global.css; light/dark via data-theme
Typography	Fontsource	Self-hosted Space Grotesk Variable (display) + JetBrains Mono Variable (annotations)
Images	astro:assets	Build-time optimization to responsive WebP; placeholder-swap system (see below)
SEO	@astrojs/sitemap	Sitemap generated from the site URL in astro.config.mjs
Runtime	Node 22+	Build-time only — the deployed site is static files
Deploy	Docker (multi-stage) → nginx:alpine	Coolify-ready; config in deploy/nginx.conf

Local dev

npm install
npm run dev        # http://localhost:4321
npm run build      # static site -> dist/
npm run preview    # serve the built site locally
npx astro check    # typecheck + frontmatter validation

Project layout

src/
  content/builds/*.mdx     the build logs (frontmatter validated by src/content.config.ts)
  assets/builds/<slug>/    PHOTO DROP ZONES — see below
  components/              BuildImage, PartsTable, Callout, StatusBadge, ...
  layouts/                 BaseLayout (shell), BuildLogLayout (log page anatomy)
  pages/                   / , /builds/ , /builds/[slug] , 404
  lib/site.ts              name, email, socials, nav — edit personal info here

Adding real photos (the placeholder-swap system)

Every image on the site renders as a styled "PHOTO PENDING" placeholder until a real file exists. To swap one in, drop the file into the build's asset folder and rebuild — no code changes.

The placeholder tells you the expected filename (any of .jpg .jpeg .png .webp .avif works). Expected files per build:

Build	Folder	Expected image names
eVTOL drone	src/assets/builds/evtol-drone/	flight-test (hero), airframe-print, wing-assembly, prop-layout, wiring, ground-station
Retro handheld	src/assets/builds/retro-handheld/	final-assembled (hero), retropie-boot, gpio-soldering, wiring-loom, cad-enclosure, printed-shell, assembly
Studentify	src/assets/builds/studentify/	telegram-chat (hero), architecture, plan-output
Motorsports PCB	src/assets/builds/motorsports-pcb/	kicad-layout (hero), enclosure-fit, kicad-before-after, board-in-enclosure

Images are optimized at build time (responsive WebP with srcset). Layout is identical between placeholder and real photo, so swapping never shifts the page.

Adding a new build log

1. Copy any file in src/content/builds/ and edit the frontmatter (schema: src/content.config.ts). buildNumber drives the BUILD 00N stamps and prev/next order; date drives archive sorting.
2. Create src/assets/builds/<slug>/ for its photos.
3. Reference figures as <BuildImage src="<slug>/<name>" ... /> — they render as placeholders until photos land.
4. Convention: every log ends with a ## What I'd do differently section.

Deploy (Coolify / any Docker host)

docker build -t portfolio .
docker run -p 8080:80 portfolio

Multi-stage build: Node builds dist/, nginx:alpine serves it (config in deploy/nginx.conf — gzip, immutable caching for hashed /_astro/ assets, styled 404).

Before going live, set the real domain in astro.config.mjs (site:) and public/robots.txt (sitemap URL).