Search for a command to run...
A portfolio site is the modern form of resume to help with jobs, contacts, and growth. Know how I built an automated portfolio site with a balanced UX
Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
Glad you liked it Pierre-Henry Soria
Very well armando emanuel contreras rodriguex. All the best.
Thanks a lot. Much appreciate 💛
Hey Tapas, your site looks nice. Good work.
There's some feedback for you though. This might sound harsh, but you've asked for feedback, not at all personal.
Images are optimized properly and aren't lazy-loaded(There's CLS).
The performance metric of your lighthouse score is not so good. Lighthouse Report for your reference.
You said you are using Next.js and TailwindCSS, but it looks like you are not following the best practices because according to Lighthouse you haven't properly purged your JS and CSS.
Not a big fan when the images don't have alt.
Design Feedback:
There are a lot of areas where font size is too small and hard to read.
The start text of a blog post being displayed when hovered over the card kills UX. (This might be opinionated)
I'm up for any discussion regarding this.
Good luck.
Hey thanks for the detailed feedback and your time on it.
All that you mentioned about the performance and accessibility are part of my September backlog already. Thanks again for taking the effort. Have a good day.
Tapas Adhikary Hey, if it's already in your TODO, then it's cool.
It'd be great if you write another blog post after you've done optimization and improved the performance and UX.
Good luck.
Sai Praneeth Diddigam, of course! The first one, I shall focus on improving the lighthouse scores. Thanks for following it up.
Thank you, Lakshya Thakur
Thank you, Estee Tey. Very glad with that feedback :)
Thank you, Olubisi Idris Ayinde. Much appreciate.
Inspired by you I started working on my own portfolio and I just created the Hero area a long way to go, but I m committing this month to that. Thanks for sharing it really helps any way here is what I have made till now.
You are welcome, Ashish maurya. The Hero image is impressive. Great that you are planning to complete it this month. All the best.
Thanks Tapas Adhikary
Thanks a lot, Raj 🙂
An excellent portfolio with a well crafted design and coding. I love the ambience and the UI so much. The article is also fantastic, keep up the good work Tapas Adhikary. You are amazing, lot to learn from you! Kudos! 👏
Thank you so much, Savio Martin 🙏. You have been very supportive, bro.
Next.js is the coolest React-based framework on the planet(at least I think that way!). How about learning to build something useful, practical, and fun with it? Please join me get started.
Learn how to create a newsletter with Revue APIs, Next.js API routes, and Tailwindcss. The best way to include a Newsletter in your Next.js app/site.
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.
Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD
Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.
A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment
Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.
GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
Developers are powerful creators. When your knowledge, creativity, and passion come together, you create something you are most proud of. I have a similar feeling today!
Did I tell you, I have redone my portfolio site from scratch? But why was it so important? Right, that's what is this article is about. I hope you find it helpful.
new site is (mostly) automated with Next.js API Routes and SWR.deployed on Vercel.process and journey, a very little about the code itself. The code part is coming in the future posts.A portfolio website provides your professional information to your potential clients, job hires, consumers. It is the place to showcase your work, let the world know who you are and what you are up to.
When a potential client, HR, hiring manager visits your portfolio site, they should get a feel of your strengths and what you are capable of. In the modern era, a good portfolio website may replace the olden day's resumes of job seekers. Building a portfolio and keeping it updated helps in this case. It also helps us to reconnect with what we have done in the past from a single place.
I already had a portfolio site. It worked great but with a few limitations,
So, one evening when I sat with the pencil and paper, I could identify five key points to drive changes keeping my motivations high. Let's see them.
YOUThe primary focus of your website should be on YOU. It means you need to project your face, attitude, work, passion, aspirations, all that someone will find interesting.
In my case, the list includes,
profile photo showing my face and attitude.blog.Youtube channel.side hustles(projects) I have done.sponsors, supporters, and the reasons.newsletter subscription.career growth in numbers.about me, with a personal connection.The below image is the mind map of my work with myself at the center.
The next thing is about creating a personal brand. It is about identifying,
KINGAfter you identify the areas to focus on, you need to think about the content and how best you can organize them.
Again, in my case, the content includes,
The image below shows the mind map of items that I can accommodate immediately(the green lines), and some are for the future(yellow dotted lines).
The next thing is about organizing the content. Let's discuss that in the next point where we talk about User Experience(UX).
QUEENIf the content is a
king, the user experience(UX) is thequeen. They must work together to rule.
Here are a few factors that need primary attention,
Organization of content: How better you can organize the content so that users do not seek much to get to it. At the same time, they shouldn't get overwhelmed by the quantity of it.
I tried balancing it by providing a list of my recent articles, videos on the home page with the links to get more. I have provided searches, lazyload of content on scroll to limit the content overwhelming to users.
Colors, Fonts, and Themes: I'm probably simplifying it here, but these are strong foundations of a great UX. I have made extensive research before settling down with a color palette, font choice, and dark theme as a default theme.
Color Palette: Select the primary brand color in various shades. For my site, the color palette looks like this,
Font - When you build a content-oriented website, it will have many things to read. So you need to select a font that looks clean and easy to eyes. For my website, I am using the Manrope font, an open-source modern sans-serif font designed by Mikhail Sharanda in 2018-2019.
Themes - Dark & light themes are the default choices for the theme design.
Responsiveness: A majority of the device usages goes to mobile and other hand-held devices. It is a mandatory requirement for you to support responsiveness. It will be unfortunate if a recruiter tries to see your profile on mobile and find it nonresponsive.
Animations: Animations are like salt in your food. When you use it right, the food tastes perfect. Over or undergoing it may leave the users with unpleasant experiences. Introducing a subtle introductory animation may set the right mood for your users.
To me,
UX is all about keeping the balance!
TECHNOLOGY STACKWhen I started the initial design, I had plenty of choices in front of me. Today web technologies provide(confuse) you with many options. I have been exploring Next.js and tailwindcss for a while now.
I have a strong feeling that this technology stack(nextjs-vercel-tailwindcss) is going to stay for a long due to its wide adoption, community support, the ease of use.
AUTOMATICALLYAny website is NOT a one-time affair. It requires updates and changes to keep it relevant. Usually, you may want to make two types of updates: the look-and-feel update and the content update.
The look-and-feel update doesn't take place very often, and you can plan it. However, if you are a frequent content creator, you may have to update the website frequently. It could be tiring for someone to do it manually. Here you should explore the opportunities to automate the content as much as possible.
Here is the mind map of the content sources for my portfolio site,
As you see, Next.js can communicate to the APIs of each of the services to fetch/create data. It is an excellent approach as you do not have the burden of maintaining it manually.
Here is the list of free API services I'm using. I hope you find it helpful.
Feedback so far?The feedback is genuinely motivating so far. Thanks to tech Twitter for pouring in lots of feedback to let me know I'm on the right track. It also helped to figure out a bunch of bugs to fix. The thread below captures some great discussions about it,
If you have any feedback, please feel free to let me know.
An excellent outcome of building something is, you get plenty to share. I'll share much technical knowledge I have gained by building the portfolio website in the coming days. Expect them on your way as articles, videos, and threads. That's all for now. Please like/share this post if you find it helpful.
Let's connect. You can follow me on Twitter(@tapasadhikary), LinkedIn(tapasadhikary), and GitHub(atapas).