# [Creating My Own Social Feed](https://nickstambaugh.dev/posts/creating-my-own-social-feed/)
Most modern websites have some kind of feed. Whether it is a social media timeline, a news aggregator, or a dashboard full of information. I wanted something similar for my own website but without the endless shittiness designed to maximize engagement.
Cartoon Credit Mr. Ollie
Cartoon Credit Mr. Ollie
I wanted something simple:
A small window into what I am currently working on, reading, listening to, and learning.
Check it out the home page
## The Idea
The “Nick’s Feed” carousel on my homepage is a lightweight personal dashboard. It combines different parts of my website with external APIs to create a constantly changing feed.
I hate manually updating things, so JavaScript handles the dynamic content.
Currently, the feed includes:
- - The latest photo of Bruce
- - My latest music project
- - Latest recipe
- - A random quote
- - My latest library entry
- - My newest blog post
- - A random Wikipedia article
- - Latest media entry
- - My most starred GitHub repository
- - Current weather
The goal was to make something that feels alive without becoming distracting.
## Building the Carousel
Each item is a flex container. The carousel is controlled and hand-written with vanilla JavaScript.
The browser already provides everything needed:
- - DOM manipulation
- - CSS transitions
- - Event listeners
- - API requests
The current slide is updated by changing the translate position:
slidesWrap.style.transform =
`translateX(-${current * 100}%)`;Each slide moves left by its own width. This creates the same effect used in modern UI.
## Automatic Rotation
The feed automatically rotates every few seconds:
const AUTOPLAY_MS = 4750; intervalId = setInterval(next, AUTOPLAY_MS);
I also added a few quality-of-life improvements:
- - Pause when hovering over the feed
- - Previous and next buttons
- - Navigation dots
- - Infinite looping
Small interactions like these make it feel polished.
## Adding Live Data
The most interesting part of this project was connecting external APIs.
## Weather
The weather section uses Open-Meteo to retrieve current conditions.
The website requests temperature and weather codes, then converts those codes into simple icons:
{ 0: "☀️", 3: "☁️", 61: "🌧️", 95: "⛈️" }
This simple API request turns a static website component into a real time data point.
## Random Quotes
The quote slide pulls a random quote from an API:
const res = await fetch( "https://dummyjson.com/quotes/random" );
The response is then inserted directly into the page. It makes every visit feel slightly different.
## Wikipedia
One of my favorite additions is the random Wikipedia article.
Every page load requests a random article summary:
fetch( "https://en.wikipedia.org/api/rest_v1/page/random/summary" );
The title, description, and link are then displayed inside the carousel.
It is basically a tiny “learn something random” button built directly into my homepage.
## Why Not Use a Framework?
For a project like this, adding a framework would probably create more complexity than value.
The browser already knows how to:
- - Fetch APIs
- - Manipulate the DOM
- - Handle animations
- - Update content
The simplest solution is the best one.
## The Bigger Idea
A personal website gives you complete control over what you share and how people experience it. I don’t want an algorithm deciding what someone sees, I can create my own small collection of things I care about.
That is the best part of building web apps.
Creating My Own Social Feed
https://nickstambaugh.dev/posts/creating-my-own-social-feed/ via Home