ID Assignment 1

This website is a portfolio for a fictitious man Harry Lakes. Harry is a freelance photographer who enjoys travelling, hence the website features a collection of photos of the places he's been to.

This website aims for employers looking for a talented individual to help with their photoshoots.

Design

Home page

For the homepage, I decided to go with a simple layout which tells employers a little about Harry, and navigation to the gallery so that they can check out the photographs he'd taken. Social media icons are also used for easy access to contact Harry.

Main gallery page

For the main gallery page, I added a header to the top which has links to other pages.

In each row, there is an image and the name of the country Harry has been to. When clicked, the user will be redirected to a gallery page which showcases the photos Harry has taken in that country.

I used a large background text with colours almost the same as the background to get the user's attention yet at the same time remain subtle and not too jarring.

Country gallery page

As mentioned above, the country gallery page houses the photographs Harry shot while he was in that country. The images are presented in two columns which users can scroll down to view the entire collection of images.

Technologies used

1. HTML
   • The mark-up language used to structure content
2. SASS
   • A CSS preprocessor used to style HTML content. I used SASS as it was neater and more compact than CSS, hence easier to work with.
3. Adobe Illustrator
   • A tool for creating vectors. I used this to create the logo and favicon for the website, and to modify the colours of other icons.
4. Adobe Xd
   • The tool I used to make wireframes for the website
5. Visual Studio Code
   • VS Code is the code editor I wrote HTML, SASS and the Readme file in. Plugins such as live server helped speed up the development process for me.
6. Git & Github
   • Git is a version control system and Github is where I hosted the files for the website. I used Git Bash in VS Code to add, commit and push files to this Github repository, which was quite convenient.

Resources

1. Boxicons
   • I used social media icons from this website.
2. Unsplash
   • I obtained stock images from this website. All the photos in the gallery were taken by Egor Myznik.
3. W3Schools
   • I used this website to learn more about HTML, CSS and JS. The code I used for the navigation bar is from here too.
4. CSS Tricks
   • I learnt CSS from this website.
5. Stack Overflow
   • Which developer doesn't use Stack Overflow? I found solutions to various bugs through this website