jjcabalo/portfolio

Purpose and Runtime

This is a static, desktop-oriented personal design portfolio. It presents Jervys’ visual identity and UI/UX project work through an interactive React single-page experience with a yellow/black visual system, custom cursor behavior, animated typography, and glass-style UI.

The browser runtime is React, bundled and served by Vite. Styling combines global CSS with Tailwind/PostCSS configuration:

• package.json

• vite.config.js

• tailwind.config.js

• postcss.config.js

Application Entry and Composition

The browser bootstraps React from:

• index.html

• src/main.jsx

src/main.jsx mounts the application root; the portfolio’s primary layout, content sections, interaction logic, and animation orchestration are concentrated in:

• src/App.jsx

• src/App.css

• src/index.css

This is effectively a single-page application rather than a routed multi-page system.

Main Portfolio Experience

src/App.jsx is the architecture-defining UI composition boundary. It contains the portfolio shell and likely owns:

• page/section layout and navigation behavior,

• interactive custom cursor state and hover/clickable-element reactions,

• typography reveal and staggered-motion effects,

• responsive behavior, including the desktop-focused unsupported-resolution notice,

• presentation of portfolio/project content.

Its styles are split between component-specific presentation and global theme/base rules:

• src/App.jsx

• src/App.css

• src/index.css

Styling and Visual-System Layer

The design system is CSS-led: global styles establish base appearance and Tailwind directives, while application styles implement the bespoke portfolio aesthetic and animation details.

• src/index.css

• src/App.css

• tailwind.config.js

PostCSS sits between source styles and generated browser CSS:

• postcss.config.js

• package.json

The visual model emphasizes custom implementation over an external component library.

Static Content and Asset Boundaries

Static browser-served assets are held under:

• public

• src/assets

Brand imagery is referenced by the README at public/jyellow.png; other production assets can be served directly from public or imported into the React bundle from src/assets.

The separate Assets/ hierarchy is the portfolio source/content repository for showcased UI/UX work, organized by project:

• Assets/UI-UX Projects/Gathr (2025)/context.md

• Assets/UI-UX Projects/ErehwonArtCenter (2025)/context.md

• Assets/UI-UX Projects/HanabishiPOS (2024)/context.md

These materials are distinct from the React runtime source and provide project narrative/design artifacts that the portfolio can surface or be maintained against.

Build and Delivery Flow

Development and production flow is:

1. Vite loads index.html.

2. src/main.jsx mounts React.

3. src/App.jsx renders the complete interactive portfolio.

4. CSS from src/index.css and src/App.css, processed through Tailwind/PostCSS, defines visual behavior.

5. Vite packages application code and imported assets for static deployment.

No backend, database, authentication layer, API client, or third-party hosted service is represented in the repository tree.

Supporting Asset Generation

Two Node CommonJS scripts support visual asset generation outside the browser application:

• generate_noise.cjs

• make_favicon.cjs

noise_css.txt appears to support the textured/noise visual treatment:

• noise_css.txt

• generate_noise.cjs

These are build-adjacent design utilities, not part of the React request/render path.