Portfolio Website
A website to display my work and my style.
- Project Date: Spring 2024
- Role: Web Developer, Designer
Overview:
I needed to show my work in an efficient way, and I thought a website would do just the trick. I had to keep in mind that I want to airdrop or text this out efficiently. That was my goal, a mobile friendly, easy to update, website portfolio. With that, I loaded up Visual Studio Code and began creating my HTML.
The Purpose:
PDF portfolios are great for the one-off jobs you apply for where you only point out one little part of your job. The majority of what I will be applying for needs to showcase all the many hats I wear. I’m a manager, a media specialist, a marketer, a designer, a web developer, and I’m a music nerd. A website can show my talents and it’s like the worlds best business card. It’s easy to pass hands, you can just airdrop a link or text it very easily, and it can be updated while some pdf or presentation floats around and becomes old and useless.
The Process:
I first started off with a single page site with a drop down menu at the top. The link would drop you down the page and bring you to the section rather than bringing you to another page. The problem with this was i was showing about 10% of my work with no room to explain it. If I would fully flesh out this version of the website, I’d have a page rivaling the great wall of china in length.
One good thing that came from this mess-up is getting to see to two logo variations on the same screen for the first time. With that, I noticed my white borders were different. I want consistency in my personal brand or else no one would hire me for brand design.
It was time to fix this. I went with the thinner border on the lettering and tossed my tagline into the wordmark logo. I figured my name is long and already takes enough space. The lettermark stayed the same but the new wordmark (and top banner for the website) became much stronger.
I established different pages for projects, about me, and case studies so that I could display more work. I did keep in that dropdown part in just one place. My contact form. The contact form is on the home page but down towards the bottom. You can hit “contact” or “collaborate” from many places in my site, but they all bring you to the home page and drop you down to the bottom.
I mentioned being a music nerd. I play many instruments, I’m a DJ, and I’m in a band (singing & bass guitar). My record logo does a lot establishing who I am, and the industry I want to work in. Time to fill in the information gaps that just an image can give. My ‘About Me’ page can really show why you want a musician as your marketer. It’s about me after all and a huge chunk of my time is spent DJing and performing.
I have one more problem. No, not a problem, an opportunity. I want to share this anywhere I go, whether that be text, airdrop, or email. My site needs to be optimized for mobile browsers on smartphones. I put in the work and everything look great…except for the resume viewer. Lots of websites do not take the time to make their PDF’s fit to the page. Safari, Firefox, Google, they all optimize the PDF for it’s own sake and not the website it is inhabiting. It takes a bit of work around (and some swear words) and eventually it is possible.
Before, the resume bled right and would be much larger than any containers on the same page. My top and bottom banner would stop and the pdf just kept going and going to the right. Now, it’s manually forced to stay all the way centered, fit the device, and look good.
Since I was taking the time on it, I opened it in safari (I use firefox primarily) and I noticed something odd. Firefox and chrome naturally build you a pdf habitat. Safari does not. You don’t get the zooming options, the download or print buttons. I’d have to do all of this manually cause again, if I’m airdropping to an iPhone user, they are absolutely opening this in safari. A bit more time (and a few more swear words) was all it took to build out these options so that they don’t seem redundant on browsers that naturally have them and give the options to those that don’t.
Results:
The site works. It looks stylish on desktop, tablet, and mobile. I get to display my work and my passion for music in an amazing format. A format I can update as life goes on and anyone who had my portfolio before will have the newest version as I update it. Now all that is left is to find some hiring managers to send this to.
