I Made a Pianist's Portfolio Site

Code Feedback
1

Hello, dear community!

I’m happy to announce I’m finally finished with a project I’ve been working on for months. It’s a (mock) portfolio page for my twin sister, who is an aspiring pianist.

I built the original version of this site as my final project for the Responsive Web Design certification, but decided to rebuild it on my own without the limits of passing the tests. What I thought would be a short, cool project turned into a long, (but still cool, I hope) and difficult ordeal with dozens of rebuilds and start-overs. It is the first time I have used JS on a site, and I experimented with other technologies like GSAP for some animations, Lenis Smooth Scroll and the Intersection Observer API. It was as educational as it was laborious.

Feedback on the design is what I’d appreciate the most, but any other feedback would mean a lot. How is its usability? What do you think about my aesthetic choices? Feel free to give me your thoughts, whatever they are. I’m learning independently, so any feedback both orients and encourages me.

Oh, and before I forget, the contact form is functional, so feel free to try it out.

Thanks for taking the time to take a peek!

Nicolas, 17

Here’s the link: (update complete!)

Anna: An aspiring pianist

6 Likes
2

Hi @nickrg !

Your portfolio page has a clean, simple layout and works well on mobile devices, with good use of colors and responsiveness. To improve it, consider enhancing typography by using varied fonts, increasing text spacing for readability, and adding a background to the hero section. Strengthen the navigation by increasing font size and adding hover effects, and ensure better content alignment, especially in the “About Me” section. Strengthen the navigation by increasing font size and adding hover effects, and ensure better content alignment, especially in the “About Me” section. For more interactivity, introduce smooth scrolling and hover animations. In the portfolio section, use grid layouts with project details for a clearer overview. Finally, ensure good color contrast and add alternative text for accessibility.

1 Like
3

Hi @nickrg

A great looking site. The animation for the name was very well done.

Here are a few points to I’d like to mention:

I found it difficult to navigate the website. There are no scroll bars, and arrow keys and page up and down keys did not work. Not sure if this was intentional. When I first visited the site, and clicked the down arrow, the navbar disappeared, and I could not get back to the top of the page.

On smaller viewports, some of the images and elements appear cut off.

image
image350×370 24.5 KB

The playlist was not scrollable.

Some of the sample videos did not contain any sound.

Consider removing any mention of yourself from the website, and place that information and information about the project on your portfolio page. That way it will look like a real website (maybe write a notice at the bottom of the page stating it is a project).

When the page first loads, maybe play a few notes. Since you mentioned JavaScript, how about a random selection from a list?

Happy coding

2 Likes
4

Thank you, @Teller, for your excellent feedback!

I’m quite certain this is because I used Lenis smooth scroll. Arrow keys will not work with it, and there are other limitations.

You’re quite right, I ought to implement an artificial scroll bar. Thank you for the reminder.

As for the navbar disappearing, I have set up an event listener to control its visibility. If the user scrolls up, it will appear, but if they scroll down, it will slide back up out of view. The user doesn’t have to scroll up much - only more then 5px - and the navbar will appear. Do you think this is perhaps a bit unintuitive? Maybe I ought to change it to watch for cursor position. Say, if the cursor is in the top 1/3 of the viewport, the navbar will appear. I wanted to make the navbar invisible unless the user needed it so the site visuals could be fully enjoyed. But if you think there is a more intuitive way to implement this, I’ll gladly change it!

Hmm, I tested different screen sizes for days, making sure everything worked. For some of the elements, you have to refresh the page in order for the elements to resize. Perhaps this is it? If not, please let me know which elements are in question and I’ll set to work.

Indeed, looks like another Lenis smooth scroll problem. In order for nested scrolling to work, I had to add an attribute data-lenis-prevent to the scroll containers to shut off Lenis for them. I’m afraid this messed something up. I will attempt to add Lenis instances to each of the scroll containers instead. If this doesn’t work, then I’ll remove Lenis from the entire site, as it seems to be causing way too many issues.

My deepest apologies, I should have explained this earlier. This is not an error. The videos I used were only dummy ones: copyright-free stock footage off of YT just for demo purposes only. Some of them don’t have sound originally. I intend to replace these with real videos in the future. It was just important to get iframes in the slideshow.

Understood. Will do!

I like the idea! I’ll do my best to implement, although it might take some time to figure it out.

Thanks so much again, @Teller, for your feedback!

1 Like
5

Hello @hasanzaib1389 !

Thanks for taking a look at the site. Means a lot!

I was hoping for some more specific feedback on my work though, if you know what I mean. (Actually, it’s funny but for a moment there your response reminded me so much of a standard AI generated reply that I had to put your response through an AI detector — and it said that the chance of it being AI generated was 100%! Of course you are not an AI though! :smile:) Hopefully this is just a misunderstanding.

You’re quite right, I will look into some typography improvements. More hover animations and smooth scrolling are on the way! And yes, I will make sure my site is more accessible (how could I have forgotten that?!)

Thanks, @hasanzaib1389!

1 Like
6

Hello Nicolas,

I site overall is nice.

One thing that did get annoying was losing control of the scroll, especially on that horizontal scroll. I’d get to a play list, try to click on a play button, but at that time the playlist moved, and again, and again. If you can, try it without a delay so that the transition from the user stopping scrolling and the auto-completion of the scroll is more seamless.

The video gallery is nice, but there is no indication on how it works. Since each video needs to be clicked to bring it to the front, I was expecting the same behaviour for the photo gallery at the end, but I had to use the mouse wheel. Being forced to scroll through the gallery also takes scroll control from the user.

1 Like
7

Thank you, @leebut, for taking a look!

I agree with you, the horizontal scroll is buggy and annoying. It’s all because of GSAP’s scroll snapping behavior. You see, how it works is it will only activate the snapping animation when the scroll event it’s listening for is completed. This leads to that weird delay. You’re right, with all that bouncing around, a user can’t even hit a play button! That needs a fix.

I have two ways to deal with this, and you guys can vote up which one you prefer.

  1. Turn it into a slideshow: Basically, I’d ditch the horizontal scroll altogether and turn the albums section into a horizontal slideshow, where users can click to view the previous and next albums. Each slide would take up the entire viewport dimensions, much like it looks like now.
  2. Keep the horizontal scrolling, but get rid of scroll snapping: It would look the same as it currently does, only without snapping. In other words, where ever the user stops scrolling, that’s where the position would remain; unlike now, where it will always snap to the nearest slide.
  • Turn it into a slideshow
  • Just get rid of scroll-snapping
0 voters

Edit: I have closed this poll. Thanks to all who have voted! I will implement a slideshow.

What do you think of me adding buttons to the video gallery for users? Would that help with usability?

I understand what you mean about the scroll gallery at the end. Personally, I have seen a lot of these kind of effects on highly-designed sites, for example on Awwwards. Now, I know these kind of sites are absolutely over-designed to the point of ridiculous, but really, that’s why I wanted this site to be about. I wanted to give users some cool effects to enjoy. After all, it’s not a serious or technical site, but an artist’s site. I certainly wouldn’t use such heavy designing on a technical site, like documentation, or a serious business’s website. So I’d rather keep it, if you don’t think it’s a big deal. I hope you understand. If you have some suggestions to tweak it or something, I’d love to hear it.

Thanks a ton, @leebut and the rest, for your interest and feedback!

8

@Teller — sorry to disturb you.

I was working on this feature today, and I’ve come across some bumps. Specifically, it seems like many browsers don’t allow sounds to play automatically when a user lands on a webpage (See Autoplay guide for media and Web Audio APIs - Web media technologies | MDN). I can make it work if a user clicks a button or interacts in some way; however, it doesn’t seem very useful to have a button on the home page a user can press to play a sound. I’m not sure what to do. Perhaps not implement it after all? Or try to find a work-around? Let me know what you think.

Once again, my apologies for disturbing you!

9

Hi @nickrg

Here is a MDN article you may find helpful.

Looks like autoplay with audio or video is a security risk.
You may need to use an event listener, so when the user performs some sort of action, like a mouse click or key press, the audio sample can play (you may need to setup a way so this only happens once per visit).

Happy coding

1 Like
10

Thanks, @Teller!

I will implement a one-time mouse click event listener for it, as a button the users can optionally click on. In a future version, I will add a loading screen and a button a user has to press to enter the page and thus play the sound, but for now a button in the hero section sounds good enough.

Thanks again, @Teller!

1 Like
11

Hi @nickrg

You don’t need to use a button.
You could set it to any click on the body element, then set a delay of ten to fifteen seconds before the audio plays.

1 Like
12

@Teller — I see.

I see the benefits of what you’re saying, but I’m not quite sure how to let the user know to click. Perhaps a notification following the cursor reading “Click for sound” that goes away when the user clicks once.

I will figure something out. Thanks a ton for your help!

1 Like
13

Hi @nickrg

Since the click event is on the body element, the event will be when the user clicks on any element on the page, such as a navigation link.

If the user loads the page but does not perform any click action, then the audio does not play.

Happy coding

1 Like
14

Don’t worry, @Teller — I have found a solution that doesn’t have any of the issues you mentioned. When I release the updated version of the site, you can take a look and let me know if there are any issues I didn’t notice.

Thanks for taking the time to work this out with me — means a lot!

Nicolas

1 Like
15

Update Complete!

Dear community and fellow coders, the suggestions and improvements you have suggested are now implemented!

Well, at least to the best of my ability. (Whew!)

@hasanzaib1389

  • I have increased the font size for the navigation links
  • I have added several more hover effects, including on the nav links, song elements, the downward arrow on the homepage, the profile links in the footer etc.
  • The “About Me” section is redesigned
  • Smooth-scrolling is implemented for navigation
  • I have added several ARIA attributes, including roles, labels and required ones

Hope it looks better :wink:

@Teller

  • I have adjusted my CSS to show the browser’s native scrollbar
  • I have done my best to make the site more navigational. There are less things going on (no horizontal scrolling and too many scroll-triggered animations anymore) but with Lenis smooth scroll, some functionalities, like arrow scrolling, might not work. It depends on the browser. In general, I think you’ll find it somewhat better! Please let me know if arrow scrolling works for you - it does for me!
  • The nav bar has some improvements. It still retains that visibility-dependant-on-scroll-direction feature, but I have added a feature: if you move your cursor near the top of the page, it will also show up. So now there’s two ways to access it.
  • Please let me know how things size on smaller viewports now - and don’t forget that some of the elements will only resize if you refresh the page.
  • I have added separate Lenis instances to each and every scroll container on the site, so you should be able to scroll the playlists
  • I have fixed up my footer to only contain bare minimum data about myself, as you suggested
  • And, I have implemented your idea of playing a few notes upon landing. Let me know what you think of it. Keep in mind the audio sources sometimes take a bit to load, so be patient (it shouldn’t take too long)! There are seven different tracks, which are chosen randomly.

Thanks once again for all the amazing suggestions.

@leebut

  • The horizontal scroll and any kind of snapping on the site has been eliminated! The slides are now accessible via a slideshow. I think you will find that part of the UI much more intuitive than before :slightly_smiling_face:
  • The video gallery has been switched to a slideshow as well.
  • I have decided to keep the scroll gallery, as I mentioned before, but I do have plans to change that in the future. For now, as a quick fix, I have made the duration it takes to scroll past each image shorter.

Hopefully you find the site a bit easier to navigate than before!

In general, these were the main updates to the site. Apart from those, there are a few aesthetic differences, such as borders added to each section with uniform border-radii and some subtle typography improvements.

You may use the same link as before to access the updated version.

Thanks for all the help and taking a look!

Nicolas

P.S. Thanks, @c0d1ng_ma5ter and @Joseph1205 for voting on my poll!

16

Hi @nickrg

Looks like you spent a lot of time making changes to the code, to make it look and respond even better.

Here are a few few points I’ll mention:

  • make sure all the img elements contain an alt attribute.
  • I noticed the text Sound in a gray circle in the top left corner of the page when it first loads.
  • consider using san serif fonts, they offer a clean, modern, and minimalist look.

Great looking site.

Happy

1 Like
17

Hi!

As @teller said, I noticed that sound looks half hidden on mobile screen. The text on that circle not showing correctly. Other than that, now your website looks great.

1 Like
18

Looks like you’ve taken a few of my suggestions from our PMs and implemented them beautifully. Love the little music intro. The “Click for Sound” that follows the cursor at the beggining is an insanely creative workaround for chrome’s restrictions with sound and video (basically every chromium browser restricts you from doing it. I know its for safety because there are some people who just arent okay in the head but it drives me insane when I need it for genuine use)

Visible scrollbar on the side is just perject. Now you get the best of both worlds, smooth scrolling and quick navigation through the entire site:

If you want, here’s some really basic styling you can apply to the scrollbar just so it fits the theme a little more:

/* if you already have a :root selector, just move the following variable into yours */
:root {
    --scrollbar-size: 10px;
}

::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
    background-color: black;
}

::-webkit-scrollbar-thumb {
    background-color: hsl(0, 0%, 100%);
}
::-webkit-scrollbar-thumb:hover {
    background-color: hsl(0, 0%, 82%);
}
1 Like
19

Thanks, @Teller!

  • Every image now has an alt attribute.

  • The grey circle being in the top left corner issue has been fixed, I think. I have set the default properties of the positioning to be in the center of the viewport upon landing. The reason for the strange behavior was that the position property of the button is set to fixed, and its top and left properties are set to the cursor’s and activated on the “mousemove” event. Obviously, when the user lands, this event hasn’t fired yet, so its default position is in the top left corner.
    Also, for touchscreen devices, there is no actively moving cursor, so it would get stuck up there until the user clicks something. Thanks for pointing this out, because that would be terrible UI :laughing:

  • I have changed the font to a san-serif one to my liking. I really wasn’t sure to use a serif one or not, but you’re right, it looks better with the new font.

My deepest gratitude to you for helping me so much with this site, @Teller.

20

Thanks, @hasanzaib1389 for pointing out the issue specifically for mobile screens. I think it’s now fixed. The button should show up by default in the middle of the screen, which I suspect is more intuitive :wink:

1 Like