🎨 Portfolio Frontend

A visually striking, unapologetic single-page portfolio designed for disruptors, built with pristine engineering.

Overview

Welcome to the Neo-Brutalist frontend for the nre.codes portfolio. This application rejects boring, clean corporate aesthetics in favor of high-contrast colors, harsh borders, and massive typography.

Live Production Demo

• Website URL: https://nre.codes
• Backend API URL: https://api.nre.codes

Beneath its chaotic exterior lies a meticulously engineered architecture adhering to SOLID principles and Clean Code. It is entirely data-driven, seamlessly pulling live content from the dedicated NestJS backend while maintaining 100% type safety.

Features at a Glance

• Neo-Brutalist Aesthetic: Heavy borders, high-contrast drop shadows, vivid color palettes, and bold typography that refuses to blend in.
• Clean Code Architecture:
  • Single Responsibility Principle (SRP): API calls are decoupled into a dedicated services/api.ts layer.
  • Strict Type Safety: Centralized TypeScript definitions (types/index.ts) eliminate any types across the entire application.
• Interactive Codebase Explorer: Browses GitHub repository directories, trees, and reads files directly in the browser using a persistent tree sidebar and Shiki syntax highlighting.
• Mock List Blurs & Redirection: Blurs mock lists for Issues, Pull Requests, and Actions, using a retro brutalist overlay to redirect users to live GitHub tracking.
• CMS Admin Dashboard: Secured admin dashboard (/nre-masuk -> /dashboard) allowing live edits to projects, skills, and configuration. Features manual GitHub sync triggers.
• Token Deadlock Protection: Next.js middleware JWT expiration verification and API proxy 401 session eviction to gracefully prevent stale/deadlocked admin sessions.
• Dynamic Animations: Infinite scrolling marquees, intersection-observer based reveal animations, mouse-trail particle effects, and satisfying hover interactions.
• Server-Side Rendering (SSR): Built on the robust Next.js 15 App Router for blazing-fast load times and perfect SEO.
• Dynamic API Integration: All content (projects, experiences, skills) is fetched dynamically from the backend API.
• Robust Error Handling:
  • Centralized API error parsing.
  • Custom error.tsx Neo-Brutalist fallback boundary that catches connection failures gracefully without showing a generic browser error.

Detailed Feature Breakdown

📂 Interactive Codebase Explorer

• Virtual Directory Tree: Leverages Next.js server-side fetches and NestJS APIs to retrieve GitHub repository structures dynamically. Features lazy-loading folder nodes and persistent folder expanded states.
• Shiki Syntax Highlighting: Renders files in real-time in the browser using the Shiki highlighting engine. Supports theme-accurate color tokens (matching the Gruvbox styling) and handles large file rendering without UI freezes.
• Custom Code Header & Tabs: Hides default header links while viewing code layouts, showing only "Back to Portfolio" and "Open on GitHub" CTA buttons.

🔒 Secure CMS & Proxy Gateway

• Dynamic Form Rendering: The CMS Configuration Editor dynamically adapts its form field layouts based on structural types (text, textarea, nested fields, root_string_array, or object_array). This allows editing nested structures like Nav Links, Socials, or Manifesto Rules directly.
• API Proxy Layer: A custom Route Handler (/api/proxy/[...path]) acts as a secure reverse proxy, appending JWT tokens to incoming request headers and filtering empty request payloads (fixing issues with parameterless calls like DELETE).
• Session Deadlock Resolution:
  • Edge JWT Parsing: Middleware inspects the client's jwt_token cookie, base64-decodes the payload, and validates the exp (expiration) claim entirely at the Edge. If expired, it deletes the cookie and forces a redirect to /nre-masuk.
  • 401 Eviction: If the backend returns 401 Unauthorized (e.g. database force-reset invalidating the user ID), the API proxy intercepts the response and strips the stale jwt_token cookie to clear the session immediately.

🌀 Gamified & Disruptive Visuals

• Phaser 3 Game Sandbox Integration: Supports dynamic, canvas-based game modules (like Phaser 3 physics-based engines) overlaying React nodes.
• Brutalist Project Cards: Redesigned to support conditional rendering (completely collapsing image containers when no cover image is provided), inline custom red featured tags, and optimized typography sizing.
• Hover State Safelisting: Explicit Tailwind safelisting for dynamic theme color hover and border styling (hover:text-theme-*, hover:border-theme-*), preserving style customizability configured inside the CMS.

Tech Stack

| Category | Technology | | :--- | :--- | | Framework | Next.js 15 (App Router) | | Library | React 19 | | Language | TypeScript (Strict Mode) | | Styling | Tailwind CSS 3.4 | | Typography | Hanken Grotesk, Space Grotesk, JetBrains Mono | | Design Pattern | Neo-Brutalism |

Getting Started

Prerequisites

Ensure you have Node.js installed, and that the portofolio-backend NestJS API is currently running locally.

Installation

Clone the repository and install the dependencies:

git clone https://github.com/andreyyste/portofolio-neo-gruv.git
cd portofolio-neo-gruv
npm install

Environment Configuration

Create a .env file in the root directory (or use .env.example):

NEXT_PUBLIC_API_URL="http://localhost:3001"

Running the Client

Start up the Next.js development server:

# Development mode (Hot-reload)
npm run dev

# Production build
npm run build
npm run start

The portfolio will be accessible at http://localhost:3000

Architecture & Structure

src/
├── app/               # Next.js App Router (page.tsx, error.tsx, ClientEntry.tsx)
├── context/           # Global State (DataContext with strict typings)
├── hooks/             # Custom React hooks (useReveal, useMediaQuery)
├── layout/            # Layout wrappers (Navbar, Footer)
├── mobile/            # Tailored mobile UI components
├── sections/          # Desktop-specific UI sections
├── services/          # API Abstraction Layer (api.ts) - SRP applied!
├── types/             # Centralized TypeScript Interfaces (index.ts)
├── ui/                # Reusable Atoms (Button, Marquee, Title)
└── index.css          # Global Neo-Brutalist styling