New Media 13.2 / Building Your Professional Web Portfolio

Over the next few weeks, I will dedicate class time to working with Squarespace to build your final project, the Professional Web Portfolio. This portfolio will showcase your best work from all of the classes you have taken as a part of this major.

We will spend time today looking at portfolios of professional writers, designers, and academics so that you get a sense of the range of possibilities for developing a portfolio. We want to get a sense of the genre. Often times, a portfolio–like the clothing we wear–is a highly rhetorical and stylized method for telling someone who we want to be and how we want to be perceived. In short, it is an opportunity for distinction. Everyone who graduates has a degree, but not everyone has a website that speaks to their proficiency as a writer, designer, and person.

There are some requirements for the project:

  • First, it must construct sensible categories for organizing projects. This probably shouldn’t be by class.
  • Second, the portfolio section should provide brief BUT MEANINGFUL commentary on the project. In short, explain to your audience (potential employers, graduate or law school admissions committees, etc.) what this project tells us about you and your abilities. Learn to develop language for talking about your work.
  • Third, even if it is just a paper, include an image, not just a link. For boring old papers, you can take a screen cast of a page or even a hyper-magnified portion of a page since that looks cool. I expect to be able to look at/read all the pieces in your portfolio. And don’t be afraid to include group projects.
  • Fourth, at some point you must customize the design of your site by editing the CSS. Don’t freak out, I’ll help ease you into this in class.

What is a Web Portfolio?

Let’s start there, looking at the sites of

Now, these people are all professional academics. They are constructing a portfolio for an academic audience. A professional portfolio will be different, but we can still learn something from these.

I want to pay particular attention to the navigation menu on these sites. When you are designing your portfolio, I would guess you would need the following tabs:

  • Home
  • About (?)
  • Resume
  • Print Works
  • Digital Works
  • Contact (?)
  • Coursework (?)

You have some decisions here: do you want to have a splash page as your homepage? Or will the homepage contain a brief bio and contact information?

I also want you to notice how well these sites use images *and* text to frame projects (this is something I know I need to do more of on my own site). When you start putting your portfolio together, think about how you can use images as links to projects (for instance, taking a screen capture of a Word doc and then transforming it into a thumbnail).

Even though some of the sites above are constructed in html & css, there’s no reason we can’t echo some of the design principles in our CMS.

One of the first things you will need for this project is to complete a resume. It can take a lot of design work to get a nice resume, but we want to start by framing the content. Here’s an example we can use for inventive purposes.

Customizing Your Site Design In Square Space

Squarespace provides some documentation for customizing your site design. I want us to get a sense for how to insert a background image. Of course, we are all using different templates, so this will be a bit different for each of us.

It should be helpful to know the basic CSS command for inserting a background-image:


body
{
background-image:url('paper.gif');
background-color:#cccccc;
}

Of course, we probably won’t be inserting our background image into the body. Also, there’s the matter of whether we are targeting a local file (as in the example above, targeting “paper.gif’), or an image on the internet (which would require a URL, and would require that the image we want to use is on the net someplace).

Homework

Finish your first podcast!

Also, make sure you have a resume finished.

Print Friendly, PDF & Email
This entry was posted in Uncategorized. Bookmark the permalink.