Natti Katz

Posted on Dec 31, 2017

My first portfolio site. Some feeback / tips?

#webdev #portfolio #javascript

Like the title says, I am trying to put some finishing touches on my first portfolio site.

It's quite basic so far, and I took HEAVY inspiration from
Scott Tolinski

What I have left to do is the project showcase section, and I wanted to try something interesting there. Checking out a ton of examples, and not really seeing anything too inspirational.

Also not sure how I would structure client projects vs my personal side projects. Don't really want to split off a new page for it. I also only have worked on a couple different long term type of projects professionally and I want to include some of my side projects to pad out the section.

Well, here is the link:
https://katzy687.github.io/my-web-portfolio/

It's made with React and the super dope Gatsby generator.

Any feedback, critiques, dope project showcase examples are welcome.

Happy New Year!

Top comments (22)

aurel kurtula • Dec 31 '17

Here are my thoughts (no particular order)

Always use sans-serif fonts on the web. Your sarif font doesn't read well
Never use the colors white or black. Always white should be slightly darker, and black slightly lighter. I read this tip many years ago - from Eliot J. Stocks I think. But regardless, your white font hurts the eyes.
The color red, on active links, I don't like
Your skills in code mode, clever, but I do not like
Also think about combining you colors. You have 10 different colors (or six - if we take the browns as same shade) that's way too many.
the video is very slow

Leah • Jan 1 '18

The code look seems to just be a gimmick, because it's nothing, no language, no json, just a list

aurel kurtula • Jan 1 '18

Good point. Whilst if you want to be nice you can see what he was trying to do (reminds me of those "you are the css in my html" type of quotes), in reality, it's a demonstration of not knowing where pre should be used - which that's clearly not the case.

Natti Katz • Jan 2 '18

O wow did not know the pre tag existed.

Stepping back and looking at it, ya it's a bit corny. I can certainly be more creative.

Natti Katz • Dec 31 '17

Really good feedback. Thank you. Didn't realize how slow the video was on mobile. I'll take into account all these theming tips.

Arden de Raaij • Dec 31 '17

First of all, congrats on the new site!! Somehow I could instantly see that this site was React based. My personal site has been made with Gatsby as well.

I'd advice you to prototype your site in HTML and CSS first. Seeing this is your first portfolio site I'm guessing your experience in plain CSS and HTML isn't huge yet. Starting out with Gatsby means that you've probably spend more time on playing around with it's nifty functions (it is really awesome, isn't it?) and less on creating sound HTML and CSS.

When you prototype in just CSS and HTML + maybe a bit of JavaScript first, it might be a lot easier to experiment and find a consistent style.

Also, the homepage is really empty!

These are just words of advice, I hope they don't discourage you because it's definitely a good first try!

Max Cerrina • Jan 1 '18

Agreed especially RE prototyping it yourself. I am not HR, but for code, I'd rather open up the source and see something simple but clearly human-made.

Hell, as you come up with different designs, add a project for various portfolio designs. Why not?

Natti Katz • Jan 2 '18

That's a great idea! Then the projects can also serve as a record of progress.

Natti Katz • Jan 2 '18

The homepage is kinda just a top level navigation type page that says hello then navigates to other pages. I was actually debating between having a home page that routes to other pages, or one page that scrolls down to other sections.

If I kept it as a simple navigation landing, what else should I add to the home page?

Arden de Raaij • Jan 3 '18

I think I'd go for some links to social networks / github / dev.to(?) / and contact. It's not much more but gives you another few elements to play with. If you want to fill up some space or don't like icons, you could also make that into a little story about where people can find you / contact you.

Btw, here's my portfolio site; also simple and made with Gatsbsy! arden.nl

John Costanzo • Jan 4 '18

Great start. Here is the things that are sticking out to me

Never ever have a construction page. If its not ready, do not have a link to that page.
Make a design decision of your header and keep it the same throughout the site. What I mean is when I click on one of the links it makes me feel like I am visiting a whole other site.
Your homepage has no content. I have no idea what your site is about. I get to your homepage and my eyes are watching someone running. The concept of a homepage is usually to summarize or display what this site is about.

But keep at it and evolve it. Going to bookmark to see what the finish product will be like

Leah • Jan 1 '18 • Edited

hrmny.pw

If you want another example, it's not very good and missing projects to show off, but I designed everything myself

The navigation also seems a little slow on my phone and hard to tap, so maybe look at that

Natti Katz • Jan 2 '18

Nice! I like it. I was debating between the one page scroll design, and multiple pages with a landing home page that just looks pretty and does navigation.

Ali Spittel • Jan 1 '18

Couple thoughts:

I would make sure your portfolio is the root domain of your site so at katzy687.github.io/ instead of katzy687.github.io/web-portfolio
I would increase the font size throughout -- start with something like 6 REM for Hi! I'm Natti. and decrease slightly elsewhere.
I would synchronize the fonts throughout. Use either one font or two that go together really well. Preferably sanserif for readability.
I would use fewer colors to simplify everything. Start with two and work your way up if super necessary. I would only use more than a very few if you are going for a colorful or rainbow theme, in which case you would use really bright or pastel colors!
I would not use a framework for a simple static site like this one -- I think it complicates things and using HTML/CSS/JS from scratch really displays that you have that foundation.
As a heads up -- CSS isn't case sensitive so using class names and ids with caps in them could cause conflict.
I would use either ems, rems, or px. I see a combination of the three in your code -- just be consistent!

I did something somewhat similar for my old portfolio site, if it helps for inspiration! The polka dots moved in the background!

Natti Katz • Jan 2 '18

I'll look into the root domain thing. I believe github only lets you host one site like that, but I have not used it yet.

I tried 6 rem. That is waay too big and in your face for my liking. But I will increase it to like 3 or 4 and scale appropriately.

The colors and fonts tips are invaluable. I'm not a designer but I definitely need to learn some fundamentals.

About vanilla vs frameworks, I really only pulled out Gatsby because we're switching to react at my job from angularjs and I wanted to practice with react syntax. But it definitely has been distracting as I've spent more time playing around with plugins and graphql than actual building :/

The css classname thing. Why would that cause a conflict if I name classes uppercase? The uppercase thing is a convention I saw in a react course for assigning a class to a component via css modules. But I do believe I broke the convention and was naming non component-container elements with a capital as well.

Rems vs ems vs px are fine to mix and match in the right situations no?

Thanks a ton for the in depth response. This is turning into a great learning experience.

Sohail Nasir • Dec 31 '17

Adding on from what others had to say, I would make sure it can run on multiple browsers (Edge, Firefox, Chrome and Safari) and is responsive, so the content can be viewed without too much hassle on phones.

I would probably remove the video, just because it can slow down the page for some machines and also it requires data to be downloaded, think about people on 4G connections or limited connections.

Here is my portfolio if you want to take some ideas from it, its not perfect but I do show it to prospective employers when I am job hunting: nasirfam.co.uk/sohail/

Natti Katz • Dec 31 '17

good point. I'll probably take it out. Need to think of a new background idea.

Very nice page yourself!

leob • Jan 3 '18 • Edited

Well, first and foremost I want to say, I like it!

Yes, you copied 100% of the structure of scotttolinski.com but who cares ... the end result looks completely different.

What I like about it is that it's simple and minimalistic, it doesn't look like your average Bootstrap-based website. It does look quite fresh and 'different' from most corporate/professional websites, and on the other hand it doesn't look "amateur".

(see some minor points below)

I'd even go as far as asking if I may use this as an inspiration for my own website! It did inspire me to finally get something up on the web.

May I ask if you used any CSS 'framework' for the website? Quite obviously not Bootstrap, but maybe something lightweight like skeleton.css or basscss.com/ or whatever (there are dozens of them).

(Oh by the way I see the answer already, this probably comes out of the box with 'Gatsby' ...)

Having said that, yes there are some minor flaws ... most of which others mentioned too already, but anyway:

1) Use one and only one font/typeface, and choose a sans serif typeface ... right now I see at least 2 fonts mixed (a serif one and a sans serif one). Sans serif is better readable on screen/web.

2) I noticed that the text on the home page is not as legible as it could be ... the letters are quite faint, are you using opacity or a very light color? Make them darker or give them more contrast.

3) On the other pages (about etc) the blue font in the title bar is very high contrast and not pleasant on the eye, making it less readable ... I'd use white or grey or something like that.

4) In general you should look at your color scheme, try to make it consistent ... why are you using a dark background on the 'About' page and a light background on the other pages?

I think I'd make the title bar less dark (not black, but grey or dark grey) and the rest of the page consistently light grey, or maybe even just white (when the home page loads and the video is not there yet you can now see the title bar 'jumping' from black to grey before the video loads).

5) "Responsive" seems to work, whether intentionally or not (no 'hamburger' which I would say is good, in this case) ... the only thing I noticed is that if I make my browser smaller (narrower) then at some point the video gets rotated 90 degrees ... is that by design? (could be)

As far as I could see the website works fine on all major browsers (Chrome, FF, Safari ... IE/Edge and mobile not tested).

The video on the home page is a little bit slow to load on a slower connection, but it does give a nice personal touch. Is that a video showing yourself?

One thing I wondered about is why you need something like React for a website as simple as this. But I know the answer already, this is just how 'Gatsby' works!

All in all cool piece of work and what I like most is that it's lean and simple, no unnecessary fluff!
And I'm interested in checking out Gatsby, never heard of it.