portfolio_website - GitLite

KO | EN

gitlite — search

#javascript #react #typescript #llm #docker #macos #windows #awesome #cli #awesome-list #vue #pytorch #mcp #openai

portfolio_website

(★ 81)

💼 Portfolio | 🌐 Web & Mobile Projects | 💻 Clean Code | 🎨 UI/UX Design | 🚀 Fast & Interactive | 🌟 Modern Tech | 📫 Connect | 🔗 Live Demos | 🤝 Collaboration | ✨ Enjoy!

파일 탐색기

최종 버전 다운로드 (.zip)

- - main.yml
  - readmeq.yml
- FUNDING.yml
- .gitattributes
- 1458242025-12-16.png
- 20240814_132224.jpg
- 5.0_Professional__Gen_A.I._+_Power_BI_Certificate_6783f089_2 (1).pdf
- a77WE3de8qrxWferQ_j43dGscQHtJJ57N54_68fa7c9cd4e60dd4d4dd7974_1761249350600_completion_certificate(1).pdf
- Adobe Scan Dec 16, 2025 (3).pdf
- Adobe Scan Dec 16, 2025 (4).pdf
- Adobe Scan Dec 19, 2025 (1).pdf
- Adobe Scan Dec 19, 2025.pdf
- Agri.png
- cisco_2025-12-16 155548.png
- cv.pdf
- data_analytics_final_completetion_cert_04546(1).pdf
- DesignSystem.jpeg
- freecodecamp.org_certification_fccfe0925ac-797f-454c-8125-91fa70610602_responsive-web-design.jpg
- java_script_completion_cert(01).png
- JobPortal.png
- Kaaria_Denis_Hackathon_Certificate(1).pdf
- placeholder.svg
- Preview.jpg
- react.jpeg
- robots.txt
- RomanticLaugh.gif
- Screenshot 2025-12-16 155033.png
- Screenshot 2025-12-19 000720.png
- Screenshot 2025-12-19 134316new.png
- SDLC.jpeg
- Tourism.png
- tuk- 2025-12-16 160557.png
- uiux.jpeg
- - CertificateCard.tsx
  - ContactForm.tsx
  - CopyEmailButton.tsx
  - Footer.tsx
  - LoadingScreen.tsx
  - Navbar.tsx
  - ProjectCard.tsx
  - ScrollReveal.tsx
  - SectionHeading.tsx
  - SkillCard.tsx
  - SkillsCarousel.tsx
  - SkillsNetwork.tsx
  - StarRating.tsx
  - TestimonialCard.tsx
  - ThemeSwitcher.tsx
  - Timeline.tsx
  - WhatsAppButton.tsx
- - blogData.ts
  - projects.ts
- - use-mobile.tsx
  - use-toast.ts
  - useGithubProjects.ts
- - utils.ts
- - Blog.tsx
  - BlogPost.tsx
  - Index.tsx
  - NotFound.tsx
- - index.ts
- App.css
- App.tsx
- index.css
- main.tsx
- vite-env.d.ts
.gitattributes
.gitignore
bun.lock
components.json
eslint.config.js
index.html
M
package-lock.json
package.json
postcss.config.js
README.md
tailwind.config.ts
tsconfig.app.json
tsconfig.json
tsconfig.node.json
updates.txt
vercel.json
vite.config.ts

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🚀 Mwaki Denis — Developer Portfolio✨😁

Welcome to the official repository of my developer portfolio!  
A modern, sleek, and fully responsive personal website built using **Vite + React + TypeScript**, styled with **Tailwind CSS** and enhanced with **shadcn/ui** components.

This portfolio is more than just a webpage — it's a complete showcase of my journey, skills, projects, and professional story as a passionate software engineer.

---

## 🔥 Features

- 🎨 Beautiful UI/UX with **Dark/Light Mode Toggle**
<<<<<<< HEAD
- 📱 Fully responsive across all devices (320px - 2xl)
- 💬 Chat Section with several sections
- 🎬 Animated GIFs
- 📜 About Me & Career Journey Timeline
- 🧠 Technical Skills Overview with Progress Bars
- 🏆 Certifications Section (Improved grid layout)
- ✍️ Integrated Blog Highlights & Blog Section
- 💼 Project Portfolio with:
  - Live GitHub API integration
  - Rich Descriptions
  - Live Demo Links
  - GitHub Repository Links
  - Dynamic Tech Stack Tags with vibrant colors
=======
- 📱 Fully responsive across all devices
-  A Chat Section With Several sections😁😁😁😁😁😁😁😁
-  Gifs 
- 📜 About Me & Career Journey Timeline
- 🧠 Technical Skills Overview with Progress Bars
- 🏆 Certifications Section
- ✍️ Integrated Blog Highlights & Blog Section
- 💼 Project Portfolio with:
  - Rich Descriptions
  - Live Demo Link
  - GitHub Repository Link
  - Stack Tags
>>>>>>> 650c615b9e811d9733401503e6e894e73740400c
- 🎓 Education History Section
- 🧭 Career Timeline
- 💬 Testimonials Carousel
- ⭐ Interactive Rating/Feedback Section
- 📞 Contact Form with Validation
- 📍 Embedded Google Maps Location (optional)
- 📱 Floating WhatsApp Contact Icon
- 🧩 Modular, Reusable Components
- 🧪 SEO Meta Tags & Social Sharing Optimized
- 📂 Organized Codebase & Folder Structure
- 🌍 Social Media Integration
- 📎 Resume Download Link
- 📌 Sticky Navbar & Smooth Scrolling
- 🔗 External Link Previews (with rich cards)
- 🧠 Clean and maintainable TypeScript Codebase
<<<<<<< HEAD
=======
- Added Pricing Info
>>>>>>> 650c615b9e811d9733401503e6e894e73740400c

---

## 🛠️ Tech Stack

- [Vite](https://vitejs.dev/) — lightning-fast dev server & build tool  
- [React](https://reactjs.org/) + [TypeScript](https://www.typescriptlang.org/) — for robust component logic  
- [Tailwind CSS](https://tailwindcss.com/) — utility-first styling  
- [shadcn/ui](https://ui.shadcn.com/) — elegant and accessible UI components

---

## 📦 Prerequisites

Make sure you have **Node.js** and **npm** installed.  
We recommend installing them using **[nvm](https://github.com/nvm-sh/nvm)**:

```bash
# Install nvm (if not installed)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Install latest LTS version of Node.js
nvm install --lts

# Verify installations
node -v
npm -v
```

---

## 🚀 Getting Started

Follow these steps to run the project locally:

### Step 1: Clone the repository

```bash
git clone https://github.com/mwakidenis/portfolio_website.git
```

### Step 2: Navigate to the project folder

```bash
<<<<<<< HEAD
cd portfolio_website-main
=======
cd mwakidenis-portfolio
>>>>>>> 650c615b9e811d9733401503e6e894e73740400c
```

### Step 3: Install dependencies

```bash
npm install
```

<<<<<<< HEAD
### Step 4: Create environment variables

Create a `.env` file in the root directory:

```env
VITE_GITHUB_TOKEN=your_github_token_here
VITE_GITHUB_USERNAME=your_github_username
```

### Step 5: Run the development server
=======
### Step 4: Run the development server
>>>>>>> 650c615b9e811d9733401503e6e894e73740400c

```bash
npm run dev
```

The site will be available at [http://localhost:5173](http://localhost:5173)

---

<<<<<<< HEAD
## 🌐 Deployment to Vercel

### Option 1: Deploy via Vercel CLI

```bash
# Install Vercel CLI
npm i -g vercel

# Login to Vercel
vercel login

# Deploy
vercel
```

### Option 2: Deploy via GitHub

1. Push your code to a GitHub repository
2. Go to [Vercel Dashboard](https://vercel.com/dashboard)
3. Click "Add New..." → "Project"
4. Import your GitHub repository
5. Configure the project:
   - Framework Preset: `Vite`
   - Build Command: `npm run build`
   - Output Directory: `dist`
6. Add environment variables in Vercel:
   - `VITE_GITHUB_TOKEN` (optional, for higher API rate limits)
   - `VITE_GITHUB_USERNAME` (your GitHub username)
7. Click "Deploy"

### Environment Variables

| Variable | Description | Required |
|----------|-------------|----------|
| `VITE_GITHUB_TOKEN` | GitHub Personal Access Token for API rate limits | No |
| `VITE_GITHUB_USERNAME` | Your GitHub username (default: mwakidenis) | No |

To create a GitHub token:
1. Go to GitHub Settings → Developer settings → Personal access tokens
2. Generate new token (classic)
3. Select `public_repo` scope
4. Copy the token and add to Vercel environment variables

---

## 📁 Project Structure

```
src/
├── components/
│   ├── sections/          # Page sections
│   ├── ui/               # shadcn/ui components
│   ├── chat/             # Chat functionality
│   └── *.tsx             # Reusable components
├── data/                 # Static data (projects, certificates)
├── hooks/                # Custom React hooks
│   └── useGithubProjects.ts
├── lib/                  # Utility functions
├── pages/                # Page components
├── types/                # TypeScript type definitions
└── App.tsx               # Main application
```

---

## 🎨 Color System

- **Primary Theme**: Coal Black (#0B0B0F, #111114, #16161C)
- **Accent Colors**: Electric Blue, Neon Purple, Emerald, Amber, Crimson, Cyan, Pink, Lime
- **Dynamic Tags**: Tech stack badges auto-rotate through accent colors

---
=======
>>>>>>> 650c615b9e811d9733401503e6e894e73740400c

## 🌐 Live Demo

👉 [Visit My Live Portfolio](https://mwakidenis.pages.dev/)

---

## 📬 Contact

<<<<<<< HEAD
Have feedback or opportunities? Let's talk!  
=======
Have feedback or opportunities? Let’s talk!  
>>>>>>> 650c615b9e811d9733401503e6e894e73740400c
#### [📧 Email:](mwakidenice@gmail.com)

#### [💬 WhatsApp:](https://wa.me/254798750585)

#### [🌍 LinkedIn:](https://www.linkedin.com/in/denis-it-54199939a/)

#### [🐙 GitHub:](https://github.com/mwakidenis)

---

## 📝 License

This project is open source and available under the [MIT License](LICENSE).

---

### 💡 Inspiration

This portfolio was crafted to reflect my passion for software development, clean design, and user-focused experiences. Hope it inspires you too!

---

## Project Admin ⚡

<table align="center">
  <tr>
    <td align="center">
        <img src="https://res.cloudinary.com/dqv8dlj2s/image/upload/v1772276752/IMG_20251220_111730_cqlgfo.jpg" width="750" height="250" />
      </a>
      <h4>mwakidenis</h4>
    </td>
  </tr>
</table>

<div><h2><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Red%20Heart.png" width="35" height="35"> Contributors</h2></div>

I extend my heartfelt gratitude for any invaluable contribution to this project! Your efforts play a pivotal role in elevating the repo to greater heights.

---

<<<<<<< HEAD
Last updated: 2026-08-24 23:56 UTC
=======
Last updated: 2026-08-24 23:56 UTC
>>>>>>> 650c615b9e811d9733401503e6e894e73740400c