DEV Community

Cover image for I create my portfolio today, I want your reviews.
Abhay Prajapati
Abhay Prajapati

Posted on

3 2

I create my portfolio today, I want your reviews.

I have recently created my portfolio today, I want your views regarding aspects of

 design,
 UI,
 favicon,
 theming
 features and alot.
Enter fullscreen mode Exit fullscreen mode

here it is have a look HomePage

abhvercel.png

Background Color

  • #1589F0 #000000 for background color Main theme color.
  • #111111 #111111 for background color secondary theme color.

Font/ Text Family:

Actullay, I haven't sorted any font, but I am using Inter from Google Fonts

Font Text Color

Here are list of colors I have used for text:
Text main color: - #ffffff #ffffff
Text secondary color: - #999999 #999999
Text for Links/Buttons: - #52a9ff #52a9ff

Do tell me about the way I have present it, also how's the tagline.

tagline: 19,who keeps think... creator of Open Source Apple Store API
Enter fullscreen mode Exit fullscreen mode

does any things feels incomplete or missing? regarding my portfolio? share below.

Have a look a Favicon animating in your browser.

Image
some thing like this...

Reach me any where.

Twitter: @Abhayprajapati_
Github: @Abhayprajapati

thank you for reading

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (3)

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡ β€’ β€’ Edited

I'll try to check kinda deeply and point you the mistakes, regarding

Technical + QA + Accessibility + Design issues Review.

  • When you jump from the homepage to a different view, the navbar becomes smaller, which is weird and makes me think that you didn't re-use your navbar component.
  • The navbar isn't shown in blogs nor in about.
  • Blogs are shown in this home but not in blogs.
  • You've a little description that is shown in the home but not in the /about section.
  • You are not using next/Image to load your images, which leads to non-optimised images which does not have explicit width and height attributes.
  • Top left image should be in .webp format (better quality and compression than the current jpeg)
  • <ul> tags does contain tags other than <li> (which deals to invalid HTML), i.e. top right menu is an <ul> tag with <button> tags inside.
  • I'll add your name next to the photo as it's hard to find out that clicking there you can go back to this "home" view.
  • Links are made with <span> tags for any reason I can't figure out, remember that you can use next/Link with passhref and it's child should be an <a> tag
  • The cards should be clickable as well (not only the link), this makes it easier to browse, specially in smartphones.
  • The cards container should have a bit of padding. In mobile, cards don't seem cards as they are sticked to both left and right.
  • Using a color code such #f5f5f5 and #212121 as max/min color value, instead pure white/black reduces the visual fatigue while reading a site.
  • Github and Twitter icons are not an <a> tag (all links should be an <a> tag so crawlers (for SEO) and text readers (for accessibility) can identify them properly
  • I'll rather avoid the underline in links as the visual hint is enough with this blue color and the hover effect.
  • If you plan to render all the content in the home (which will probably be a good idea) I'll suggest to avoid adding menu items or convert them into anchor links instead.
  • This "XX hours ago" text is too dark (not enough contrast ratio)
  • <html> element does not have a [lang] attribute
  • Meta description is not present in the document.

See Lighthouse Report as well for insights on Core Web Vitals.

Hope it helps :)

Collapse
 
theabhayprajapati profile image
Abhay Prajapati β€’

Thanks for so deep review, for today these are my task and goals, I finish them and let you know.

Your points are guidelines.
πŸ₯°

Collapse
 
ben profile image
Ben Halpern β€’

Love the color scheme. Blues and blacks and grays are distinct and palatable. Seems like the margins are a little funky in places. Too tight in some places and wide in others.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay