@@-mohammadalakedy5417in all seriousness though sql driven db are market standard for 50 yrs now Its beyond me why creators still prefer to teach mongodb
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! 😊👍
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
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 (
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?
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
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
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.
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.
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
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
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..
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.
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.
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.
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?
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?
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?
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
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😄
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 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.
Hi friends, thanks for watching ❤ Don’t forget to check hostinger.com/lamadev if you need a hosting or cheap VPS.
Build a Home automation website pls
Thank you so much
where is the brain svg @LamaDev
@@btwitsbista349did you checked the GitHub repository?
@lamadev where is Brain SVG
Just Finished a NextJs project and now i was trying to make personal porfolio and found your tutorial, Thanks alot buddy
bro i am facing an issue..... in animate i gave RGB background color but it doesnt visible on screen
bro,, can u provide me Brain Svg
@@btwitsbista349 bro u find the brain image ?
Framer transition is with Next.js is awesome. Thanks for teaching us different technologies
Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)
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?
+1
When I arrived to backend (mongo db ) I turn off the video 😂
From backend?
@@-mohammadalakedy5417in all seriousness though sql driven db are market standard for 50 yrs now
Its beyond me why creators still prefer to teach mongodb
Where did you get the design inspiration for this portfolio? 🙈
Yeah, I see codebucks here😅
hooo men you are georgerous!!
not many devs shared the entire code... thanks for that!!
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! 😊👍
bro how you got the svg of brain can you please share
@@musharuff5079 it's available in his Github repo
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.
Bende başka birşey istesem olurmuş 😅 kendime bir tane yapsam diyordum
Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)
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
Me too sir please upload the complete code ...
@@25-cse-csmohitkumarmandal59 Hi at the end I made this ua-cam.com/video/Yw7yWHigGKI/v-deo.html hope it helps
@@25-cse-csmohitkumarmandal59 Hi at the end I made this ua-cam.com/video/Yw7yWHigGKI/v-deo.html hope it helps
it's my 5th portfolio tutorial and this is the best fr !
thank you for sharing with us
Excellent!Loved the mobile first technique!!
Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)
where can i get scroll svg code ?
some people sale such projects modifying the framerer motion about 240 dollars , legends providing the code for free
Thanks a lot for your cool tutorials!
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
0:55 the feature I want
I was looking forward to your next video!
please share the brain svg I am unable to find that
Are you not able to find it from GitHub?
Lama back after long time
Thank you so mush ...please upload videos about Prisma with Express js
Sir u are great huge respect ❤❤❤
I'm was seeking for animated portfolio tutorial thank you sir
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;
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?
where is the svg
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
Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)
I am following react courses which are amazing, I am keeping this one in queue
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
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
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.
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.
Nevermind. Just commented out the style part in the motion.path tags and that seemed to work.
Bro where is svg file, I can't see it
where is the brain and arrow SVG I am unable to find that it will be great if anyone help me
its in the completed branch of the code, you might be looking in the starter branch
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
Thanks lama dev❤
Sir, you've returned to UA-cam after quite some time. How are you, everything good?
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
Do you know where to set the environment variables in Hostinger shared hosting? Of course, we cannot upload .env file like you said right?
I have to delete .next folder to get rid of errors every time i open vsCode. Any solution?
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..
Thank you from Syria ❤
I love you , you professional ❤
Please , explain node js and nextjs backend basics ❤
i hope your people coming home soon
Hello @Lama Dev Can i host this website in GitHub repository?
Is there any way of adding same effects to image same like hero.png? Thanks!
I wonder the same...
This is really helpful, thank you so much!
Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)
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
@@CodeWithSlowbat I too tried using ts first, but then changed to js
brain svg kaha hai
Is there any way to statically generate dynamic route pages in next js?😅😊
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.
hi how to add navbar url section about and all i had issue that
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.
Did you come across a fix for this?
Please do a full stack with angular and nestJs and mangoDB if it is possible!
Portfolio page not scrolling on the x-axis Any solution? Please help
did you find any solution?
Any reason why you have not use Typescript?
not able to find component folder in your git repo
Sir, may I have your javascriptreact.json?
Sir having a problem while uploading your 3last project on ver el?
where is brain svg??
can find bro ??
Are node modules required in tailwind?
lama can i use React to build this instead of Next
I am not able to find brain svg how can I get it
Where did he get the svg for the brain?
freepik
@@franckickchapelon3463 you find ? svg code ?
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.
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.
mukemmelsin abeee
Can you build fullstack react web and react native app tutorial like social paltform or shopping.
Hey, I was wondering where I can get the brain svg since it wasn't present in the github repo.
Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)
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?
Good Job.. Just Use TailwindCSS. Never USE Hard Cording CSS lol
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
Tailwind CSS Intellisense
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?
Hi, you should check the completed branch on the repository
TY master
Hello Lama, thank you for great tutorial
One solution is to add overscroll-behavior-y: "contain" to body styles to disable pull to refresh
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?
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
ok fixed it, addid "overflow-auto" to the className at the first div of the component prevet the overflow
Can someone please tell me does this portfolio contains admin pannel..??
why would u need an adminpanel with a portfolio website?
How can i get brain svg 😢
where is the svg?
in the "completed" branch
how can download the source code ?
Nice 👍
Amazing. Thanks a lot!!
thanks vey much about this amazing content but please make all your wonderful projects responsive
Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)
is it responsive?
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😄
Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)
Hello, were you able to fix this? If you did, please can you tell me how?
Sir can you provide scroll & brain svg code to me plzz !!
cant send email
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.
I've came across the same problem, have you maybe found a solution?
not yet. Gotta do more research on why is that happening.@@filipsmoczkiewicz6293
@@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.
Brain svg is not rotating along with its center axis.
where is the Brain SVG can you please share the link i am unable to find that
please share brain svg
Can you share the Brain Svg
@@bhukyaz I have but... where I share it
@@pushpendradubey790 bro can send this me ? i buy with 5 usdt
Sir Waiting for you a long time❤❤❤
Hey where didi you find the svg code
@@25-cse-csmohitkumarmandal59 you find this svg code ?
NavLink Not working.
Hello, please were you able to fix it?
Brain compoentn doesn't work!!!!
svg source?
Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)
50:04
brain svg assets where bro
Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)
I need this brain svg file
its in the completed branch in the github...
@@BrianLeithead can send this svg ?
Starting Framer Motion ua-cam.com/video/DJaZUFK8Kv4/v-deo.html
P r o m o s m 🙄
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;
}