This website is a portfolio of my own photographs that I've taken with my Nikon, Canon and S22 Ultra, with a purpose to be able to showcase my art to other's who also has an interest in photography in some way. I've wanted to make a website for myself for a long time to be able to display my photographs and maybe even get more attraction from people who's looking for a photographer, and thought this would be a good idea as my Portfolio Project in HTML/CSS.
- Featured on all pages, full responsive, includes links to Logo, Home page, Gallery and Contact page, looks the same on each page for easy navigation.
- Allows users to easily navigate from each page on all devices without having to use the "back" button to go back to any previous page.
- Includes a logotype that I've made myself that is also used on my Facebook page, Twitter and Instagram, to make it easy to reconize my "brand".
- Has a text underneath that lets you know that it's about photography.
- Allows users to see a sample of my photographs that exists on my Facebook page. When a photo is clicked, a new tab opens up to that specific post on Facebook. It will automatically include any new photo that is posted.
- Includes icons with links to my social media accounts on Facebook, Twitter and Instagram. Opens in a new tab for easy navigation.
- Allows users to see more photographs that isn't included on the Facebook feed.
- Allows users to contact me by sending a message that includes their name, email and the message they wrote. The Contact form is linked to a back-end service that stores all messages in an inbox for me to read. Whenever there's a new message, a notification will be sent to my email to notify me.
I used a color scheme that matches with the colors on my logotype, it's also a good contrast and makes it easy to see and read what's on the screen.
- #ffffff - is used for the navigation bar and footer.
- #3a3a3a - is used for most of the text on the website.
- #29abe1 - is used for some of the text in the logo and headings.
- #add8e6 - background for the Contact form.
- #d3d3d3 - background color for the main content.
Imported from Google Fonts.
- Cinzel - used for the logo, navigation bar, headings and footer.
- Fauna One - used for the title and description for the gallery cards, and for the placeholder text on the Contact form.
Testing was ongoing all throughout the development process. Chrome Dev Tools was used during the building to test the responsiveness, interaction, looks, and layouts for different screen sizes. The deployed website is tested on Chrome, Opera GX and Samsung S22 Ultra, looks and works as intended. I also had a friend of mine check out the website and he told me it looks and works well.
- Links
Each link workes as expected on every page, links leading to external pages opens correctly in a seperate browser tab. - Contact Form
Works as expected. When all fields are filled in, the form get sent to the Ratufa back-end service and you get sent back to the home page. Ratufa sends me an email, notifying me that a new message has been submitted in the form. If you try to click send without filling in the required fields, it will display that those fields can't be empty.
- There's a popup that will say "This form is not secure. Autofill has been disabled" when you click on any of the fields for the contact form. I have yet to find a solution for that.
- Logotype image, text, and form on the Contact page is very slightly more to the right on the page rather than centered when viewing on a 3440 x 1440 screen. I noticed it at the very end while doing some last edits, haven't been able to find what's causing it.
Deployed via GitHub Pages:
- Navigate to the settings for the GitHub repository.
- On the menu to the left, click on "Pages".
- From the "Source" section drop-down menu under "Build and deployment", select "Deploy from a branch".
- From the section "Branch", select the options "main" and "/(root)" then click save.
- After you clicked save, the page will automatically refresh and a statement will be displayed stating the deployment was successful.
Fork the repository:
1. Log in/sign up to GitHub.
2. Go to the repository for this project portfolio-project-1.
3. Click the 'Fork' button in the top right corner.
Clone the repository:
1. Log in/sign up to GitHub.
2. Go to the repository for this project portfolio-project-1.
3. Click the code button, select which one you want to clone with (HTTPS, SSH or GitHub CLI) and copy the link shown.
4. Open the terminal in a code editor and change the current working directory to a location of your choice to use for the cloned directory.
5. Type 'git clone' in the terminal, paste the link that you copied in step 3 and then press enter.
-
Gallery
Took some inspiration/help with the code from ByteGrad's tutorial Create Equal Height Cards Responsively with HTML & CSS Flexbox. -
Contact Form Design
Some of the CSS style code comes from W3docs's tutorial How to Create Contact Form With CSS. -
Facebook Page Feed On Homepage
Script from Juicer.io. The feed is linked to my Facebook page Wikström Photography. -
Footer Icons - Font Awesome
-
Back-End Service For Contact Form - Ratufa.io
- All images is taken/made by me.