🚀 Duma107's Portfolio

A modern, animated portfolio website showcasing my journey as a developer and virtual assistant. Built with React, TypeScript, and Tailwind CSS, featuring smooth animations and a responsive design.

✨ Features

• Responsive Design: Seamlessly adapts to all screen sizes
• Animated UI: Smooth transitions and micro-interactions
• Tech Stack Showcase: Highlighting development and VA skills
• Project Gallery: Featuring my latest work
• Contact Integration: Easy ways to get in touch
• Performance Optimized: Fast loading and smooth animations
• Dark Mode Ready: Prepared for dark mode implementation

🛠️ Tech Stack

• Frontend: React 18, TypeScript
• Styling: Tailwind CSS
• Build Tool: Vite
• Icons: Lucide React
• Animations: Custom CSS animations
• Code Quality: ESLint, TypeScript

🚀 Quick Start

1. Clone the repository

git clone https://github.com/yourusername/portfolio.git

2. Install dependencies

cd portfolio
npm install

3. Start development server

npm run dev

4. Build for production

npm run build

📁 Project Structure

portfolio/
├── src/
│   ├── components/
│   │   ├── Header.tsx      # Navigation and mobile menu
│   │   ├── Hero.tsx        # Landing section
│   │   ├── About.tsx       # About me section
│   │   ├── Projects.tsx    # Projects showcase
│   │   ├── Skills.tsx      # Skills and expertise
│   │   └── Contact.tsx     # Contact form
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css          # Global styles and animations
├── public/
└── package.json

🎨 Customization

Colors

The portfolio uses a vibrant tech-inspired color palette:

• Primary: Blue (#2563eb)
• Secondary: Purple (#7c3aed)
• Accent: Cyan (#06b6d4)
• Success: Emerald (#10b981)
• Warning: Amber (#f59e0b)

Animations

• Smooth page transitions
• Hamburger menu animations
• Gradient backgrounds
• Hover effects
• Scroll animations

🔧 Configuration

1. Personal Information: Update your details in the components
2. Projects: Modify src/components/Projects.tsx
3. Skills: Edit src/components/Skills.tsx
4. Contact: Update src/components/Contact.tsx
5. Styling: Customize in src/index.css and tailwind.config.js

📱 Responsive Design

• Mobile-first approach
• Animated mobile menu
• Optimized for all devices
• Smooth transitions

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📫 Contact

• Email: dumisaninxumalo5@gmail.com
• LinkedIn: D Nxumalo
• GitHub: @Duma107

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• Icons by Lucide Icons
• Images from Unsplash
• Inspired by modern tech portfolios