July 07, 2021

Syntax Highlight — We Review Your Portfolios

1 hour 2 minutes

In this episode of Syntax, Scott and Wes review your portfolios!

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Cloudinary - Sponsor

Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

Show Notes

03:59 - cudd.io

Shared component animation between home / about really nice
Readable, clear
Simple
Check the contrast ratio on the white text on light blue: https://coolors.co/contrast-checker/ffffff-56ccf2

Nice SSR from Next.js

CSS vars

Very tall cards without much text, looks like a mistake

Better on a short browser window - peep the tall and skinny

Card heading should be h3 or h4

10:35 - damonbolesta.com

Nice design = super fun!
Good color palette
Shows your skills straight up
Animation
Not accessible - EASY fixes with Axe Dev Tools

Text on background images hard to read

White text on buttons

Bold some words in your bio

Border radius

21:52 - walterkjenkins.com

Map is fun
Contrast issues with the color choices
Transparency not needed on body content
Cursive font for links / buttons is a no for me dog
Labels on social media icons
Hero overlaps section below it
Maps data processing should be h4

29:40 - suhit.me

This is an example of a really good one
Wicked domain name
Design is ON POINT, like this is the type of polish I like to see - I’d hire on this
Can’t get enough Inter font

Fun little animation

I’d go a little easier on the box-shadow

Github even has a custom readme

Resume

Very modern - JS, TS, Bootstrap
TypeScript A+
Drop the “5” and “3” from “HTML” and “CSS”
I’d add color to the resume, its likely not printed
Don’t need to say Github and LinkedIn in front of the URLs

37:20 - jacobpawlak.com

Initial loading is great - transitions are hot
Typography looks nice - not sure about those serif all-cap nav items
Slider not very usable
View circle on hover is cool, but I’m not sure about following your mouse, covers text
T-shirt portfolio is awesome
Fun little bits in the footer
SSL is broken - fix that sh!t
Links don’t show over background images - common issue today
External links should probably be indicated as such
HTML, paragraphs as h3 & h4, h5, should be
- (i.e. “here are a few of my recently completed…” should be a

)

Design of resume is KEY - different colors, eh?

47:04 - mrtnvh.com

This is a good example of subtle flex of skills
FAST AF
Makes you say “Ohhhh” when you click a link (something that’s missing from a lot of these single page sites)
Personal Photo A+
Position sticky
Love the skills layout on the about page
Email is a button
- I can’t copy your email
- We have mailto links - don’t reinvent
A+

Links

Top Chef

Syntax 354: The Surprisingly Exciting World of HTML Elements

××× SIIIIICK ××× PIIIICKS ×××

Scott: What Had Happened Was Podcast

Wes: WAGO Lever-Nuts

Shameless Plugs

Scott: Building Svelte Components - Sign up for the year and save 25%!
Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

...more

View all episodes

By Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

4.9

977977 ratings