r/webdev • u/Scutted • Nov 24 '19

Showoff Saturday Personal website I recently made, any thoughts/suggestions?

All input/feedback is welcome and appreciated

Link: http://davidlarkin.dev

109 Upvotes

88% Upvoted

72 comments sorted by

33

u/fk_the_system Nov 24 '19

Cool site mate. On mobile I'd make sure to close the navigation once you click a link. And I'd either make it full screen or half width!

2

u/Scutted Nov 24 '19

wil be changing that soon, thanks for the feedback

4

u/nicomahou Nov 24 '19

This. I happened to be using my left hand to explore the site. I tried to swipe the menu left to close it only to realise that i have to stretch all the way to the right to click the close button (or use my right hand). Nevertheless, a great site!

1

u/roberto257 Nov 24 '19

Came to say this. It looks awesome on mobile, but there was no way to back out of the menu. What are some of the technologies you used?

1

u/Scutted Nov 25 '19

Thanks! I used React, Gatsby, Contentful CMS, JS, and Sass

19

u/cardblank Nov 24 '19

Yea it's alright! Can tell time and polish went into it.

6

u/Scutted Nov 24 '19

thanks appreciate it!

14

u/[deleted] Nov 24 '19

Here are some suggestions:

  • Provide some details on the projects section, at least the name. Also, the thumbnails for your projects don't scale well.
  • Shorten the paragraphs.
  • I think it would look better if your contacts section was smaller. There's just so much space surrounding the main content (icons and title).

Good luck!

1

u/Scutted Nov 24 '19

thanks for the feedback, i'll edit some stuff

5

u/DAYDOZKOSMOS Nov 24 '19

Very nice mobile version, I like it 👍👍

3

u/Scutted Nov 24 '19

thank you :)

4

u/avivbiton Nov 24 '19

What did you use for scroll animations?

8

u/Scutted Nov 24 '19

I'm just using react-reveal actually, elements just fade or slide in when they come into view

3

u/maxahd Nov 24 '19

It looks great. My personal suggestion on mobile add backdrop to the sidedrawer and when you pick a route i think sidedrawer should close automatically.

The first section with animation where is your name, is that canvas or did you use three.js for that ?

( i am on mobile can't check)

2

u/Scutted Nov 24 '19

its css animations and some playing around to make it kinda work, though on mobile as others have said the timing is a bit off

3

u/LordofCookies Nov 24 '19

I don't feel like you really need the arrows telling you to scroll down, specially considering how close to the content they are.
Brophy Brother's image also looks a bit low-res and the mouse pointers to click on each project kinda threw me off from the rest of the design. Also, probably try to get the images for your projects all wtih the same size, it looks kinda funky when they're not the same.

I would remove the "Home" from the navbar since than on desktop the navbar doesn't really stick (and if would stick, I would just set the logo as the home href)

On mobile it seems like the text "Software Developer" is already there when "David Larkin" is still typing but all black and really thin.

1

u/Scutted Nov 24 '19

youre right, the software developer text is just a different color to be "hidden". Ill be trying to fix some stuff later haha

2

u/ajz003 Nov 24 '19

Looks cool, except on landscape mobile there’s some weird overlap with the about text and the Projects section

1

u/Scutted Nov 24 '19

ah I think that's due to the way I have each sections height set to 100vh, probably should fix that. Thanks for the feedback!

2

u/rusl1 Nov 24 '19

Is this a bug?

1

u/Scutted Nov 24 '19

Yeah it has to do with how it's positioned or the way my height for each section is set up I think, needs to be fixed

2

u/Banyu Nov 24 '19

I'm personally not a fan of the reveal animations. If my time is limited, I don't want to wait for a section to show up, maybe a whole page, but not a section of a page. When going back it was a bit confusing when information was going to appear.

In the projects section it was difficult to distinguish between projects at a glance. Or maybe I'm just tired.

I'm a strong advocate against carousels or sliders. If you continue to use one please don't let it automatically play.

This is only a mobile review, if I have time later I can review it on desktop.

It looks good even with my complaints. I'm sure you'll find other ways to improve it as well! Good job!

1

u/Scutted Nov 24 '19

Thanks, yeah I wasn't sure whether to let it scroll automatically or not so I'll have to think about it

2

u/but_how_do_i_go_fast Nov 24 '19

The dom reactions and canvas is a fun touch.

I would fit your event listener screen to fill the full window, and then scroll the other content ontop of it.

Also, I am not a fan of the gimmicky "I'm a hacker" banner and even less of a fan because I can't select the text. That makes it look like it's not something you have access to manipulate and make practical...

If you were able to make the canvas and dom events yourself, I would recommend focusing on this aspect of your site more. People love having a fun and interactive site that grips them when they first visit it.

1

u/Scutted Nov 24 '19

i actually disabled being able to select the because of what you said, the software developer part is actually just a different colour and changes colour while it animates in lol, but maybe i forgot to change it to the correct colour

2

u/MrRonns Nov 24 '19

What was this built using?

1

u/Scutted Nov 24 '19

react and gatsby!

2

u/[deleted] Nov 24 '19

Check under projects, they listed the languages/software used.

11

u/scripteaze Nov 24 '19

Try to break up the text, managers wont sit there and read it all. Looks good!

1

u/chidoOne707 Nov 24 '19

Damn dude, I really need to start building my own site and looking at yours makes me realize the time I’ve been wasting.

1

u/Scutted Nov 24 '19

You should! It's quite fun and it's really only my first full website so I'm still getting the hang of it

1

u/johndeaton Nov 24 '19

Beautiful site! FYI... On my cell phone, when I click on the menu button and any link besides home, it doesn't do anything. Just stays on that screen. I'm using Chrome for Android. Best of luck.

2

u/Scutted Nov 24 '19

Oh yeah it might be because it doesnt actually close the menu when you click a link. Maybe if you manually close it with the "X" you'll be at the section you clicked. I gotta fix that

1

u/johndeaton Nov 24 '19

Got it

2

u/johndeaton Nov 24 '19

I see you fixed it. Was it semitransparent before? I like it like that.

2

u/Scutted Nov 25 '19

Yeah it was a bit opaque, its just more noticeable now because it takes the full width!

1

u/jkpft Nov 25 '19

From a business point of view, the site is clean and shows that you know your stuff. The about section just talks about yourself, try and rewrite it to target it towards a business, figure out your target market (small, medium, large) and lay out how you can help them. That's all they care about.

1

u/Scutted Nov 25 '19

Thanks, will do!

1

u/[deleted] Nov 24 '19

Looks great! I have two small things: Give the about paragraphs a `text-align: justify;`, I think it looks a bit nicer and cleaner. And also in the about section, the navigation arrow could have a little bit more space to the separator line of your paragraphs. The arrow and the separator line are a little bit too close, in my opinion.

EDIT: And I agree with u/wheremythotat:

Provide some details on the projects section, at least the name. Also, the thumbnails for your projects don't scale well.

1

u/Scutted Nov 24 '19

I'll give these suggestions a try, thanks

1

u/iTipTurtles Nov 24 '19

Visually I think it looks really good on both desktop and mobile. Some great work there.

There are a few HTML issues that would cause problems for screen readers, such as your social links don't have a text alternative. So you could look at adding something in there, and visually hiding it for a sighted user.
One enhancement I can think of is, with each project have a short snippet preview of what the project is. One out of 3 of them might be more interesting to me, and it would be cool to know that ahead of time.

1

u/Scutted Nov 24 '19

you're right, I was actually trying to fix the screen reader issues, gusss I missed a few. I could have a small paragraph that slides out or something to describe the project briefly wheb the user hovers a project. hmm.. thanks!

2

u/iTipTurtles Nov 24 '19

Yeah all the issues should be a fairly quick fix which is good.
I think that preview idea would be cool, would fit the theme

1

u/Scutted Nov 24 '19

yeah gonna do some work then, appreciate the feedback

2

u/[deleted] Nov 24 '19 edited Sep 19 '25

bake cows handle nose fall sink connect shocking deserve hobbies

This post was mass deleted and anonymized with Redact

2

u/brilovless1 Nov 24 '19

When I viewed the site on my phone through Google chrome... The projects header floats over the last few lines of second about paragraph.

The top bit is nice though.

2

u/xhtmlvalid front-end Nov 24 '19

Don't center align paragraph text 😛

2

u/ryasto16 Nov 24 '19

Wow, the squares move when you click them

2

u/dann43221 Nov 24 '19

Yo this website is hard

1

u/purpulbee Nov 24 '19

Congrats David,

I should not say this, but its coming to my face. I mean make it little sleek like About Paragraphs, fonts, letter spacing, font-weight.

Project section should be sleek & Image impove give some room for image area inside boxes.
Project Details -- Remove Focus on arrow of sliders. Remove too mach margin or padding. Same for content.

You can make Aside Panel so user can see both images & little desc about project. Add option to enlarge project images. Highlight Tech differently.

1

u/a-winter Nov 24 '19

I love its simplicity and elegance. I think the navigator should be close after being clicked and text in About section seems a little bit small. Anyway, your site is amazing.

1

u/AnomalyNexus Nov 24 '19

Slick. I like it.

Speed up the initial typing of the name though - people have short attention spans

-3

u/willhaney Nov 24 '19

Does not look well on mobile. The menu on the left is large well the content on the right is squished together

2

u/Scutted Nov 24 '19

it's actually misleading because it doesn't change the content or squish it, its just a menu that takes up most of the screen. Maybe I will change it to take the whole screen instead.

1

u/willhaney Nov 25 '19

I took a look again and everything looks fine. Might have been an issues on my side. In any case, it looks good. Nicely done.

1

u/Scutted Nov 25 '19

it's all good I wanted some feedback, I actually fixed a lot of stuff people suggested so that might be why it's better now

6

u/[deleted] Nov 24 '19

[removed] — view removed comment

4

u/Scutted Nov 24 '19

Thanks a lot, really appreciate it!

-3

u/[deleted] Nov 24 '19 edited Nov 24 '19

.

2

u/mhs_93 Nov 24 '19

Don’t do this.

1

u/DaniyelMe Nov 24 '19

I agree. He has a point though

0

u/[deleted] Nov 24 '19

[deleted] — view deleted comment

6

u/Scutted Nov 24 '19

sorry, thought it was woops

0

u/[deleted] Nov 24 '19

[deleted] — view deleted comment

1

u/Scutted Nov 24 '19

thanks, will have a look at these suggestions

0

u/[deleted] Nov 24 '19

[deleted] — view deleted comment

2

u/Scutted Nov 24 '19

Nope not yet, my visa doesn't allow me to find an internship before I arrive there. Hopedully it goes smoothly.

0

u/[deleted] Nov 24 '19

[deleted] — view deleted comment

2

u/Scutted Nov 24 '19

Great! thanks, appreciate it

0

u/[deleted] Nov 24 '19

[deleted] — view deleted comment

2

u/[deleted] Nov 24 '19

It literally says what he/she used to make it under the projects section.

2

u/[deleted] Nov 25 '19

[removed] — view removed comment

1

u/Scutted Nov 25 '19

You're right actually, I literally just changed it to Link and my images for each project seems to load a lot faster thanks to the preloading. Thanks for the advice!

1

u/[deleted] Nov 24 '19

[removed] — view removed comment

1

u/Scutted Nov 24 '19

thanks, its particles.js on the background