Hack Club Journal: Building a Developer Portfolio from Zero
The Beginning
Building a developer portfolio from scratch — from git init to live. Not a generic template — a real reflection of the hardware, software, content creation, and community work I actually do.
Tech Stack
React 18 + TypeScript, Vite 5, Tailwind CSS 4, Framer Motion, React Hook Form + Zod, React Router v6. Deployed to GitHub Pages via pnpm 11.
Key Features
- Dark/Light Theme — context API, persistent preference, toggle in header
- Hero Section — animated intro, profile image, CTA
- Skills Grid — languages (Rust, TS, Python), infra (Docker, Kubernetes, Proxmox), hardware (ESP32, PCB, Fusion 360), media (DaVinci Resolve, Blender)
- Project Cards — HelpeX, custom 3D printer, Hack Club Stardance, linking to GitHub/live demos
- Experience Timeline — freelance work, Hack Club involvement, Blueprint program, education
- Contact Form — validated with React Hook Form + Zod
- Responsive Design — glass-morphism cards, adapts mobile to desktop
The Deployment Journey
- GitHub Pages with custom domain arnost.kernelkicks.dev
- npm → pnpm migration for faster builds
- Node.js 18 → 22 for pnpm 11 compatibility
- CI pipeline with proper path handling
- Fixed base path for root domain deployment
- Dark mode config and responsive fixes
Deploys automatically on every push now.
What Makes This Different
Not just a tech list — a record of what I actually build:
- HelpeX: Rust-powered JARVIS-style automation agent — voice control, home automation, AI decisions, deployed on Kubernetes with GitOps
- 3D Printer: Built from scratch through Hack Club Blueprint — hardware, firmware, all of it
- Content Creation: YouTube, Instagram, TikTok tech content, growing audience
- Hack Club Stardance: Mentorship and community building at the hardware/software intersection
Lessons Learned
- Start with deployment — getting CI working early avoided “works on my machine” pain
- Design systems need constraints — Tailwind kept things honest, glass-morphism gave it identity
- TypeScript pays off — caught prop/context errors at compile time, saved hours
- Structure matters — clean component layout (sections, UI, layout, data) makes it easy to extend
The Hack Club Connection
Built with the Hack Club mindset — build in public, iterate fast, share what you make. Blueprint gave me the hardware chops, Stardance gave me the community leadership skills. This portfolio ties both together, and it shows in the git history: 50+ commits of build, share, iterate.
Closing Reflection
A year and a half of building in the open, from npm create vite@latest to the live site. What I’m proudest of isn’t the animations — it’s that every skill listed is something I’ve actually used to build real things. Nothing aspirational, just what I’ve done.
Built with React, TypeScript, Tailwind, and a lot of coffee.
Deployed via GitHub Pages from the portfolio branch.
