First Draft Done (Front End Dev)

Hello all,
Here’s my first draft of my portfolio site - comments would be really appreciated.

GitHub
Live Site

In summary, I’d say I’m about 85%-90% happy. I had envisioned that my hero image was going to be a background image with the text over the top. Unfortunately, whichever way I tried to make the text readable just created a result I wasn’t happy with so I’ve gone with this look for now. On mobile, the hero section is a bit meh but I’m not 100% sure how I could resolve this. I think the blame lies with the fact I commissioned my art a while back because I figured it would take time to complete. But had I planned out how the layout was going to work - done a wireframe and then commissioned it, I could have advised the artist as to where to leave empty space to let my text work.

The main debate I’m been having is navbar or no navbar? So any input there would be welcomed. I’ve gone for no navbar for now because I think the page flows OK without it. Once I add my real projects to in over time, this may change.

I look forward to hearing what you think and any recommendations you may have.

1 Like

Hi there!

Great job on finishing your first iteration!

I recommend having some form of navigation for UX purposes—especially with your hero having no call to action.

As for your hero, different methods can be used to make text more legible. This is super basic, but as an example, this is a white-to-transparent gradient with a larger font:

The white gives the extra contrast so the words don’t blend with the background. Again, super basic and could be better. Just something fast.

1 Like

Hi!

Thanks for taking the time to do a mock up of your idea. I did try a gradient approach when I was experimenting but couldn’t land on anything I liked. The radial style you’ve gone for here actually wasn’t something I considered and worth looking into. Plus I love that image - it shouldn’t be crammed away in a corner!

I’m still torn on what to do about the navigation. I do plan on adding a footer with a back to top arrow at least. One friend has suggested I do a sticky hamburger but I’m not a huge fan of that idea. It’s definitely something I need to sleep on.

Because this is a single page, I wouldn’t say a hamburger menu is necessary.

What you could do (as an idea and something you can use to practice JavaScript) is create a sticky scrolling page location/status bar. It could be something like this:

With it on the top or side.

That’s an interesting idea! I could certainly look into that. I will give it a go and let you know how I get on :grin:

1 Like

I return. I’ve added a navigation now. I have tried to achieve a style where it is there and useable but not in your face. I had some comments from friends who have been checking it over that it did not switch the active class over soon enough. I did some additional modifications to my code to account so it should be switching when the next section is 50% from the top. The JavaScript for the navbar was on the challenging side for me - seemed a little bit more advanced than what I’ve studied to date and I had to rely on Google but it works.

I’ve also added dark mode to the site. First attempt at using a dark mode. Hands up - I used a tutorial by Kevin Powell. What I love about his tutorials though is that he goes through each step so you understand what’s happening. This works better with my learning style so next time around I will be better equipped.

At this point, I’m thinking I will work on any improvements and ideas I have, such as the hero section, in any spare time I get. I could spend months on this and then run out of study time for my course as a whole - defeating the whole purpose.

1 Like

Kevin has been my go-to for my learning journey! He has some great resources.

I did notice (my bad for not checking the first time) that outline: none is applied to everything with the * selector. However, this is considered bad practice. An outline gives a visual cue to elements that are focused on or active and are necessary for users who do not navigate websites with a mouse. For example, if you tab through Codecademy, elements receive an outline or background color change. This lets users know visually where they are on the webpage.

If an outline is removed, another visual should be added or changed that is targeted with the :focus or :focus-visible pseudo-classes. But what I like to do is change the outline so that it matches the color scheme.

image

Above is the inclusion of the outline and background change being targeted with the :focus-visible pseudo-class.

I’m sure if you went through the whole of my code with a fine tooth comb, you’d fine all sorts of things not consider best practise. :grin: I’ve added the following to my styles now so it does have a visual cue and removed the outline: none -

*:focus {
  outline: 2px solid var(--text);
}

*:focus:not(:focus-visible) {
  outline: none;
}

Thanks for your continued efforts to help me make this portfolio great :slight_smile:

1 Like