Welcome, this project is proof of my skills as a developer. This is also a real project where all the projects I worked on will be posted in time, this serving as my portfolio. This project is also designed so that people who want to hire me can get a better idea of my skills and be able to contact me as easily as possible.
See this project on live enviroment on GitHub Pages here: https://lseparatio.github.io/personal-portofolio/
Click To Expand Features
- Same navigation menu is used across all pages for consistency.
- Navigation was designed to be easy to use and to understand.
- Navigation was aswell designed to work wall on all devices.
- Hero section have a nice background image with a overlay text, my name and site purpose.
- Welcome section have my image and a welcome and presentation text.
- The section is designed to welcome the potential employer and to give him a better idea about who i am.
- Skills section was designed to show in a nice manner to an possible employer my set of skills.
- Call to Action Section was designed to do not lose the reader attention and to help him in a easy way to next page.
- This section contain a text and a button that is sending user to next page.
- Work Examples page was designed to show all my projects to the user, to provide with some basic information about projects.
- There are 2 buttons to every work example, first leading to Live project page and second to GitHub project.
- User can change the content by selecting the domain of expertise.
- Page is completely responsive:
- Phone example:
- Tablet Example:
- In order to create a connection with reader, i have to "Speack with him", this is what is doing this section.
- Also i provide with 6 contact ways.
- But if all that contact ways are not enough..
- ...an contact form, contact detaills and map need to be provided.
- All page is full responsive.
- Thank you page where user is redirected after form is succesfully submited.
Click to open creation timeline
As a site owner:
- I want users to understand fast that this website is for my portfolio.
- I want users to be able to easily navigate my website on any device.
- I want to present myself as best as possible including my skills.
- I want to be easy to contact on multiple platforms.
- I want my website to be accessible to anyone even for screen readers.
As a user:
- I want to be able to view the website on any device.
- I want the menu to be intuitive.
- I want to learn as much is possible about developer.
- I want to know what skills have the developer.
- I want to see what other projects developer did.
- I want to find out who you are.
Click to expend wireframes
- Mobile Wireframes:
- Index Page
- Example Page
- Contact Page
- Tablet Wireframes:
- Index Page
- Example Page
- Contact Page
- Desktop Wireframes:
- Index Page
- Example Page
- Contact Page
- Visual Studio Code ( After i tried some editors it seem i like visual studio and the fact it is saving a local copy of project and i can push to GitHub. )
- GIMP ( For image editing. Briliant open-source editor. )
- Bootstrap 4.6 ( I did this choice after i read in Bootstrap 5 documentation that they have problems with Internet Explorer. )
-
I used https://coolors.co/image-picker to pick a color from my profille image.
- Images was taken from https://www.pexels.com/
-
The coding progress can be seen on commits.
-
In coding progress Bootstrap documentation was indespensable.
I started the testing using for LightHouse from Google. I learn that even from an expert like google you can't expect exact results every time. So i am going to show you here the best result. Even some time performance is droping to 80 because they can't acces bootstrap css ?!?
LightHouse front page for Mobile test, click to expand.
LightHouse front page for Desktop test, click to expand.
-
I learn in the hard way that converting a JPG to WEBP is not always usefull, the image can be even heavier after conversion in some cases. For this reason i had to change hero image because whas a bit more that 2mb. Now i have a 187 KB image that boosted the performance.
-
Thanks to lighthouse i learn to add rel="noopener" to any target="_blank" for security. So thanks.
LightHouse example page for Mobile test, click to expand.
LightHouse example page for Desktop test, click to expand.
- was no so much to fix here only that rel="noopener" in all links.
- can be done to reduce images sizes, but 10 is for teachers.
LightHouse example page for Contact page test, click to expand.
LightHouse example page for Contact Page Desktop test, click to expand.
- No errors were returned when passing through the official validator.
Front page validator link: Click To See
Click to expand image.
Examples page validator link: Click To See
Click to expand image.
Contact page validator link: Click To See
Click to expand image.
Thank you page validator link: Click To See
Click to expand image.
CSS validator link: Click To See
Click to expand image.
- In the GitHub repository, navigate to the Settings tab
- In left menu, down find Pages tab
- From the source section drop-down menu, select the Main Branch
- Once all is done your link is displayed.
This particular deployment can be seen on: https://lseparatio.github.io/personal-portofolio/
- after you setup vps or shared hosting and a domain name, in the GitHub repository press CODE dropdown and then Download ZIP.
- upload the ZIP in your public_html folder and un-zip-it. You shud have the website ready.
Example of this deployment can be seen on: https://ionutzapototchi.com (This version is identic with GitHub Pages hosted excepting php code source that is making the form to send emails. https://www.freecontactform.com/forms/contact-form-free)
- Bootstrap - For well documented css framework
- Pexels - For hero photo (exaples photos have credits straight on page)
- Coolors - For color from image picker
- GIMP - For Image processing
- Favicon.io - For Favicon
- Font Awesome - For icons
- Google Fonts - For Lora font.
- Code Institute - For brilliant lessons from where i learn to do this.
- And Free Contact Form that provided me with php code with is making the form in my VPS hosted website to work. https://www.freecontactform.com/forms/contact-form-free