GitHub
Development Portfolio v1
My previous portfolio site — a fully designed React/Webpack/SASS application with animated SVG header compositions, 3D perspective flip cards, an interactive p5.js art playground, and a custom animation system. Designed and built as an art piece.
React
SASS
Webpack
p5.js
SVG Animation
Overview
This was my previous development portfolio, designed and built as an art piece. An animated SVG header with 8 staggered shape compositions, 3D perspective flip cards for the intro section, a custom SASS animation library, and a hidden p5.js interactive art playground.
The entire site was an expression of my design-to-engineering transition — every component treated as a canvas, every animation hand-tuned.
Intro Animation
Animated SVG Header Composition
Screenshots
Projects Section — Thumbnail Navigation
Third Cult Masks — Project Slideshow
Pentimento — Project Detail
Design Highlights
SVG Animation System
8 animated shapes and 2 background layers with staggered entrance timing ranging from 0.7s to 1.2s delays, creating a choreographed header reveal.
3D Perspective Cards
Flip cards with full 360° Y-axis rotation, backface-visibility hidden, and perspective values between 150rem and 300rem for dramatic depth.
SASS Architecture
Full abstracts/base/components/layout/pages structure with responsive breakpoints and reusable mixins powering every visual detail.
Vertical Voids
Hidden p5.js art playground with interactive generative line compositions rendered in red and blue palettes.
Animation Library
moveInLeft
Horizontal entrance from off-screen left
moveInBottom
Vertical entrance from below viewport
moveInDepths
Z-axis entrance with scale transform
implode
Collapse inward with scale and opacity
fadeIn
Simple opacity transition from 0 to 1
Stack
React
Webpack
Babel
SASS
p5.js
Express
EmailJS