DEV IN THE HOOD — Front vs Back
DEV IN THE HOOD
$ cat stack.txt GSAP SCSS ES modules esbuild PHP $ stats --short 6 Chapters 13 Repositories 4 Pages
Design, 2026
Scroll down
—Overview
The portfolio you are walking through. A story in six chapters where every product has two sides — the front people see, the back that keeps it standing — drawn in SVG, animated with GSAP and built without a framework.
02The front
What people see.
Paper is the front, night is the back, and the seam between them runs through every page: a street of shops for the projects, a factory for the open-source bundles, a player card, a mission board.
Built by hand,
from the seam out
No framework and no template: every scene is drawn in SVG with a palette of CSS tokens, and every chapter has its own choreography — a pinned opening, a street you walk sideways, a factory filmed as a travelling shot.
The projects are JSON files. Add one, and it becomes a shop on the street, a case study, the next shop of the one before it.
—Screens
Scroll sideways
Every product has two sides. This one shows both.
03The back
What keeps it standing.
$ cat stack.txt GSAP SCSS ES modules esbuild PHP
- 6Chapters
- 13Repositories
- 4Pages
- 2Minified files
- 0Frameworks
- 0W3C errors
- 84Views compared
- 5Easter eggs
29 features6 modules
016 features
The story
- A pinned opening: the halves part on the hero
- A street of shops, walked sideways
- A factory filmed as a travelling shot
- A player card under a spotlight
- A mission board that writes your first line
- A finale that closes the seam
024 features
Motion
- ScrollSmoother, ScrollTrigger, SplitText, Flip, DrawSVG
- A strip driver for wheel, keys, touch and momentum
- Parallax depth layers
- A drawn loader and page transitions
035 features
Code
- Sass partials, mixins and BEM naming
- One ES module per section: render() and animate()
- Escaped HTML templates
- One minified bundle, with its source maps
- Every page generated from one layout
044 features
Content
- One JSON file per project
- Any project file renders: ?p= or ?src=
- Sitemap, robots.txt and humans.txt generated
- Open Graph card and structured data
056 features
Accessibility
- A skip link and landmarks on every page
- Headings in order, checked on the rendered page
- A visible focus ring
- ARIA states on the mission board
- The keyboard walks the street too
- Reduced motion: every scene has a still frame
064 features
Quality
- ESLint, Stylelint and Prettier
- W3C-valid HTML and CSS
- The refactor checked view by view, to the pixel
- A contact endpoint closed to header injection
—Built-in quality
