Personal Portfolio - noahcjones.dev
Personal Portfolio - noahcjones.dev from Noah Jones
Personal Portfolio - noahcjones.dev

A fully custom portfolio site designed and built from
scratch — no templates, no frameworks. The site serves
as both a creative showcase and a technical demonstration,
featuring a Matrix-inspired visual identity built around
a dark green terminal aesthetic, scanline overlay, and
animated entry experience.

The entry point is an interactive red pill / blue pill
choice scene — users who choose the red pill enter the
portfolio, users who choose the blue pill land in a
fully rendered satirical corporate cubicle scene
complete with a Windows-style taskbar, TPS reports,
and a progress bar loading their "assigned synergy
tasks." The concept is a comment on the choice between
creative work that excites you versus uninspiring work
just to pay the bills.

Built entirely with HTML, CSS, and vanilla JavaScript.
Every component — the carousel system, modal viewer,
audio visualizer bars, hamburger navigation, and
contact form — was coded by hand.

View Website
Entry Experience — noahcjones.dev Interactive Matrix-inspired entry page featuring animated red and blue pill buttons with pulsing glow effects, a cinematic vignette overlay, and a full Matrix rain canvas animation. Built with vanilla JavaScript and CSS keyframe animations. Red pill leads to the portfolio. Blue pill leads to a satirical corporate scene.
Wrong Choice — TeraCorp Employee Portal The blue pill consequence — a fully rendered corporate cubicle scene featuring a Windows-style taskbar with live clock, a fabric pinboard with motivational posters and sticky notes, a desk with monitor showing an Excel spreadsheet, and a pop-up window welcoming the user as Employee #4471-B. Users can escape via Wake Up or Take Red Pill buttons. Built entirely in CSS with no image assets — every element is pure HTML and CSS.
Portfolio Hub — noahcjones.dev Central navigation grid linking to all portfolio sections — Art, 3D Models, Videos, Music, Projects, GitHub, About, and Contact. Cards use a subtle green glow on hover with corner bracket details pulled from the Matrix design system. Share Tech Mono font used throughout for terminal aesthetic consistency.
Art Gallery — noahcjones.dev Six original digital art pieces displayed in a featured carousel and expandable grid. Each piece opens in a custom modal with title and artist description. Carousel built in vanilla JavaScript with dot navigation, prev/next buttons, and swipe support. Scanline overlay disables automatically when modal opens for cleaner media viewing.
Projects — noahcjones.dev Structured case study layout covering Problem, Design Approach, What I Built, and Outcome sections. Consistent section numbering, callout blocks for key questions, outcome metric cards, and tech tag system. Shared CSS file used across all three case studies for visual consistency. Back navigation returns to projects grid.
Case Study — noahcjones.dev Structured case study layout covering Problem, Design Approach, What I Built, and Outcome sections. Consistent section numbering, callout blocks for key questions, outcome metric cards, and tech tag system. Shared CSS file used across all three case studies for visual consistency. Back navigation returns to projects grid.
Music Player — noahcjones.dev Six original music tracks displayed with animated audio visualizer bars that respond to the Matrix aesthetic. Clicking any track opens a modal with a full audio player and expanded animated visualizer. Audio bars animate using CSS keyframes with staggered delays for each bar creating a live equalizer effect.
gLike
Personal Portfolio - noahcjones.dev

A fully custom portfolio site designed and built from
scratch — no templates, no frameworks. The site serves
as both a creative showcase and a technical demonstration,
featuring a Matrix-inspired visual identity built around
a dark green terminal aesthetic, scanline overlay, and
animated entry experience.

The entry point is an interactive red pill / blue pill
choice scene — users who choose the red pill enter the
portfolio, users who choose the blue pill land in a
fully rendered satirical corporate cubicle scene
complete with a Windows-style taskbar, TPS reports,
and a progress bar loading their "assigned synergy
tasks." The concept is a comment on the choice between
creative work that excites you versus uninspiring work
just to pay the bills.

Built entirely with HTML, CSS, and vanilla JavaScript.
Every component — the carousel system, modal viewer,
audio visualizer bars, hamburger navigation, and
contact form — was coded by hand.

View Website
Noah Jones
UX/UI Designer New Orleans, LA