New Site Launch!

Welcome to the new design of AmberWeinberg.com! It’s been well over 5 years since the previous version, so it was definitely due for an upgrade.

THE DESIGN

I absolutely love typography, and wanted something with BIG type. I’m also constantly battling between minimalism and my love of bright, happy colors. I find this design to be a fantastic compromise between both sides. Developer portfolios are extremely hard to do because there’s no real graphics to work with. Therefor, the typography became the design.

I also tried to break out of the normal grid, and do something a bit fun. While most items are technically in two columns, many break out of the grid all together, while still making sense. I love the shapes of the white spaces left between the main headings and buttons. I had a bit of help and a push from Andy Clarke and Lynsey Gray on the design side of things, for which I’m extremely appreciative.

And I embraced the scroll!

ABOUT PAGE

The site works well on all browsers, but is the *most* fun in a window larger than 1600px and view in Chrome. Why? Because of CSS Shapes of course! You’ll be able to see the cool two-column-text-around-a-circle functionality on the about page. For browsers that don’t support this (I’m looking at you, Firefox), you’ll simply see the regular image on top of the two columns.

Currently, even Chrome and Safari don’t support text wrapping on multiple sides, but thanks to Sara Soueidan, she gave me an idea to have a half circle in each column. Doing this transparently, I was then able to place the circle image of myself on top. In smaller browsers, this reduces down to the normal text-wrap around one side of the circle, on the right.

BLOG

The blog has been majorly cleaned up. No more sidebar, but still a way to search and filter by categories and tags. I also finally turned off and hid comments, since that seems to be the way to go these days. I just find that conversations about the posts on Twitter to be more enlightning and useful.

PORTFOLIO

Here, I simplified things as well, but putting everything on one page and allowing AJAX scrolling to view all of the projects. This gets the work front and center, and there’s room for my side projects at the bottom.

CONTACT

I combined both the contact form and my “requirements” for project budgets. I also removed some of the older requirements for types of clients I preferred to work with, as I’ve been shifting my focus elsewhere these days.

THINGS LEARNED

It was a bit difficult to get the background stripes working how I wanted. Although this was easily down with a repeating linear gradient…in Chrome there was a funky bug that lead to the blurring between colors, instead of sharp line stops (see Codepen). Maybe someday when this is fixed, I’ll be able to take it fully in CSS. For now, it’s simply a repeating SVG background.

This is the first site I did with rem units, as I was previously using just ems. This allowed me to throw off the parent font-size dependencies that come with ems. However, the next site I code, I’ll end up using ems or unitless numbers for the line-heights, as I discovered quickly that using rems for line-heights meant I had to adjust them as well when sizing text up or down for responsiveness.

I also played with JS async & defer, as well as really divving into the cacheing plugin while working with Google PageSpeed Insights. It got a lot more geeky than I was comfortable with.

Have a look and if you have any thoughts or find any bugs, let me know on Twitter!