Jul 6, 2023

NextJS portfolio website

portfolio react beginner-friendly tailwindcss nextjs

This is a straightforward portfolio website created with the React library. The NextJS framework for server side rendering and tailwindcss for styling are used in addition to React. It is an extremely easy-to-understand website with neat and organised code that beginners can use as inspiration for their own initial portfolio website.

2

Give a star to encourage!Discussion
Naman Gupta
Naman Gupta3 years ago

Nice project! Quick question - Why are you using "use client" in page.tsx? Is it because of next-themes?

Naman Gupta
Naman Gupta3 years ago

If yes, can't we eliminate next-themes and use tailwind to support dark mode?

Chirag Aggarwal
Chirag Aggarwal3 years ago

Tailwind by default uses the prefers-color-scheme css media feature. You can't modify it using a button. So to manually toggle dark theme you will need to use "darkMode: 'class'", which can only be modified on client side.

Chirag Aggarwal
Chirag Aggarwal3 years ago

Atleast this is what I encountered. Please let me know if I am missing something. Thanks for the feedback 😄

Naman Gupta
Naman Gupta3 years ago

Yeah, I agree there is a huge gap right now. I am thinking to ditch Next just because of so many weird changes in 13. There can be a flow if you want to completely ditch next-themes (Not perfect) but here I go:

1- Enable "darkMode: class"

2- Load app in white mode (default)

3- If user toggles dark mode. Just create a cookie with name like theme:"dark"

4- Add a support to read cookie on each and every request so you can add "dark" class dynamically but it will make it dynamic and we won't be able to get the benefit of SSG (That's why Mentioned not perfect 😛).

5- Argghh! Next.js is getting complicated day by day. I just found the same discussion here https://github.com/pacocoursey/next-themes/issues/152#issuecomment-1364280564. They are also discussing the both approach. The one I am talking about and the one that you are using.

It was great looking into this. Thanks and I guess next now has been over engineered. Plain react looks easy now. 😛

Chirag Aggarwal
Chirag Aggarwal3 years ago

Haha thanks a lot for informing me this method. I will definitely try to recreate it if i can 😛

Naman Gupta
Naman Gupta3 years ago

You don't have to recreate. Its already good. We are just here talking about the edge case. I use mantine and MUI frequently and both are dependent on Client Based Components. Also, quality of code is good in your project. Keep going and Happy coding.

Naman Gupta
Naman Gupta3 years ago

You don't have to recreate, its already good. We are just here talking about one small special case/way of doing. I use mantine and MUI frequently and both are dependent on Client Based Components anddd I do this "use client" all the time. In addition to this, I must say quality of code is good in your project. Keep going and Happy coding.

Chirag Aggarwal
Chirag Aggarwal3 years ago

Thanks a lot man 😊 I really appreciate it

Login to join the discussion

More Builds by Chirag Aggarwal

nextjs tailwindcss chatbot github api react