loading...
Cover image for How often have you re-designed your portfolio?

How often have you re-designed your portfolio?

madza profile image Madza ・1 min read

As for someone who is in the process of making a portfolio, I thought it would be interesting to hear how many visual or structural re-designs you have made to your personal portfolio over the years.

I'm not talking about minor updates and content addition, but major updates that have significantly changed UI and UX.

Discussion

pic
Editor guide
Collapse
dailydevtips1 profile image
Chris Bongers

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/

Collapse
loouislow profile image
Loouis Low

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;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
dailydevtips1 profile image
Chris Bongers

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.

Thread Thread
loouislow profile image
Loouis Low

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)

1k screen

1920px (2k screen)

2k screen

3840px (4k ultrawide screen)

4k ultra wide screen

Thread Thread
loouislow profile image
Loouis Low

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;
}
Enter fullscreen mode Exit fullscreen mode

screenshot

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;
}
Enter fullscreen mode Exit fullscreen mode

Other Clean Up

  • set logo size

  • remove unwanted artifact (1px horizontal line element)

Thread Thread
dailydevtips1 profile image
Chris Bongers

Hey Louis,

Thanks but it was the whole idea the starts only sit on 75% of the viewport and not scroll along haha.

I find it weird it doesn't show up on chrome mac though!
Als my browser tests also didn't show hence I was just surprised.

Gonna have a look though thanks!

Collapse
madza profile image
Madza Author

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

Collapse
dailydevtips1 profile image
Chris Bongers

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...

Thread Thread
madza profile image
Madza Author

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

Collapse
highcenburg profile image
Vicente G. Reyes

Chris, you can download responsively.app for a huge selection of screens upto 5k! It's open source too!

Collapse
pablohs1986 profile image
Pablo Herrero

A few times, I think as I learning, I change it. This is: pabloherrero.me/

Collapse
loouislow profile image
Loouis Low

I'd like your portfolio website design. Your head photo has some sort of un-even colour to it, was it purposely do it that way?

Collapse
pablohs1986 profile image
Pablo Herrero

Solved! I had used the wrong tool in Gimp. Thanks again, Loouis!

Thread Thread
loouislow profile image
Loouis Low

Now it looks more professional!

Thread Thread
pablohs1986 profile image
Pablo Herrero

😂😂😂yeahhh

Thread Thread
loouislow profile image
Loouis Low

Do you want me to fix some of the tiny spacing issues on your design? I can make you some CSS-es.

Never mind, I'll do it now... Because I am bored at this moment.

Results

Solutions

/* header bar spacing */
.navbar {
    padding-left: 30px;
    padding-right: 30px;
}

#footer {
    padding: 20px;
}

/* work: project cards spacing */
.project {
    padding: 20px;
    min-height: 300px;
}

/* stack icon spacing */
i.fab {
    padding-right: 10px;
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
pablohs1986 profile image
Pablo Herrero

heyyy man!! you shouldn't have bothered... I've implemented your changes and, they are small touches, but now everything looks more consistent. Is great! As a newbie, I can only thank you for taking time to help me ;)

Collapse
pablohs1986 profile image
Pablo Herrero

Well no, it's a mistake. I used Gimp to substitute the color and I didn't do very well apparently... I didn't realize it, thanks for telling me :)

Collapse
loouislow profile image
Loouis Low

I redesign my portfolio once every 2 or 3 years. I start mocking up the prototype design with Framer until the design I feel satisfied before toss into actual web development. Be hold~ loouislow.netlify.app. @madza has seen my portfolio so many times and has thrown up for so many times.

Collapse
highcenburg profile image
Vicente G. Reyes

I used to spend so much time on my old portfolio & (kinda new) portfolio. Now, I just use stackbit + DEV to automatically pull all the articles on my own domain.

Collapse
loouislow profile image
Loouis Low

New domain web design is even better!

Collapse
highcenburg profile image
Vicente G. Reyes

Thanks man!

Collapse
daviddalbusco profile image
David Dal Busco

I published mine a year ago and recently made a really small refresh, so I guess, once a year 🤷‍♂️

daviddalbusco.com/

What about you Mazda?

Collapse
madza profile image
Madza Author

I'm still in the process of making one, maybe one day 😄😄

Collapse
loouislow profile image
Loouis Low

You want me to boost you up?

Collapse
daviddalbusco profile image
Collapse
_garybell profile image
Gary Bell

I've done it a lot of times in the past, but I no longer bother. I've gone from doing the developer "build your own blog" thing to using an off the shelf CMS.

Because I don't do contract or freelance work, I don't need to overly show off what I can do, so much as what I know.

There's a tradeoff to be made. Do you spend the time designing and building something personal, or do you spend the time doing paid work and use a generic template which provides effective case studies?

Collapse
supnim profile image
Nimesh

once a year, this time it was to learn react supnim.com