Landing-Page

Project Description

User Story: As an employer, I want to view a potential employee's deployed portfolio of work samples so that I can review samples of their work and assess whether they're a good candidate for an open position.

Acceptance Criteria: Given a potential employee's previous work, when I load their portfolio, I am presented with the developer's name, a recent photo or avatar, and links to sections about them, their work, and how to contact them. When I click one of the links in the navigation, the UI scrolls to the corresponding section. When I click on the link to the section about their work, the UI scrolls to a section with titled images of the developer's applications. When I am presented with the developer's first application, that application's image should be larger in size than the others. When I click on the images of the applications, I am taken to that deployed application. When I resize the page or view the site on various screens and devices, I am presented with a responsive layout that adapts to my viewport

This project challenged me to work with flexbox layouts and stress how to use them to my advantage. I learned quite a bit on how multiple layers of flexboxes interact with each other. I spent a significant amount of time getting the header and footer to be accurately positioned whenever the webpage was resized. The combination of pseudo classes and elements added depth to the website providing display options I hadn't considered previously (hovering, flexboxes in the pseudo elemets, etc.). I really enjoyed the challenged of creating a website from scratch and challenging my knowledge and understanding of advanced CSS elements.

Installation

There is nothing to install with this project. To see the final product, please visit this webpage: https://pbp66.github.io/landing-page/

Usage

Using the link above, view the website and use developer tools to explore the structure and styles of the website. The About Me and Portfolio navigation items will navigate on the main page. The Contact Me navigation item will take you to a form to fill out. Lastly, you can click my profile picture to be redirected to the home page.

Screenshot of James Perry's Portfolio Site

Credits

W3 Schools and StackOverflow were used to explore and learn about HTML elements not covered in class.

I looked at https://coreyms.com/ for inspiration when creating my portfolio site.

Here is the source for my reset.css file: http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)

License

MIT License Copyright (c) 2022

How to Contribute

If you find a bug on my site or have a suggestion, please create an issue on the repo, or use my contact form on the website!