/myportfolio

A little info about myself

Primary LanguageHTML

Your Project Title

My portfolio Project

Description

This is my portfolio framework for showcasing my work.

Being the anxiety driven individual that I am, I started on the project way to early and ended up going down a lot of frustrating rabbit holes teaching myself code that we hadnt covered yet in class. On the flip side, it made learning it in class a lot easier since I had already fumbled through a lot of the topics on my own.

I ended up doing a lot of Google Foo, taking snipits of code and testing them out in my project, and just trying a lot of suggestions made by visual studio code to see how the elements would react, and ultimately refined my product into the end result.

Im not 100% on what the reset does other than just optimizing for multiple browsers but adding it fixed many of the problems i was seeing and gave me a path forward to a solution.

I found some navigation button code that i liked but ultimately discarded because 1) i want to sit down and understand it more before implementing it and 2) I wanted to focus on testing the limits of the core of the project.

below are the criterea for this project:

Instructions

  • Create a new GitHub repository, initialize it with a README.md , and clone it to your local development environment.

    • ❗ Follow best practices for your README as outlined in the Good-README-Guide

  • Inside the repo folder on your computer, create the following:

    • 3 HTML documents: index.html, contact.html, and portfolio.html.

    • A folder called assets.

    • Inside the assets directory, make two additional folders: css and images.

      • In the css folder, make a file called style.css.

      • In the images folder, save the images you plan on using (like your profile image and the placeholder images for the portfolio).

  • Refer to these screenshots for your site:

    Portfolio About

    Portfolio Contact

    Portfolio Gallery

  • IMPORTANT Your site's layout must match the designs in these screenshots. You'll find the specs for these designs below.

  • When you create a website, it's standard practice to code your HTML files before writing any CSS and to complete one HTML file before moving onto the next. Write your HTML semantically too:

    • If something is a heading, use a heading element.
    • If something is a list, use an unordered or ordered list element.

  • The content in index.html should be unique to you in the following ways:

    • Write a paragraph or two about yourself. Make it fun; show your personality!
    • The main logo where it says "Your Name" should say your name. This may make the logo section smaller or wider depending on how long your name is—that is fine and expected.

  • After all of your HTML is written, you can begin styling your pages using the style.css file you created.

    • Be sure to validate your html.
    • Consult the following Style Guide section for advice on styling your CSS files.

Style Guide

  • Colors (Pro Tip: Use the Eye Dropper Chrome extension to find the colors that are used on webpages.)

    • Teal color (used for headings and backgrounds): #4aaaa5
    • Regular font color (used for paragraphs and all text besides the headings): #777777
    • Main header background color: #ffffff
    • Main header border color: #cccccc
    • Footer background color: #666666
    • Main content background color: #ffffff
    • Main content border color: #dddddd

  • Fonts:

    • For heading fonts use font-family: 'Georgia', Times, 'Times New Roman', serif;
    • For all other fonts use 'Arial', 'Helvetica Neue', Helvetica, sans-serif;

  • Profile image in index.html:

    • Use a picture of yourself.

  • Portfolio images:

    • Save the images to your images folder.

  • Background images:

    • The background pattern used was found on Subtle Patterns. You can browse through that site and use whichever pattern you like.

  • Dimensions:

    • The entire content and the main section content area is 960px wide.

    Recommended Dimensions

  • Make a "sticky footer." You will notice that the dark gray footer will always rest just below the content. This is fine whenever your site has enough content to push it down past the height of most monitors. But if there isn't much content in the body, the footer could rest in the middle of the page:

    • Try to code the footer in a way that it will always remain at the bottom of the page, no matter how short the content is. Refer to this sticky footer tutorial for guidance.
    • Give the footer the following CSS: border-top: 8px solid #4aaaa5;