📁 ePortfolio — GitHub Pages Template

A dark-technical ePortfolio for a Materials Science BSc graduate & Honours student.

Folder Structure

eportfolio/
├── index.html              ← Main portfolio page
├── assets/
│   ├── css/
│   │   └── style.css       ← All styles
│   ├── js/
│   │   └── main.js         ← Interactions & animations
│   ├── img/
│   │   ├── profile.jpg     ← Your photo (add this)
│   │   ├── favicon.ico     ← Browser tab icon (add this)
│   │   └── project-1.jpg   ← Project images (add these)
│   └── cv.pdf              ← Your CV PDF (add this)
└── README.md

Getting Started — Checklist

1. Replace placeholder text

Search for [...] bracketed placeholders throughout index.html and fill them in:

• Your name → update in <title>, nav logo, hero, footer
• University name, department, supervisor
• Thesis title and description
• Qualifications with dates and details
• Project descriptions
• Email, LinkedIn, GitHub, ORCID links

2. Add your files

• assets/img/profile.jpg — portrait photo
• assets/cv.pdf — your CV as a PDF
• assets/img/project-1.jpg etc. — project screenshots/images
• assets/img/favicon.ico — browser icon (use a free generator)

3. Customise the typed phrases (optional)

In assets/js/main.js, find the phrases array in the typed cursor section and update with your own specialisations.

4. Skill bar percentages

In index.html, each <div class="skill-fill" data-width="85"> controls the bar level. Change the number (0–100) to reflect your proficiency.

Deploying to GitHub Pages

1. Create a new GitHub repository (e.g., yourusername.github.io for a user site, or any repo name for a project site)
2. Upload all files maintaining the folder structure
3. Go to Settings → Pages in your repo
4. Set Source to Deploy from a branch, Branch: main, Folder: / (root)
5. Click Save — your site will be live at https://yourusername.github.io/ within a minute

Tips

• For the contact form, the submit button opens the user's mail client via mailto:. For a proper backend-free form, consider Formspree — just replace the form action.
• Google Fonts are loaded from CDN — works fine on GitHub Pages.
• All animations are CSS/JS only, no external libraries needed.