DEV Community

Natti Katz
Natti Katz

Posted on

My first portfolio site. Some feeback / tips?

alt text

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)

Collapse
 
aurelkurtula profile image
aurel kurtula

Here are my thoughts (no particular order)

  1. Always use sans-serif fonts on the web. Your sarif font doesn't read well
  2. 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.
  3. The color red, on active links, I don't like
  4. Your skills in code mode, clever, but I do not like
  5. 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.
  6. the video is very slow
Collapse
 
hrmny profile image
Leah

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

Collapse
 
aurelkurtula profile image
aurel kurtula

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.

Thread Thread
 
katzy687 profile image
Natti Katz

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.

Collapse
 
katzy687 profile image
Natti Katz

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

Collapse
 
ardennl profile image
Arden de Raaij

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!

Collapse
 
alephnaught2tog profile image
Max Cerrina

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?

Collapse
 
katzy687 profile image
Natti Katz

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

Collapse
 
katzy687 profile image
Natti Katz

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?

Collapse
 
ardennl profile image
Arden de Raaij

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

Collapse
 
jrock2004 profile image
John Costanzo

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

Collapse
 
hrmny profile image
Leah • 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

Collapse
 
katzy687 profile image
Natti Katz

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.

Collapse
 
aspittel profile image
Ali Spittel

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!

Collapse
 
katzy687 profile image
Natti Katz

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.

Collapse
 
darkliahos profile image
Sohail Nasir

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/

Collapse
 
katzy687 profile image
Natti Katz

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

Very nice page yourself!

Collapse
 
leob profile image
leob • 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.

Collapse
 
itsjzt profile image
Saurabh Sharma

Well, i never saw your portfolio and nor Scott's but I also have something like that itsjzt.github.io

Collapse
 
katzy687 profile image
Natti Katz

Simple, to the point. Nice.

Collapse
 
hawolyba profile image
Hawoly Ba

Hi, nice portfolio but the title is missing in the head section of your HTML file.

Collapse
 
katzy687 profile image
Natti Katz

Good eye. Thanks.