Boipelo Ngakane - Full Stack & DevOps Portfolio

A modern, responsive portfolio showcasing my work as a Full Stack and DevOps Engineer. Built with React, Tailwind CSS, and Vite, featuring light/dark mode toggle, smooth animations, and a dynamic hero section.

---

Features

• Dark/Light mode toggle with localStorage persistence
• Smooth scrolling navigation
• Animated hero section with floating and orbiting 3D elements
• Skills & technologies showcase
• Projects portfolio with GitHub & demo links
• Contact section with email, GitHub, and LinkedIn links
• Responsive design for mobile, tablet, and desktop
• Built with React + Tailwind + Vite

---

Technologies Used

• Frontend: React, Tailwind CSS, Vanilla JavaScript
• Build Tool: Vite
• Icons: Lucide-react
• Animations: Tailwind CSS + custom keyframes
• Hosting: Vercel, Netlify, or GitHub Pages

---

File Structure

boipelo-portfolio/ ├─ public/ ├─ src/ │ ├─ components/ │ │ ├─ Navigation.jsx │ │ ├─ Hero.jsx │ │ ├─ About.jsx │ │ ├─ Projects.jsx │ │ ├─ Skills.jsx │ │ ├─ Contact.jsx │ │ └─ Footer.jsx │ ├─ App.jsx │ ├─ index.css │ └─ main.jsx ├─ package.json ├─ tailwind.config.js ├─ postcss.config.js ├─ vite.config.js └─ index.html

yaml Copy code

---

Dark/Light Mode Toggle

Implemented using React state and localStorage.

Toggles the dark class on the element.

Works on all pages and persists between sessions.

Credits

Icons by Lucide

Animations via Tailwind CSS + custom CSS

Design inspired by modern portfolio trends

Contact

Email: boipelongakane20@gmail.com

GitHub: boipelo-codes

LinkedIn: Boipelo Ngakane

Installation & Setup

1. Clone the repository:

git clone https://github.com/boipelo-codes/boipelo-portfolio.git
cd boipelo-portfolio
Install dependencies:

bash
Copy code
npm install
Run development server:

bash
Copy code
npm run dev
Build for production:

bash
Copy code
npm run build
Preview production build locally:

bash
Copy code
npm run preview