Giter VIP home page Giter VIP logo

monanorremo-ms1's Introduction

Personal Portfolio of Mona Norremo

devices image

My Personal Portfolio is a Milestone Project created for the "User Centric Front-end Development" module of my FullStack Software Development Course offered by Code Institute.

UX

This Resume portfolio is an online web application designed for users with interest in getting to know who I am. The user can:

  • Look at my resume
  • See my creativity
  • Contact me
  • Hear a little of who I am
  • I can present myself in best light and get hired

The site is for recruiters to consider me as an applicant and hire me.

Demo

View the site here: GitHub

Features

The page is fully responsive to all screen-sizes. As the user first comes on the site they will get a warm Hello. The recruiter will smile back at the screen where they are greeted by my profile picture. The page is set up as one page where you scroll down to different segments. Or if you choose you can jump to a section by clicking on the sticky-top navbar. In the profile section 3 different projects are presented with links and short presentation. In the about section is a brief presentation of myself and a link to my resume. In the contact is a very visible email which conveniently opens a new email when clicked on. If you cannot send an email you can easily send a message in contact form. In the footer I invite the recruiter to join me in my social media presence.

A feature that will be implemented in the future, is a link in the about section which leads to a page with my qualifications and skills listed. As well as some more personal interests and experiences.

Wireframe

View the wireframe here: wireframe

Technologies Used

  1. HTML5 - used as the base for markup text.
  2. CSS3 - used as the base for cascading styles.
  3. GitHub - is a Web-based hosting service for version control using Git.
  4. Chrome Developer Tools - is a set of web developer tools built directly into the Google Chrome browser.
  5. FontAwesome - used for various icons in the navbar ,modal and footer.
  6. Google Fonts - used for the 2 fonts used: Playfair and Raleway.
  7. Bootstrap 4 - is a framework for building responsive, mobile-first websites.

Testing

The site has been tested manually throughout the process of building the webpage. NavBar testing, I tested to see that everything worked. When you click on the specific sections in the Navbar you jump to either, Home, Portfolio, About or Contact. When you click on Resume you are transferred to a new tab with my resume as a PDF file. In the About section you can click on a button which sends you to the PDF in a new window, it works appropriately. Email contact is working correctly and opens up a new email from your email server. The modal pops up when you click on it, but because the site is static it doesn't actually function.

Online validators used and the site is approved for HTML and CSS:

HTML

CSS

I have gone to great length to ensure that all the aspects of the site works in all screen sizes and also vertically and horizontally. The site reacts correctly in different browsers such as Chrome, Firefox, Safari, Internet Explorer.

Deployment

I managed the deployment through Github Pages, which updates after new commits are made. Github Pages is directly linked with the master branch and updates seamlessly with new changes and commits made. When I first created my repository I went to the settings page in Github, there there is a section for Github pages. In this section I set up my Github page for this repository adding the master branch as source. For a local run, I would clone this repo in the terminal git clone and use commands git commit and git push to get updated version of my site.

Credits

Content

All content is original content and in my own words.

Media

Images are borrowed for the portfolio, Whiskey and Love Running are Code Institute projects. Hagabageri is borrowed from the bakery's website, Hagabageri.

Aknowledgements

The layout of my resume webpage is inspired by several different sites because of the popularity of this layout at the moment. One in particular has inspired with the modified photo in the header and layout of the different sections. Daniel Autry. The layout has inspired but the code has been unique in the sense that it has not been copied from other resume sites, rather I have used elements from various projects and lessons from Code Institue. When I have needed guidance I have referred to W3C, Bootstrap, Youtube tutorials. The modal form is borrowed from mdbootsrap and modified to suit the layout of my webpage.

I received inspiration for this project from Code Institute - Project Ideas in the Student Assessment Handbook.

monanorremo-ms1's People

Contributors

monanorremo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.