1
Josh Anderson
April 26, 2013
WRA 210 Portfolio Reflection
Building my portfolio for WRA 210 has been a very worthwhile and beneficial project, as
it has taught me much about the way websites are created and maintained. I previously had
some experience managing websites, but it was always through content creation on a premade Wordpress template. This is the first time I had delved deep into HTML and CSS and truly
started from scratch.
As my initial site map shows, I never intended my portfolio website to be too incredibly
expansive. I feel that a portfolio should be just that; a portfolio, not some blog/portfolio hybrid.
I have nothing against blogs; in fact, one of my portfolio pieces is a link to a blog I maintain.
However, when perusing some of the websites designed by other students in the initial stages
of this project, I found that the personal details revealed in blog posts ruin the professional
tone that a portfolio requires. I remember one website in particular that was by far the best
designed I had seen, but the actual portfolio and résumé themselves were buried beneath a
mountain of personal musings on the student’s previous boyfriend.
With my desire to create a simple portfolio in mind, I got to work drawing my first rough
design sketches. In these 4 pictures, the first glimpses of my final design can definitely be seen,
but there are several noticeable differences from the actual finished project. For starters, all of
my rough sketches indicate a space at the top of the webpage reserved for a “Portfolio pic,”
which might have been either a picture of me or my name and contact info written in a fancy
2
script. The idea of a header image was eventually scrapped, but the three “buttons” seated just
below the place where the header image was supposed to reside remain. These three buttons,
which are links to my portfolio’s most significant pages (“About,” “Résumé,” and “Portfolio”)
ended up functioning as the closest thing to a header on my final website; they show up on
every page, and they are placed above and separate from the main content of each page.
My hand-drawn design sketches also include a footer. There is, in fact, a footer on my
final site, but it is not separated into three distinct columns as it is on the sketches. The columns
were axed once I realized that I didn’t really have all that much to say in the footer. My name,
email, and social media contacts could all easily fit on one side, so I decided to go with the lesscluttered design of having no columns at all.
Some of the alignment of headers and images in the sketches is different from the final
site, but those are minor alterations made with no deep reasoning behind them. The home
page, on the other hand, is a rather significant cut from my original plans. I had intended for my
portfolio’s welcome page to be a rectangle split into four sections at odd, stylish angles. The
four sections would be “Résumé,” “Portfolio,” “About,” and “Contact.”
The idea for the home page persisted into my next stage of designs, the wireframes. (On
the wireframed home page, however, the odd separating angles were replaced with simple,
straight lines, due to me not being able to figure out how to make said odd angles on the
wireframe design software.)
3
The wireframes contain mostly the same ideas as the original sketches, with the number
of header buttons being temporarily extended from three to five as one of the only notable
exceptions.
When I took to Photoshop to make the designs, I was able to add a color scheme to my
website. This was my first time using Photoshop, and with some trial and error I was able to
make my site background a dark turquoise, my content background a light gray, my footer a
slightly darker gray, and my header buttons alternating shades of blue.
My first Photoshop designs had giant social media icons on the right side of the footer,
but that was to change after bringing my work to class for feedback and discussion. After
showing my designs to some classmates, I was told I should have my name on every page of the
website. I agreed, and decided to take everything I would have reserved for the “Contact” page
and instead place it in the footer so it would appear on the entirety of my portfolio. The social
media icons were accordingly resized and repositioned so that they could fit underneath my
name and email address.
I had been a little anxious approaching the stage where I would have to actually code
my website to look like my designs, but I was surprised at how extremely similar I, a beginner,
could shape my site to look like the Photoshop mockups using only HTML and CSS. I thank the
several very helpful tutorials on the internet for beginners in coding.
After a few weeks of tinkering with my site, I decided I wasn’t impressed with the solid
colors that made up the various backgrounds. I thought they looked amateurish, and although I
in a sense was an amateur, I certainly didn’t want to betray that fact through my designs.
4
A major breakthrough was when I swapped out my single-color blue background for an
image of a dark gray wooden floor. I then proceeded to add opacity to my header buttons and
footer. I made sure to have the background image repeat itself infinitely, so as to be prepared
for a computer screen of any size. I remember seeing one student’s portfolio on an abnormally
large screen, and his background image was surrounded by a solid color that completely
clashed with his image. I made sure to be prepared where that student hadn’t been.
The most difficult hurdle I had to cross with my coding was that of the “Porfolio” page,
where I show three thumbnails representing the pieces I am showcasing. I came across a
tutorial online that showed how to add an animated color tint that appeared over images when
one places their mouse over them. Getting the tint to work wasn’t too hard, but for some
reason it put a massive space between each image (as well as demolishing my footer), and my
site looked like an utter mess as a result. I had to learn new CSS functions to slowly piece
together the broken sections. The “relative position” function helped me quite a bit.
I also toyed with the idea of including a Twitter feed in my footer, but this gave me a
host of problems. The official widget from Twitter wasn’t able to be resized the way I wanted it
to be, and a third party widget I found afterward created bizarre problems where some footer
links would stop working with no explanation at all. I ultimately got rid of the Twitter feed both
because I was frustrated with the problems it gave me and because I decided I would rather
keep my personal tweets out of sight. I was able to shorten the size of the footer as a result of
having no giant Twitter widget to worry about.
5
I ended up removing my Facebook button from the footer as well, upon discovering that
clicking it lead to nowhere since my Facebook page is set to “private.” I had the choice between
opening up my personal life to portfolio viewers or deleting the icon. Thus, the icon was
removed.
Over time, maintaining this website will be a matter of uploading a new résumé and
swapping out portfolio pieces. It shouldn’t be too difficult unless I choose to display a different
number of portfolio items than three. In that case, I will have to mess with the CSS positioning
again. All in all though, I’m proud of my final product and happy that this class was able to
provide me with new technical coding skills. They will certainly come in handy for all my future
web-related endeavors.