My Portfolio Website

📋 Description

A modern and responsive portfolio website showcasing my skills, projects, and professional experience. Built with React, TypeScript, and Tailwind CSS, it features a clean design with smooth animations and a user-friendly interface.

🔗 Live Demo

✨ Features

• Responsive Design: Optimized for all devices from mobile to desktop
• Modern UI: Clean and professional interface using shadcn/ui components
• Theme Switching: Toggle between light and dark modes for comfortable viewing
• Interactive Elements: Smooth animations and transitions
• Project Showcase: Detailed project cards with links to live demos and source code
• Skills Section: Visual representation of technical skills
• Contact Form: Easy way for visitors to get in touch
• Performance Optimized: Fast loading times and smooth scrolling
• Mobile-First Approach: Ensures perfect display on all screen sizes
• Accessible Navigation: Intuitive menu system for both desktop and mobile users

🛠️ Technologies Used

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/Ayokanmi-Adejola/portfolio.git

# Navigate to the project directory
cd portfolio

# Install dependencies
npm install
# or
yarn install

# Start the development server
npm run dev
# or
yarn dev

The application will be available at http://localhost:5173 (or another port if 5173 is in use).

📁 Project Structure

/
├── public/            # Static files
├── src/
│   ├── components/    # Reusable UI components
│   │   └── ui/        # shadcn/ui components
│   ├── hooks/         # Custom React hooks
│   ├── lib/           # Utility functions
│   ├── pages/         # Page components
│   ├── App.tsx        # Main application component
│   ├── App.css        # Global styles
│   ├── index.css      # Tailwind imports and theme variables
│   └── main.tsx       # Application entry point
├── index.html         # HTML template
├── tailwind.config.ts # Tailwind CSS configuration
├── tsconfig.json      # TypeScript configuration
└── package.json       # Project dependencies and scripts

🔧 Available Scripts

• npm run dev - Start the development server
• npm run build - Build the application for production
• npm run build:dev - Build the application for development
• npm run preview - Preview the production build locally
• npm run lint - Run ESLint to check for code issues

🎨 Theme System

The portfolio features a robust theme system with light and dark modes:

• Automatic Detection: Detects user's system preferences
• Manual Toggle: Allows users to override system preference
• Persistent Settings: Remembers user's theme preference
• Seamless Transitions: Smooth transitions between themes

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Contact & Social