This project serves as my digital space to showcase who I am, what I do, and the projects I've either worked on or been a part of. This repository contains two portfolio websites:
-
Modern React Portfolio (Main Site)
- Main portfolio site
- Built with React + TypeScript
- Deployed at: https://bmmasi.com
-
Classic Portfolio (Classic Site)
- Alternative portfolio design
- Built with HTML/CSS/JS
- Accessible at: https://bmmasi.com/classic
- The React portfolio is deployed as the main site
- The classic portfolio is deployed to the /classic subdirectory
- Netlify configuration handles proper routing between sites
- React 18.x with TypeScript
- React Router DOM 6.x
- React Bootstrap
- SCSS for styling
- See package.json for complete list
- jQuery 3.x
- Bootstrap 4.3.1
- Particle.js
- Various jQuery plugins (see classic/js/ directory)
The site is deployed on Netlify with the following configuration:
- Main site (/) serves the React portfolio
- Classic site (/classic) serves the HTML/CSS portfolio
- Routing is handled via Netlify configuration
- Overview
- Features
- Tech Stack
- Project Structure
- How to Run Locally
- Deployment
- Credits
- Future Enhancements
This portfolio reflects my skills, experience, and passions. It includes:
- A hero section introducing myself.
- A sidebar showcasing my technical skills and course highlights.
- Detailed sections like About Me, Experience Timeline, and Projects.
- Clean and intuitive navigation to help visitors find what they are looking for.
Explore the live version here: Branley Mmasi
- Responsive Design: Optimized for all screen sizes (mobile, tablet, desktop).
- Sticky Sidebar: (TODO): Stays in view when scrolling, making navigation seamless.
- Accessible: Designed with accessibility in mind, including proper contrast, alt text, and semantic HTML.
- Hero Section: Full-screen intro with a friendly yet professional touch.
- Interactive Projects Section: Displays featured projects with links to GitHub and live demos.
- Modern Styling: Built with SCSS for clean and maintainable code.
- Frontend Framework: React (TypeScript)
- Build Tool: Vite
- Styling: SCSS (with theming support)
- Hosting: Netlify (with a custom domain)
- UI Library: React Bootstrap
- Icons & Assets: Icons8, Unsplash, Hero Patterns
src/
├── assets/ # Static assets
├── components/ # React components (AboutMe, Projects, etc.)
├── pages/ # Page-level components
├── contexts/ # React context providers
├── styles/ # SCSS entry + modules
│ ├── abstracts/ # variables, mixins, functions
│ ├── base/
│ ├── components/
│ ├── themes/
│ └── main.scss
├── utils/ # Helpers/utilities
├── App.tsx # App shell
├── main.tsx # Vite entry point
public/
└── classic/ # Classic portfolio (static site)
├── css/
├── js/
├── images/
├── fonts/
└── index.html
Want to see the code in action? Here's how to get the project up and running:
-
Clone the repository:
git clone https://github.com/branley1/portfolio-react.git cd portfolio-react -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser and navigate to http://localhost:5173.
This portfolio is hosted on Netlify using a custom domain. Here's the latest live version: Branley Mmasi.
- Design Inspiration: Modern portfolio designs and LinkedIn.
- Images: Sourced from Google Search and private photos (https://www.google.com/).
- Add a blog section to share my insights and experiences.
- Add a hobbies section for music, 3D dev, Game dev etc.
- Dynamic animations for a more interactive feel.
- An expanded project showcase with in-depth case studies.
MIT License