My tribute to Aaron Swartz

Now that is a nice looking page, you definitely have a knack for design, did you get the inspiration from anywhere in particular?

Also, i agree 100% with what you said about reading code, that is so not emphasized enough, or often enough. I think Gordon from “watch and code” was the first teacher i really heard that from, hammering home the importance of reading and learning from different code bases.

@lasjorg Thank you very much! For this particular project I guess I cannot say I had a single inspiration. I supposed ideas come from other projects or designs you see all the time, but I don’t know it consciously to be honest. There are two website that I know of, Dribbble and Behance, for designers to show their work. There are many web designers showing their stuff and you can be inspired from their design if you want. Again, thank you!

@camperextraordinaire Actually I didn’t think of that. Waiting half a second sounds interesting and I’ll definitely think about it.

About the timeout. First, I’m hiding the #preloader div:

preloaderDiv.setAttribute( 'style', 'opacity: 0' );

Then on line 236 in the SCSS code, I’m using a transition of 500ms:

transition: opacity 500ms;

And because the fading action takes those 500ms, I’m setting a timeout of 500ms which sets the display property to none for the #preloader div.

setTimeout( ( ) => preloaderDiv.setAttribute( 'style', 'display: none' ), 500 )

Just by reducing the opacity to zero won’t have the effect I wanted, because it will be hidden but still interactive. So using display: none in the div avoids any mouse events like selecting text and so on.

Maybe there’s a better way to do this, I don’t know. I thought about using “pointer-events: none” but this still lets you select text even if the mouse pointer doesn’t change. Also changing z-index to -1 would have a similar effect as the #preloader div is absolute positioned, but this way a useless div would be “displayed” so what I always do is changing the display property to get rid of it at once.

Thanks for your feedback and kind words. Sorry for the long post, though :smiley:

BTW @geekysmurf I’m struggling to reproduce the situation in your screenshot but I can’t find the combination of resolutions to get the same results :smiley: Can you please tell me the resolution or model of device you’re using? Sorry for the inconvenience :slight_smile:

Very inspiring! I think most/all of us know deep down that the best/only way to really progress is to really practice work on something every day. But personally, I’ve started so many things with this thought in mind, but for some reason always lose my focus after a few weeks. Congratulations on making it work for you!

You tell me! Hehe You’re speaking to a big procrastinator here. You can make it work for you, but remember: don’t rely on motivation, motivation comes and goes; rely on habits.
Thank you again!

Haha, yeah I guess procrastination comes naturally to me too :wink: Was there anything specific that helped you to change your habit?

Couldn’t say, honestly. I guess I just had enough lol

No worries. My screen size is 2560x1440, but that’s not the issue. When I resize my browser and drag it around it doesn’t change anything. Maybe try some padding or margins between those elements?

That’s weird. It’s working fine here. I’ll look deeper into this. Thanks again!

I’m using the latest Chrome on a Mac. What about you?

You could always the two and adjust.

Looks nice. Except for the starting page. The photo looks somewhat low quality. Was it compressed or resized or something?

Anyway, weird thing, completely forgot that he existed, haven’t seen a mention of him since, like, 2014 too. Says a lot about human condition how those who chose to go alone are so easily forgotten.

Please can you explain what this projet do ? and what the object of it ? (LOVE BEGINNERS ;))

Thanks @Coding_Rodent! Yeah, the photo quality is not good. I didn’t find any picture of him for the header with better quality. Pity!

@yassine I’m not sure what are you asking :smile:

@geekysmurf I use both Firefox and Chrome. I’ll take a second look to spot the problem with margins :stuck_out_tongue: Thanks again!

Awesome job, one of the best I’ve seen. The only thing that through me off was the navigation bar. At first it works perfect in its placement, but then for some reason it just feel unnatural to me fixed at the bottom. Though that is more of a personal preference. I think that has to do with online browsing development conditioned me to only see them on the top of a page. Overall it is an amazing page, and hope I can design/build one out like that as well in the near future.

Than you very much @raregamer!

As a personal preference, I like it fixed on the bottom, but I’m sure many others prefer it on top of the page. Particularly, when users are on their phones, the navbar fixed on the bottom seems more natural to me, because they can reach the menu at any time with the tip of their thumb. On big phone screens, reaching a navigation fixed on top with only one hand might result in a bad UX, in my opinion. But, as I said, I guess it’s all about personal preferences :smiley:

This is an interesting post about this topic: http://uxmovement.com/mobile/why-mobile-menus-belong-at-the-bottom-of-the-screen/ (July’17).

Thanks for shedding light on this matter!

Haha, yep. I do agree with the point about on the phone for sure and thank for sharing the article.

1 Like

Nothing to say about it. Very great work.

1 Like

Thank you very much! :slight_smile:

Very nice page! Very professional look. And good choice of a person to make a tribute page about! :smile:

Thank you very much, @Atlas!