I'm Johan Swart
Junior Frontend Developer crafting clean, interactive web experiences
HTML, CSS, JavaScript, React
About:
❏ Know More About Me ⁝
I’m a frontend developer focused on building clean, responsive, and accessible web interfaces. I specialize in turning design concepts into performant, user-friendly experiences using HTML, CSS, JavaScript, and React.
I’ve built and deployed multiple projects independently, handling everything from layout and animations to responsive behavior and deployment. I care deeply about clarity in code, thoughtful UI decisions, and creating products that feel intuitive to use.
I’m currently seeking a frontend developer role where I can contribute to real products, collaborate with a team, and continue growing while delivering reliable, well-crafted UI solutions.
Open to junior frontend or frontend-focused roles, remote or hybrid, where clean UI, collaboration, and long-term product quality matter.
✦✧❏ Skills & Expertise ⁝
✧ Frontend Core
- HTML5 & Accessibility
- CSS Layout Systems
- JavaScript (ES6+)
- TypeScript
- React (Components & Hooks)
✦ UI / UX & Interaction
- UI/UX Principles
- Animations & Microinteractions
- Design Systems & Theming
✧ Components & UI Systems
- Reusable UI Components
- Interactive Widgets
- Component Architecture
✦ Data & Workflow
- API Integration
- Git & Version Control
- Deployment & Hosting
✦ Testing & Code Quality
- Vitest & Jest
- Scalable Architecture
- Code Quality & Best Practices
📘 About This Portfolio
This portfolio represents a collection of projects I have architected, developed, tested, and deployed independently. Each project emphasizes clean structure, scalable component design, and thoughtful UI decisions.
My approach combines strong frontend fundamentals with modern tooling — including TypeScript for type safety and Vitest/Jest for reliable testing — ensuring code that is both maintainable and production-ready.
- ✔️ Accessibility-first HTML structure
- ✔️ Responsive layouts using Flexbox & Grid
- ✔️ Component-based architecture (React & TypeScript)
- ✔️ Basic Unit & component testing practices
- ✔️ Deployed, real-world usable applications
I am actively seeking a frontend role where I can contribute to meaningful products, collaborate within a strong engineering culture, and continue refining scalable frontend architecture and testing practices.
✨ Featured Project
Installable Letter Application (PWA)
A fully completed, installable Progressive Web App designed as a calm, distraction-free letter reading experience. Built with offline support, responsive layout, and production-ready polish.
Originally created as a personal letter experience — demonstrating emotional design, real-world usage, and thoughtful UI decisions.
Small React & Testing Projects: TypeScript & React (Vite)
Task Management App React · TypeScript
Featured
Demonstrates structured feature planning, scope control, performance awareness, and clean component architecture in a frontend application.
Tech: React · TypeScript · Vitest · Testing Library · Vite
Tested React · TypeScript · Vite Calculator
A production-ready calculator featuring automated interaction testing, strict type safety, and edge-case validation.
Tech: React · TypeScript · Vitest · Testing Library · Vite
React Weather Application
◦ A responsive React application that fetches and displays real-time weather data, demonstrates API integration, component-based architecture and dynamic state updates
Note: Hosted on Render free tier — initial load may take a few seconds due to cold start
Here Are Some Other Projects: Landing & Login Pages
Personal Landing Page Demo
Featured
◦ A modern personal landing page built with semantic HTML and CSS, focusing on clean layout structure, visual hierarchy, and responsive design principles
Featuristic Login
Featured
◦ A polished login interface demonstrating client-side validation, animated UI feedback, and realistic authentication flows, with strong attention to usability and visual clarity
Elegant Landing Page Demo
◦ A soft-toned landing page showcasing semantic markup, thoughtful spacing, and subtle interactive elements designed to enhance user engagement
E - Commerce Demo
◦ E-commerce landing page demonstrating layout systems, product sections, and structured UI components
Secure Login Demo
◦ A modern login interface featuring animated form inputs, responsive layout behavior, and a user-focused visual experience
OTP Generator
◦ A lightweight one-time password generator focused on secure randomization, clean UI presentation, and practical JavaScript logic - a full modern React/Vite build running on Vercel
Other projects: Widgets / Games
My Weather Widget
◦ A fully functional weather widget demonstrating API integration, dynamic DOM updates, and performance-focused JavaScript in a compact, reusable component
Live Radio Streaming
◦ A reusable quote widget designed to demonstrate component positioning, smooth UI interactions, and modular JavaScript logic
◦ A floating widget demo
◦ Designed to demonstrate component positioning, smooth UI behavior, and reusable JavaScript logic
Quote Widget
< Click Me />
◦ An interactive quote widget featuring dynamic content updates, animated UI elements, and a modern, futuristic design aesthetic
Fantasy Tic-Tac-Toe Widget
< Fantasy Tic-Tac-Toe /> Featured◦ An embeddable Tic-Tac-Toe game widget demonstrating game logic, state management, and modular JavaScript architecture
Basic JavaScript Calculator
◦ A modern React calculator built with Vite, supporting keyboard input, memory functions, and responsive design. Created as part of a React learning journey and optimized for fast builds and deployment.
JS Calculator (Custom Build)
◦ React calculator built with Vite, component-based architecture, keyboard support, and deployed on Vercel
React - 25 + 5 Clock
◦ A productivity timer built with React, demonstrating state management, component logic, and user interaction handling.a full modern React/Vite build running on Vercel
Drum Machine
◦ An interactive drum machine where keyboard input triggers audio playback, demonstrating event handling and sound integration in JavaScript
Random Quote Machine
◦ A dynamic quote generator focusing on API usage, state updates, and clean UI presentation
Markdown Previewer
◦ A live Markdown previewer that converts user input into formatted output in real time, highlighting text parsing and reactive UI updates - React (CRA) build