@@-mohammadalakedy5417in all seriousness though sql driven db are market standard for 50 yrs now Its beyond me why creators still prefer to teach mongodb
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?
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
its in Lama's github, in "completed" branch, located at this path - src/components/brain.jsx, if you still need it github.com/safak/next-animated-portfolio/blob/completed/src/components/brain.jsx
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
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, 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
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.
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.
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
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?
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.
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?
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?
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.
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..
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
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
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! 😊👍
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
hooo men you are georgerous!!
not many devs shared the entire code... thanks for that!!
Where did you get the design inspiration for this portfolio? 🙈
Yeah, I see codebucks here😅
it's my 5th portfolio tutorial and this is the best fr !
thank you for sharing with us
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)
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)
I was looking forward to your next video!
I'm was seeking for animated portfolio tutorial thank you sir
Thanks a lot for your cool tutorials!
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
Thank you so mush ...please upload videos about Prisma with Express js
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?
I am following react courses which are amazing, I am keeping this one in queue
some people sale such projects modifying the framerer motion about 240 dollars , legends providing the code for free
Lama back after long time
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
Sir u are great huge respect ❤❤❤
0:55 the feature I want
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 ruclips.net/video/Yw7yWHigGKI/видео.html hope it helps
@@25-cse-csmohitkumarmandal59 Hi at the end I made this ruclips.net/video/Yw7yWHigGKI/видео.html hope it helps
its in Lama's github, in "completed" branch, located at this path - src/components/brain.jsx, if you still need it
github.com/safak/next-animated-portfolio/blob/completed/src/components/brain.jsx
please share the brain svg I am unable to find that
Are you not able to find it from GitHub?
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
Thank you from Syria ❤
I love you , you professional ❤
Please , explain node js and nextjs backend basics ❤
i hope your people coming home soon
where can i get scroll svg code ?
Portfolio page not scrolling on the x-axis Any solution? Please help
did you find any solution?
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
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
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.
where is the svg
brain svg kaha hai
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)
hi how to add navbar url section about and all i had issue that
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)
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
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.
Amazing. Thanks a lot!!
Please do a full stack with angular and nestJs and mangoDB if it is possible!
any one had problem with the brain ratios on smaller screen's, like on laptop and was able to fix it?
Is there any way of adding same effects to image same like hero.png? Thanks!
I wonder the same...
Is there any way to statically generate dynamic route pages in next js?😅😊
Any reason why you have not use Typescript?
Sir, you've returned to RUclips after quite some time. How are you, everything good?
Can you build fullstack react web and react native app tutorial like social paltform or shopping.
Sir, may I have your javascriptreact.json?
mukemmelsin abeee
not able to find component folder in your git repo
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
Sir having a problem while uploading your 3last project on ver el?
Sir can you provide scroll & brain svg code to me plzz !!
Hello @Lama Dev Can i host this website in GitHub repository?
Good Job.. Just Use TailwindCSS. Never USE Hard Cording CSS lol
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?
where is brain svg??
can find bro ??
Can someone please tell me does this portfolio contains admin pannel..??
why would u need an adminpanel with a portfolio website?
Where did he get the svg for the brain?
freepik
@@franckickchapelon3463 you find ? svg code ?
I am not able to find brain svg how can I get it
lama can i use React to build this instead of Next
Are node modules required in tailwind?
How can i get brain svg 😢
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
Sir Waiting for you a long time❤❤❤
Hey where didi you find the svg code
@@25-cse-csmohitkumarmandal59 you find this 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.
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)
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?
where is the svg?
in the "completed" branch
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
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?
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?
how can download the source code ?
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
@@Heart2HeartText I have but... where I share it
@@pushpendradubey790 bro can send this me ? i buy with 5 usdt
cant send email
is it responsive?
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.
NavLink Not working.
Hello, please were you able to fix it?
I need this brain svg file
its in the completed branch in the github...
@@BrianLeithead can send this svg ?
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)
svg source?
Bro If your portfolio site is completed then can you send me your github link and also live link(if possible)
Brain compoentn doesn't work!!!!
Starting Framer Motion ruclips.net/video/DJaZUFK8Kv4/видео.html
P r o m o s m 🙄
Do you know where to set the environment variables in Hostinger shared hosting? Of course, we cannot upload .env file like you said right?
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..
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
I have to delete .next folder to get rid of errors every time i open vsCode. Any solution?
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
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
Thanks lama dev❤
Nice 👍
TY master
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;
}