
Show HN: I made this today with ReactJS, any suggestions ? - snehesht
http://snehesh.me/
======
shermanyo
some basic suggestions from a quick visit:

\- maybe make the menu button animate/blink or something to catch the eye when
the page loads, so people know they don't need to wait for the text typing to
finish.

\- personal preference, but I'd try a horizontal line to separate the menu and
content area (1px green the width of the page might look good? something like:
[http://i.imgur.com/FmBR5fA.png](http://i.imgur.com/FmBR5fA.png) )

\- if you have the option of closing / collapsing the menu, why not pin it to
the top of the screen? Hidden, you'd just have an icon in the top right which
_shouldn't_ really overlap with anything.

\- try to adjust the box model of your buttons so they don't dance when you
mouseover and add/remove the borders.

\- rather than the unicode menu icon, you could use something like
[https://fortawesome.github.io/Font-
Awesome/](https://fortawesome.github.io/Font-Awesome/)

\- double check your menu while resizing the window, you get some overlap of
the buttons.

Let me know if you need a hand with any of the above. Happy hacking :)

~~~
snehesht
Hey thanks for the feedback, I still have a lot of things to do. I've been
learning ReactJS for a week, thought I should mess with it.

edit: The problem with font-awesome is I have to load a lot of stuff just to
use one icon.

~~~
shermanyo
No worries, I'm only a couple weeks ahead of you so thought I'd give my
thoughts as someone at roughly the same level :)

Re: font-awesome, I wouldn't worry unless you need anything you can't easily
do with unicode, or want any of the branded logos for social buttons, etc...
(I like your unicode version actually, you've given me ideas now for a golang
pkg...)

------
briantmaurer
This reminds me of some of the early websites I built. I always enjoy looking
at early personal creations.

Tips:

• To prevent "button dancing" on hover add an invisible border to the buttons
when you are not hovering –> border: 1px solid rgba(0,0,0,0);

• Keep building more!

