Discussion on: How often have you re-designed your portfolio?

View post

Hey Mazda,

Many many times, as a developer I don't find myself being a designer but the last time I took one full day and just went with it.

Tried to keep it super simple so I wouldn't get distracted with change!

And I'm actually still happy with it.
chrisbongers.com/

Madza • Oct 24 '20

It's snappy, easy to navigate, and clean looking 😍
What's the tech stack behind it? 👀

Chris Bongers • Oct 24 '20

A crazy stack called HTML, CSS, JavaScript.

But all seriousness, I'm using a wepack multi-page build for the shared components (header/footer etc)
This all compiles on build to plain HTML.
And use SCSS with purge to clean up on build.

If you would be looking for a really easy and simple (no bloatware) boilerplate try this one:
github.com/romanslonov/webpack4-mu...

Madza • Oct 24 '20

No wonder the speed was the first thing that came to mind, good job 😉🤩

Louis Low • Oct 24 '20 • Edited

Page load in a blink of an eye! I saw the page has a horizontal overflow issue, quick and dirty fix for ya...

/* ⚠ NOT RECOMMENDED ⚠ */
body {
  overflow-x: hidden;
}

Chris Bongers • Oct 25 '20

Hey, I don't see the horizontal overflow anywhere, what device/size are you on?
Tried to debug to minimal size, but no overflow on any of them.

Louis Low • Oct 25 '20 • Edited

I made you few screenshots for comparison (you can ignore the 4k screen size), check out the bottom of the page, the overflow scrollbar appears.

I'll help you find the culprit and the solutions.

1366px (1k screen)

1920px (2k screen)

3840px (4k ultrawide screen)

Louis Low • Oct 25 '20 • Edited

Found the culprit! It was the sneaky `.star-wrapper{}`...

I first display the layout blueprint to look for which element misbehave, if I cannot see the complete square shape outline of an element, it must be offscreen (overflow)...

⚠ All screen sizes are green light now. You can sleep well.

/* debugger */
* {
  background: rgba(255, 0, 0, 0.1);
  box-shadow: 0 0 0 1px red;
  outline: 1px solid red;
}

The cure

I replacing the CSS property position: absolute with position: fixed, this also fixed the <start-wrapper> element display at the full height of the viewport and when the page is scrolling down, the stars stays at the background, instead of, it disappears after scrolling down.

.star-wrapper {
  width: 100vw;
  height: 100vh; /* improved to fit full height, previously was 75vh */
  position: fixed;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
}