Emile Ndayishimiye - Portfolio Website

A modern, professional portfolio website showcasing my projects, experience, and skills as a Computer Science and Mathematics student at Amherst College.

✨ NEW: This portfolio has been refactored for maximum maintainability!
All content is now in data.js - update your portfolio without touching HTML!

---

🌟 Features

• 🔧 Ultra-Maintainable: All content in one file (data.js)
• 🎨 Modern Design: Clean, minimal aesthetic with professional typography
• 🌓 Dark Mode: Toggle between light and dark themes
• 📱 Fully Responsive: Optimized for desktop, tablet, and mobile
• ⚡ Fast Loading: Vanilla JS with no heavy frameworks

---

🚀 Quick Start

Option 1: View Locally

1. Open index.html in your web browser
2. That's it! No build process required.

Option 2: Deploy to GitHub Pages

See DEPLOYMENT.md for step-by-step instructions.

---

📝 How to Update Your Portfolio

⭐ THE EASY WAY (Recommended)

To add/edit/remove content, just edit data.js!

Add a New Project:

// In data.js, add to the projects array:
{
    title: "My Awesome Project",
    icon: "fa-rocket",
    description: "Built an amazing thing that does X, Y, and Z...",
    tech: ["Python", "React", "Docker"],
    learning: "Learned about system design and scalability...",
    github: "https://github.com/yourusername/project",
    featured: true,
    impact: "50% improvement"
}

Add New Experience:

// In data.js, add to the experience array:
{
    role: "Software Engineer Intern",
    company: "Company Name",
    location: "City, State",
    period: "Summer 2026",
    type: "Engineering",  // Research, Teaching, Engineering, or Leadership
    highlights: [
        "Built feature that improved X by Y%",
        "Collaborated with team of Z engineers",
        "Learned about A, B, and C"
    ]
}

Update Skills:

// In data.js, find the skills array and edit:
{
    category: "Programming Languages",
    icon: "fa-code",
    items: ["Python", "Java", "JavaScript", "Go"]  // Just add/remove!
}

🎯 What You Can Update in data.js:

• ✅ Personal information (name, email, links)
• ✅ About me paragraphs
• ✅ All projects
• ✅ All experience
• ✅ All skills
• ✅ Everything!

---

🛠️ Technologies Used

• HTML5: Semantic markup
• CSS3: Custom properties, Grid, Flexbox, animations
• JavaScript (Vanilla): Component-based rendering, no frameworks
• Font Awesome: Icons (CDN)
• Google Fonts: Inter typeface

---

📁 Project Structure (Refactored!)

portfolio/
├── index.html          
├── styles.css          # Enhanced styling with modern patterns
├── script.js           # Component rendering + interactions
├── data.js             # ⭐ ALL CONTENT HERE - your single source of truth
├── resumes/            # PDF resume files
├── assets/             # Images (add profile.jpg here)
│   └── README.md       # Guide for adding images
├── README.md           # This file

🎨 Customization Guide

1. Add Your Profile Photo

• Place your profile photo in the assets/ folder as profile.jpg
• Recommended size: 400x400px (square)
• Formats: JPG, PNG, or WebP

2. Update Personal Information

Edit data.js:

personal: {
    name: "Your Name",
    email: "your.email@example.com",
    phone: "(123) 456-7890",
    github: "https://github.com/yourusername",
    linkedin: "https://linkedin.com/in/yourusername",
    resume: "resumes/your-resume.pdf"
}

3. Customize Colors

Edit CSS variables in styles.css (lines 14-43):

:root {
    --accent-primary: #6366f1;    /* Main brand color */
    --accent-secondary: #8b5cf6;  /* Secondary color */
}

4. Add Project Screenshots (Optional)

• Create assets/projects/ folder
• Add screenshots
• Reference in project descriptions

---

📊 Content Management

The New Way (Easy!):

All content updates happen in one file: data.js

data.js contains:

• Personal info
• About me text
• All projects with details
• All experience with highlights
• All skills organized by category

Benefits:

• ✅ Single source of truth
• ✅ No HTML editing needed
• ✅ Easy to keep consistent
• ✅ Can version control content separately
• ✅ Could connect to a CMS later

Content Structure:

const portfolioData = {
    personal: { /* Contact info */ },
    about: [ /* Paragraphs */ ],
    projects: [ /* Project objects */ ],
    experience: [ /* Experience objects */ ],
    skills: [ /* Skill categories */ ]
};

---

🎯 Adding New Content

Add a New Project:

1. Open data.js
2. Find the projects array
3. Copy an existing project object
4. Edit the details:

   {
       title: "Project Name",
       icon: "fa-icon-name",  // Font Awesome icon
       description: "What it does...",
       tech: ["Tech1", "Tech2", "Tech3"],
       learning: "What you learned...",
       github: "URL",
       featured: true,  // Show on main page?
       impact: "Measurable result"  // Optional metric
   }

5. Save and refresh!

Add New Experience:

1. Open data.js
2. Find the experience array
3. Add your entry:

   {
       role: "Position Title",
       company: "Company Name",
       location: "City, State",
       period: "Start - End",
       type: "Research|Teaching|Engineering|Leadership",
       highlights: [
           "Achievement 1",
           "Achievement 2",
           "Achievement 3"
       ]
   }

Update Skills:

Just edit the arrays in data.js:

skills: [
    {
        category: "Category Name",
        icon: "fa-icon-name",
        items: ["Skill 1", "Skill 2", "Skill 3"]
    }
]

---

📱 Responsive Breakpoints

• Desktop: 1200px+
• Tablet: 768px - 1199px
• Mobile: 320px - 767px

---

⚡ Performance

• No Build Process: Pure vanilla JavaScript
• Fast Load Times: Minimal dependencies
• Optimized Images: Lazy loading ready
• Efficient Rendering: Component-based approach
• GPU Acceleration: CSS transforms for smooth animations

---

♿ Accessibility

• Semantic HTML5 elements
• ARIA labels on interactive elements
• Keyboard navigation support
• Focus-visible styles
• Color contrast meets WCAG standards
• Screen reader friendly

---

🐛 Troubleshooting

Content Not Showing?

• Check browser console for errors
• Verify data.js is loaded before script.js
• Check for JavaScript syntax errors in data.js

Dark Mode Not Working?

• Clear browser localStorage
• Check browser console for errors
• Ensure JavaScript is enabled

Mobile Menu Not Working?

• Verify script.js is loaded
• Check browser console for errors