TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

I'm a 16 year old HS student - Feedback on my first personal website?

9 点作者 pandringa超过 11 年前
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!

10 条评论

mcallan83超过 11 年前
Great site! I like the minimalist look! Here are a few thoughts:<p>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&#x27;d recommend you use the built in grid system to help with this. (I fought grid systems for years... now, I wouldn&#x27;t build a site without them.)<p>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 &quot;font pairings&quot; for more examples. I&#x27;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&#x27;t follow this and it is a pain reading long comments!) Again, Bootstrap has great defaults for type. I&#x27;d recommend sticking with them at first and then tweaking things as you finalize your layout.<p>Finally, I&#x27;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 &quot;pat on the back&quot; vs. &quot;punch to the face&quot;. (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.<p>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超过 11 年前
Great stuff. Biggest issue I have is the &quot;about section&quot; is way too long. A huge block of text is tough to get through - it&#x27;s not inviting. ALSO think a photo of you would make it more personal.ALSO I&#x27;d put a few sub points under each bullet in &quot;work experience&quot; ALSO I&#x27;d center the three projects in the &quot;projects&quot; section. Overall, great job. For more thoughts - feel free to check out my site - LoganRandolph.com
评论 #6812868 未加载
flippyhead超过 11 年前
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.<p>Personally, I&#x27;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&#x27;s also usually hard to pull off unusual font choices.<p>I dig the cards in the projects section, why not use those elsewhere? I&#x27;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.<p>If you&#x27;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..<p>The navigation in the lower left is unusual and easy to miss. More commonly this goes topside, and could be a little bigger.<p>Good luck!
评论 #6812895 未加载
abcXyzza超过 11 年前
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.<p>You might also want to move them down to the middle of the left of the page. That&#x27;s a design decision, entirely up to the design owner&#x27;s discretion.<p>From a design perspective, it&#x27;s not terrible. I&#x27;m not a fan of the supersaturated color trend, but, that&#x27;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&#x2F;orange, or change the blues&#x2F;greens in the bottom.<p>I agree with mcallan with the typography. Typography is a much harder part of design than most people give it credit for. It&#x27;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.<p>On a brief glance through your code, I notice the use of timers. I didn&#x27;t really analyze why, so I could be mistaken here, but you could maybe use jQuery&#x27;s promise&#x2F;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&#x27;re doing web development. You&#x27;ll jump through hoops that will make Java&#x2F;C++ developers&#x27; noses bleed with frustration.<p>For all the feedback and criticism in there, it&#x27;s actually a good site. That was some serious small detail talk above. Also, I&#x27;m going to start using the pallets = []; idea in a few places. Thanks, sir.
评论 #6844732 未加载
评论 #6844757 未加载
infinitebattery超过 11 年前
I&#x27;m also a 16 year old high school student! I&#x27;m working on a website right now and i&#x27;m going to start adding projects soon. Regarding your website, my main criticism is the animations&#x2F;transitions when you click on each tab (the page moves so fast-maybe slow it down). Otherwise, I really like your design-it&#x27;s smooth and really refreshing to look at. You might want to consider changing the fonts though.<p>This is irrelevant to your website, but I noticed that you&#x27;re from TJHS. Did you go to MHacks? I saw a few kids from that high school over there. I also noticed that you&#x27;re involved with Pilot. I really want to get a hackathon started up here in Detroit, so we should connect.
评论 #6844774 未加载
bobfirestone超过 11 年前
I&#x27;m looking at it on an iPad and the text is quite difficult to read.<p>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.<p>When building ux and ui ask yourself does the &#x2F;animation|feature|interface&#x2F; 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?<p>I think you are on the right path and will have lots of opportunities to build cool things.
评论 #6813109 未加载
pandringa超过 11 年前
Link: <a href="http://andrin.ga" rel="nofollow">http:&#x2F;&#x2F;andrin.ga</a>
gesman超过 11 年前
Animated gif + ugly HTML that makes $1 is more valuable than node.js + jquery + whatnot that makes $0.<p>You&#x27;re lucky to hear that advice when you&#x27;re still 16 :)
评论 #6813332 未加载
LarryMade2超过 11 年前
I use Firefox on Linux, for me, nothing is clickable and the &quot;Peter Andringa&quot; is overwriting the Resume headline.
评论 #6813591 未加载
kalagan超过 11 年前
I like the &quot;Go to Admin Panel&quot; link at the bottom of the page
评论 #6815043 未加载