Personal Portfolio Website - Minimal design

Hello everybody!

This project has been a great hand on experience on designing, wireframing and coding from scratch… at the beginning it was very intimidating, but once I knew how to approach it, found out to my surprise that, it was very easy working on it. I enjoyed it very much!

It took me about four days to get to the point where it is right now, since I practice a lot with git and Github, branching and what not as I advanced in the code, there’s a lot I could keep on tweaking, like styling the links on the nav-menu like buttons, etc… but for now I think it does the job that was asked for.

Loved working with git and GitHub and looking on the internet for aswers on how to code the dark mode switch and make it work, the links to the pages where I found the help are referenced in the README doc.

The hardest part for me was keeping the score of the project to what was asked for. The design is very simple and clean with lots of white space, I wanted to practice using Flexbox, Grid, Media queries, Variables, Font Awesome, and more stuff from the path, and not worry about the design too much.

It took me two days to post this in this forum, there are a lot of great portolios and mine is so simple… but finally I mustered the courage to show you my work. I would love to read your comments!!

Keep on coding!

:alien:

Page: https://marquesabarbula.github.io/

GitHub repo: GitHub - MarquesaBarbula/MarquesaBarbula.github.io: CodeCademy Project for the Front-End Engineer Career Path

4 Likes

It looks awesome, well done! :clap:
The only (very minor!) bit of feedback I would give is that by the looks of the JS code, this should show a number of seconds, but at the moment it’s just displaying NaN:
image

Hi @notlyall

Thank you for your kind words and for noticing this bug.

What browser do you use? I’m using Chrome and it looks fine to me, but I’ll look into it, just in case I’m using something that is not supported in yours.

Screenshot 2022-01-27 at 19.16.10

Cheers!

:smile:

1 Like

Huh that’s odd, I tried it on another browser (Chrome) and it worked with no issues, not sure what went wrong on Firefox but it must have been something strange on my end (perhaps an extension or something), my bad! :smile:

Great job on it @marquesabarbula! :rocket:

1 Like

I just opened it in Firefox and it is not working… curioser and curioser… coding seems to be like a rabbit-hole of wonders.

I’ll look into it as soon as I can.

Thank you, again!

:nerd_face:

1 Like

*UPDATE *

Hello!

The JavaScript code I used in the count-up is copied from the demo code that is given to us to download in the project.

I tried opening the example Ada Lovelace’s web page in Firefox and received the same NAN error, here a screenshot:

Screenshot 2022-01-27 at 19.43.18

The thing is that I’ve been looking into the code and in the documentation in MDN to not much gain… but somehow I think the error is in the code copied below, 'cause when I tried changing format() for NumberFormat() got 0 (that’s zero) instead of NAN:

  timeContainer.innerText = intlNumberFormatter.format(difference);
}, 1000);

:nerd_face:

My knowledge of JS is very shallow at present and I can’t figure out how to fix it, I’ve been looking in the forum for older posts about this and couldn’t find anything… oh please, please, does anyone know how to fix this?

Thank you for reading up to here!

m

You can tell right away your background in design. Yet you say you didn’t pay much attention to design :slight_smile:
Very nice. I really liked the simple option to change the background color. So cool.

Great job!

2 Likes

Thank you for your kind words!!

:smiling_face: