← Back to Projects

NUMENEON

A neopunk social network built for people, not algorithms
Dark Mode — Cyberpunk Neon Theme

See also: Numeneon Light Mode — platinum brushed aluminum theme

About the Project

Numeneon is a "neopunk" social media platform built on the belief that feeds should serve people, not harvest attention. At its core is the River Timeline—a three-column chronological feed (Thoughts, Media, Milestones) where each friend gets their own row, capping at 12 posts per category so you can actually finish catching up instead of doom-scrolling forever.

Digital Congestion vs. Traffic Management

Modern social feeds suffer from "Information Congestion"—everything fights for the same narrow vertical space. The River Timeline treats UI as a traffic management system: Horizontal Currents create parallel flows for Thoughts, Media, and Milestones. The "Sluice Gate" limits each row to 12 items, curating the flood before it becomes overwhelming. The result is a "3-lane highway" of visibility instead of a single-lane jam.

The Architecture: "The Chain"

The frontend transforms raw data into the River flow in 4 explicit steps: GROUP → SORT → SPLIT → RENDER Posts are grouped by user, sorted by most recent activity, split at the 12-item limit, then rendered as organized rows.

The bigger vision is the Smart Feed Algorithm—a "boost" system that surfaces underseen posts so every voice gets heard, blending 30% boosted (underexposed creators), 20% hot (high engagement), and 50% chronological. It's anti-viral by design: the more something goes viral, the more it gets throttled, because outrage shouldn't win.

Add real-time messaging via WebSockets, and below the neon-lit main floor, a hidden MyStudio (a MySpace Basement tribute) with Top 8 friends, custom themes, and embedded music players. Built for people who think the internet should work for you, not extract from you.

The platform also includes a Daily Learning page featuring methods, loops, Big O notation, mythology culture curated weekly, plus a word of the day and tech term of the day—because I wanted to build something I would actually use.

Tech Stack

React 18 Vite React Router Django Django REST Simple JWT PostgreSQL WebSockets SCSS Vercel Render

My Role

UI Architect & Fullstack Architect on a 4-person team. I built the scaffolding and planning for the app, the Timeline River UI, Profile Card flip system, Activity Visualization (Wave Chart + Heatmap), Messaging Modal, mobile responsiveness, and the entire SCSS design system.

Project Type

Collaborative Bootcamp Project

Key Features

River Timeline

Three-column feed with epoch-based grouping and carousel navigation. One user, one row—no infinite scroll chaos.

Profile Flip Card

Dual-sided card showing profile info on front, analytics dashboard with wave chart and heatmap on back.

Real-time Messaging

WebSocket-powered DMs with conversation list and instant notifications.

Theme Toggle

Dark mode (cyberpunk neon) and light mode (platinum brushed aluminum) with persistent preferences.

Mobile Responsive

Tab-based navigation and optimized layouts for mobile viewing.

Global Search

Search modal for finding users and posts across the platform.

MyStudio

Nostalgic throwback profile with music player, Top 8 Friends grid, theme picker, and personal mood display.

Daily Learning

Bilingual study tool (EN/ES): Big O, loops, methods, tech jargon, 948 SAT/GRE + Pulitzer vocabulary, mythology. Mark as known, daily rotation, deep linking.

WebSockets

Real-time notifications for friend requests, messages, and updates—no polling required.

Post Composer

Create posts with category selection: Thoughts, Media, or Milestones—each flows to its own column.

Bilingual Support

English/Spanish toggle for Daily Learning with embedded translations using the _es field pattern.

Media Lightbox

Full-screen image and video viewer with smooth transitions and keyboard navigation.

Post Detail Modal

Expanded view of any post with full content, replies, and engagement options.

User Navigation

Click any avatar or username anywhere in the app to view that user's full profile.

Card User Headers

Every post card shows who posted it with avatar and username visible inside the card.

Collapsible Categories

Collapse any category you don't want to see. Preference saves to localStorage; auto-expands when new posts arrive.

The River Timeline

┌─────────────────────────────────────────────────────────┐
│                    RIVER TIMELINE                        │
├───────────────┬───────────────┬─────────────────────────┤
│ 💭 THOUGHTS   │ 🖼️ MEDIA      │ 🏆 MILESTONES           │
│ Text posts    │ Photos/videos │ Achievements            │
├───────────────┼───────────────┼─────────────────────────┤
│ User A Ep2    │ User A Ep2    │ User A Ep2              │
│ [◀ 2/12 ▶]    │ [◀ 1/12 ▶]    │                         │
├───────────────┼───────────────┼─────────────────────────┤
│ User B        │ User B        │ User B                  │
│ [◀ 5/12 ▶]    │ [◀ 3/12 ▶]    │ [◀ 1/12 ▶]              │
├───────────────┼───────────────┼─────────────────────────┤
│ User A Ep1    │ User A Ep1    │ User A Ep1              │
│ [12/12 full]  │ [◀ 3/12 ▶]    │                         │
└───────────────┴───────────────┴─────────────────────────┘
        

Posts grouped by user, capped at 12 per category. Smart Overflow creates separate rows when exceeded—so you can actually finish your feed.

Design System

Colors

Cyan #4fffff
Purple #c9a8ff
Green #1ae784
Magenta #e94ec8

Effects

  • Glassmorphic surfaces with backdrop blur
  • Neon glow shadows
  • Chamfered corners (clip-path)
  • Scan line overlays

Team

Colin Weir

Team Lead & Posts System

Posts backend/frontend, data flow architecture, PostsContext, code review

Crystal Ruiz

Friends System

Friends backend/frontend, FriendsContext, friend request UI, social features

Natalia Pricop

Auth & Backend

Authentication system, user registration/login, Django migrations, backend APIs

Tito

Infrastructure

API client setup, theme system, app entry points, utilities

Pablo Cordero

UI Architect & Visual Design

Timeline River UI, Profile Card flip, Wave Chart + Heatmap, Messaging Modal, Mobile responsiveness, SCSS design system

Check it out