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)
Here are my thoughts (no particular order)
The code look seems to just be a gimmick, because it's nothing, no language, no json, just a list
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
preshould be used - which that's clearly not the case.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.
Really good feedback. Thank you. Didn't realize how slow the video was on mobile. I'll take into account all these theming tips.
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!
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?
That's a great idea! Then the projects can also serve as a record of progress.
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?
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
Couple thoughts:
I did something somewhat similar for my old portfolio site, if it helps for inspiration! The polka dots moved in the background!
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.
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
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.
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/
good point. I'll probably take it out. Need to think of a new background idea.
Very nice page yourself!
Great start. Here is the things that are sticking out to me
But keep at it and evolve it. Going to bookmark to see what the finish product will be like
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.
Well, i never saw your portfolio and nor Scott's but I also have something like that itsjzt.github.io
Simple, to the point. Nice.
Hi, nice portfolio but the title is missing in the head section of your HTML file.
Good eye. Thanks.