Task: Design and build a portfolio website containing at least About
Me, Portfolio and Contact sections.
Goals:
Minimalist Design
Easy for user to navigate
Responsive & Accessible
Clearly displays main features - about me, projects & contact
details
Make website feel 'alive' - don't want it to be completely static,
want it to be slightly interactive and have a few bells and whistles
to show off my dev skills
Challenges along the way:
Wasn't happy with first design, too threadbare
Second design contained background image for hero section - tricky
to make responsive
Decided to add more content which meant more nav links - I then had
to come up with a way to make the nav responsive
Making nav responsive was tricky without use of JavaScript
Attempted adding 'Return to Top' button but proved tricky so parked
for the time being
Thought processes:
Central nav bar using flex
Use grid to layout rest of items on page intentionally - e.g. text
on background image
About me image - undecided whether to keep image of myself or
replace, leaving it as a placeholder for now
Tried different style of project layout but preferred the one I now
have
Originally had 3 sections of web page, but decided to add a blog to
keep track of my dev journey/experience at iO academy
Decided to put blog on separate page as it felt to cluttered on home
page
Not sure whether to make project boxes same height or allow the
height to be adjusted by the text inside
What I could do better:
Think more about the purpose of the website - what content could I
add to it that will serve that purpose?
Possibly use less media queries - I think there's probably a more
efficient way to achieve the responsive features
To Do List:
Make Nav responsive
Add 'Return to Top' button - Parked
Add CV available to download
Make project boxes same height regardless of text?
Change project buttons to anchors
Change font size on journey and project-1 pages for smaller
screens