Overview
Crafteako is my creative outlet for photography and videography work. I built the site entirely from scratch — no frameworks, no build tools — to deeply understand how the web works at the fundamentals level. The result is a fast, visually distinctive site that attracted real client inquiries.
Thought Process
I wanted a home for my photography that felt as intentional as the photos themselves. Every portfolio template I looked at felt generic — sliders, grids, lightboxes. I wanted something that had its own visual language.
I deliberately chose not to use a framework. I'd been writing React for months and wanted to rebuild my understanding of what frameworks actually abstract away. Vanilla HTML and CSS turned out to be more capable than I expected — CSS Grid, custom properties, and the animation API go a long way.
Performance was a core constraint from the start. Photography sites are image-heavy. I spent significant time on lazy loading, responsive image sizing, and compression pipelines so the site loads fast even on slower connections.
System Architecture
A static site with no build step. Custom CSS handles layout, animations, and theming. JavaScript is used sparingly — only for the gallery lightbox, contact form, and scroll-triggered animations.
HTML/CSS Layout
Custom grid-based layouts for the gallery and project pages. CSS custom properties for theming. No utility classes — all design tokens are hand-tuned.
JavaScript (Vanilla)
Minimal JS for gallery lightbox, smooth scroll, intersection observer for scroll animations, and form submission handling.
Image Pipeline
Photos exported from Lightroom at specific dimensions and compressed with Squoosh. Responsive srcset attributes ensure the right image size loads for each viewport.
Contact System
Form submission handled via a simple serverless endpoint. Replies land in email without exposing the address to scrapers.
Key Learnings
- 01
Vanilla CSS is genuinely underrated. CSS Grid, custom properties, and clamp() cover the vast majority of what a CSS framework gives you, with zero overhead.
- 02
Intersection Observer is the right tool for scroll animations — performant, declarative-ish, and no scroll event listeners thrashing the main thread.
- 03
Image optimization is a craft. Getting a photography site under 2MB on first load while still looking stunning requires intentional decisions at every step of the pipeline.
- 04
Building without a framework is a great exercise even if you wouldn't do it for a production app. It revealed exactly what React is solving and why.