My portfolio site 22/23 (test)

Code Feedback
1

Any feedback welcome!

Especially tips for accessibility

Thank you for taking the time!

Roles: Design, animation, coding
Tech: Inkscape, NEXT, Tailwind, Framer-Motion, React Hook Forms

https://my-portfolio-22-23.vercel.app/

23-10
23-101081Ă—2162 149 KB

1 Like
2

Looks like an interesting site but I’m immediately distracted by the lack of space between words like “web developer” and “web designer”. I hope that is not on purpose…

3

Hi Daniel

I am agree with @hbar1st , it needs white spaces, but great job so far!!!

I got this first impressions:

1 | The website it looks too wide in my PC screen, maybe containing the width it will look more UX friendly.

2 | In your welcome page:

  • I got distracted because the background image (a bit of transparency it might help), also it looks a bit pixeled in my screen.
  • Being congruent with the rest of the design I think the word Welcome should be in green color. This topic word it needs white space around too, some padding…
  • I don’t like capital letters in general, and they are not easy to read.
  • You should reserve <h1> for brand’s or author’s name , and then use <p> for the rest of the lines, you always can make their style different from CSS. This is important for SEO too.
  • The menu needs more white space too and and I don’t really like the typography.

3 | Work page in progress, so next time. :smile:

4 | About page

  • White spaces too, designers use to separates different sections with a bit of spaces or a lot depending if those sections are somehow related or not.
  • Underlining words that are not links doesn’t look good, less readability and accessibility I think.

5 | Contact Page

  • I think Let us get in touch sentence should have more spaces around, bigger font size. I think you could test really big sizes too here. Probably you could write something different too. Maybe a title and a small description? Not sure.
  • Placeholders texts have not the same position.
  • Submit button… capital letters again (my issue :joy:) and instead of use the generic word submit, why not something like Get In Touch!! or Reach us Out!!?. And more padding.
  • You could display Animations, coding and design: Daniel Huebschmann 2022 next to your footer animation.
  • Probably your form should be a bit bigger and social icons a bit smaller.

Daniel, even if my feedback comes from others knowledge too, take these impressions like ideas because you knowledge is wider than mine and you are doing better work than me!! Anyway I wanted to give you a helpful feedback that is why it is so extense, but I Ioved your webpage so far.

Keep the good work and habpy coding Daniel!

4

You can run Lighthouse on each of the pages and check the accessibility audits. Next.js also has a accessibility page with some resources.

I would suggest making the navigation larger. Maybe add a nav element and make it a list as well.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.