🌐 Amanuel's Portfolio

A modern, responsive developer portfolio built with React, Vite, and Tailwind CSS. Designed to showcase projects, skills, and professional branding with clean, reusable components.

---

🔗 Live Demo

👉 View Demo

Performances and Optimizations

⚡ Performance Comparisons (Before vs. After)

Initial Build (Unoptimized)	Optimized Production (Vite + React 18)
Lighthouse Score: 78	Lighthouse Score: 99

Before Performance

Status: Initial Development Build The application was functional but suffered from high layout shift and delayed interactivity. Initial bundle sizes were unoptimized, leading to slower load times on 3G/4G mobile networks and a lower SEO ranking.

After Performance

Status: Optimized Production Build Engineered for speed using Vite and React 18. I implemented strategic code-splitting and asset compression, resulting in an instantaneous "app-like" feel. The UI is now fluid, with zero jank during transitions.

Before Metrics

Lighthouse Score: 78

Largest Contentful Paint (LCP): 1.9s (Needs Improvement)

Total Blocking Time (TBT): 820ms

Issues: Unused JavaScript, unoptimized heavy images, and render-blocking resources.

After Optimization Metrics

Lighthouse Score: 99

Largest Contentful Paint (LCP): 0.8s (Fast)

Total Blocking Time (TBT): 0ms (Perfect)

Optimization Steps: Implemented Lazy Loading, WebP image conversion, and minification of CSS/JS. This ensures the best possible Google Search ranking.

⚡Metrics Comparison (Before vs. After)

Initial Build (Unoptimized)	Optimized Production (Vite + React 18)
Lighthouse Score: 78	Lighthouse Score: 99

Testing Show (Reliability)

Methodology: Unit & Integration Testing To ensure performance gains don't break over time, I implemented a robust testing suite using Vitest. This validates that components render correctly, hooks maintain state, and the Contact Form integrates perfectly with EmailJS.

---

🏠 Home Page

The homepage introduces the portfolio with a clean hero section, navigation, and highlights of featured projects.

---

📂 Projects Section

• Showcases featured applications with screenshots, descriptions, and live/demo links.
• Built with reusable React components for scalability.
• Includes hover animations, responsive cards, and quick access to GitHub repositories.

---

🛠️ Services Section

Highlights the professional services offered:

• Web Development – Modern, scalable apps with React, Vite, Tailwind CSS.
• UI/UX Design – Polished interfaces with accessibility and responsive layouts.
• API Integration – Django REST APIs, third‑party services, and secure workflows.
• Testing & Reliability – Vitest integration for unit and integration tests.
• Contact Automation – EmailJS for direct communication via contact forms.

---

📞 Contact Section

Interactive contact form powered by EmailJS.
Users can send messages directly without leaving the site.

✉️ Contact Flow

• Fill out the form with name, email, and message.
• EmailJS delivers the message instantly.
• Confirmation feedback shown to the user.

---

✅ Success Case

Shows the confirmation message when the contact form is submitted successfully.

---

❌ Failure Case

Shows the error feedback when the contact form fails (e.g., invalid email, server issue).

---

📱 Mobile-Friendly

Interactions pf my portfolio is fully responsive and optimized for mobile devices. Here are some GIFs showcasing the interactions:

Interactions

• Collapsible mobile menu with smooth animations
• Active link highlighting and accessibility labels

---

DeskTop Interaction

Interactions of my portfolio in Desktop with hover and clickable links check.

• Active link highlighting and accessibility labels

⚙️ Tech Stacks & Badges

🛠 Tech Stack

• Frontend: HTML5 + CSS3 + React + Vite
• Styling: Tailwind CSS + Framer Motion (animations)
• State Management: React Contexts
• Email Service: EmailJS (contact automation)
• Icons: Lucide React and React icons fa
• Hosting: Vercel
• Data: Static JSON
• Testing: Vitest unit tests

💻 Installation & Setup

# 1. Clone repo
git clone https://github.com/amanuel1221/amanuel-portfolio.git
cd amanuel-portfolio

# 2. Install dependencies
npm install

# 3. Add environment variables (.env) for EmailJS
VITE_EMAILJS_SERVICE_ID=your Emailjs Sevice Id xxxx
VITE_EMAILJS_TEMPLATE_ID=your Emailjs Template Id xxxx 
VITE_EMAILJS_PUBLIC_KEY= your Emailjs Public Id xxxx

# 4. Start dev server
npm run dev

# 5. Open app

http://localhost:5173

🧪 Testing

bash
# install the vitest using 
npm install vitest

# Run all tests
npm run test

Coverage:

Navbar Tests: Active link styling, accessibility labels, hover animations

ProjectCard Tests: Rendering, responsive layout, links to GitHub/demo, and Live Demo

ContactForm Tests: EmailJS integration, success/fail feedback

Footer Tests: Social icons, hover states, accessibility

Testing Experience:

Debugged initial failures due to missing contects and store datas

Learned how to mock context and pass proper test data

After debugging, all tests pass successfully ✅

📂 Project Structure
css
amanuel-portfolio/
├─ public/
├─ src/
│  ├─ components/
│  │   ├─ Navbar.jsx
│  │   ├─ Footer.jsx
│  │   ├─ Project.jsx
│  │   ├─ Contact.jsx
│  │   ├─ Services.jsx
│  │   └─ HeroSection.jsx
│  ├─ pages/
│  │   ├─ Home.jsx
│  │   
│  ├
│  ├
│  ├─ store/
│  │   ├─ offer.js
│  │   ├─ services.js
│  │   ├─ projectExperiance.js
│  │   ├─ Services.js
│  │   └─ EduExperiance.js
│  │   ├─ Projects.js
│  │  
│  ├─ App.jsx
│  └─ main.jsx
├─ package.json
├─ tailwind.config.js
├─ vite.config.js
└─ README.md
⚡ Usage
Browse homepage with hero, projects, and services

Explore featured projects with live/demo links

View offered services (Web Dev, UI/UX)

Submit contact form (EmailJS) with success/fail feedback

Enjoy responsive design and smooth animations (Framer Motion)

🧠 What I Learned

Reusable Components: Navbar, ProjectCard, ServiceCard, Footer

EmailJS: Setup, environment variables, success/fail handling

UI Libraries: Tailwind CSS, Lucide icons, Framer Motion animations

Accessibility: ARIA labels, semantic markup, screen‑reader support

Testing: Mocking context, handling hooks, UI & state validation

Deployment: Vercel builds, domain setup, environment variables

🧩 Challenges & Solutions
Responsive layout issues → Fixed with Tailwind breakpoints

EmailJS failures → Correct IDs & .env setup

Navbar hover bugs → Debugged imports & animation timing

Testing failures → Mocked store/contexts properly, passed test data → all tests pass ✅

🔧 Future Improvements
Blog section with Substack integration

Dark mode variants with polished transitions

More detailed project cards with workflow screenshots

Admin dashboard for managing portfolio content

Persistent contact messages in backend database

🤝 Contributing
bash
# Fork the repo
git checkout -b feature/your-feature
git commit -m "Add feature"
git push origin feature/your-feature
Open a pull request 🚀

📄 License
This project is licensed under the MIT License.

🌟 Acknowledgements
React

Vite

Tailwind CSS

Vitest

EmailJS

Framer Motion

Lucide Icons

⭐ Support

If you like this project, consider giving it a star ⭐


👨‍💻 Author

Amanuel

Aspiring Frontend Developer passionate about building modern web experiences and continuously learning.