Siphephisiwe Nyathi
Front-End Developer building websites that actually work.
New to Contra
Siphephisiwe is ready for their next project!
hi!, So for the Wonder challenge I built a glass terrarium that mirrors the actual weather outside — moss when it's cloudy, water ripples when it rains, embers when it's clear, frost when it's cold. It's grown out of a piece of driftwood, hand-blown look and all, and it's presented like a page out of a naturalist's field journal rather than another app with buttons.
The whole thing started in Wonder Chat, just describing the scene until it looked right. The shader work is honestly what sold me on Wonder — I could try a moss texture, decide it looked flat, and push for depth and color variation in one more prompt instead of starting over. Same for the water, the embers, the frost.
The idea almost stayed as "four pretty pictures you click through," which felt pointless once I said it out loud. It became a real thing once I hooked it up to live weather — now it's not decoration, it's actually checking the sky. I connected Wonder to my codebase through MCP (via Cursor) so it could pull my exported jar images straight into the working app, which saved me from manually downloading and re-uploading four separate files at 4am :0
It's small, but it's the first thing I've built in a while that I'd genuinely want to keep open on my desktop.
Loom link: https://www.loom.com/share/f2384ff523ba460d8cd7a1542bb06a65
Project link: https://app.wonder.so/siphephisiwe-nyathi/files/019f391f-a5bf-71f3-b5d2-69f65680a014
Explore on your mobile phone or laptop:-) https://terrarium-weather-app.vercel.app
1
1
60
My mama used to make up bedtime stories
just for us. Not every child gets that.
So I built something that changes that.
Mama Told Me - you type your child's name,
their hometown, a family you love and a
value to teach them. We write the rest.
Built with @figma Make + Claude MCP
in one night for #ConfigMakeathon 🌙
Try it here 👇
https://draft-glory-60755054.figma.site
loom link: https://www.loom.com/share/d28f7730166d4ca59b828860706f25a9
5
6
259
Most portfolios are static. I wanted mine to be alive. 💻⚡️
I built Pepsie.OS, a fully functional, browser-based operating system designed to be my personal mission control. It’s not just a landing page; it’s a high-security environment where my real-time data from GitHub, Linear, and Spotify converge.
From password-protected vaults for my site templates to a secure Stripe-integrated checkout, Pepsie.OS bridge the gap between aesthetic design and hardcore technical utility. Welcome to my workbench.
1. The Vision: Why Pepsie.OS?
As a developer, I find myself jumping between dozens of tabs. I wanted to create a "Single Pane of Glass"—a workbench that feels like a secure OS but runs entirely in the browser. I focused on a "Low-Light, High-Performance" aesthetic to keep the focus where it belongs: the code.
2. Real-Time Data Integration
The sidebar isn't just for show. I used dynamic JSON fetching to pipe in:
GitHub: My latest commits so clients can see I’m active.
Linear: My current sprint tasks to show project progress.
Spotify: A live "Now Playing" widget with pulsing animations to show the vibe behind the build.
3. The "Vault" & Secure Commerce
I don’t just show my work; I sell it.
The Restricted Area: A password-protected directory for "Classified" project files.
Secure Checkout: I integrated a Stripe-ready modal system for my Tax-Consulting Site Templates, allowing users to go from "Preview" to "Purchase" without leaving the OS environment.
4. Core Features at a Glance:
Draggable Window Engine: A custom-built UI that allows for a multi-tasking workspace.
Live Terminal: A built-in CLI for navigating the system directory.
Portfolio iframe: Seamlessly preview my past work within a "window" of the new OS.
Building this required more than just CSS—it required thinking about how a developer actually works. It’s about security, speed, and a touch of personality. Whether you're checking my availability or buying a template, you're experiencing my workflow firsthand.
loom link: https://www.loom.com/share/423fe8bf793b44858fc196c823d922c5
site link:
1
2
159
Hey Contra fam! 🤎
Hero section of a skincare website I just built ✨
Built with HTML, CSS & JavaScript
6
6
269
For the Mobbin challenge I built SkillFund because I AM the target user — a student funding my own education with my skills.
Using Mobbin I studied how the best fintech apps like Revolut present financial data, and how top marketplaces structure their browse experience. Then I built something original.
SkillFund is a platform where students monetize their skills to fund their tuition. The Tuition Goal Tracker is the emotional core — every gig brings you one step closer to your degree.
Built with React + Tailwind CSS. Dark and light mode.
loom links: https://www.loom.com/share/d32a1eb89f31498590bc0a7ddbda7184
https://www.loom.com/share/1fb2e62f0d464be09542058857a7a648
Project link: https://skillfund.netlify.app/
3
7
466
Built my first ever AI video in Kittl and accidentally made something I'm really proud of. 🎬
5 scenes. One story. A whole lot of cinematic energy.
Was I excited? Yes. Proud? Absolutely. Nervous? More than I'd like to admit. Surprised myself? Completely.
This is me pitching my web design service — the only way I know how. All out. No holding back. 🔥
Tools used:
@Kittl — AI Video (Veo 3.1), AI Image generation, motion design
CapCut — final edit, music & sound effects
Project link: https://app.kittl.com/project/cmmmvsz1g65pw0i7hsfkgi98q
#kittlchallenge #kittl #webdesign #brandvideo #cinematicvideo #aidesign #reels #webdesigner #smallbusiness #digitalmarketing #AIvideo #contrachallenge
1
5
315
My personal portfolio: a showcase of my work as a Frontend Developer. Built from scratch with HTML, CSS and JavaScript. Features my projects, services, tech stack and a contact form. Check it out and let's build something together.
0
150
A personal web app I built to solve a real problem, keeping track of job applications, statuses and deadlines in one organized place. Features a clean form, saved applications table and a built-in chatbot assistant. Built with HTML, CSS and JavaScript.
0
121
Responsive business website built for a tax and financial services firm. Features a hero section, services, FAQ and contact form. Built with HTML, CSS and JavaScript.
2
2
138
:Responsive business website built for T-Fix Media, a tech company offering printing, installation and repair services. Built with HTML, CSS and JavaScript.
1
147