Next.js Animated Portfolio Website with Framer Motion & Tailwind CSS | Next.js Beginner Project

[@LamaDev]

Hi friends, thanks for watching ❤ Don’t forget to check hostinger.com/lamadev if you need a hosting or cheap VPS.

[@truthhurts4662]

Build a Home automation website pls

[@Okwach_Kich]

Thank you so much

[@btwitsbista349]

where is the brain svg @LamaDev

[@abhinavchauhan6665]

​@@btwitsbista349did you checked the GitHub repository?

[@alimurtaza-cj2hd]

@lamadev where is Brain SVG

[@muhammadobaidullahkhan5887]

Just Finished a NextJs project and now i was trying to make personal porfolio and found your tutorial, Thanks alot buddy

[@indian_gaurav_8648]

bro i am facing an issue..... in animate i gave RGB background color but it doesnt visible on screen

[@btwitsbista349]

bro,, can u provide me Brain Svg

[@adienking]

@@btwitsbista349 bro u find the brain image ?

[@coder5336]

Framer transition is with Next.js is awesome. Thanks for teaching us different technologies

[@tanmayrane8726]

Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)

[@shankar66]

sir i followed your next.js 14 course but i found the authentication part a little confusing. can you please make a video on it?

[@-mohammadalakedy5417]

+1 When I arrived to backend (mongo db ) I turn off the video 😂

[@mDHARYL]

From backend?

[@dontreadmyusername6787]

​@@-mohammadalakedy5417in all seriousness though sql driven db are market standard for 50 yrs now Its beyond me why creators still prefer to teach mongodb

[@user-oz5eu5nz3h]

Just completed this project 🔥 It was an awesome experience! Very easy to follow along, and of course, the UI and code were great. I'm definitely going to watch more of your videos! 😊👍

[@musharuff5079]

bro how you got the svg of brain can you please share

[@user-oz5eu5nz3h]

@@musharuff5079 it's available in his Github repo

[@abdalkareemnegm]

it's my 5th portfolio tutorial and this is the best fr ! thank you for sharing with us

[@CodeBucks]

Where did you get the design inspiration for this portfolio? 🙈

[@munsifcreations8435]

Yeah, I see codebucks here😅

[@giannisnik5295]

Excellent!Loved the mobile first technique!!

[@tanmayrane8726]

Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)

[@abdallahazme4757]

you wont belive me if i told you i was going to build my portflio today and was hoping you have a toutorial for one.

[@aytcunal]

Bende başka birşey istesem olurmuş 😅 kendime bir tane yapsam diyordum

[@tanmayrane8726]

Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)

[@manishgautam2424]

some people sale such projects modifying the framerer motion about 240 dollars , legends providing the code for free

[@Pixelaze]

I was looking forward to your next video!

[@patricioavila5796]

Hello Dev can you help me please.. where can i find the Github of the SVG Brain ? Please i need it to finish the Portofolio

[@25-cse-csmohitkumarmandal59]

Me too sir please upload the complete code ...

[@patricioavila5796]

​@@25-cse-csmohitkumarmandal59 Hi at the end I made this kzbin.info/www/bejne/j6iaqop-nsx6gas hope it helps

[@patricioavila5796]

@@25-cse-csmohitkumarmandal59 Hi at the end I made this kzbin.info/www/bejne/j6iaqop-nsx6gas hope it helps

[@nanonkay5669]

I know exactly where he got the inspiration for this style of website from 😂. But it's all good, imma probably do this too, anyway

[@PETERFILM]

Thanks a lot for your cool tutorials!

[@mehrdad1068]

I'm was seeking for animated portfolio tutorial thank you sir

[@abdalrahmanaldammad8866]

Thank you so mush ...please upload videos about Prisma with Express js

[@giannisnik5295]

i made this Provider to wrap every page so we dont have to turn hole page to client "use client"; import { motion } from "framer-motion"; const PageTransitionProvider = ({ children }) => { return ( {children} ); }; export default PageTransitionProvider;

[@davekene]

Hello, did you also notice that on mobile, the nav links do not navigate properly? For example you can’t navigate from portfolio page to about page. Please do you know how to fix this?

[@razzaqmohammedali4653]

Lama back after long time

[@nanonkay5669]

0:55 the feature I want

[@muzamilfootballer5682]

Sir u are great huge respect ❤❤❤

[@HilariousHound]

I am following react courses which are amazing, I am keeping this one in queue

[@rohitsampannavar]

where can i get scroll svg code ?

[@kanhaiyapandey8447]

please share the brain svg I am unable to find that

[@abhinavchauhan6665]

Are you not able to find it from GitHub?

[@KingCoffeetooth]

For anyone having the issue where your PNG/SVG (hero page) is not showing/is stuck at 0px tall, make sure the h-[calc(100vh-6rem)] in either your main page.jsx or transitionProvider is written exactly as is and does not have any spaces, HTML seems to freak out when it sees a space there

[@bilalgilani9017]

Thanks lama dev❤

[@dustydepot492]

This is really helpful, thank you so much!

[@tanmayrane8726]

Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)

[@CodeWithSlowbat]

it is useful for someone who uses js instead of typescript. Since my project is connected to ts, I have a lot of errors there

[@tanmayrane8726]

@@CodeWithSlowbat I too tried using ts first, but then changed to js

[@artistdimension]

hi how to add navbar url section about and all i had issue that

[@mdaltafraja]

Please create a role base authentication in react js with dynamic redirect with indented path when users try to access it's indented path or routes after login

[@matejbittner-e4t]

Hi, why is motion div jumping from left to right, that you can see site behind (52:36 - it slides from left to right, but weirdly move after that from left to right again). Thanks

[@tanmayrane8726]

Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)

[@alimurtaza-cj2hd]

where is the brain and arrow SVG I am unable to find that it will be great if anyone help me

[@anjalidogra9675]

its in the completed branch of the code, you might be looking in the starter branch

[@-mohammadalakedy5417]

Thank you from Syria ❤ I love you , you professional ❤ Please , explain node js and nextjs backend basics ❤

[@Loswer]

i hope your people coming home soon

[@kanhaiyapandey8447]

where is the svg

[@vishalgupta.1]

Please create projects with advanced react concepts, and industry grade folder structure and code practices, optimisation using hooks, custom hooks, constants, modifying tailwind config to use own theme colors and styles, creating custom tailwind classes. Redux toolkit for auth and theme state management.

[@trekcube]

I'm about 2/3rds of the way through this video. It's been awesome so far, but the part with the brain svg animation is hard for me to follow as someone completely new to svgs and next.js. It seems like your example svg for the brain animation is super long. I'm trying to follow straight through the tutorial (currently stuck at 1:32:44 time mark), but if I straight copy and paste the svg from your example code, it has the motion styles already applied, so it's throwing an error about rotatesForward1 not being defined. Is there anywhere I can find the pure svg code without the motion code baked in? The svg is over 1000 lines long so I'm just trying to save myself troubleshooting work of going through the entire svg and getting rid of all the motion code.

[@trekcube]

Nevermind. Just commented out the style part in the motion.path tags and that seemed to work.

[@Devop-q7v]

Bro where is svg file, I can't see it

[@M4rt1nX]

Amazing. Thanks a lot!!

[@NiteshYadav-yk7xs]

Is there any way to statically generate dynamic route pages in next js?😅😊

[@proteus1]

Nice to learn from yourself. I noticed you ise a shortcut for className, is it cname. New to your channel and wish to ne a competent developer in the future..

[@awaraamin6850]

Please do a full stack with angular and nestJs and mangoDB if it is possible!

[@WebDeveloper-xs4uf]

I'm kind off got to grips with HTML & CSS3 & Tailwind, is getting there. What do I learn next Js ? I wish to know if Lama can offer the Dev any videos to help baby Lama.

[@jarvs10]

TY master

[@bilalishtiaq7036]

Sir, you've returned to KZbin after quite some time. How are you, everything good?

[@alihuseynli3624]

mukemmelsin abeee

[@shankar66]

hello sir, i was developing a website in next.js. i am storing images in s3 bucket. now problem is i store only the filepath in database because if i store the s3 presigned link i have to update it every 7 days (you know 7day is the maximum expire time). now suppose i am using an Image. it looks like

[@simonpetrus3089]

Do you know where to set the environment variables in Hostinger shared hosting? Of course, we cannot upload .env file like you said right?

[@VarunPats]

Is there any way of adding same effects to image same like hero.png? Thanks!

[@nihil_um]

I wonder the same...

[@svetoslavtrifonov6431]

Thanks for the video. Is it a problem if we want to use server components as pages? Also for page transitions isn't it better to use template.tsx/jsx? Again T

[@ziad686-c2y]

thanks vey much about this amazing content but please make all your wonderful projects responsive

[@tanmayrane8726]

Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)

[@user-li4eb7mt1q]

not able to find component folder in your git repo

[@maverick456-33]

Good Job.. Just Use TailwindCSS. Never USE Hard Cording CSS lol

[@toyinatofarati5512]

Nice 👍

[@nassirnasr6061]

How can i get brain svg 😢

[@ok_instruction8286]

I have to delete .next folder to get rid of errors every time i open vsCode. Any solution?

[@taylormonroe492]

Portfolio page not scrolling on the x-axis Any solution? Please help

[@mauiboss5242]

did you find any solution?

[@faf1469]

Sir having a problem while uploading your 3last project on ver el?

[@gold-junge91]

Any reason why you have not use Typescript?

[@kenwarat4750]

Can you build fullstack react web and react native app tutorial like social paltform or shopping.

[@btwitsbista349]

where is brain svg??

[@adienking]

can find bro ??

[@juditszabo7887]

the exit function from framer does not work on mine, what could be the problem it is completely black pushing down the navbar on the home page.

[@Makseron-p1m]

Did you come across a fix for this?

[@napoleones1]

Sir, may I have your javascriptreact.json?

[@travelingtramp]

Where did he get the svg for the brain?

[@franckickchapelon3463]

freepik

[@adienking]

@@franckickchapelon3463 you find ? svg code ?

[@worldxwebdesigners]

Are node modules required in tailwind?

[@akshatsrivastava4753]

I am not able to find brain svg how can I get it

[@daniel-fi7be]

lama can i use React to build this instead of Next

[@watcher8x]

Can someone please tell me does this portfolio contains admin pannel..??

[@joleDEV]

why would u need an adminpanel with a portfolio website?

[@Wurmbrands]

any one knows why i did everything the same as in the video but on smaller screens (like on my laptop) the ui get broken for example if the text is to low,or to many gaps,the buttom of the screen is white,and not with the gradient background color

[@Wurmbrands]

ok fixed it, addid "overflow-auto" to the className at the first div of the component prevet the overflow

[@abee553]

Hey, I was wondering where I can get the brain svg since it wasn't present in the github repo.

[@tanmayrane8726]

Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)

[@mariusherlea9333]

Image with src "/hero.png" has "fill" and a height value of 0. This is likely because the parent element of the image has not been styled to have a set height. I did not find any solution. Please help. Thank you.

[@iamsevovo]

What I figured out is that you must define the height of the Image's parent element using a non-ratio unit (like "vh", "px", or "rem") at least once. Percentages (%) and fractions (like 1/2) alone are not sufficient. For example, consider a layout structured like this: "root - [header / [body - [wrapper -[Image] / Text]]]". Here, you could set the wrapper's height to "h-10vh". If you want the image's height to be determined by the screen's aspect ratio, you need to specify the height of one of its ancestors using a non-ratio unit (like "h-screen" or "h-dvh"). Additionally, all child elements in the hierarchy must have defined heights. If you set the root element's height to "h-screen", you need to define the heights of all its children, not just those directly within the body element (including the header). and remember that if you are going to set the image position based on width property, you need to define parent's width.

[@ShreeRadhaKrishnaLove]

Sir can you provide scroll & brain svg code to me plzz !!

[@3EMW_Entertainment]

Hello @Lama Dev Can i host this website in GitHub repository?

[@samuraipiang8203]

Sir Waiting for you a long time❤❤❤

[@25-cse-csmohitkumarmandal59]

Hey where didi you find the svg code

[@adienking]

@@25-cse-csmohitkumarmandal59 you find this svg code ?

[@giannisnik5295]

i created a container class in globals.css also .container { @apply px-4 sm:px-8 md:px-12 lg:px-20 xl:px-48; }

[@alphamunene2656]

where is the svg?

[@Lab_Analyst]

in the "completed" branch

[@Rounak-sv7nj]

Hey, What extension are you using to get recommendation when you type anything in classname??? is it some nextjs or css extension? Its name please

[@Lab_Analyst]

Tailwind CSS Intellisense

[@Antonio-fo2ck]

Hello Lama, thank you for great tutorial

[@Antonio-fo2ck]

One solution is to add overscroll-behavior-y: "contain" to body styles to disable pull to refresh

[@davekene]

Hello, did you also notice that on mobile, the nav links do not work properly. For example, you can’t easily navigate from the portfolio page to any other page except the home page?

[@dinupriyaranaweera7250]

is it responsive?

[@adienking]

how can download the source code ?

[@indian_gaurav_8648]

cant send email

[@iamsevovo]

Thanks, this is awesome. BTW, I can feel some lags by scrolling in the about page on the demo website. Is it possible to improve the performance? or is it a kind of limitation of next js?

[@Shankar_B]

Starting Framer Motion kzbin.info/www/bejne/envEi4h8gJ1-rJY

[@pranav6032]

hey lama ty for wonderful project but there is a bug when we click on hamburger menu when we are not on homepage about and portfolio link does'nt work but home and contact does i gave a lot of time but i am not able to understand why this is not working ,maybe it has something to do with positioning but i could'nt solve it ,i cloned your code but it has same bug ,hope you fix this and please reply here what's was the issue😄

[@tanmayrane8726]

Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)

[@davekene]

Hello, were you able to fix this? If you did, please can you tell me how?

[@AshishVaishnav-tb8ts]

At least provide the source code. You shared the GitHub link, but there’s nothing useful code that I can use in my code. For example, you mentioned an SVG file for the scroll effect on the About page. You could easily paste it into your code, but where are we supposed to get it from?

[@LamaDev]

Hi, you should check the completed branch on the repository

[@Desert_Person]

NavLink Not working.

[@davekene]

Hello, please were you able to fix it?

[@fahadahmedakash8045]

Brain svg is not rotating along with its center axis.

[@alimurtaza-cj2hd]

where is the Brain SVG can you please share the link i am unable to find that

[@pushpendradubey790]

please share brain svg

[@ShreeRadhaKrishnaLove]

Can you share the Brain Svg

[@pushpendradubey790]

@@ShreeRadhaKrishnaLove I have but... where I share it

[@adienking]

@@pushpendradubey790 bro can send this me ? i buy with 5 usdt

[@debashis.mishra]

50:04

[@jimmadjy]

my hero.png is not showing , even though I set the parent div position: relative. It only shows if I remove the "fill" property from Image and add hardcoded width and height properties, but then it won't be responsive. I copied from the github repo , but still haven't managed it to work.

[@filipsmoczkiewicz6293]

I've came across the same problem, have you maybe found a solution?

[@jimmadjy]

not yet. Gotta do more research on why is that happening.@@filipsmoczkiewicz6293

[@iamsevovo]

​@@filipsmoczkiewicz6293 you need to define non-ratio height(like h-screen h-dvh) for the Image's parent element, and give the ratio height for all of the parent's branches.

[@sanskarmasurkar807]

svg source?

[@tanmayrane8726]

Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)

[@user-ee3ov5yp4p]

brain svg assets where bro

[@tanmayrane8726]

Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)

[@__KachhadiyaDharmik]

I need this brain svg file

[@user-gr6cu3dt1q]

its in the completed branch in the github...

[@adienking]

@@user-gr6cu3dt1q can send this svg ?

[@sdsallazar]

Brain compoentn doesn't work!!!!

[@danb.2613]

P r o m o s m 🙄

[@tknufk]