Giter VIP home page Giter VIP logo

milestone-project-1---personal-portfolio-website's Introduction

Milestone-Project-1---Personal-Portfolio-Website

This ia a link to the live Portfolio Website: Live Version

Reynold's Portfolio Website

Preview Screenshots

  1. Home:

  1. Contact:

  1. Game:

  1. Social Media Platform:

  1. Store:

  1. About:

Description

This website is a portfolio of my web dev projects. The user is provided with an easy-to-use example of my skill as a developer, also there is easily identifiable contact details and links to my professional social media profiles.

UX

Project Goals

To create a clean and simple way to display my portfolio of work to potential employers.

User Stories

Potential Employers want:

  1. To quickly be able to find my past projects.
  2. To quickly find information about my past education.
  3. To quickly and easily find information to contact me.
  4. To get a feel for my work capabilities and personality.

Design Choices

  • Font: I chose "Nova Mono" due to it being easy to read yet stylish, fun and professional at the same time.

  • Icons: I used icons to improve useability and to keep the site clean.

  • Colours: I found a soft blue to look friendly, welcoming and professional. The lightness of the colour worked well at providing contrast for the black text underneath and the white background.

  • Styling: The use of cards to display the projects made them easy to navigate and apparent when viewing the homepage. The use of a rounded profile image was use to show my face in a friendly way. The fixed navbar was used to improve visibility on smaller screens. I decided on not including a footer as it would not come accross as friendly as I would of liked.

Wireframes

  1. Home:

  1. About & Projects:

  1. Contact Page:

Programming Languages and Frameworks

  • HTML 5
  • CSS
  • Bootstrap

Media

Referenced Code

Testing

I tested all the code through the validators and performance testers making the suggested changes until the project was run successfully.

The code was test on various screen sizes to ensure usability on many different devices.

All features were tested manually to ensure user functionality.

All pages of this project were sucessfully ran through these two validators:

All pages of this project were sucessfully ran through this Performance Tester:

Deployment

This project was developed using the Gitpod IDE environment, Git was used for version control and to push to the main branch at Github.

Deploying a Github Pages Hosted Version

To deploy this project from the project's Respository follow these steps:

  1. Log into Github.
  2. From the list of repositories on the screen, select R-Mack/Milestone-Project-1---Personal-Portfolio-Website.
  3. From the menu items near the top of the page, select Settings.
  4. Scroll down to the GitHub Pages section.
  5. Under Source click the drop-down menu labelled None and select Master Branch
  6. On selecting Master Branch the page is automatically refreshed, the website is now deployed.
  7. Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.

Using Gitpod:

  1. A Github account. Create a Github account here
  2. A Chrome based browser is recommended.
  3. Install the Gitpod Browser Extentions for Chrome
  4. After installation, restart the browser.
  5. Log into Gitpod with your gitpod account.
  6. Navigate to the Project GitHub repository
  7. Click the "Gitpod" button in the top right corner of the respository.
  8. This will initiate a local gitpod workspace.

Using a Local IDE:

  1. Follow this link to the Project GitHub repository.
  2. Under the repository name, click "Clone or download".
  3. In the Clone with HTTPs section, copy the clone URL for the repository.
  4. In your local IDE open the terminal.
  5. Change the current working directory to a required location.
  6. Type "git clone", and then paste the repository URL.
  7. Press Enter. Your local clone will be created.

Cloning

  1. Follow this link to the Project GitHub repository.
  2. Under the repository name, click "Clone or download".
  3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
  4. Open Git Bash
  5. Change the current working directory to the location where you want the cloned directory to be made.
  6. Type "git clone", and then paste the URL you copied in Step 3.
  7. Press Enter. Your local clone will be created.

Forking

  1. Follow this link to the Project GitHub repository.
  2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
  3. You should now have a copy of the original repository in your GitHub account.

Contact

Email: [email protected] Linkedin: https://www.linkedin.com/

Acknowledgments

Disclaimer

The content of this Website is for personal purposes only.

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.