My personal portfolio website built with React and TypeScript, showcasing my journey in web development. This project represents my first experience working with Tailwind CSS, focusing on creating clean, maintainable designs while learning modern frontend tools.
View Live on Netlify:
G.P Dev Portfolio
- Responsive Design - Optimized for all devices with mobile-first approach
- Modern Stack - Built with React, TypeScript, and Tailwind CSS
- Smooth Animations - Enhanced user experience with motion animations
- Project Showcase - Clean presentation of my development work
- Professional Layout - Clear sections for skills, about, and projects
| Technology | Purpose |
|---|---|
| ⚛️ React | Component-based UI library |
| 🟦 TypeScript | Type safety and better development experience |
| 🎨 Tailwind CSS | Utility-first CSS framework (learning project) |
| ⚡ Vite | Fast build tool and development server |
| 🏃 Motion | Smooth animations and transitions |
| 📦 React Icons | Beautiful icons for UI elements |
This portfolio represents my ongoing journey in web development, with a focus on:
- Learning utility-first CSS methodology
- Implementing responsive design with breakpoints
- Creating consistent spacing and color systems
- Mastering component-based styling approach
- Building reusable, typed components
- Managing component state and props
- Implementing smooth navigation and user interactions
- Structuring projects for maintainability
- Version control with Git and meaningful commit messages
- Component composition and reusability
- Performance optimization considerations
- Clean code and documentation habits
src/
├── components/ # Reusable UI components
│ ├── Navbar.tsx
│ ├── Hero.tsx
│ ├── Skills.tsx
│ ├── About.tsx
│ ├── Projects.tsx
│ └── Footer.tsx
├── assets/ # Images and SVG files
├── data/ # Project data and types
└── types/ # TypeScript type definitions
- Node.js ≥ 18.0.0
- npm or yarn package manager
- Clone the repository
git clone https://github.com/pro804/Dev-Portfolio.git- Navigate to the project directory
cd Dev-Portfolio- Install dependencies
npm install- Start the development server
npm run dev- Open http://localhost:5173 to view it in the browser.
npm run dev— Runs the development server (Vite)npm run build— Builds the app for productionnpm run preview— Previews the production build locally
This portfolio is an evolving project that reflects my growth as a developer. I believe in continuous learning and regularly update my projects with new skills and improvements.
This portfolio will continue to evolve as I grow in my development journey
This project is licensed under the MIT License. See the LICENSE file for details.