Siphephisiwe Nyathi
Front-End Developer building websites that actually work.
New to Contra
Siphephisiwe is ready for their next project!
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
2
5
124
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
179
Hey Contra fam! 🤎
Hero section of a skincare website I just built ✨
Built with HTML, CSS & JavaScript
6
6
244
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
445
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
294
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
127
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
104
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
121
:Responsive business website built for T-Fix Media, a tech company offering printing, installation and repair services. Built with HTML, CSS and JavaScript.
1
132