Unit 2 Portfolio Reflection

Initial Content Audit:

Content Model

I went through 14 different portfolios, and counted where each portfolio contained the following items. All these portfolios were either of my fellow college students, professional web developers, and professional UX designers and coaches.

Many people did not opt for multiple pages on their sites, instead having each link on a large page. Other sites were little more than just a description of the person, at the top, with a list of projects they had worked on and a footer containing contact information. This gave me a lot of inspiration for what I wanted to do with my site.

Content Unit Information Products
Landing Resume About Portfolio
Name/Logo 12 3 4 3
Contact 10 1 3 4
bio 6 2 6 2
projects 9 1 1 6
work history 3 3 2

 

Reuse Map

After looking at the 14 portfolios, I consolidated them into my own reuse map, based on what I wanted to have on my portfolio. To make the page mobile and tablet friendly, I preferred that I have my own landing page with everything except the individual project views. The page would be split into sections accessible through navigation buttons. I made two columns,

Content Unit REUSE MAP
Landing Portfolio
Name/Logo I I
Contact S
bio S
projects D S
work history S

 

Information Model

I identified the projects as the pieces I most wanted to reuse. My site would be very modular as a one-shot page, with great similarities between each container. The bio section’s model of picture – and information would be useful for the work history section, so I planned to use the two models as samples for each other. The project section would just be clickable image representations, with the time periods each one was created in. Each project detail view would contain a detailed description of the work completed, as well as relevant images and any other data (like code snippets, videos, etc.). As such, for the project sections, each sample would look something like this:

Content Unit REUSE MAP
Landing Portfolio
Title D S
Date D S
Description S
image gallery S
RELEVANT INFO S

 

Building Portfolio Views

After thinking about what I wanted my site to look like, I started thinking about portfolio views. Each use case seemed like the most logical users would be people who wanted to hire me.

Use Cases

Really, the main user of my personal website would be people who potentially want to hire me for projects, be that hiring managers or potential clients. HR people would be more inclined to look for a resume, while clients would look more toward specific skills.

The way to address HR people would be to add a tagline with specific keywords, such as “UX Designer and Front End Developer”. The second would be to put the projects front and center, so that potential clients would have full access to them. The result would be a structure with the header and bio first, then the projects aligned in two columns, then my work history and resume, and finally a contact page header.

Views

What I initially wanted my site to look like.

I began by sketching my designs in my sketchbook, then transferring these designs into WordPress. I tried out a lot of different themes, but the one I liked the best was Zerif Lite. I added a couple of sections, and the resulting product looked rather similar to my own. I was frustrated that I could not go in and modify HTML and CSS and make it look exactly the way I wanted to, but it was similar enough I guess.

Really, all this exercise entailed was a much-needed re-design of my portfolio. I had originally intended to create this in BootStrap to show off my web developer skills (WordPress is not a good choice in this regard), but in the future I may need to use WordPress in a job position.

Dissecting        

By deleting and re-adding PHP files, as well as altering the database, I was able to figure out how different features changed the way my site looked.

I changed the default structure of my template in my wordpress theme, first by editing a PHP file, then removing a PHP file. By making this tiny change from true to false, I was able to make the index page go completely blank, as there was no longer any access to the theme. Removing the page had the same effect.

Changing this value to false stopped the import of all the themes.

I changed the style of my WordPress theme by making changes in the Customize pane, and then by editing CSS. I took out the webkit transforms in the subpanels, and all of the text animations on my site promptly disappeared. I went back, uncommented the code, and added additional Firefox and Opera transforms in the CSS, and the animations returned.

The theme CSS in the files.

The webkit code I changed to disable the animations.

I deleted and added content in the database. I went into the post content and deleted all my blog posts. This, unsurprisingly, deleted all my blog posts on the site. Through this, I learned to use the PhP MyAdmin board.

The database user panel where I deleted all of my hard work. Sad!

Conclusion

Overall, the biggest benefit to this unit was me learning about how to use WordPress. Though it is highly unlikely in the future (as a developer I will more likely be working with actual code, and if I want to blog I can save myself the trouble and just go to Medium or Tumblr), I really like making websites, so this was a fun experience! I really liked the way Zerif Lite looked, so I decided to keep it. I may make more alterations to this site in the future, just because it looks so good. So despite my initial misgivings about WordPress, I may keep this site because it is pretty!

Leave a Reply

Your email address will not be published. Required fields are marked *