Portfolio Review - Last time, I promise!

Code Feedback
1

OK fellow campers, I come to you again with but a simple request: please review my portfolio again!

I’ve pretty much completely redesigned it in a way that I think looks much better than my previous attempt. Some highlights:

  • Used Webpack to bundle scripts, load images, and transform Sass files, Pug files, and ES6 syntax.
  • Minor templating with Pug include and extend.
  • Heavy focus on making a minimal, clean, and appealing design.
  • Hosted again on gh-pages, but used git subtree to deploy build folder.

I still have work to do. Mainly, I want a template page to have a separate page for each project, with a description of the planning, workflow, issues, and a live example (if applicable).

Some possible issues:

  • I used vh units for several things, but I’ve noticed on screens with small height (think phones in portrait), things might get squished.
  • Possibly too minimal of a design. Is it actually good looking, or am I biased? (yes)

Please let me know what your think!

Edit: Also here is the repo

4 Likes
2

Awesome page :thumbsup:!

The dots for the carousel are way off to the side.

2 Likes
3

Thanks for taking a look! Are you using Firefox? They don’t appear to show on it at all for me.

4

Yes, I am. You have to scroll sideways to see them.

1 Like
5

Looks awesome! The slider dots are off to the right for me as well. I’m on the latest Chrome for Android.

1 Like
6

Cross-browser testing is so difficult :worried: Any suggestions on good tools to use (preferably free!)

7

@zaclem01 Your portfolio site is looking really great, man.
I like that you are using some ES6 syntax in the JavaScript and the overall design is very appealing.
One small thing is that your favicon file is missing. This gives your website a little icon on the tab where you’re viewing it. If you open up your page and look at the console in Chrome you can see the error. Just create a little icon and name the file favicon.ico and upload it into the root of the project folder and it should work.

1 Like
8

Thank you! I always forget about them!

I’ll make something up in GIMP shortly and add it in. Appreciate you taking a look at it.

9

It looks really good! Really like the colours and the carousel for the projects. Looks really slick!

The only thing is when using mobile (iPhone safari) the social media icons overlay your contact form, which overlays your footer.

1 Like
10

Thanks for looking at it!

I tried to fix a few things. Can mobile users especially take a look at it again?

Also, removed the dots on the slider, if desktop users could check that.

Thanks a ton!

11

Hey! Looks really great, except there’s some overlap issues right at the bottom on mobile:

1xVN4sJ.jpg750×1334 91.6 KB

I’m using Safari on iPhone.

Other than that it look brilliant. Love the simplicity.

1 Like
12

Thanks for checking it out, and appreciate the kind words!

It seems to be a unique issue with Safari on iPhone, and I can’t for the life of me figure out why it’s doing it. It uses flexboxes and vh units, so maybe it has something to do with that?

Unfortunately I’m an Android guy, so no easy way to check.

1 Like
13

Really looks great @zaclem01 . It’s responsive, the code is clean, the design is fresh, it’s awesome and for sure puts you ahead of competition in my opinion.

A comment about your ‘About Me’ section - you might want to consider breaking a bit sooner… perhaps ‘phablet size’ around 640px (this is like iPhone 6 plus size). It’s a bit tough to read around having your image to the right squishing your paragraph to be super long to the left. You have the right idea stacking the two elements and making them display: block; at 420px so breaking a bit earlier wouldn’t hurt… but if you do decide to break earlier, also consider how large your image may appear at that size and whether or not you are ‘ok’ with that.

Also when you consider tiny sizes like at 320px (an iPhone 4S) think about your padding and margin spacing. A general rule of thumb, you can cut down on these a bit to hoist up your content to show the user as much as possible “above the fold” (the cut off point where the pop-up menu sits). As always though, cut down to where you feel comfortable and still works without hurting your design.

About testing for Safari, the best is to actually have the device on-hand, but there are simulators out there! I know that some applications will build virtual machine environments that run XCode to help you debug. I know of CrossBrowserTesting.com, but it’s not free unfortunately. I’m sure there HAS to be one out there though! Google something like “virtual machine debug xcode Safai” - perhaps something like that. If I find something that can help, I’ll post it for sure!

Last comment - I LOVE how your skills are displayed as just icons… i might borrow that idea for my site! :wink:

15

Now that I can see it on computer, I can give some tips if you don’t mind:

  • Make the whole tabs clickable instead of just the words on them
  • Add a favicon
  • Add smooth scroll so when you click on a tab it smoothly moves to that section
  • Make the Gulp icon smaller, or position it to look more like this:

  • Vertically center the social icons like this:

Otherwise it’s perfect on my screen. Good job! :smiley:

16

@katmurry Solid advice; really appreciate the mobile styling suggestions. I’ve implemented the breakpoints and margin adjustments, and I think overall it looks much better. I’m looking to see if I can find an iPhone emulator for Linux as well (fingers crossed). And feel free to use the icons, as I’m sure I subconsciously borrowed it from someone lol!

@l-emi Tips are always welcome. I find I’m often blind to my own design flaws, which is why this forum is great! I completely forgot to put in the smooth scroll; thanks for the reminder. I also increased the clickable area on tabs. Definitely helps with useability.

As for the favicon, I still need to make one, but I think it will make it look more professional for sure. Also need to work on the Gulp icon still too.

Thanks for the advice all! Any suggestions still welcome. I’ll probably start working on the individual project pages soon, once I wireframe them out.

17

@zaclem01 , looks great!

I have a question: I am still new to webpack and I can’t find a solid solution on how to deploy it to git pages. How were you able to figure it out?

18

I actually didn’t use Webpack for the deploy. I use npm to run the Webpack build and then immediately add, commit, and push the build folder to GitHub using a git subtree. Not sure if it’s the right way, but it works for me.

19

Can you tell me in details, if possible? I’m still not quite getting it

20

No problem. Basically I have my Webpack config that takes care of all my bundling and tasks. Whenever I want to deploy to gh-pages, I use a custom script in my package.json called deploy that I run in terminal (npm run deploy).

The script for deploy looks like this:

"scripts": {
    "start": "webpack-dev-server",
    "build": "rm -rf ./build && webpack",
    "deploy": "npm run build && git add . && read -p \"Enter a commit message: \" message && git commit -m \"${message}\" && git subtree push --prefix build gh-pages master"
  }

All that really does is run the build script above it first (which runs Webpack), adds all files with git, commits this with a message that the terminal prompts you for, and pushes the whole thing to a subtree (my github.io repo).

Probably explained it badly, but if you have any more questions, feel free to let me know!

1 Like