Siphephisiwe Nyathi
Front-End Developer building websites that actually work.
New to Contra
Siphephisiwe is ready for their next project!
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
126
Hey Contra fam! 🤎
Hero section of a skincare website I just built ✨
Built with HTML, CSS & JavaScript
6
6
294
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
599
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
365
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
107
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
94
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
109
:Responsive business website built for T-Fix Media, a tech company offering printing, installation and repair services. Built with HTML, CSS and JavaScript.
1
125