Please visit my completed webpage at: https://dvicj.github.io/My-Portfolio/

How it started:

How it's going:

Hello, and welcome to my README! This is for my Week 2 Challenge, which was to create a personal portfolio website. I learned a lot while doing this, and I am happy to be able to share my experience with you.

It was my job to ensure my portfolio website had the following capabilities:

- includes: my name, a photo of me, links and information about me

- links that, when clicked, scroll to the corresponding section

-titled images of all my previous work (and placeholder images) with different sizes. When clicked these images will take the user to the deployed application (or an error page!)

- a responsive layout that adapts to different screen sizes

I was to create this portfolio, and meet all of the requirements listed above, by using:

- HTML
- CSS 
   - flexbox
   - CSS grid
   - media queries 
   - CSS variables
- bonus: 
   - pseudo-elements
   - pseudo-classes 

I am working on this project because a portfolio website with examples of my work will be extremely important in securing possible employment.

It is important that I am able to showcase what I can do in an interactive and meaningful way.

Features:

• Installation
• Usage
• Credits
• Learning
• License

There is no installation required. All files must remain in the position in which they are saved to ensure that all links, styles and photos function properly.

Below are examples of the links for the CSS style sheet and the images used in this webpage.

Here are some user experience highlights from my page:

- navigation links scroll to corresponding section when clicked 
- navigation link for "resume" opens up a new webpage
- link icons at the bottom of the webpage open up all my social media/ networking sites in another tab
- in Desktop mode, all of the images are opaque until they are hovered over. Hovering over the images from the "My Work" section will reveal a tooltip with the title of the project
- responsive web design - elements of the page grow/ shrink and switch position depending on the screen size used to view the website. 

These are some sources I used to help me along:

• emojipedia.org

• CSS Grid Layout

• Responsive Web Design

• CSS Flexbox

• Font Awesome

Here are the highlights of what I learned and issues I had while writing this code.

1. It took me FOREVER to understand flexbox containers and items, and what properties can be assigned to each. I may have bitten off more than I could chew at the beginning and made things needlessly complicated for myself. I feel like I have a much better understanding of how flexboxes work now.

2. It took me LONGER THAN FOREVER to understand CSS Grid Layout. I am a very visual person, and trying to understand the grid layout just in my head was extremely confusing and led to a lot of frustration. I will always be drawing out my grids from now on.

3. Using pseudo elements and classes is a lot of fun. It's like an extra level of customization outside of the regular customization of CSS.

4. How important divs are and making sure that you have everything in the proper containers.

Below are some images of the drawings I did when planning my portfolio out. Quite a few things changed from my original ideas, but I found the drawings extremely helpful in planning out my HTML and CSS.

MIT License

Copyright (c) 2020 Devin Jones

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.