loading...
markdown guide
 

Hello Nicole,
Try to run LightHouse (embed in Chrome console) and address the issues.

The main issue I had with you site is loading time. Your images are too heavy. Try crop them to the exact size you display them and run them through tinyPng/tinyJpg. You can also use the free caching of CloudFlare.

Next thing is, you're not using HTTPS. It can be harder to achieve depending on your hosting. But today's browser warn user when entering non-secure website.

Last (but don't have to be least), you didn't have set a favicon. Recruiters bookmarking your site won't have the nice little icon reminding them what your site looks like.

Overall, good design (nitpick: not sure about some contrasts). Parallax effect is always a nice touch and I like that you don't have too much informations.

Keep on the good work ;)

 

Thanks! I’ll definitely look into these things 😊

 

A few comments for accessibility's sake:

  • "Purpose" is simply unreadable, as for "Hello".
  • Those words are also hard to read, the pinkish font colour makes it very hard to read due to weak contrast.
  • The website is too heavy. 5MB for a few pictures that are only here for filling the holes is too much. Throw some JPEG compression here, quality's not needed.

For the two first problems (about background making words hard to read), you can blur a bit the background and render the text block more opaque, which will detach the front from the background colour.

The third one is a good showcase of an overall accessibility problem present here: there's not enough contrast. If someone is colourblind, have a bad screen quality and whatnot, he'll have a lot of trouble reading the website.

The last one is a serious problem. Not a lot of places, especially taking the world into account, have fast Internet. Talking for France, if you're not in the city's core, you'll achieve at maximum an internet bandwidth of approximately 200kBps (and even right besides an operator's main line, you usually still get bad internet).

The icons and logos are way too huge. The language icons should be at maximum about 64x or 128x, but 48x should be enough.

The dev.to/github/other logos are also too big. Limit width to about 100px, since it doesn't render more than that.

For the background images, 1080p is clearly too much. Limit them to about 720p, or even less for detail-sparse images (detail-dense images should be of significantly higher quality than detail-sparse ones, as there's more to look to, and more fine-grained details).

 
 

I love the overall design. I want to comment on some details:

  • I think you should use a custom font, perhaps from Google Fonts or elsewhere. It will make things look more sophisticated.
  • I love everything about the top header except the line height on the main text as well as the size of the image. It takes too long to load and should be optimized.
  • On that note, the whole site should be optimized. If possible you should look to minify your CSS etc. and serve it through a CDN.
  • I think the About Me section should have more padding and a max width, perhaps around 600px and center it that way.
  • I think the tools/skills badges should be smaller, and maybe have an outline/rounded colors. Think iPhone app icons as inspiration.
  • There are a few other small touches to stare at and just try to beautify a bit.

Some of the discussion from this thread could prove helpful for all of this:

Overall this looks great and it's just the details that need to be gardened!

PS you should put your DEV Profile in the footer along with Codepen and GitHub!!

 

Thank you! Definitely some great points! On your third point about optimization I'm not sure what that means. I know CDN is Content Delivery...? lol.

 

Basically, you want to "minify" your CSS and JavaScript to end up with fewer bytes being sent to the user. A CDN is a type of hosting that helps the files get to the end user faster as well.

Don't stress yourself too much with this, but if you look into this you'll probably learn a lot in the process.

Ahh ok! Always something to learn in this field, lol. :) Btw, I'm loving google fonts!

 

I wouldn't call HTML a "tool"... Maybe replace it with "languages"?

 

I was thinking more like a "toolbox" concept... I'll definitely think on that :) Thanks a bunch!

 
 

Thanks a bunch! mailto would open the users default email, right?

 

Note that web scrapers will take that and add it to their spam lists if you don't obfuscate it.

Classic DEV Post from Mar 28 '19

Cube.js, the Open Source Dashboard Framework: Ultimate Guide

Cube.js, the Open Source Dashboard Framework: Ultimate Guide

Nicole Saunders 💻🌹 profile image
Front end web developer. Striving to be a dev queen!
JOIN DEV NOW

We are a community