mboladop / Static-project-stream1-portfolio

This is an Portfolio website for a software developer to keep potential employers and collaborators informed. It also creates a way of contacting easily with the portfolio owner. Used: HTML CSS BS resume

Software Developer Portfolio

Overview

What is this website for?

This is an Portfolio website for a software developer to keep potential employers and collaborators informed.

What does it do?

This website creates a way of contacting easily with the portfolio owner. In this case, the portfolio includes ongoing reflection about learning activities, progress, and accomplishments. Portfolios are most effective when they are used to evaluate the owners learning progress and achievements.

How does it work

This website uses HTML5, CSS3 and JS/jQueryto route viewers through the site. The site is styled with Bootstrap.The site can be viewed HERE

Features

Existing Features

• Eye catching Landing page
  • Sliding jumbotrons, a 3D carousel and a typer script.
• Information page.
  • Sidebar to navigate to different parts of the information
• Links page to a pdf with information about the portfolio owner and a pop-up contact form (fully html and css).
• Github, LinkedIn and contact-form pop-up for viewers to contact and access valuable information easily.
  • Form for viewers to input their job/collaboration offers or further requests.
  • Quick visual display of skills.
• Available in two different languages, EN/ES.

Features Left to Implement

• Blog section.

Technologies Used

• HTML5 and CSS3, JS/jQuery
  • Base languages used to create website
• Bootstrap
  • We use Bootstrap to give our project a simple, responsive layout
• Fontawesome
  • We use Fontawesome to give our project the icons.
• Google Fonts
  • We use Google Fonts to give our project the fonts.
• Formspree
  • We use Formspree to be able to send email through the contact form directly.

Testing

• All code used on the site has been tested to ensure everything is working as expected
• Site viewed and tested in the following browsers:
  • Google Chrome
  • Safari
• Site viewed and tested in the following devices:
  • Iphone 7plus
  • Iphone x
  • Ipad
  • Macbook 13" and 15"
  • Samsung Galaxy

-ES/ENG version: * Click on the "ES/ENG" link on the navbar. * Check the version language chosen displays in the same tab. -CV: * Click on the "CV” link on thenavbar. * Check PDF displays in a different tab. -Contact form: * Click on the "Contact" link on the navbar. * Try to submit the empty form and verify that an error message about the required fields appears. * Try to submit the form with an invalid email address and verify that a relevant error message appears. * Try to submit the form with all inputs valid and verify that a success message appears.

How the project looks and works on different browsers and screen sizes:

BUGS:

Testing in different devices i started using the console toggle device toolbar, to fix and scale the website for all the different screens. After doing this I realised that the display was all over the place for Iphone. This made me create a specific and new version for mobile. For this purpose I downloaded Xcode simulator and served the website via npm package serve to be able to access remotely through my Iphone.(Incompatibility of bg-attachment fixed with mobile devices).

Deployment

1. Navigate to the repository where you're setting up your deployments.
2. Under your repository name, click Settings.
3. Go to GitHub Pages section.
4. Click and choose master branch.
5. Click save.

Contributing

Getting the code up and running

1. Firstly you will need to clone this repository by running the git clone <project's Github URL> command.
2. After you've done that you'll need to make sure that you have npm installed. Link npm package serve
3. The project will now run locally.
4. Make changes to the code and if you think it belongs in here then just submit a pull request.

Media

• The photos used in this site were obtained from Pexels
• The animated Gifs of the different projects from the Giphy Capture App