feelsIncubator is a portfolio case study exploring cyberpunk aesthetics and underground anime visual language through modern web technologies.

Overview

Portfolio Case Study

This project serves as both a functional portfolio template and a design exploration. It demonstrates how cyberpunk and underground anime aesthetics can be translated into a cohesive web experience without sacrificing usability or performance.

The design language draws from neon-lit cityscapes, late-night anime screenings, and the raw energy of underground digital culture. Every element is crafted to evoke that feeling of discovering something hidden in the depths of the internet.

Tech Stack

Built With

A deliberately minimal tech stack focused on performance, maintainability, and zero dependencies.

HTML5

Semantic markup with accessibility-first structure. ARIA labels, skip links, and proper heading hierarchy.

CSS3

Custom properties for theming, CSS Grid and Flexbox for layout, animations with reduced motion support.

Vanilla JavaScript

Zero dependencies. ES5 compatible for maximum browser support. Modular IIFE pattern.

Space Grotesk

Google Fonts. Geometric sans-serif with a technical, slightly futuristic character.

CSS Custom Properties

Design tokens for colors, spacing, timing, and effects. Single source of truth for theming.

No Build Step

Pure static files. No bundlers, no transpilers, no package managers required.

Process

How It Was Made

The development followed a design-led approach, starting with mood and aesthetic before moving into technical implementation.

  1. 01

    Aesthetic Research

    Gathered references from cyberpunk anime, underground web culture, neon signage, and late-night urban photography. Defined the visual territory.

  2. 02

    Design System

    Established color palette (cyan, magenta, deep black), typography choices, spacing scale, and motion principles. Created CSS custom properties.

  3. 03

    Component Development

    Built reusable components: navigation, cards, buttons, sliders. Each component tested for responsiveness and accessibility.

  4. 04

    Page Assembly

    Composed homepage with hero and portfolio slider. Created project page template. Ensured consistent experience across all pages.

  5. 05

    Interaction Polish

    Added hover states with glow effects, smooth page transitions, drag-to-scroll slider, and keyboard navigation support.

Concept

Ideas Behind the Design

Neon Glow as Interaction Feedback

Glow effects aren't just decorative. They serve as visual feedback for interactive elements, guiding users through the interface like neon signs in a dark city.

Dark-First Design

The dark background isn't a mode toggle, it's the identity. Black creates depth for colors to pop and establishes the underground atmosphere.

Restraint in Chaos

Cyberpunk can easily become overwhelming. This design uses the aesthetic sparingly through strategic glow effects and color accents.

Performance as Feature

No frameworks, no build tools. The site loads fast because there's nothing unnecessary. Minimalism in code mirrors the design philosophy.

Accessible Underground

Underground doesn't mean exclusive. Proper contrast ratios, keyboard navigation, screen reader support, and reduced motion respect.

Typography as Architecture

Space Grotesk's geometric forms echo circuit boards and technical drawings. Type sizing creates clear hierarchy without decoration.

Credits

Designed and developed by Valdez Campos
dez@mediabrilliance.io

mediaBrilliance designxtudio
Version 1.0 — January 2026