Build a Next.js 14 Portfolio website with Tailwind CSS and Typescript

In this video you will learn to create a multi page Next js 14 app using typescript, framer motion and tailwind CSS. This app features a responsive design, an animation on routing, and other cool animations.
Code snippets (CSS and constants): gist.github.com/Mif2006/d1b37...
Assets: drive.google.com/drive/folder...
Source code: github.com/Mif2006/WebPortfolio
More projects: • Complete websites
Timestamps:
0:00 Project intro
0:25 Project setup
2:25 Home page
10:31 Navbar
14:27 Navigation
20:55 Routing
22:30 Animated transition
27:55 My-Skills page
33:36 My-Projects page
42:02 Contact page
46:29 Finished Website

[@yusufaltundal3482]

Amazing portfolio! Loved it!

[@WebChainDev]

Thanks for the feedback!

[@Rayhanranadev]

You're did great man! Keep goin on :)

[@WebChainDev]

Thanks!

[@nikolas1549]

Please create more NextJs videos, you're doing fantastic!

[@WebChainDev]

Thanks! 3d websites coming soon

[@senselessplays]

​@@WebChainDevhope it will come in few days

[@yasminemelo5155]

AMAZING

[@michaelperry6808]

I love this website, thank you for teaching us how to make something like this. I do have one question though, with regard to the unicorn on the main page, what was the prompt you used?

[@samahgad241]

thanks alot swiper saved me😍🤣

[@elmirasahibova5326]

Thanks

[@luyvannda]

Thank you for the video, I am new to both Next.js and tailwind, I have been coding along with the tutorial and finished the home page section. However it seems to me that the home page is not responsive. The source code seem to not help either with the issues. I just 10 minutes in, I wonder if there is any fix in the end of the video for responsiveness.

[@ashutosh_tiwari]

You are awesome man🔥

[@WebChainDev]

Thanks a lot!

[@joytalukder3586]

Awesome ❤

[@hammadraza7064]

is it responsive?

[@krishnaagarwal7934]

I will be making this tommorrow

[@WebChainDev]

Good luck!

[@innerlion7564]

Is it mobile responsive

[@garytraffanstedt]

I looked at the 1inch website and their version is responsive. Everything looks good no matter if you are on desktop or mobile. Looking at the source code of both, you are missing the code to make it responsive.

[@qausainmanzoor]

How to deploy it from local host to custom domain/hosting? OR on netlify?

[@raphandrews1]

valeu mano

[@nayanbramhane8077]

If you have footi kismat like me, you might get error at 3:05 `bg-cover bg-center`, hard code it using style if you can't see the image properly

[@wladimircosta1795]

you need to download the assets and place them in the public folder

[@omal]

why you didn't show UI time to time, if u did it we can get the idea

[@briancharles5162]

Hi! Nice tutorial, any idea on how to deal with the little flash when navigating ? I saw the following page a fraction of second then animation plays.

[@WebChainDev]

This happens wheb Next.js is run locally, as it is an SSR framework. When the site is deployed these flashes shouldn't happen

[@arunpurewal1063]

if you wanna check it out before it's deployed - run npm run build and then npm run start. This will run as if it's in production

[@Aman_Jain]

Is it mobile responsive ?

[@akari7926]

When I deploy it on vercel the horse does not move and it can not load the bg-3

[@MrFornus]

Add the unoptimized prop to the Image tag and the unicorn will move when deployed to Vercel.

[@melikedemir8126]

Your next js modern portfolio video that you made with JS is not visible. Where is it? Can you upload it again, please?

[@hammadraza7064]

is it responsive?

[@kothapallikavya7356]

hello, everything go smooth in this but i stuck in react social icons, why icons not downloading ,css is working

[@WebChainDev]

Perhaps there is an issue with the library itself. Try using lucide-react instead, which should already be integrated into your app by default

[@ryandetzel848]

Curious where you get these great assets, logos, videos, etc. Is this is a site you buy them from?

[@WebChainDev]

For the most part the images I use are ai generated, in this case I used mage.space

[@bolormaats5636]

Mey terminal not working 0:58 😢

[@GamePixel1]

Can i use this project in Wordpress , so how i upload this project

[@WebChainDev]

I believe you can't. Next.js can't be uploaded to most hosting providers. The best place to upload it is Vercel

[@Desert_Person]

im trying to delete the code but i cant theres a file called trace thats stoping me , why?

[@WebChainDev]

Most likely this is because you have the code open in vscode. If you go there, click file and click close folder the issue should be gone

[@yashwantYadav71]

which site you use to get all these cool images and moving images ??

[@WebChainDev]

The unicorn I got from the 1inch site, and the rest was generated with ai, in this case mage.space.

[@Eldyr9]

@@WebChainDev I loved the art style of the background images what prompts did you use to get this?

[@WebChainDev]

@@Eldyr9 I think it was something along the lines of sunrise in misty mountains, purple and pink color scheme. I also used the previously generated images as part of the prompts to make all of the images in the same style

[@shesparks64]

pls share figma files also...if you have

[@WebChainDev]

Sorry, I don't have any figma files for this project

[@dogzrgood]

Explanation of horse and cliff photo on main page is missing. The video just skips. Great work though !!

[@WebChainDev]

Thanks, I probably made a mistake while editing

[@dogzrgood]

@@WebChainDev no it's not that complicated but actually I wasn't aware that png's are animated. So I was wondering how was your horse moving? Now I realize png's are also animated lol. Thanks :)

[@ahmetnishefci4006]

How is that horse moving? Is it gif?

[@WebChainDev]

Yeah the movement comes with the image

[@Houseofstartup]

​@@WebChainDevHow you get this image or create it??

[@elitepusher]

Where can i find these types of assets?

[@WebChainDev]

Most of these images are made with ai, in this case mage.space.

[@elitepusher]

@@WebChainDev Thank you! ❤️

[@jasonmoons5651]

so cool can I use your site?

[@WebChainDev]

sure

[@abdurrahim-bi8kd]

bro the home page comoponet is not responsive??? but all the other are responsive? when you turn the site to mobile the horse hove to text you saw that too but you skip it ... all are ok but one part is not .. please try not to do this . I love your protfolio .

[@imranhossainshakil4333]

It's so easy to write code by seeing another monitor screen 😂

[@user-nc5fp1fp8q]

милончик, а правда ято ты еще и на русском видосы запиливаешь или тебя подставили иноагенты из коллективного востока😮😮😮😮

[@hammadraza7064]

triggered warning: That's not responsive

[@nub8312]

Hello, you got discord? I have some questions

[@WebChainDev]

Yes, the username is webchaindev

[@nub8312]

@@WebChainDev okay cool, I dmed you