
I'm a 16 year old HS student - Feedback on my first personal website? - pandringa
http:&#x2F;&#x2F;andrin.ga<p>The last few weeks I&#x27;ve been working on getting my personal website up and running... Its mainly built off of HTML, CSS, and jQuery, and the backend is run by Node.js.<p>Any design or engineering advice for me?<p>Thanks!
======
mcallan83
Great site! I like the minimalist look! Here are a few thoughts:

Since you are going responsive, you may want to look into doing a mobile first
design. It is a lot easier to get your content looking good on a small screen
and then slowly work your way up to a full screen experience. Going from full
screen down to mobile is a lot harder. You will end up with more code, and
find yourself fighting your existing styles to get things working on the small
screen. Since you are using bootstrap, I'd recommend you use the built in grid
system to help with this. (I fought grid systems for years... now, I wouldn't
build a site without them.)

Another area I would concentrate on is typography. Choosing matching fonts can
be tricky. A good rule of thumb is to pick two fonts that really contrast each
other. In your case, the fonts basically look the same. Try picking a serif
font for headings and sans-serif for body copy or the other way around. Google
"font pairings" for more examples. I'd also bump up the body font size a bit
and increase the line height. Aim for no more than 10 words per line for the
best readability. (HN doesn't follow this and it is a pain reading long
comments!) Again, Bootstrap has great defaults for type. I'd recommend
sticking with them at first and then tweaking things as you finalize your
layout.

Finally, I'd simplify your effects a bit. Every animation should serve a
purpose and enhance the user experience. It is fun to dig in and make things
move, but if not done properly, they become a huge turnoff. The hard part is
making them feel natural and finely polished. Many times very subtle
animations do so much more that large ones. Think "pat on the back" vs. "punch
to the face". (Not saying your site is a punch to the face.... just repeating
some advice a designer once gave me.) As your skills improve, you can add more
complex animations and effects that add value to your site.

Overall you did great for your first site. Digging in and trying new things is
the best way to learn. If you ever need assistance with anything, feel free to
reach out.

------
lbr
Great stuff. Biggest issue I have is the "about section" is way too long. A
huge block of text is tough to get through - it's not inviting. ALSO think a
photo of you would make it more personal.ALSO I'd put a few sub points under
each bullet in "work experience" ALSO I'd center the three projects in the
"projects" section. Overall, great job. For more thoughts - feel free to check
out my site - LoganRandolph.com

~~~
lbr
and I know you asked for design/engineering advice - But thought content stuff
could be helpful too.

~~~
pandringa
No, thats awesome advice! Thanks!

------
flippyhead
First off, good on you for seeking advice on a forum such as this. Even if you
get negative feedback, nothing but good can come from additional information.
You alone can choose to take this information negatively or otherwise.

Personally, I'd do away with any of the trickery (fading and scrolling stuff).
Unless you can really nail it, it usually comes off as amateurish. It's also
usually hard to pull off unusual font choices.

I dig the cards in the projects section, why not use those elsewhere? I'm not
a fan of the color changes though, what purpose do they serve? In particular
the purple behind blank makes everything hard to read.

If you're going to have sections, such as a blog, inline you should be
updating the hash fragment so they can be linked to directly. Right now the
only way to reference your blog is by explanation..

The navigation in the lower left is unusual and easy to miss. More commonly
this goes topside, and could be a little bigger.

Good luck!

~~~
pandringa
Thanks for your advice! I'm a firm believer in constructive criticism, so
thats exactly why I posted it here.

I had originally designed the color changes to further differentiate each
section, because otherwise there wasn't much seperating each section.

I also had written the page to be able to be linked to by each title, (#about,
#resume, #projects, etc) but I didn't think about updating the hash
fragment... So you're saying I should update the browser URL using javascript?

Once again, thanks for your advice!

~~~
hablahaha
Hm, take a look at the Bootstrap scrollspy for reference, IIRC it updates your
url, provided you play nice with its data api? It also gives you a class to
light up the dots on the lower left hand corner, but that's nothing you
couldn't write yourself.

I also am not a big fan of the color change, scroll as you go site. The colors
are especially distracting if you scroll really quickly, because the timing
has to catch up and you'll see colors change all at once. Font is a bit hard
to read, I had to get really close to the screen to pick up the thin font on
green when the page loaded.

The introduction is a little verbose. Combine that with the font, I had a hard
time getting invested in it. It's a very cute story, maybe put the part about
learning to code in its own section, something people don't _have_ to pay
attention to, then what you're up to right now in its' own section?

I'm kind of digging what's going on at the bottom of the page, it's more
constructed and has a more consistent color scheme going on - maybe that is
something that you could let flow through the rest of the site more?

------
abcXyzza
Engineering advice: in your enterX() functions, consider calling another
function that clears the text of the UL of dots in the top left corner then
have each enterX() function add the text of the currently selected page
section, and maybe change the hollow circle to a filled circle. Breadcrumbs
are usually a good design element.

You might also want to move them down to the middle of the left of the page.
That's a design decision, entirely up to the design owner's discretion.

From a design perspective, it's not terrible. I'm not a fan of the
supersaturated color trend, but, that's me. I can tell you that the last inch
or so of the page has a jarring color change. Consider transitioning to a
darker color in the section that is currently yellow/orange, or change the
blues/greens in the bottom.

I agree with mcallan with the typography. Typography is a much harder part of
design than most people give it credit for. It's one of the oldest forms of
design, and people have very strong and unconscious expectations with regard
to words-per-line, kerning (spacing between characters), and fontface
matching. Read up on it if you have a few hours over the next few years. This
is the main area your site needs work -- fewer words per row, and maybe a
different main body font. The font choice is up to the design owner, though.
Some people, like me, can spend hours choosing a font.

On a brief glance through your code, I notice the use of timers. I didn't
really analyze why, so I could be mistaken here, but you could maybe use
jQuery's promise/done functions as a matter of good engineering practice.
Magic numbers are bad, and are a last resort. Monads are good. Learn them
early on, learn callbacks early on, especially if you're doing web
development. You'll jump through hoops that will make Java/C++ developers'
noses bleed with frustration.

For all the feedback and criticism in there, it's actually a good site. That
was some serious small detail talk above. Also, I'm going to start using the
pallets = []; idea in a few places. Thanks, sir.

~~~
abcXyzza
Oh, a more advanced tweak that I've only seen on a couple pages would be to
take your vertical sections (about, intro, blog, those) and give them their
own horizontal scrolling sections with left and right arrows.

That could easily turn into a significant time investment (a day or two, if
you're a motivated beginner with some knowledge), depending on your current
skill level, but it amounts to a few very wide <div>'s, and some jQuery to
calculate scroll distances. It'll make your page easier to read, and more
visually complex in a good way.

------
infinitebattery
I'm also a 16 year old high school student! I'm working on a website right now
and i'm going to start adding projects soon. Regarding your website, my main
criticism is the animations/transitions when you click on each tab (the page
moves so fast-maybe slow it down). Otherwise, I really like your design-it's
smooth and really refreshing to look at. You might want to consider changing
the fonts though.

This is irrelevant to your website, but I noticed that you're from TJHS. Did
you go to MHacks? I saw a few kids from that high school over there. I also
noticed that you're involved with Pilot. I really want to get a hackathon
started up here in Detroit, so we should connect.

~~~
abcXyzza
There's a startup weekend coming up in Grand Rapids soon, and another in
Kalamazoo sometime in the next few months.

[http://grandrapids.startupweekend.org/](http://grandrapids.startupweekend.org/)

They're pretty intense weekends. The teams that did best at the one in Detroit
were pretty heavily stacked with very experienced developers. If you want to
find out more about what's going on in the community, check one out. They have
weekend passes for teams, and spectator passes if you just want to check out
the final results of 54 hours work.

------
bobfirestone
I'm looking at it on an iPad and the text is quite difficult to read.

Symmetry is visually pleasing. The three blocks in the project section are all
different heights and each has a different sized image which is awkward to
look at.

When building ux and ui ask yourself does the /animation|feature|interface/
actually make the experience better than not having it. Does the animation
pulling in the projects or loading the blog posts or changing the background
color actually improve the users experience?

I think you are on the right path and will have lots of opportunities to build
cool things.

~~~
pandringa
I haven't gotten around to optimizing for tablets yet... Desktop and Mobile
were my highest priorities. But thanks for the advice!

------
pandringa
Link: [http://andrin.ga](http://andrin.ga)

------
gesman
Animated gif + ugly HTML that makes $1 is more valuable than node.js + jquery
+ whatnot that makes $0.

You're lucky to hear that advice when you're still 16 :)

~~~
hablahaha
Hm, I was just wondering why a personal site need to be powered by node? If
it's just as a learning experience - no shame in that!

~~~
pandringa
I used node to build other parts of the site - namely the blog, a link
shortener, and a few APIs I wrote just for my own other projects.

------
LarryMade2
I use Firefox on Linux, for me, nothing is clickable and the "Peter Andringa"
is overwriting the Resume headline.

~~~
zachlatta
Running into the same issue.

OS: Arch Linux

Browser: Firefox 25.0.1

~~~
pandringa
Thanks! I'll look into that.

------
kalagan
I like the "Go to Admin Panel" link at the bottom of the page

~~~
pandringa
I had to have a _little_ fun somewhere...

~~~
abcXyzza
Never give that up.

It's something you can never let go.

