User Centric Frontend Milestone Project - Resume

This is my first Milestone Project at Codeinstitute for the User Centric Front End and I chose to make a responsive Resume Website. The reason why I've chosen to make a responsive Resume is because I would like to have my own website with my resume on it so employers can see what I am able to do.

My Resume website has four sites a landing, about, work and contact page.

UX

I put my first idea on paper in form of a mockup but I quickly moved over to Adobe XD to create a design. XD is ideal to create designs because you can create it as it would look like on the Website. If you would have a customer you could share your link to display them how it would look like and you could to adjustments before you start to code.

I included a link to my desing here AdobeXD Design

I included a screenshot in the misc folder called adobeXD-design.pdf

Features

• The Landing Page provides a list of social media links and a photo as a background an info boxes as overviews.The Social section and the Footer section are on every site the same for easy access to information and a download CV link.
• On the About Page you have a Bio with a short description and a Front End and Back End section to describe what I can do on both site's.
• The Work Page is where all the projects are for employers to explore. It is empty at the moment so I left the GitHub button in the code with a hashtag to fill it in by the time I will have a project to display.
• On the Contact Page is a responsive form to ask for information. At the moment this is pointing to http://formdump.codeinstitute.net for testing purpose.
• I used a simple-cv.pdf in the footer from Codeinstitute until my own is ready to be published.

Technologies Used

This Resume website is build with HTML and CSS without any custome Javascript. The Framework I used is Bootstrap 4.4.1 to simplify the responsive behaviour in particular the responsive grid system and Fontawesome for the icons. I used the CDN for better performance instead of a local file.

Testing

I tested the Resume Website with the Chrome Webdeveloper tools and in addition I pushed it to my Github repository and used GitHub Pages to view and test the website on my phone. For the form on the contact page I used the \formdump.codeinstitute.net\ to make sure every field is correct.

Deployment

I developed the Resume website on Gitpod which made the deployment to GitHub very easy. With Gitpod you have to make a GitHub repository and you can deploy it by using git push. On GitHub you can use GitHub pages by choosing settings and then GitHub Pages and the Branch you would like to publish

Credits

Content

• I got inspired and modified text from James Browning and Jeremy Hickmann.

Media

• The map-brighton photo was copied from OpenStreetMap which is a open source software and free to use.
• I made the comingSoon.png with Adobe Illustrator which is a great software to build vector graphics.
• The sample-cv.pdf is from the Codeinstitute tutorials which is a awesome school to learn to code.
• Both photos the computer background and the portrait are my own pictures.
• I used StackOverflow for any coding questions.

Acknowledgements

• I got a lot of inspiration for this project from Brad Traversy for the design as well as for the code. Brad does a lot of free tutorials and he is one of my favorite coder to follow.