A fully hand-coded personal portfolio website built with no frameworks — just HTML, CSS and Vanilla JavaScript.
🌐 Live Site: https://botlhaleoa.github.io
This portfolio was built to showcase my academic projects, technical skills, and personal background as a Computer Science student. The design is intentional designed in purple, black and white with elegant typography and smooth animations because how you present your work says as much as the work itself.
It started as a way to move beyond a plain CV and give recruiters and collaborators something they could actually experience. Every section was written, styled and coded by hand.
- Sticky navigation with smooth scroll and hover underline animations
- Animated hero section with radial glow effects and a photo frame
- About Me with personal background, interests and contact details
- Education section highlighting academic achievements and honours
- Skills section organised by category — languages, networking, database, tools and more
- Projects section with detailed cards for all academic and personal projects
- Contact section with email, phone, GitHub and LinkedIn links
- Scroll-triggered fade animations using the Intersection Observer API
- Fully responsive — optimised for desktop, tablet and mobile
- No frameworks, no libraries — pure HTML, CSS and Vanilla JavaScript
| Technology | Usage |
|---|---|
| HTML5 | Semantic page structure |
| CSS3 | Custom properties, Flexbox, Grid, animations |
| Vanilla JavaScript | Scroll animations, nav behaviour |
| Google Fonts | Cormorant Garamond, DM Sans, Space Mono |
BotlhaleOa.github.io/
│
├── index.html # Complete single-file portfolio (photo embedded as base64)
└── README.md # This file
The photo is embedded directly as base64 inside index.html so the site works as a single self-contained file with no external dependencies.
| # | Section | Description |
|---|---|---|
| 01 | About | Personal background, interests, and contact details |
| 02 | Education | Eduvos (current) and Loreto Convent School |
| 03 | Skills | Programming languages, networking, database, tools |
| 04 | Projects | 7 projects — 2 personal, 5 academic |
| 05 | Contact | Email, phone, GitHub, LinkedIn |
- This Portfolio Website — HTML · CSS · Vanilla JS
- April Recess Productivity Planner — HTML · CSS · Vanilla JS
- Student Management System — C# · .NET · OOP · Regex
- Hospital & Greenhouse Management Systems — C# · .NET · 2D Arrays
- Library & Quiz Applications — C++ · Structs · Vectors
- Cultural Facility Database Design — MySQL · SQL · ERD · Normalisation
- Multi-Site Enterprise Network Design — Cisco Packet Tracer · VLANs · OSPF · VLSM
- 🏆 2024 Top Achiever — Eduvos
- 🔑 Golden Key Honour Society member
- 📊 77.5% cumulative average across first and second year modules
Botlhale Nthite Computer Science Student — Eduvos, Midrand
📧 botlhaleoageng@gmail.com 📱 082 613 0598 🔗 LinkedIn 🐙 GitHub
Made with intention. Built with code. 🌸