Portfolio 2.0
Tags: portfolio, html, css, javascript
Published: 2020-12-02 18:01:29

As I handed in applications to companies and read countless job descriptions, I realized that I really want to be a Frontend UX/UI designer. During my UX/UI research, I became more aware that I can get as creative as I want when developing a site, but it won't mean anything if my site confuses my users. So I took some time to tweak my portfolio quite a bit--making sure users are able to find links and information that they're meant to find. 

Here's some knowledge that I've learned along the way.

##Pretty Doesn't Mean Perfect
When I first created my portfolio, I was just having so much fun with CSS and letting my mind run free. I had so many ideas that I wanted to incorporate. It was definitely going to be a fun experience. 

The idea was to have different rooms containing different elements of my portfolio (home, about me, blog, code cards/projects, and contact). I thought it turned out pretty awesome. People were very nice to mention my creative ability. However, I did receive some suggestions to double check the responsiveness on mobile. No doubt, my portfolio was designed to be viewed on a desktop and in landscape. 

Here's my portfolio viewed on a desktop:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/odlwifchkhte8d1qx5t1.png)

And here's my original portfolio viewed on my phone:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aaw2p7g0twb9h9efoiek.PNG)

It did not cross my mind that viewing my portfolio in a portrait mode on a mobile device made my portfolio less engaging and actually harder to figure out what I was trying to do design-wise. This is when I decided that design doesn't matter if users cannot figure it out.

##Responsive sites matter
[Stat Counter] (https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet) has a pretty awesome tracker for all different kinds of web statistics--including desktop vs. mobile vs. tablet users.

![Device Comparison](https://dev-to-uploads.s3.amazonaws.com/i/svd745njup61lq801eqo.png)

**October 2020**
- Desktop: 48.88%
- Mobile: 48.62%
- Tablet: 2.5%

If you take a look at the trends (until just recently), desktop usage is more popular than mobile; however, mobile is very close in user comparison. I learned so much from this statistic alone. I have to attack my sites at all angles and all viewpoints. How will it be viewed and if it's accessible and flawless across all playing fields. 

##Keepin' it Simple
As I mentioned, I wanted to do so much with my site. So many ideas and so many intricate details I wanted to add. There were moving clouds and CSS-built images and I even wanted an animated dog to walk about my rooms. My ambition got the best of me and trying to get my site to respond well to smaller dimensions was a nightmare. 

I'm not saying *don't* be ambitious when it comes to creativity, but rather understand the quality of the output for your users. My quality was compromised when I couldn't get my site responsive to mobile. Simple can still be creative and beautiful. As I learn more and grow as a designer, I will add more and more details. For right now, I have to walk before I run. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eaahnagysh6g9haoa3tl.png)

##SocMed is Our Friend
If I've learned anything since the first day I started my web dev journey, is that [the right] social media is your best friend. Two main platforms I spend most of my time on are DEV.to and Twitter. 

When announcing my portfolio's launch on DEV.to and Twitter, I've gotten great positive feedback and also great constructive feedback as well. Without the dev community, I wouldn't know how I can improve. I've gotten suggestions from new to experienced devs. I was even able to get some advice from the perspective from individuals on the hiring side--which was extremely helpful. I didn't know how much good social media can do when used right.

##Organization is Key
I try to stay organized as much as I can, which really helps me write efficient code. Before I start, I organize my thoughts and then I come up with a game plan so I know where to begin--like creating a hierarchical outline for an essay. Because a <code>div</code> inside of a <code>div</code> inside of a <code>div</code> can get exhaustingly confusing sometimes. Laying out where everything goes first really makes things easier to find and follow.

##Naming Classes and IDs
When choosing a name for my ID and classes the first time around, I felt like I was running out of words. Then I discovered that there's actually a naming convention for code. There's this thing called [BEM entity] (https://en.bem.info/methodology/naming-convention/) that explains the breakdown of naming classes in an organized and useful manner. I say, this is quite useful and has made things easier for me. 

##Always Room for Improvement
After I decided to re-design my portfolio, I found that I'm getting a lot quicker at figuring out what code goes where. I also learned tons of new coding stuff, that I was able to use to make shorter and better code. I've even thought about a fun project! I can totally make several different designs of my portfolio to learn different design and coding techniques. 

##Wishing for the Best
It's really been an awesome time learning different things and I can't wait until I'm at the point when I get my first job as a web dev and I can look back at all the ups and downs of my journey. 

Best of luck to everyone trying to make it out there!

&#x2665; Lynne