Building a Small Web Portfolio

Since my undergraduate commencement in May, I have been itching to create my own personal portfolio website. I wanted to curate my own space devoted to my curriculum vitae, projects, and thoughts moving through my education and career. This was for my own organization, but also for colleagues to view my work in an environment I envisioned.

I began looking at sites belonging to mentors, students, and other professionals, noticing that each site fit the person and their accomplishments. Then, I began to wonder, which design fits me? Which platform fits me? If I’m terrible at any sort of creative design, how will I design my own website?

I found clarity when a fellow library student shared some advice: it is never right the first time. Get it functional, get that first iteration out of the way, and improve from there.

Choosing a Platform

With web design becoming increasingly accessible, many services have popped up offering to help users create a website. By no means is this list exhaustive, but here are a few that I discovered and considered, ranging from least coding required to most:

Wix Wix is a free platform that offers customizable website templates built on HTML5. Once you choose a template, you can click the boxes to add text and click/drag text boxes and images around to change the layout. This platform was useful as a first step in seeing my content laid out on a webpage without having to write code.

WordPress and Squarespace These two platforms triple as portfolios, blogs, and content management systems. Both allow customizable templates, hosting space, and a unique domain name. Since they are content management systems, you must learn to use their interface and coding may be required if you want to customize beyond the readily customizable features.

Jekyll(usingGit) and Bootstrap Jekyll and Bootstrap are frameworks for developing your own HTML- and CSS-based websites. Instead of placing your content into a text box, you actually dive into the HTML files to write your context. These platforms come with templates to get you started, but do require outside coding and system knowledge, such as Git and Ruby for Jekyll. For two great examples visit the pages of Ryan Randall, an ILS graduate assistant and all around culture scholar at IU, and Cecily Walker, a self-titled rabble-rousing librarian residing in Vancouver, BC.

Adobe Dreamweaverand Adobe Muse using HTML5 These final two require the most HTML coding. You can find some starter templates, but it is up to you to write and design the majority of the content and website. These platforms offer the highest range of customization, but also the highest learning curve. For a dynamic example of a website built with Adobe Dreamweaver, check out Samantha Sickels‘ media and design portfolio page.

Since I have a programming background, I decided that using Wix felt like neglecting my tech skills. Since I have limited experience with HTML5 and CSS, I wasn’t ready to take on an entire portfolio website from scratch. Therefore, I went with WordPress because I could choose a designed template, but customize as needed.

Using WordPress

I used my Information Architecture skills and decided the exact content I wanted to feature. Since then, I have spent countless hours arguing with WordPress. Consistently asking my computer screen, “What do you want from me?”

Image courtesy of pixgood.com.

WordPress turned out to be less intuitive than I imagined (I shrugged off tutorials thinking it couldn’t be that difficult). It took a few tries to understand the interface with pages and menus. I also didn’t realize that different themes come with different customizable features and that they don’t include different page layouts you can choose from a simple drop-down menu. I typically found a perfect combination of clean, minimal, and functional, but with one unsatisfactory aspect. So close.

Image courtesy of imgarcade.com.

Finally, I chose a theme that worked! With some minor set backs with text fonts, I discovered how to use plug-ins. My social media buttons and accordion-style Projects page were the result of Google, willingness to explore, and my conceptual coding knowledge. Brianna Marshall helped me figure out how to set a menu item as a link. And I breathed a sigh of relief.

Tips

If you are creating a personal portfolio or even a quick WordPress site for a library project or service, I have three tips for you:

Choose a random theme. Insert your content. Then, decide on a more permanent theme from there. Sometimes, seeing your own name in Comic Sans will put that theme on the “absolutely not” list.

Read this article shared with me by the same student who gave me the advice above. It is geared toward IU students, with widely applicable ideas.

Persist. You have a vision of your future site’s look and function, keep learning, Googling and exploring until you find out how to bring it to life. I can’t wait to play with more of the coding-heavy platforms in the future!

Find my portfolio website here, and please comment if you have any questions about web hosting and domain names, important aspects of website creation I didn’t touch on.

Then, respond! I would love to hear your thoughts about using WordPress or other platforms mentioned for different functions! What were your struggles and triumphs? Do you prefer a platform I didn’t mention?

Post navigation

6 thoughts on “Building a Small Web Portfolio”

Love the look and feel of your site. Flows very well and the expandable sections on your projects page prevent a wall of text. Did you create a child theme? If you edited any of the php files of the theme, this could save you headaches if the theme is ever updated. One small note on your site, your Twitter link isn’t working. The link is set to javascript:void(0) and seems to be trying to pass through a generic “Visit Us” twitter link.

I love using WordPress, both for personal use (a defunct running blog) and professional. However, the limitations and pricing of their hosted versions, such as for our student association, can be quite frustrating.

I’ve used Omeka and Drupal for class projects but was not impressed by either platform. Drupal frustrated me so much that I ended up just hardcoding each page with HTML instead of setting up any templates or dynamic pages. Though we didn’t get much instruction on how to use it before we were assigned a redesign project. I even looked through a few sections on Lynda.com to understand it but I just could not understand the terminology used in Drupal (modules instead of plugins). Maybe I’ll give it another chance when we redesign our site.

Also, thank you to whoever switched the LITA blog to a theme that has embedded comments.

Hi Marlon! Thank you so much for your feedback (social media buttons have been updated)! Creating a child theme is a great idea, and will look into it as I implement more plug-ins, widgets, and changes.

I also feel the same way about Omeka, finding more limitations than allowances. It does sound like you have quite a bit of coding and markup experience, so maybe this is a reason we find these limitations! Good luck with your redesign!

Just wanted to say congrats on your first [of probably many!] websites : ). I think it’s a good thing that you slogged through WordPress, you’ll bump into it again. It’s behind a little less than a quarter of the internet, and many libraries–academic and public–use WordPress as their CMS.

Great post, Grace! I love your website’s simplicity and the fact that you got it hosted rather than simply using the free WordPress.com version (guilty of this). I’m using Bootstrap for LibGuides 2.0 and I can’t say I like it as much as I enjoy good old HTML5/CSS3.

Thank you Michael…and Michael 🙂 I definitely feel ready to tackle more WordPress projects now, and appreciate the forewarning!

Yes, I should mention that another reason I used WordPress was because I got hosting through A Small Orange, which has a very smooth WordPress installation. HTML5/CSS sounds wonderful and can’t wait to get to an implementation level with those languages!