jambrisak - Live Webpage (Right click top open in new tab)

This is my first project for Code Institute where I study for a diploma - LVL 5 in Full Stack Software Development.

The aim of this project is to demonstrate skills in HTML and CSS, in this project some JavaScript where used due to the creator wanted the site to look as good as possible. But the use of JavaScript where limited.

The website is responsive to lower screen resolutions, tablets and mobile phones. It is also compatible with all websites that are popular. Opera, Opera GX, Chrome, IE, Safari, Firefox.

The website is a one page only and is divided into different sections, where the consistency was the in the highest priority, its both simple and pleasant to navigate the site. It contains all the necessary information that is expected to be present at a portfolio site, such as an about section, portfolio section and a contact section where users will find, social links and an online form that will send a direct message to the creator.

1. Project Goals
   • User Goals
   • Site Owner Goals
2. User Experince
   • Target Audience
   • User Requirements and Expectations
3. Design
   • Design Choices
   • Fonts
   • Structure
   • Wireframes
4. Technologies Used
   • Languages
   • Frameworks & Tools
5. Features
6. Validation
   • HTML Validation
   • CSS Validation
7. Testing
   • Accessibility
   • Performance
   • Device Testing
   • Browser compatibility
   • Testing user stories
8. Bugs
9. Deployment
10. Credits
11. Acknowledgements

The goal with the project is to create a personal website that will showcase the creators talent and skills, and also show future employers the creators talent in both coding but also designing. The site will be pleasant to use, responsive for mobile phone users and compatible with all the browsers.

The main goal of the creator is to promote himself on the internet and reach as many possible future employers as possible.

• Find some information about who Philip Jambrisak is.
• See what he has created for projects in the past and or currently working on.
• Find ways of contacting the creator.

• Promote himself on the internet.
• Provide contact details for the users of the website.
• Provide the online form of contact.
• Provide links to the owners social media.
• Make website responsive for mobile devices.

• People who want to know who Philip Jambrisak is.
• People who want to find their next Full Stack Developer.
• People who want to find their next Front End Developer.

• A website that is quick to load.
• Responsive website for mobile devices.
• Easy navigation system.
• A website where you can quickly and easily find the essential information.
• Easy way to contact the owner online.
• FInd links for social media.
• Simple and interesting content.
• Pleasant design that speaks about who the owner is.

Back to top ↑

As a design for the website, I did not use ready-made dolour palettes, and instead, I decided to choose a background image that should give a modern and simplistic feel to the background. Apart from the portfolio section each section has a white background, and that was a conscious choice due to the about section had some text and a background would distract the user. The same thinking was behind the contact section of the page, and the reason for there being a background image in the portfolio section was to highlight a section that the owner felt was the most important. In addition, the navbar and footer have a black color. The navbar switches color when u start scrolling and the reason for it to first blend in is to give the illusion that the background image and navbar are on, and the same. So when u start scrolling you see that the navbar changes color to stand out and showcase that now we are moving on from the first page and diving into who the creator is. There are two other images on this page and one is of the creator and the other is an "coming soon" image that is a temporary image until the owner updates and add a picture and link to the next project.

Below is a list of the photos used.

'Poppins' regular 400 - taken from Google Fonts and apply via @import method to CSS file. I Chose this font because after a quick search on google on most used font for portfolio webpages, 'Poppins' regular 400 was the most popular choice, but its also because of its simplicity and ease of reading.

The website is constructed in on of the most frequently chose and user-friendly ways. At the top of the page, there is a navigation bar with links to other sections of the page, below is the first section which is the home section, below is the about section, then comes the portfolio and lastly the contact with footer underneath.

The website consists of one page and 4 sections in total.

• Home
• About
• Portfolio
• Contact

This is the prototype of the project that will showcase the creators idea and that it was possible to translate a wireframe to webpage. There will a wireframe for each section of the page, it may not show the entire picture since the creator did not think of a resume button and or using icons to showcase skills until after development was started.

1. Home

2. About

3. Portfolio

4. Contact

Back to top ↑

• HTML 5
• CSS 3
• JavaScript

• Balsamiq (create wireframes for the project)
• GitHub (create, hold and deploy repository)
• Virtual Code Studio (IDE use to build the website)
• Git (source code management)
• Chrome DevTools (checking & testing the site)
• W3C HTML Validator (validation of HTML code)
• W3C JigSaw Validator (validation of CSS code)
• Am I Responsive (website mockup)
• Paint (images edit)
• TinyPNG (compress images)
• Google Fonts (fonts)
• Font Awesome (icons)
• Grammarly (typography)
• Pexels (images, logo & other graphic elements)

Back to top ↑

The navigation bar is present on the entire website, it is easily noticeable, intuitive and easy to use. The navigation bar highlights the selected section where the user wants to go. There is also an effect when user scrolls down where the navigation size up and down and swtiches colors for the background and text. On the left side, there is a logo that.The navigation bar is responsive to mobile devices - it then turns into a common in-use "hamburger menu".

The section on the main page is a first eye-catcher. It contains a the name of the creator and what he feels is the most important information about him. In the section, we can see one button that will let the user download the creators resume. restaurant.

The "about us" section gives the user an insight into who the creator is, where he got his education from where the school names are links to the schools different pages. The user can also get information on what skills the user claims to have. To the right of the information section is a picture of the creator and white space left to the right of the picture, that was intentional from the creator, to give the illusion of the future.

A section where the user can currently only see the same picture four times, the idea is that users will bookmark this page too see what the creator will do for projects in the future. The images also have an hover effect that will shrink them to let users know which image "future project" their mouse is on.

The user will to the left see the creators contact information, email, phone and two social links 1 that goes to the creators Linkdin profile and the other to the creators GitHub profile. Next to the contact information, the user can find a contact form that allows the user to freely contact the creator online.

At the bottom of the page the user will see the footer, and it contains just a copyright claim from the creator.

I used "W3C Markup Validation Service" to validate the code.
I validated each of the subpages and no error was found on any of them.

I used "W3C CSS Validation Service" to validate the CSS code.

To test the performance on the website, I used Google Lighthouse in Google Chrome Developer Tools. The test was carried out on computers and mobile devices.
Below is a list of screenshots:

• Computer -

• Mobile -

The website was tested on devices such as:

• iPhone SE
• iPhone XR
• iPhone 12 Pro
• Samsung Galaxy S8+
• Samsung Galaxy S20 Ultra
• iPad AIr
• iPad Mini
• Surface pro 7
• Surface Duo
• Galaxy Fold
• Samsung Galaxy A51/71

The website has been tested on the following browsers:

• Google Chrome
• Chromium
• Mozilla Firefox
• Opera
• Microsoft Edge
• Safari

Back to top ↑

The website was deployed on a Google Domain by using following steps:

1. Purchase of the domain.
2. Start a GitHub repository, go to github and create a new repository by clicking the green "new" button in the top of the left hand side. Give it a name and make it public and also check box for "add a README file"
3. Get set up with Github on your desktop, this is optional but to make it easier to use git push, commit, add commands for the website it makes it easier.
4. Set up your google domain, go back to your google domains page and head to the DNS settings on the sidebar.
   • Scroll down to the bottom section "custom Resource records", this is where u will sync up GitHub and Google Domain.
5. Add two things, 1. A record, 2. CNAME
   • A Record needs this information to work:
     • Name: @
     • Type: A
     • Time: 1h
     • Data: 185.199.108.153
   • CNAME
     • Name: www
     • TTL: 1h
     • Data: https://yourusername.github.io
6. Connect your github account to GitHub Pages and your domain.
   • Open up your repository and go to Settings tab and scroll down to GitHub Pages, in the custom domain section add the url for purchased domain.
   • After ur hit save it will do a DNS check and when it shows green its done, now you can go to ur custom domain.

2. Pexels - All photos and graphics are from Pexels.
3. Visual Code Studio - I use their software - WebStorm - as my main IDE.
4. Sticky Navbar & Hamburger - This course over on Udemy taught by Jonas Schmedtmann taught me everything i need to know about how to use JavaScript for making a navbar Sticky and how to switch nav to a hamburger on lower resolutions.
5. Code Institute - As the main source of my knowledge.
6. W3Schools - An additional place where I often do additional courses or read articles and enrich my knowledge.
7. udemy - An additional place where I often do additional courses or read articles and enrich my knowledge.

Huge thanks to:

• Maranatha Ilesanmi, For being a great mentor I'm lucky enough to have. For his amazing guidance, support, tips and feedback.
• To My amazing girlfriend Maja, who supported me during the whole process of learning and creating the project, allowed me to focus on my work and keep me motivated to act all the time.
• To my family and friends - for being a great support and for their motivation.
• The entire Code Institute community on slack for great understanding and motivation every day!

Back to top ↑