NokoSocial
A social media feed interface built in vanilla HTML, CSS and JavaScript, with a working theme customiser. A practice build focused on complex multi-column layout.
Tech Stack
The Challenge
A social feed is one of the harder pure-CSS layouts: three independently scrolling columns, a sticky sidebar, a stories carousel and a notification overlay, all of which have to reflow sensibly on mobile.
The Solution
No framework. Plain HTML, CSS and JavaScript, following an Egator tutorial. Built before I moved to React, and useful for exactly that reason: the layout work had to happen in CSS instead of being handed to a component library.
The theme customiser actually works, and it was the most interesting part: CSS custom properties driven by JavaScript, with light, dim and dark modes and adjustable accent colours. It's the same technique behind this portfolio's theming today.
The feed content is static placeholder data. No backend, no accounts, no posting.
Key Features
- ▸Three-column layout with independent scroll regions
- ▸Working theme customiser for font size, accent colour and three background modes
- ▸Stories carousel
- ▸Notification and message dropdowns
- ▸Friend request cards with accept and decline actions
Want something like this?
Let's build your next product together.
Let's Talk