Lorraine Marange

Project #1: Portfolio Website

First portfolio site built from scratch using HTML, CSS & GitHub Pages after PC 101 at BYU-Pathway. Zero prior coding experience.

Tech: HTML, CSS, GitHub Pages

Project #2: Hope African Food

Website concept for a Johannesburg restaurant. Mobile-first layout with local dishes, pricing, and cultural authenticity.

Tech: HTML5, CSS3, Google Fonts, CodePen

Project #3: WhatsApp Quote Form - Mavis Cares & Nurses

Mobile-first form captures client details → opens WhatsApp with pre-filled message. Solves after-hours lead loss.

Tech: HTML5, CSS3, Vanilla JavaScript, WhatsApp Click-to-Chat API

Project #4: WhatsApp Quote Form with Analytics

Upgraded v1 to track form_start and whatsapp_click events in Google Analytics 4 for conversion tracking.

Tech: HTML5, CSS3, Vanilla JavaScript, WhatsApp API, Google Analytics 4

Project #5: CSS Animations Showcase

A collection of pure CSS hover effects, loaders, and micro-interactions. No JavaScript needed.

Project #6: Portfolio UX Update - WhatsApp Integration

Added floating WhatsApp button with pre-filled message for instant client contact.

Tech: HTML, CSS, WhatsApp API

Project #7: Live SA Facts Ticker 🇿🇦

Auto-rotating ticker shows a new SA fact every 8 seconds. Built with setInterval(), DOM manipulation, CSS transitions.

Tech: HTML, CSS, JavaScript, setInterval()

Project #8: Live SA Time Clock 🇿🇦

Project #9: Dark Mode Toggle 🌙☀️

Portfolio-wide dark mode with localStorage. Remembers user preference.

Tech: HTML, CSS Variables, JavaScript, localStorage

Project #10: Mavis Cares and Nurses

Professional healthcare website with live booking system for home nursing services in Johannesburg.

Tech: HTML5, CSS3, GitHub Pages

Live Site | Live Demo

Project #11: Faith In God Intl Ministries

Responsive church website built for a local ministry with sermons, events, and donation integration.

Tech: HTML5, CSS3, GitHub Pages

Live Site GitHub

Project #12: Purpose Driven Church - Faith In God Intl

Responsive church website built from scratch with HTML, CSS & JavaScript. Features service times, sermon section, and contact form. Fully mobile-first design deployed on GitHub Pages.

Tech: HTML5, CSS3, JavaScript, GitHub Pages

Live Site | GitHub

Project #13: Mini Shop Cart v1

Responsive e-commerce cart with add/remove items, quantity updates, and live total calculation.

Tech: HTML5, CSS3, JavaScript, DOM Manipulation

Live Demo | Code

Project #14: Loadshedding Scheduler v2

The Problem: Loadshedding schedules are scattered. People in Johannesburg South suburbs waste time checking multiple sites during outages.

The Build: A live, mobile-first checker for Lenasia South, Lenasia North, and Eldorado Park. Search your suburb → get instant outage times. No login, no ads.

Tech: HTML5, CSS3, JavaScript, Responsive Design. Deployed on GitHub Pages.

Status: Mock project built to demonstrate API integration + mobile UX under real SA conditions.

Project #15: VA Client Tracker v1

The Problem: Virtual Assistants managing 5+ clients lose track of tasks, emails, and billable hours across messy spreadsheets.

The Solution: A single-page dashboard to add clients, log tasks, track email counts, and hours. Saves everything in localStorage and exports a .CSV for Excel/Google Sheets.

Tech Used: HTML5, CSS3, JavaScript, DOM Manipulation, localStorage, CSV Export

Project #16: Mavis Cares & Nurses Dashboard v1

The Problem: Caregivers needed a simple way to track patient vitals, tasks, and status updates in real time.

The Solution: A responsive dashboard with patient list, add/delete patients, and status tracking for nurses.

Tech Used: HTML5, CSS3, JavaScript, Vite, Tailwind, Deployed to Vercel