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
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
#4fffff
#c9a8ff
#1ae784
#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