You are here

Gidget's Digital Identity

This final project really encompassed our work over the entire semester, especially placing the emphasis on the "digital" in "Writing through Digital Media". It really required a lot of thought to come up with a product that effectively translated myself and my work into a cohesive digital identity. I wanted it to be a reflection of myself, which I hope is evident in the mix between its simplistic appearance but thoughtful content. The portfolio had to showcase my work, as well as showcase itself as my own work as well. I hope that I have created such a webpage with my VERY limited CSS skill set. Before this class, I had no inkling as to the complexity of the coding behind every webpage I visit. While I learned that coding definitely is not a personal strength, I do feel that I gained a better understanding of how the digital world has various layers of meaning and messages to communicate. My portfolio was a labor of love, not for CSS, but for overcoming challenges and communicating my other strengths in a public environment. I think that I have created a portfolio that successfully displays my other works to the audience, but hopefully the creativity and thought in the design will show through as well. The primary audience of my website could really be anyone, it isn't specified to a certain field like photography or journalism, but it does have a draw for viewers looking for a human interest piece. I feel that my portfolio was less of a professional resume per se, but rather a resume of my hobbies and other offbeat skills. If I were reading my website as an employer, I would consider it a display of creativity and ability to adapt to different environments to fill a need. I definitely would not see anything worrisome about the creator as a possible employee, so logically, the inferences I would make from this website would encourage me to hire the creator. I am pleased with the finished product overall, I feel that I strove to reach my limited CSS potential and am glad that it came together as a presentable webpage.

Homepage Screenshot: 
Design Process: 

I wanted to create a clean and easy to navigate page, but rather than writing my own CSS from scratch, I decided to modify an existing theme. The theme was "Batavia 1.5" by Jose Mulia because it's simple layout made it a good canvas to customize. I'm a fairly simple person, so I wanted my website to reflect that in it's appearance and layout. I chose a simple four color scheme that created visualize interest by contrasting vibrant oranges and greens with warmer tones of brown. The goal was to draw the attention of the reader, not blind them! I kept the background pattern simple and repetitive to move the eye along the page, as well as throw a little bit of my identity into it as well. Carrots are one of my favorite foods, and I happen to be a carrot top, therefore the background pattern was highly appropriate. I've created a short list of my CSS changes below:
1. BODY { BACKGROUND-IMAGE: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/1002/1002293.png);
BACKGROUND-REPEAT: repeat; } --> This inserted my carrot background to create visual interest and display a part of my real-life identity digitally.
2. #header {BACKGROUND-COLOR: #80C700; } --> This changed the header color to fit my color scheme.
3. #footer {BACKGROUND-COLOR: #80C700; } --> This changed the footer color to fit my color scheme.
4. #header a {COLOR: #F07600;} --> This changed the title color to create contrast.
5. H2 A:hover {COLOR: #FF7E00; } --> This changed the color of my headings when the pointer hovers over them to orange for a striking contrast.
6. .description {FONT-SIZE: 1.8em;} -->This changed the size of my font to make it...readable.
7. #content {FONT-SIZE: 1.5em;} --> This changed the size of my font to make it...readable.
8. BODY {FONT-FAMILY: MV Boli, MV Boli, "times New Roman", Times, Serif;} --> This changed the font to a simple, easy to read font, coincidentally I thought it eerily resembled my handwriting.
9. #page {WIDTH: 800px;} --> This increased the width of my content box.
11. #footer {WIDTH: 800px;} -->This increased the width of my footer to correspond with the content box.
12. #page {BACKGROUND-COLOR: #E1E076;} -->This changed the page color to create contrast.

User login