https://github.com/samuelaemro12/portfolio-app
Responsive and accessible portfolio frontend built with ReactJs, Tailwind CSS, and Framer Motion, TypeScript— optimized for fast load times, clean UI, and smooth user interaction.
https://github.com/samuelaemro12/portfolio-app
animations-css framer-motion portfolio-website reactjs tailwindcss typescript
Last synced: 9 months ago
JSON representation
Responsive and accessible portfolio frontend built with ReactJs, Tailwind CSS, and Framer Motion, TypeScript— optimized for fast load times, clean UI, and smooth user interaction.
- Host: GitHub
- URL: https://github.com/samuelaemro12/portfolio-app
- Owner: samuelAemro12
- License: mit
- Created: 2025-07-28T15:46:51.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-10-01T20:46:53.000Z (9 months ago)
- Last Synced: 2025-10-01T22:25:35.869Z (9 months ago)
- Topics: animations-css, framer-motion, portfolio-website, reactjs, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://samuel-aemro-portfolio.netlify.app/
- Size: 343 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Samuel Aemro Portfolio Website
A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS. This portfolio showcases my work as a full-stack developer, featuring interactive animations, case studies, and a comprehensive overview of my technical skills and projects.
## 🚀 Features
- **Modern Design**: Clean, professional interface with dark theme
- **Responsive Layout**: Optimized for all devices and screen sizes
- **Interactive Animations**: Smooth transitions using Framer Motion
- **Project Showcase**: Detailed project cards with live demos and GitHub links
- **Case Studies**: In-depth analysis of major projects with metrics and results
- **Technical Skills**: Visual representation of expertise across different technologies
- **Open Source Contributions**: Highlighting community involvement and contributions
- **Resume Integration**: Downloadable resume with professional links
- **Contact Form**: Easy way for potential clients and collaborators to reach out
## 🛠️ Tech Stack
- **Frontend**: React 19, TypeScript
- **Styling**: Tailwind CSS 4.1
- **Animations**: Framer Motion 11
- **Icons**: Heroicons
- **Build Tool**: Vite 7
- **Deployment**: Ready for Vercel, Netlify, or any static hosting
## 📦 Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/portfolio-website.git
cd portfolio-website
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open [http://localhost:5173](http://localhost:5173) in your browser
## 🏗️ Build for Production
```bash
npm run build
```
The built files will be in the `dist` directory, ready for deployment.
## 📁 Project Structure
```
src/
├── components/
│ ├── Hero.tsx # Landing section
│ ├── About.tsx # About me section
│ ├── TechnicalSkills.tsx # Skills overview
│ ├── Services.tsx # Services offered
│ ├── Projects.tsx # Project showcase
│ ├── CaseStudies.tsx # Detailed case studies
│ ├── OpenSource.tsx # Open source contributions
│ ├── Certifications.tsx # Certifications and achievements
│ ├── Resume.tsx # Resume download section
│ ├── Testimonials.tsx # Client testimonials
│ ├── Contact.tsx # Contact form
│ └── Footer.tsx # Footer section
├── App.tsx # Main app component
├── main.tsx # Entry point
└── index.css # Global styles
```
## 🎨 Customization
To customize this portfolio for your own use:
1. Update personal information in each component
2. Replace project data in `Projects.tsx` and `CaseStudies.tsx`
3. Modify skills and experience in `TechnicalSkills.tsx` and `About.tsx`
4. Update social links and contact information
5. Replace the resume file in the public directory
## 📱 Responsive Design
The portfolio is fully responsive and optimized for:
- Desktop (1200px+)
- Tablet (768px - 1199px)
- Mobile (320px - 767px)
## 🚀 Deployment
This project is ready to deploy on:
- **Vercel**: `npm run build` and deploy the `dist` folder
- **Netlify**: Connect your GitHub repo for automatic deployments
- **GitHub Pages**: Use GitHub Actions for automated deployment
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
## 🤝 Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/samuelAemro12/portfolio-app/issues).
## 📞 Contact
Samuel Aemro - [samuelaemrowork12@gmail] - [in/samuelaemro]
Project Link: [https://github.com/samuelAemro12/portfolio-app](https://github.com/samuelAemro12/portfolio-appwebsite)
---
⭐ If you found this portfolio template helpful, please give it a star!