This project is my personal portfolio where I put into practice my front-end skills and I display the main projects that I have developed. My portfolio is divided into five sections which includes a cover page where my names are displayed together with three social media link buttons (Linkedin, GitHub and Twitter) on an animated background with a light blue, red triangle mosaic overlay in a vague style.
Moreover, there is an About Me section where I explain my professional profile regarding software development and other studies and experience achieved. In the third section I listed my experience and named it as Things I can do. My Work section is the fourth, and I display my main projects with their image together with a description of same and a Technology Used paragraph where the languages and technologies used in each project are presentend in independent blue boxes. Additionally, There are two buttons that redirect to the GitHub repository and live version of the site. Last but not least, the fifth section is split into two, a form and my personal information such as email, phone number, cv, location and social media to be accessible by potential clients.
The reason I developed my personal portfolio is the need to display my work to potential clients and employers. Through my personal portfolio I can present the quality of my projects where the code and deployed versions are available.
Employers and clients can easily navigate my portfolio where they can go from my profile through my education & skills to my contact details. They can also read the description of the projects as well as viewing the technology applied in the Technology Used paragraph or cickling on the github button.
At the end of the portfolio viewers can contact me by sending me a direct message through the form or by clicking on the phone or email links provided. Furthermore, my CV is downloadable from my contact details section.
I have used standard code style.
Built with
- CSS3
- HTML5
- Bootstrap 4
I deployed my portfolio on GitHub Pages. I first created a repository on GitHub, and then added, commited and pushed the files and changes corresponding the project. To deploy:
- Go to settings.
- Head to the GitHub Pages section.
- Select the master branch
- Enter the custom domain.
(https://www.jeandeveloper.com/)
Testing was executed manually to ensure the website's responsiveness and funcionality work correctly. The site was tested on a 23.8" monitor and 13.3" MacBook Air, iphone X and ipad Pro. It was also tested on Firefox, Chrome and Safari. I ensured Images and overall layout are responsive as well as links and buttons work effectively.
Transformation function to move element in 3d. (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d)
How to make a DIV element fill the browser window. (https://snippets.aktagon.com/snippets/291-how-to-make-a-div-element-fill-the-browser-window)
Animated loop background image example. (https://codepen.io/subz/pen/GgPrJP)
- Images obtained from Shutterstock and Pexels.com
- Icons from Fontawesome.com
- Font from fonts.google.com