Jackson Mwakano's Developer Portfolio by Jackson MachariaJackson Mwakano's Developer Portfolio by Jackson Macharia

Jackson Mwakano's Developer Portfolio

Jackson Macharia

Completed work

DevOps Engineer

Frontend Engineer

UX Designer

Framer

Git

React

Internet of Things

🚀 Jackson Mwakano's Developer Portfolio

Welcome to my digital home — a modern, interactive, and fully responsive portfolio web app designed to showcase not only what I build but why and how I build it. I'm Jackson Mwakano, a self-driven Cloud Engineer and Frontend Developer, currently transitioning from web development to the world of cloud-native solutions.

This project brings together everything I’ve learned — React, Vite, TailwindCSS, GitHub Actions, CI/CD, and more — into one sleek, scalable platform.

🧭 Overview

This portfolio isn’t just a website — it’s a reflection of my journey, personality, and professional growth. Every section is intentional:

✨ Smooth scroll and animated page transitions with Framer Motion

📱 100% responsive and mobile-first design

📚 Technical blogs with diagrams, code blocks, and real insights

🛠️ Detailed projects with GitHub and live demo links

📬 A clean contact section for networking and collaboration

Whether you're a recruiter, fellow dev, or potential client, this space is designed to engage, inform, and inspire.

🎯 Key Features

👋 Hero Section

Dynamic typing effect for introduction

Blurry blob animation background

Social icons with hover effects

Clear call-to-action buttons

👨‍💻 About Me

A short but meaningful story about who I am

My interests, journey, and what motivates me

Downloadable resume (PDF)

🎓 Education & Experience

Timeline cards styled with subtle animation

Current academic journey (UoPeople – Computer Science)

Certificates from platforms like AWS, Google, and more

⚙️ Skills & Tech Stack

Categorized badges (Frontend, Cloud, Tools)

Icons with animation

Counter stats: Projects completed, cups of coffee ☕, and years of experience

💼 Projects

Responsive grid layout with image overlays

Hover effects to reveal tech stacks

GitHub and Live Demo buttons

Each project tells a story — not just what it is, but why it matters

✍️ Blog

Long-form articles that share my learning, struggles, and breakthroughs

Covers Cloud, DevOps, CI/CD, Serverless, and career advice

Includes diagrams, code blocks, and references

💬 Contact Section

Custom form with animation and validation

Social links and email

Built to encourage connection and collaboration

🛠️ Tech Stack

Area Tech Used Frontend React 19, Vite, TailwindCSS 3 Animations Framer Motion Icons React Icons Routing React Router v7 Blog Content HTML + Markdown + JSX Deployment Vercel (with CI/CD via GitHub Actions) Images Unsplash API Versioning Git + GitHub

📁 Project Structure

my_portfolio/
├── public/
│   └── images/           # Profile, project, and blog visuals
├── src/
│   ├── components/
│   │   ├── about/
│   │   ├── blog/
│   │   ├── contact/
│   │   ├── hero/
│   │   ├── layout/
│   │   ├── my_skills/
│   │   ├── projects/
│   │   ├── services/
│   │   ├── tech_stack/
│   ├── pages/
│   │   └── Home.jsx
│   ├── App.jsx
│   └── main.jsx
├── tailwind.config.js
├── package.json
└── README.md

🚀 Getting Started

Clone this repo and run the project locally:

git clone https://github.com/Mash24/portfolio-with-React.git
cd my_portfolio
npm install
npm run dev

Visit http://localhost:5173 in your browser to preview.

🌍 Deployment Options

Platform Setup Vercel Connect GitHub → Auto builds on main branch push Netlify Drag and drop dist/, or connect Git repo Static Host Run npm run build and deploy /dist

🧩 Customization Guide

This portfolio is 100% customizable:

🧑‍🎨 Change content in /src/components/** folders

🖼️ Replace images in public/images/

🎨 Edit colors/fonts in tailwind.config.js

✍️ Add blogs in blogPosts array with Markdown/HTML

🔗 Update social and nav links in Navbar.jsx

If you want to fork this project and make it yours, you’re welcome! Just don’t forget to add your personal touch.

🧠 Inspirations & Resources

This project is made possible thanks to:

Unsplash – Beautiful, free images

📬 Contact Me

Want to work together? Have feedback or just want to say hi?

✉️ Email: jackmwakano@gmail.com

🐱 GitHub: Mash24

💼 LinkedIn: Jackson Macharia

🔒 License

This project is open for learning and inspiration. You’re welcome to fork it and make it your own.

Like this project