A modern, responsive portfolio website showcasing my cloud engineering journey, certifications, and projects. Built with vanilla HTML, CSS, and JavaScript, and deployed using GitHub Pages.
This is my first web development project, created as part of my transition into cloud engineering. The portfolio serves as a central hub to showcase my:
- Cloud certifications (AWS, Azure, Google Cloud)
- Technical projects and labs
- Professional experience and skills
- Contact information and professional links
The website is fully responsive and works seamlessly across desktop, tablet, and mobile devices.
- Responsive Design: Optimized for all screen sizes
- Smooth Animations: Fade-in effects and interactive elements
- Modern UI: Clean, professional design with gradient accents
- Fast Loading: Minimal dependencies, optimized performance
- Easy Navigation: Intuitive menu with smooth scrolling
- Contact Section: Multiple ways to connect (Email, LinkedIn, GitHub)
- Skills Showcase: Visual progress bars for technical skills
- Project Pipeline: Current and upcoming cloud projects
- HTML5: Semantic markup and structure
- CSS3: Custom styling, animations, flexbox, and responsive design
- JavaScript: Interactive functionality and DOM manipulation
- GitHub Pages: Free hosting and deployment
- Git: Version control
Note: Add your actual screenshots to the /screenshots folder
Want to run this project locally? Follow these steps:
- A modern web browser (Chrome, Firefox, Safari, Edge)
- Git installed on your computer
- A text editor (VS Code, Sublime Text, etc.)
-
Clone the repository
git clone https://github.com/Trapholo01/portfolio.git
-
Navigate to the project directory
cd portfolio -
Open in browser
- Double-click
index.html, or - Use a local server (recommended):
# If you have Python installed: python -m http.server 8000 # Then visit: http://localhost:8000
- Double-click
This project is deployed using GitHub Pages. Here's how I did it:
- Created a GitHub repository named
portfolio - Pushed all code to the
mainbranch - Enabled GitHub Pages in repository settings (Settings → Pages)
- Selected
mainbranch as the source - Site automatically deployed to:
https://trapholo01.github.io/portfolio/
- Fork this repository
- Update the content in
index.htmlwith your information - Customize colors and styling in
style.css - Go to Settings → Pages in your repo
- Enable GitHub Pages from
mainbranch - Your site will be live at:
https://[your-username].github.io/portfolio/
portfolio/
│
├── index.html # Main HTML file
├── style.css # All styling
├── script.js # JavaScript functionality
├── README.md # Project documentation
│
└── screenshots/ # Website screenshots
├── desktop-screenshot.png
└── mobile-screenshot.png
- Hero section with introduction
- Call-to-action buttons
- Professional background
- Career transition story
- Fun fact about my teaching background
- 5 cloud certifications displayed
- Badges for AWS, Google Cloud, Microsoft
- Technical skills with visual progress bars
- Cloud platforms, DevOps tools, programming languages
- Currently learning section
- Live portfolio project (this website!)
- Upcoming AWS infrastructure labs
- CI/CD pipeline demo
- DevOps automation scripts
- Email, LinkedIn, GitHub links
- Location information
- "Open to Work" status
Features I plan to add:
- Add Resume Download: PDF resume download button
- Blog Section: Share cloud engineering tutorials and lessons learned
- Dark/Light Mode Toggle: User preference for theme
- Project Details: Detailed case studies with architecture diagrams
- Contact Form: Functional contact form (AWS Lambda + API Gateway)
- AWS Hosting: Migrate to AWS S3 + CloudFront
- CI/CD Pipeline: Automated deployment with GitHub Actions
- Analytics: Track visitor engagement
- Performance: Further optimization and lazy loading
- Accessibility: WCAG 2.1 AA compliance
Building this project taught me:
- HTML semantic structure and accessibility best practices
- CSS flexbox, animations, and responsive design techniques
- JavaScript DOM manipulation and event handling
- Git version control and GitHub workflows
- Web deployment with GitHub Pages
- Mobile-first design approach
- Browser compatibility considerations
- Performance optimization basics
- Load Time: < 1 second
- Mobile-Friendly: 100% responsive
- Browser Support: All modern browsers (Chrome, Firefox, Safari, Edge)
- Accessibility: Semantic HTML, proper contrast ratios
While this is a personal portfolio, I'm open to suggestions! If you notice any bugs or have ideas for improvements:
- Open an issue describing the bug/feature
- Fork the repository
- Create a new branch (
git checkout -b feature/improvement) - Commit your changes (
git commit -m 'Add improvement') - Push to the branch (
git push origin feature/improvement) - Open a Pull Request
This project is open source and available under the MIT License.
Feel free to use this code for your own portfolio - just remember to update it with your own information!
Thato Rapholo
- 💼 LinkedIn: linkedin.com/in/thato-rapholo
- 🐙 GitHub: @Trapholo01
- 📧 Email: rapholothato3@gmail.com
- 🌐 Portfolio: trapholo01.github.io/portfolio
- Inspiration: Modern portfolio designs and cloud engineering community
- Learning: CAPACITI Cloud & DevOps Training Program
- Hosting: GitHub Pages (free and reliable!)
- Fonts: System fonts for optimal performance
If you found this helpful or inspiring, please consider giving it a star! It helps others discover the project and motivates me to keep building.
Built with ❤️ and ☕ by Thato Rapholo | Cloud Engineering Student | December 2025
This portfolio represents the beginning of my journey from education to cloud engineering. Follow along as I build more projects, earn certifications, and grow my skills in AWS, Azure, and DevOps.
Next Projects:
- ✅ Portfolio Website (You're here!)
- 🔄 AWS Infrastructure Labs (In Progress)
- 📅 CI/CD Pipeline Demo (Planned)
- 📅 Serverless Application (Planned)
- 📅 Containerized Microservices (Planned)
Stay tuned for updates! 🎉