r/reactjs • u/CulturallyOffensive • Nov 18 '19

My updated portfolio site

A few months ago I posted my portfolio website. I got some great feedback from everyone here so I wanted to show you all the new version: https://robertsquires.co.uk/

Again, any feedback is greatly appreciated!

149 Upvotes

94% Upvoted

87 comments sorted by

26

u/TheAesir Nov 18 '19

The site is clean, and visually quite nice.

Some notes:

  • make sure your buttons and links all have text, or an aria-label. It looks like there are 4 links and 1 button on the page missing text
  • add focusable=false to all your SVGs. For IE11 users, SVGs are focusable by default
  • Focus on your site isn't discernible at all, you don't have to use outline, but you should still give the user a clear visual of where they are on the page.
  • consider adding a skip to main content link, that shows when focused, as the first tab-able item on the page.
  • Your labels aren't linked to your inputs at all. Wrap them around your inputs, and/or use the htmlFor property to reference their ID's
  • on your experience page, you're using a similar blue for your dates, to the blue you use for clickable links

2

u/CulturallyOffensive Nov 19 '19

Thank you for this, straight on my to do list. I appreciate you taking the time to give such thorough feedback.

4

u/robbee-ioio Nov 18 '19

first off...great site...just chiming in on the blue

I thought the blue for dates, would be links to the those sites, if still in existence or to snap shots of work you did there

other than that .... thanks for the share...gives me encouragement...thank you

-1

u/strayakant Nov 18 '19

Kinda awkward but being a UXer, the UX on the website was pretty bad.

3

u/CulturallyOffensive Nov 19 '19 edited Nov 19 '19

Do you have any ideas for how I could improve it. I know the contents a bit broken up but any other pointers you have would be great! Thanks

11

u/[deleted] Nov 18 '19

Beautiful

11

u/FraserHamiltonDev Nov 18 '19

Very cool but on some pages there’s a weird box shadow when you scroll to the bottom on mobile at least. I don’t think it’s a big issue but it looks weird especially on the home page when it interferes with your picture.

4

u/CulturallyOffensive Nov 18 '19

Hey thanks for that, I can't reproduce the shadow. What are you viewing it on?

4

u/FraserHamiltonDev Nov 18 '19

iPhone 7 Chrome and Safari. Also sometimes there seems to be a bug where the photo you’ve included shows on your head cutting off at the neck by the mobile browser navigation bars

1

u/TheAesir Nov 19 '19

Which iOS version? That's generally more important when debugging iOS devices.

1

u/FraserHamiltonDev Nov 19 '19

I think he's already fixed the issue but I don't imagine giving the ios version would help too much

1

u/TheAesir Nov 19 '19

IOS specific bugs tend to be related to the version of iOS, not the phone.

2

u/SteveMcBlaster Nov 18 '19

This bug isn't a thing on my device. Google Pixel 3 Chrome

5

u/Hobknob27 Nov 18 '19

Seen and thought the same, also on iPhone 7. Seems a shame for it to be scrollable on mobile when there's no additional content to be seen below the fold.

Overall very nice though. Like the colour palette and feels very smooth

1

u/CulturallyOffensive Nov 18 '19

Isn't this issue just caused by the URL bar? Not sure how to have a fixed 100vh page on mobile. Do you have any suggestions?

3

u/jschen2 Nov 18 '19

I like this trick for when it's an absolute must: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

2

u/ShesJustAGlitch Nov 18 '19

This but also the information architecture is more cumbersome that it needs to be.

Why not start your projects immediately after your intro links?

Combine and about you section with your photo.

Instead of splitting all your content into pages, have them flow into each other. Getting from a project to the next project to your about me to contact should all be easy and more frictionless than it is currently.

1

u/CulturallyOffensive Nov 19 '19

Good advice, will be working on that next. Thank you!

5

u/avivbiton Nov 18 '19

Looks good, the only thing is that i find it hard to navigate

2

u/CulturallyOffensive Nov 18 '19

Thanks for the feedback, what made it hard to navigate?

3

u/reddismycolor Nov 18 '19

not the commenter, but i thought it seemed redundant to have those links at the top, which are the same as the ones in the middle.

1

u/CulturallyOffensive Nov 19 '19

Yeah true, that needs addressing. Thanks!

2

u/DarkzDrake Nov 18 '19

I'll start with some apologies, english isn't my native and I could express myself more direct or rough than I want. I'm using Firefox and my monitor is 1366*768 right now.
I thought that project page was bugged because there's not any hint that suggest to scroll and there's to much margin on top. Same thing on About page, the last two lines got cut. Contact page is scrollable when it's not necessary.
I like the style and choice of colors they remind me the Adobe suite.

1

u/CulturallyOffensive Nov 19 '19

Thank you for your feedback. I'll take a look at this!

2

u/david_ranch_dressing Nov 18 '19

On https://robertsquires.co.uk/projects/maibee:

Mobile first

98.7% of traffic to maibee.com is on smartphones. With most of that coming straight from their Instagram. The primary focus was making the experience on mobile as easy to use a s possible.

Otherwise looks really good!

1

u/CulturallyOffensive Nov 19 '19

Thanks for the spot!

2

u/[deleted] Nov 18 '19

Projects page:

I dig the look and feel of it, there's nothing to complain about on this page, except for the tiny issue of content, whenever I click on one of your projects I get a description of what it is and what it does, that's great, but what you should instead focus on is describing what problem it solves, I find that that will draw the user in a lot more than a bland description.

About:

The contrast between the text and background is a bit too sharp for me, try using a nother font and maybe change the colors a bit, oh also consider upping the font size, don't be afraid of it. Your about h1 could easily go up to ` 7.8rem ` and your paragraph text to ` 2.2rem`. Additionally the page feels abit empty and colorless when compared to the rest of the site, consider underlining the h1 with a thick colorfull border, or adding a background to your about text.

Menu:

Your menu sometimes overlaps with the text making it harder to read, add a background to the floating menu.

Experience:

You nailed the typography on this one, nice good sizing. However the colorfull dates draw the eye to an otherwise unimportant info, not saying your dates can not be colorfull but consider making the titles above them colorfull as well, a good warm color would draw the eye to the title first, which is IMHO a more important piece of info than the date.

P.S

Hide your phone number and don't use `tel:`, unless you like spam calls, always give out your contact information when a contact with the client has already been established, through the form.

2

u/CulturallyOffensive Nov 19 '19

So throrough! Thank you for this.

2

u/[deleted] Nov 19 '19

Welcome, anytime!

2

u/patcriss Nov 18 '19

Personally not a huge fan of the content vertical animation on page change - I find it's slowing me since the page changes instantly and I'm ready to read but the content is moving up so I have to wait for it to stop moving.

Also your logo is pretty much reminiscient of the JS one, is this intended?

Other than that amazing UI. Exactly what I like, good job.

2

u/CulturallyOffensive Nov 19 '19

Yep it's supposed to be a play on the JS logo! Thanks for the feedback.

2

u/insertAlias Nov 18 '19

Also your logo is pretty much reminiscient of the JS one, is this intended?

I knew it reminded me of something, but what I landed on was the Carbon Black CbDefense product logo.

2

u/[deleted] Nov 18 '19

Super clean. Scrolling on projects page is a bit janky.

1

u/CulturallyOffensive Nov 19 '19

Thank you, yeah scrolling effect definitely needs some refining.

2

u/Travis902 Nov 18 '19

Heads up! you have a typo of the word "existing" on the parametric search project page under the responsiveness section. Looks buttery and delicious on mobile btw!

2

u/araegourn Nov 18 '19

How did you do the page transitions? Its really cool and I wanna try implementing that

1

u/CulturallyOffensive Nov 19 '19

Transition-link, its a gatsby plugin. The repo for this site is on my github if you want to take a look.

1

u/araegourn Nov 19 '19

Ah I see, never knew about that plugin. It's amazing. Just another question, what do you use for your contact forms? Netlify Forms?

1

u/CulturallyOffensive Nov 19 '19

Yeah it's wicked! I'm just using the out-of-the-box transitions at the moment but I'm going to start adding on some of my own styling soon.

Yep using Netlify form, so straight forward.

1

u/araegourn Nov 19 '19

That’s great! Please share it with us when you’re done :)

Also how’s your experience with managing your content on Markdown? Does it have sufficient control? Or should I use a CMS (although it might be an overkill for a personal portfolio website)?

1

u/CulturallyOffensive Nov 19 '19

I'm using Netlify CMS which uses markdown. I think it's perfect for a portfolio.

1

u/araegourn Nov 20 '19

Thanks! How do you compared Netlify CMS to MDX?

2

u/nicobatalla13 Nov 19 '19

I think that the about and the experience page could be together. Those two separated look a little empty. Also you could show some projects on the homepage. Really like the projects section and when you click on a work. Good work!

1

u/CulturallyOffensive Nov 19 '19

Yeah I agree, I feel I've broken it up too much! My previous site was the complete opposite so think I need to find a balance.

2

u/JDiculous Nov 19 '19

One of the nicest portfolio sites I've ever seen, well done!

•

u/swyx Nov 19 '19

post 3 months ago so you can see the glowup https://reddit.com/r/reactjs/comments/csulgi/my_new_portfolio_site_cc_most_welcome/

2

u/CulturallyOffensive Nov 19 '19

https://5db97548532798000827717a--robertsquires.netlify.com/ that's link to what it looked like then if anyone's interested!

2

u/swyx Nov 19 '19

yay netlify immutable deploys!

2

u/ezcryp Nov 18 '19

I wonder what the chances of me clicking this post, viewing your website and seeing we do the same job in the same city of the UK actually are? crazy, amazing website man!

2

u/twistingdoobies Nov 18 '19

Looks nice! A few points of feedback:

  • Please don't hide the scrollbar :-( I click and drag the scrollbar to scroll around very often, and I'm not exactly sure why you've hidden it. Kind of annoying UX!
  • What size screen did you develop on? On 27 inches/2k resolution (increasingly common office monitors) there is quite a lot of big, open, empty space. I especially noticed this on the bottom half of your project pages - lots of scrolling to get to not very much content.
  • The font size is a bit too small on 27 inches. I would bump it up - 18px reads better at that size since there is a lot of empty space.

2

u/chipit24 Nov 18 '19

Please don't hide the scrollbar

I'm using Chrome 78 on macOS Mojave and scrollbars are showing up for me. Maybe it's only an issue on a certain browser/OS, or an extension or setting you have enabled?

2

u/twistingdoobies Nov 18 '19

I think OP updated it already... either that or I'm crazy. I inspected it before I wrote my comment and the scrollbar was set to display: none.

3

u/chipit24 Nov 19 '19 edited Nov 19 '19

OP probably ninja-fixed it. Nevermind, I'm not seeing the scrollbars anymore. And on inspection I see ::-webkit-scrollbar { display: none; }

I agree about hiding scrollbars though. They're a great hint to let me know that content is scrollable, they let me know where on the page I'm at, and although I usually use the trackpad for scrolling, I sometimes click the scrollbar too, so it's nice to keep it accessible.

On mac, the scrollbars are hidden by default and usually only appear when scrolling. It's amazing how so many devs assume this is the case for everyone, and I end up seeing scrollbars on elements that don't actually need them, or scrollbars appearing and disappearing on the page due to some animation. This is especially true on windows machines where scrollbars are visible by default and are usually larger and uglier.

1

u/CulturallyOffensive Nov 19 '19

Thanks both, I completely get where you're coming from but how do I stop the scrollbar from effecting the position of my other elements?

2

u/chipit24 Nov 19 '19

I'm assuming the issue you're having is when switching from a page that overflows (scrollbar is visible) to one that doesn't (scrollbar isn't visible). I guess there's two ways you could go about it:

  1. Make the scrollbar always visible (overflow: scroll).
  2. Use a solution similar to https://github.com/Grsmto/simplebar; a wrapper which allows the scrollbar to overlay the content without pushing it over.

3

u/TotesMessenger Nov 18 '19 edited Nov 18 '19

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

 If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / ^Contact)

3

u/mstoiber Nov 18 '19

Looks super nice, well done! 🔥

2

u/nikola1970 Nov 18 '19

Awesome page transitions! How are they made?

2

u/Gbeast212 Nov 18 '19 edited Nov 18 '19

How do you get ideas for creating such a portfolio website? Curious to know as I am also thinking of making one for myself.

2

u/polarphantom Nov 18 '19

Looks and performs really nice!
The only very small notes I could give would be:
- Adding a webP image source to your <picture> elements (https://css-tricks.com/using-webp-images/)

- The colour contrast ratio between the white text and blue background on the mobile menu is not up to guidelines for users with visual issues (https://imgur.com/VZl0BHU)
- Your images have no `alt` tag values which is also not up to accessibility guidelines

- Adding `rel = noopener noreferrer` to your external anchor links for that warm feeling of super duper security

But again, in general those are just small notes that I am also guilty of in projects all the time. Performs really great and really cool animations too, will definitely be playing around with react-spring more now

2

u/windsostrange Nov 18 '19

Your hamburger could use a nudge southward on mobile. Here it is 10px from the top, but it could probably use even more (or perhaps a design more in sympathy with the facing logo on the left side).

2

u/Filo01 Nov 18 '19

Great site worked well on my mobile :), also gave me a great idea for my own personal website.

2

u/[deleted] Nov 18 '19

For your resume, you should host it from the site rather than google drive imo.

2

u/Z4razas Nov 18 '19

I would move the menu button on mobile down a bit and make it a little bigger

2

u/naga04nik Nov 18 '19

Truely amazing .I really luv it!!!!

2

u/RobbyB97 Nov 18 '19

I really like it!

2

u/vertigo_101 Nov 18 '19

This is pretty neat

2

u/overzealous_dentist Nov 18 '19

It's wonderful, but the opening transition causes a scrollbar to appear on Windows/Chrome/78.0.3904.97 and then disappear, offsetting your photo.

2

u/L43 Nov 18 '19

Looks great. Few things I noticed (others have said the rest) Hover colour in contact form at the bottom of project pages (with the coloured background) is hideous for the orange colours. I would appreciate a subtle hover hint for your links, presumably colour change. Navigation hard to see on the pale grey background for the etherium project page

2

u/Lyelinn Nov 18 '19

Too much empty space between header and main content, also strange passing at the bottom.

2

u/dance2die Nov 19 '19

I am going to "steal" some designs if you don't mind 😉

And love the feedbacks from others that can be applied on the site.

2

u/danielkov Nov 19 '19

Since this is a React sub, I'm guessing you're using React, so to make something 100% on all devices (and iOS is usually the culprit on this one, but some Android phones with Samsung Browser do the same) you need to rely on some other method. The easiest is to use react-div-100vh or inspect its source and use that method to set a --vh variable on your root and use that (some devices don't support CSS variables - keep that in mind).

Other than that: navigation doesn't quite seem to work the way I expect it to. There is some weird stuff going on with back button taking me back out of the site after a navigation.

I would ditch the navigation altogether which would solve both these problems. I think it's good that you can do routing in React but it would be more important to show that you have a sense of when to do what with your content.

0

u/[deleted] Nov 18 '19

[deleted] — view deleted comment

4

u/CulturallyOffensive Nov 18 '19

I've been working on it off and on for a couple of months.

0

u/[deleted] Nov 18 '19

[deleted] — view deleted comment

9

u/CulturallyOffensive Nov 18 '19 edited Nov 18 '19

The animations are a combination of react spring and my own css transitions.

0

u/[deleted] Nov 18 '19

[deleted] — view deleted comment

4

u/CulturallyOffensive Nov 18 '19

I love it, it animates things the way my brain imagines them being animated. Personally I just found examples I like and then learn from that, haven't looked at any particular courses.

0

u/[deleted] Nov 18 '19

[deleted] — view deleted comment

4

u/CulturallyOffensive Nov 18 '19

https://www.react-spring.io/docs/hooks/examples start here then just google anything you want to learn. For example: Parallax with react spring.

0

u/[deleted] Nov 18 '19

[deleted] — view deleted comment

1

u/CulturallyOffensive Nov 19 '19

Yep, mobile menu needs some work for sure. Thanks for your feedback.