Hana B. Geremew - Portfolio Website

A modern, professional portfolio website showcasing my experience as a Full-Stack Software Engineer.

🌟 Features

• Responsive Design: Fully responsive across all devices
• Modern UI: Clean, professional design with smooth animations
• Performance Optimized: Fast loading with optimized assets
• Accessible: WCAG compliant with semantic HTML
• Interactive: Smooth scrolling, hover effects, and dynamic content

🛠️ Technologies Used

• HTML5
• CSS3 (with custom properties and modern layouts)
• Vanilla JavaScript (ES6+)
• Google Fonts (DM Serif Display & Plus Jakarta Sans)

📁 File Structure

portfolio/
├── index.html          # Main HTML file
├── styles.css          # Stylesheet with custom design
├── script.js           # Interactive JavaScript functionality
└── README.md          # This file

🚀 Getting Started

Local Development

1. Clone this repository:

git clone https://github.com/HaNiya21/HaNiya21.github.io.git
cd HaNiya21.github.io

2. Replace the existing files with the new ones:

   • Copy index.html to your repository
   • Copy styles.css to your repository
   • Copy script.js to your repository

3. Open index.html in your browser to view locally

GitHub Pages Deployment

1. Push the changes to your repository:

git add .
git commit -m "Update portfolio with latest resume information"
git push origin main

2. Ensure GitHub Pages is enabled:
   • Go to your repository settings
   • Navigate to "Pages" section
   • Set source to "main" branch
   • Your site will be live at https://HaNiya21.github.io

✨ Sections

1. Hero - Introduction with contact buttons
2. About - Professional summary and education
3. Experience - Timeline of work experience
4. Projects - Featured projects with technologies
5. Skills - Technical skills organized by category
6. Leadership - Community involvement and mentorship
7. Contact - Multiple ways to get in touch

🎨 Customization

Colors

The color scheme is defined in CSS custom properties in styles.css. You can easily customize:

:root {
    --color-primary: #1a1a2e;
    --color-highlight: #e94560;
    --color-bg: #0d0d1a;
    /* ... more colors */
}

Content

Update content directly in index.html:

• Personal information
• Experience details
• Projects
• Skills
• Contact information

Fonts

Currently using:

• Display Font: DM Serif Display
• Body Font: Plus Jakarta Sans

To change fonts, update the Google Fonts link in index.html and the font variables in styles.css.

📱 Responsive Breakpoints

• Desktop: > 968px
• Tablet: 768px - 968px
• Mobile: < 768px
• Small Mobile: < 480px

🔧 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📝 Content Updates

To update your portfolio with new information:

1. Experience: Edit the timeline section in index.html
2. Projects: Update the projects grid
3. Skills: Modify the skills categories
4. Contact: Update email and phone in multiple locations

🎯 Performance Tips

• Images should be optimized before adding
• Keep animations smooth (60fps)
• Minimize external dependencies
• Use lazy loading for images (code included)

📧 Contact

• Email: hanaberehanu@icloud.com
• Phone: 571.525.6041
• GitHub: @HaNiya21

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Design inspired by modern web practices
• Built with accessibility and performance in mind
• Optimized for GitHub Pages hosting

---

Last Updated: January 2026

Built with ❤️ by Hana B. Geremew