Charmingdc Portfolio 🚀

Overview

A high-performance, accessible, and visually striking personal portfolio built with React 19, TypeScript, and Vite. This project serves as a professional showcase of frontend engineering expertise, featuring fluid animations via Motion, a grain-textured aesthetic, and a modular architecture designed for maintainability.

It focuses on delivering a seamless user experience with optimized SEO, responsive layouts, and integrated GitHub contribution tracking to provide recruiters with a clear view of technical proficiency and activity.

Features

• Modern Tech Stack: Leverages the latest React 19 features and TypeScript for robust type safety.
• Fluid Animations: Custom-built motion presets using framer-motion for consistent and accessible transitions.
• Dynamic Project Routing: Detailed overview pages for every project with deep-linking capabilities.
• Grainy Aesthetic: Custom CSS-based grain overlay for a unique, modern UI feel.
• GitHub Integration: Real-time contribution graph visualization using react-github-calendar.
• SEO Optimized: Includes pre-configured sitemap.xml, robots.txt, and metadata for search engine visibility.
• Performance Focused: Component lazy loading and optimized asset delivery via Vite.

Getting Started

Installation

Follow these steps to set up the project locally:

1. Clone the Repository:

   git clone git@github.com:Charmingdc/portfolio-v2

2. Navigate to the Project Directory:

   cd portfolio-v2

3. Install Dependencies:

   npm install

4. Start the Development Server:

   npm run dev

Deployment

The project is configured for seamless deployment on Vercel using the included vercel.json for SPA routing support.

Usage

The portfolio is designed to be easily updated:

• Adding Projects: Modify the src/hooks/useProjects.tsx file. The project utilizes a custom hook to manage the portfolio data, ensuring that adding or removing items updates both the main landing page and the dedicated projects list.
• Customizing Skills: Update src/hooks/useTools.tsx to reflect your current tech stack.
• Theming: Colors and spacing are managed via tailwind.config.js and CSS variables in src/index.css for easy global adjustments.

Technologies Used

Category	Technology	Purpose
Framework	React 19	UI Library
Language	TypeScript	Type Safety
Build Tool	Vite	Fast Development & Bundling
Styling	Tailwind CSS	Utility-first Styling
Animations	Motion	Smooth UI Transitions
Routing	React Router 7	Client-side Navigation
Icons	Lucide React	Minimalist Icon Set

Author Info

Adebayo Muis
Frontend Software Engineer specialized in building clear, accessible, and production-ready web interfaces.

• X (Twitter): @Charmingdc01
• LinkedIn: adebayomuis
• Email: charmingdc002@gmail.com

---