_____ _ __ _ _ | __ \ | | / _| | (_) | |__) |__ _ __| |_| |_ ___ | |_ ___ | ___/ _ \| '__| __| _/ _ \| | |/ _ \ | | | (_) | | | |_| || (_) | | | (_) | |_| \___/|_| \__|_| \___/|_|_|\___/
Welcome to my dynamic portfolio website! This interactive site showcases my skills, experience, education, and projects with modern animations and responsive design. Built with React, Tailwind CSS, and Framer Motion, it delivers a smooth and engaging user experience across all devices.
- Interactive UI with modern animations and transitions
- Responsive design that works on mobile, tablet, and desktop
- Dark mode aesthetics with vibrant accents
- Component-based architecture for maintainability
- Performance optimized loading and rendering
- Accessibility focused for all users
Check out the live preview of the portfolio website: Live Demo
- Animated introduction with code terminal effect
- Particle animations and interactive elements
- "About Me" section with skill highlights
- Interactive work history cards
- Timeline of professional growth
- Detailed role descriptions and achievements
- Tabbed interface showing formal education, self-learning, and certifications
- Visual presentation of skills and projects
- Interactive cards with hover effects
- Visual representation of technical abilities
- Categorized skill sets
- Interactive skill tags
- Showcase of development work
- "Coming Soon" interactive state
- Animated project cards
- Interactive contact form
- Social media links
- Professional connections
| Frontend | Styling | Animation | Deployment |
|---|---|---|---|
| React.js | Tailwind CSS | Framer Motion | Vercel |
| Vite | PostCSS | CSS Animations | GitHub Pages |
| React Router | CSS Variables | GSAP | Netlify |
Additional libraries:
- Lucide React - Modern icon system
- React Icons - Extensive icon library
- PrismJS - Code syntax highlighting
portfolio/
├── public/ # Static assets
├── src/
│ ├── assets/ # Images, fonts, and static resources
│ │ ├── css/ # CSS files including portfolio.css
│ │ ├── images/ # Image resources
│ │ └── ...
│ ├── components/ # React components
│ │ ├── ui/ # Reusable UI components
│ │ │ ├── meteors.jsx
│ │ │ ├── sparkles-text.jsx
│ │ │ ├── card.jsx
│ │ │ └── ...
│ │ ├── Hero.jsx # Hero section component
│ │ ├── PortfolioPage.jsx # About section
│ │ ├── Skills.jsx # Skills showcase
│ │ ├── Experience.jsx # Work experience
│ │ ├── Education.jsx # Educational background with tabs
│ │ ├── Projects.jsx # Projects with states
│ │ ├── Contact.jsx # Contact information
│ │ └── Header.jsx # Navigation header
│ ├── App.jsx # Main application component
│ └── main.jsx # Entry point
└── Configuration Files # Project configurationYou'll need the following installed:
Verify installations:
git --version
node --version-
Clone the repository
git clone https://github.com/dawamr/portfolio.git cd portfolio -
Install dependencies
npm install
-
Start development server
npm run dev
-
View in browser
Open http://localhost:5173/
The site is optimized for deployment on Vercel, Netlify, or GitHub Pages:
# Build for production
npm run build
# Preview production build
npm run previewContributions are welcome! Follow these steps:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Built with ❤️ using React, Tailwind CSS, and Framer Motion
© 2023 Dawam Raja