Picture of Kelly

Hi, I'm Kelly!

This is Project 1.

Project 1: Customize Your Profile Page

Project Before & After

Project Requirements

This project needed me to include:

  1. index file
  2. CSS file
  3. a second HTML file that is linked in the navigation
  4. a new profile image
  5. a new cover image

I also needed to make sure my code was valid, using an HTML and CSS validator service.

Extra Credit Requirements

The requirements needed to exceed expectations were:

  1. add at least one new page and link it in the navigation
  2. change at least one of the CSS styling properties on the profile picture
  3. add at least one additional image to the page
  4. add additional content
  5. update the tags for the navigation and content sections to be more semantic

Files Provided

I was provided with a ZIP file containing: the index file, the stylesheet, and select images (profile, cover, plus social media SVGs).

I needed to modify these files with my own HTML and CSS.

What I Planned

I knew when I looked over the project requirements that this would be easy for me. It is no different from what I've been doing for years: playing around with HTML and CSS.

I knew I wanted to exceed expectations. In fact, if I didn't exceed expectations, I would be disappointed with myself! I am not like that with all things, but in this case, I was confident I could hit all requirements.

My plan was to:

  1. remove all gimmicky effects from the page
  2. change the alignment of the profile image with the text via CSS flexbox
  3. change the content sections' alignment
  4. change the color scheme to something more harmonious and pleasant
  5. change the "experience" link to "résumé"
  6. create a portfolio page for all my class projects, including a gallery and extra information
  7. create an "other projects" page
  8. Update all texts and links to be more accessibility-friendly

What I Did

I removed all gimmicky effects from the page. Namely, there had been a transformation effect on the profile picture and the content sections had a single border that would change color when you hovered over them that I removed. I thought both of those effects were great for showing what CSS could do, however, they had no place in my profile.

I changed the direction of both the profile image and the content. I just needed to switch the direction of the flexbox for the content. For the profile image, I created a flexbox. Previously, the profile image sat on top of the text. I wanted them to be side-by-side unless on mobile. I also made the font-size larger.

I eventually updated my profile image and text to have an animation effect on it. While I think this is a gimmicky effect itself, it looks better (to me) than a slight transformation or a color-changing hover.

The original color scheme was all over the place to me, but I think that mostly had to do with the fact the sample profile image was Nyancat with its pink poptart, rainbow colors, and dark blue backdrop. I felt it created an ugly-looking page with the rest of the colors: black for the navigation, cream for the background, blue/orange for describing one's skill set and the beautiful black & white photo for the cover image.

I decided to emulate the cover image of the sample with an image of my own. The backdrop of the city buildings is something I took myself while at a bus stop. I simply changed it into black & white in Affinity Photo (my preferred photo editor when I am at home) and played around with a couple settings to make it look like a high-quality black & white photo. I also changed the profile image photo of myself into black & white to go with the color scheme. Unforunately, the navigation bar didn't look too nice with the images, so I ended up changing that from black to white.

Following the navigation bar, I decided to change my color scheme to grayscale with accents of green. This included updating the SVG graphics for Twitter, Linkedin, and GitHub in Affinity Designer (my preferred vector editor when I'm at home).

I changed the "Experience" link in the navigation bar to "Résumé" and added two more pages: Portfolio and Other Projects.

For the résumé page, I added two sections: skills and education. I only added relevant skills and education, including being currently enrolled in Treehouse's techdegree program. I also added a "basic" label to some of the skills and added an explanation of what "basic" means. I wanted to make sure I put down skills I can offer, but I do not want to give off false impressions that I am an expert in these programs.

For the portfolio page, I decided to create a mini gallery for the class projects that you could click on and be taken to a separate page that gave you more detail. I added a drop-shadow to each "card" in the gallery when you hover over them to distguish what you can click on and what you can't.

The last page I created was the Other Projects page. I wanted to create a page dedicated to other projects I was working on that I felt did not have a place in my portfolio, but still provided a great example of my skillset. My upcoming online archive, TrainerKelly's Network, and my husband's YouTube channel, Hurricane500000 were the only two listed. I do a lot of illustrations for both of them, so they both show my ability to use image editors and in my husband's YouTube channel's case, follow directions. TrainerKelly's Network is great if you want to see how I code completely from scratch.

I made sure all my text was accessibility-friendly, including the text in the header. Both the text in the header and the link text gave me trouble when I checked the colors using the accessibility tools in Firefox. After playing around with them for some time, I eventually got them to work.

Final Grade

Checkmark Exceeds Expectations!

Picture of grade

Gallery

Original File V.S. My Changes
Project 1 had me tweak the HTML and CSS of a pre-coded page.

I changed the color scheme to better reflect who I am and (hopefully) to be more pleasing to the eye.

I'm very happy with how this project came out.
Website for MAKE ME A MODEL!, one of my comics
The bottom half of the Project 1 with the footer.