Firstly I was like He is not talking I wouldnt learn anything but later came back and watched and followed along. Bro, he taught me more than any other talking videos!
Thank you! I started with nothing and, after 15 hours of 'no idea what I'm doing, but I'll try my best to follow,' I now have VS Code set up with all the required extensions, learned some interesting shortcuts, and, most exciting of all, I have a site running on Vercel.
last i made the camera e-commerce project that was so wonderful and i got appreciation from my client.. All thanks to you. currently i was searching for a good portfolio website using NEXT and animations and your video popped up on the feed.. thanks a lot for your fabulous works and keeping it cost free
My fellow frontend devs in this thread… don’t steal his work, get inspired then create your own work! If you don’t know how then figure it out… you’ll appreciate your own hard work.
Great video Cristain. I never used Nextjs before and wasn't expecting a video with no talking but I learned a lot about Nextjs and Tailwind thanks for that. Also great choice of music selection for this video, for me anyway it added more enjoyment to coding along for that I have to add myself to your growing subscribers lol.
I hardly ever watch tutorials without audio because they are hard to follow especially one as big as this. But lets hope it goes well. Going for this one especially for the amazing design so great job on that buddy.
This is a really good video. I've been studying to be a developer for less than 3 months, so I'm still learning about code, so I'm not good at making a portfolio, so I just copied Christian Mihai's. I followed it from start to finish, thank you, I admire you. I made this on Instagram. Can I post it?
at 27:26 why do we use div key=pathname ? if i not use the transition only work for first render then navigate other links will not work and i address this by using template top level with root layout.
Theme: Material Theme Icons: Material Icon Theme Font: Jetbrains Mono Extensions: ES7+ React / Redux / React-Native snipppets File Utils Auto Close Tag Auto Rename Tag Highlight Matching Tag Live Sass Compiler Live Server Path Autocomplete Path IntelliSense Prettier Simple React Snippets SVG Preview Tailwind CSS IntelliSense Thunder Client vscode-faker
Transform the button into an tag and add an href attribute with the path of your .pdf file from the public folder! You should also add a download attribute to specify the name that the file will be saved as. Hope it helped! Thank you :)
First of all, great work Sir ! Thank you a lot ! I'm in my 3 days hooked into following along with the coding. btw, I'm having problem with the screen sizes on the web, it's having a vertical scroll when on 100% zoom, what must be the problem?
Hello. I really like your work. I want to improve myself in this field. Can you give me some advice? Where should I start? What do you recommend I learn?
Hello, first of all, thank you very much for your efforts. I learned a lot about React from scratch. After making this portfolio, can I adapt it and open a portfolio website? Can I use it publicly? after providing my own information btw day 2: 1:32:56 checkpoint :)
@@cristianmihai01 Thank you so much brother, just as I was about to go to bed, I got a notification on my phone and saw your message. I was so happy. By the way, good night, I live in Turkey, it's 23:30 right now, so it's evening 😂
Wow, 3 hours of some good quality content! Keep it up... I'm so confused, actually: I'm studying software engineering in my university, but i still don't really find passion in it... I just don't know what to do and what to try in my life as a future (I don't know how to, you know, adress myself) member of society... Anyone got any ideas maybe? I'll be glad to hear anything ))
Hello and thank you! The only way to find what you like is to always try new things..unfortunately there is no other way! In addition to software development, you can also try UI/UX Design, Music or Video Editing, these are also creative fields! Good luck :)
Bro! First of all thank you so much for such wonderful content I was able to complete the website even though I am a beginner! But I tried to create the contact page with the help of emailjs but it's not working can you please guide us on how we can make email working
Hi Cristian. Excellent tutorial, I'm learning a lot. I have a question though, is there a library for Adobe icon collection? In "My Skills" I would like to use some of the Adobe icons like Photoshop, InDesign, Illustrator but I can't find those on Font Awsome or SiTailwind icons. Thanks in advance.
Strong Man, Guys and do not tell as a novice developer, how to put this project in the light, maybe cheap servers you know or there is a trial version for free?
I need your advice... Do you think it is advisable to use your design(but make changes like color, text, images and add features) and submit it for an interview?
finished my freecodecamp certificate a week ago and following this video flawlessly. how do i get the VS code settings as yours, my colours and auto-complete doesn't work?
Theme: Material Theme Icons: Material Icon Theme Font: Jetbrains Mono Extensions: ES7+ React / Redux / React-Native snipppets File Utils Auto Close Tag Auto Rename Tag Highlight Matching Tag Live Sass Compiler Live Server Path Autocomplete Path IntelliSense Prettier Simple React Snippets SVG Preview Tailwind CSS IntelliSense Thunder Client vscode-faker
You're welcome! You can utilize Formik for the form functionality. Additionally, you might want to check out email.js. The form should work with any hosting provider :)
I love this amzing of work, but lemme ask a thing. i use windows 10 scaling 150% on resolution 1920x1080 and it causing website sizing issues like everything is so much bigger. even tho it works absolutely fine on 100%, do you perhaps have any idea so it could display better on 150% scale
Thank you! Theme: Material Theme Icons: Material Icon Theme Font: Jetbrains Mono Extensions: ES7+ React / Redux / React-Native snipppets File Utils Auto Close Tag Auto Rename Tag Highlight Matching Tag Live Sass Compiler Live Server Path Autocomplete Path IntelliSense Prettier Simple React Snippets SVG Preview Tailwind CSS IntelliSense Thunder Client vscode-faker
Theme: Material Theme Icons: Material Icon Theme Font: Jetbrains Mono Extensions: ES7+ React / Redux / React-Native snipppets File Utils Auto Close Tag Auto Rename Tag Highlight Matching Tag Live Sass Compiler Live Server Path Autocomplete Path IntelliSense Prettier Simple React Snippets SVG Preview Tailwind CSS IntelliSense Thunder Client vscode-faker
Great video! Where did you get the svg icons from? Im trying to add different icons for the languages that I know but cant seem to make it work. Thanks
When I installed the components with the ShadCN-UI command prompts, it installed all of the compenents as tsx files. Im not the best at switching between tsx and jsx files. The portion of the mobile nav is giving me a few issues
@@cristianmihai01 I’m still pretty new. Like tbh I get just changing the type but there are some imports for tsx that then won’t work and somethings currently in there which are for jsx which are failing. Was following the video and never had any issues until the mobile nav portion. Right now they are tsx. In your vid they all installed as jsx
34:09... Something is wrong with Stairs or StairTransition... using h-full w-full bg-white relative on Stairs whites out the screen... Without animation
Hey. One question. Where you using the chrome web browser on 80% zoom? Because in 100% normal zoom, there's a vertical scroll ball appearing and the stats are not shown after reloading. We need to scroll down to see the stats. Any fixes?
Theme: Material Theme Icons: Material Icon Theme Font: Jetbrains Mono Extensions: ES7+ React / Redux / React-Native snipppets File Utils Auto Close Tag Auto Rename Tag Highlight Matching Tag Live Sass Compiler Live Server Path Autocomplete Path IntelliSense Prettier Simple React Snippets SVG Preview Tailwind CSS IntelliSense Thunder Client vscode-faker
Daca te referi la cerc e facut si exportat din figma ca svg dupa care animat in framer motion ca in video! Poza e de asemenea putin editata tot in figma si exportata ca png!
Cristian bro, I am facing an issue, after clicking the resume and work tab. content gets rendered together with the strairsAnimation. for other tabs, it is working perfectly. so, what might be the issue here?
Firstly I was like He is not talking I wouldnt learn anything but later came back and watched and followed along. Bro, he taught me more than any other talking videos!
omg thank you so much, you helped me realise that all the talking tutorials distract me more so than teach me, your videos are just the kind I need!
Thank you!
I started with nothing and, after 15 hours of 'no idea what I'm doing, but I'll try my best to follow,' I now have VS Code set up with all the required extensions, learned some interesting shortcuts, and, most exciting of all, I have a site running on Vercel.
Congratz! Keep on coding :)
not working for me iam getting error in deploying canu help me
last i made the camera e-commerce project that was so wonderful and i got appreciation from my client.. All thanks to you. currently i was searching for a good portfolio website using NEXT and animations and your video popped up on the feed.. thanks a lot for your fabulous works and keeping it cost free
Always donate back to the teacher, (buy me coffee) or (pateron) or even on his projects site.
My fellow frontend devs in this thread… don’t steal his work, get inspired then create your own work! If you don’t know how then figure it out… you’ll appreciate your own hard work.
can i copy it and change the design?
Yes you can adapt it to your own needs :)
Nah imma steal it
Speak for yourself
@@Decorylic-ih7ej😂
Your passion really shines through your work. Keep it up!
Great video Cristain. I never used Nextjs before and wasn't expecting a video with no talking but I learned a lot about Nextjs and Tailwind thanks for that. Also great choice of music selection for this video, for me anyway it added more enjoyment to coding along for that I have to add myself to your growing subscribers lol.
I'm new to Next.js. Your tutorial is very helpful. Thanks.
You are welcome!
That was so intense. My heart is still racing!
As always, very good content. The icing on the cake would be to implement the functionality to submit the form and test it after deployment. 👍
Thank you man and happy new year.
My pleasure! Happy New Year, Tim!
Thanks for this inspiration!
My pleasure! :)
I hardly ever watch tutorials without audio because they are hard to follow especially one as big as this. But lets hope it goes well. Going for this one especially for the amazing design so great job on that buddy.
This is amazing. Thank you so much. Wish you all the best to create more videos.
Thank you! All the best to you as well :)
I want to try this too! You inspire me. 💪
Hey, thanks a bunch for this amazing portfolio! Wishing you a fantastic life filled with happiness always.🙂
Hi! Thank you and the same to you! All the best 🙏
Nice one, really loved the design of the website, and even the implementation of it was neat and smooth. really a good one.
I'm glad you like it! Thank you :)
Your code style is really concise, and the sound of the keyboard is great. Watching you code is very enjoyable. Which keyboard do you use?
Thank you! Actually it's a software which simulates any keyboard sound! You can search for Mechvibes :)
Beautiful project!
Thank you!
amazing, another inspiration for my portofolio website! kudos
Thank you! Greetings!
Thank you! Thanks to you, I was able to create a fantastic portfolio of my own.
You are welcome! Congratz!
Excellent work, I like it and, as always, highly recommended.
Thank you bud! 🙏
It's so good! Congrats!!!
You've gotten a subscriber... Nice content
Wow, thank you Cristian Mihai
Amazing job!👏👏👏
Very good video! Love it :)
I suggest Login/Register and Dashboard page. I love your Creative Design Style.
It's a beautiful design. I love it. I'll write it together sometime.
thank you!
I liked this. A unique approach. I sent you a coffee for the hard work. Not sure if I will need/use the source code. Cheers, mate.
Thank you! Appreciate that :)
Great work❤
Amazing , bud !
Thank you :)
This is a really good video. I've been studying to be a developer for less than 3 months, so I'm still learning about code, so I'm not good at making a portfolio, so I just copied Christian Mihai's. I followed it from start to finish, thank you, I admire you. I made this on Instagram. Can I post it?
Congratz! You can post the photo with the result ofc :)
@@cristianmihai01 Thank you so much. I've only been an artist for 3 months, you're amazing. I'll try to be like you.I'll cheer you on.
Superb bro ❤
i really love your video
Glad to hear this! Thank you :)
at 27:26 why do we use div key=pathname ? if i not use the transition only work for first render then navigate other links will not work and i address this by using template top level with root layout.
12:34 when i am trying to add this in global.css . It's showing syntax error.
This song is on repeat! 🎶
thank you!
Muy bonito muchas gracias, genial porfolio saludos desde Cuba
What theme / fonts do you use for VSCode? Its so clean dude
Theme: Material Theme
Icons: Material Icon Theme
Font: Jetbrains Mono
Extensions:
ES7+ React / Redux / React-Native snipppets
File Utils
Auto Close Tag
Auto Rename Tag
Highlight Matching Tag
Live Sass Compiler
Live Server
Path Autocomplete
Path IntelliSense
Prettier
Simple React Snippets
SVG Preview
Tailwind CSS IntelliSense
Thunder Client
vscode-faker
Nice one,
On mobile, how do you close the Nav when you click on the link ?
Hey, what VS Code theme are you using? I love how it makes tags stand out from components.
Hey! It's Material Theme
Dude, I noticed something at first, why hire me is available in 1:46 minutes, but you don’t do it while you’re doing it, how can I add it?
How do you get the resume button on the home page working so that file is downloaded on click? Other than that great tutorial man.
Transform the button into an tag and add an href attribute with the path of your .pdf file from the public folder! You should also add a download attribute to specify the name that the file will be saved as. Hope it helped! Thank you :)
First of all, great work Sir ! Thank you a lot ! I'm in my 3 days hooked into following along with the coding. btw, I'm having problem with the screen sizes on the web, it's having a vertical scroll when on 100% zoom, what must be the problem?
bro very good !!!
Magnifique 🎉🎉🎉
Hello. I really like your work. I want to improve myself in this field. Can you give me some advice?
Where should I start?
What do you recommend I learn?
Build a lot of projects :)
@@cristianmihai01 Thank you :)
Gonna try to follow along. Wish me luck!
bro, why after npx create-next-app@latest , any change i make on any folder im getting an untracked symbol?
in 14:30 , mine didn't get the same behavior adding that bg didn't show up for me
Hello, first of all, thank you very much for your efforts. I learned a lot about React from scratch. After making this portfolio, can I adapt it and open a portfolio website? Can I use it publicly? after providing my own information
btw day 2: 1:32:56 checkpoint :)
Sure you can adapt it to your own needs :)
Congratz :)
@@cristianmihai01 Thank you so much brother, just as I was about to go to bed, I got a notification on my phone and saw your message. I was so happy. By the way, good night, I live in Turkey, it's 23:30 right now, so it's evening 😂
day2 checkpoint 2:12:36 (work page)
day3 checkpoint 2:40:01 (contact page)
ive bought this template and im facing some problems with the download cv button can you help ?
Wow, 3 hours of some good quality content! Keep it up... I'm so confused, actually: I'm studying software engineering in my university, but i still don't really find passion in it... I just don't know what to do and what to try in my life as a future (I don't know how to, you know, adress myself) member of society... Anyone got any ideas maybe? I'll be glad to hear anything ))
Hello and thank you! The only way to find what you like is to always try new things..unfortunately there is no other way! In addition to software development, you can also try UI/UX Design, Music or Video Editing, these are also creative fields! Good luck :)
@@cristianmihai01 Thanks! I appreciate you!
Bro! First of all thank you so much for such wonderful content I was able to complete the website even though I am a beginner! But I tried to create the contact page with the help of emailjs but it's not working can you please guide us on how we can make email working
1:54:18 i cant get rounded corners can someone tell me
i copied the same still nothing
Great project. Suppose one wants to download the CV, can one be able to?
Thanks you so much!
You are welcome :)
Hi Cristian. Excellent tutorial, I'm learning a lot. I have a question though, is there a library for Adobe icon collection? In "My Skills" I would like to use some of the Adobe icons like Photoshop, InDesign, Illustrator but I can't find those on Font Awsome or SiTailwind icons. Thanks in advance.
Hi, thanks! You can search google for react icons website and you'll find almost any icon! :)
Wow this is really great! I expect part 2 of this Making the functionalities work! , Hire me part
Strong Man, Guys and do not tell as a novice developer, how to put this project in the light, maybe cheap servers you know or there is a trial version for free?
hello sir, which extention you usually use for visual studio code.??
awesome 😎😎
pointer events are not working after stairTransition implementation.
Please help where I am making mistake
I need your advice... Do you think it is advisable to use your design(but make changes like color, text, images and add features) and submit it for an interview?
Sure :)
17:08 my tailwindcss isn't working
great stuff as always. if you could just comment it what and why you do it would be great.
finished my freecodecamp certificate a week ago and following this video flawlessly. how do i get the VS code settings as yours, my colours and auto-complete doesn't work?
Theme: Material Theme
Icons: Material Icon Theme
Font: Jetbrains Mono
Extensions:
ES7+ React / Redux / React-Native snipppets
File Utils
Auto Close Tag
Auto Rename Tag
Highlight Matching Tag
Live Sass Compiler
Live Server
Path Autocomplete
Path IntelliSense
Prettier
Simple React Snippets
SVG Preview
Tailwind CSS IntelliSense
Thunder Client
vscode-faker
Thank you very much for the content, Cristian! I would like to know how I can make this form work. Would it work even though it is hosted on vercel?
You're welcome! You can utilize Formik for the form functionality. Additionally, you might want to check out email.js. The form should work with any hosting provider :)
I love this amzing of work, but lemme ask a thing. i use windows 10 scaling 150% on resolution 1920x1080 and it causing website sizing issues like everything is so much bigger. even tho it works absolutely fine on 100%, do you perhaps have any idea so it could display better on 150% scale
at 38:07 when i run it, it says motion not defined
hey man very nice! can i ask, which extensions like the classname snippets are u currently using?
Thank you!
Theme: Material Theme
Icons: Material Icon Theme
Font: Jetbrains Mono
Extensions:
ES7+ React / Redux / React-Native snipppets
File Utils
Auto Close Tag
Auto Rename Tag
Highlight Matching Tag
Live Sass Compiler
Live Server
Path Autocomplete
Path IntelliSense
Prettier
Simple React Snippets
SVG Preview
Tailwind CSS IntelliSense
Thunder Client
vscode-faker
@@cristianmihai01 u the goat!
How did you create an image of the desktop and mobile version screenshot for the work section?
What extensions are you using on your VSCode? I love them...
Theme: Material Theme
Icons: Material Icon Theme
Font: Jetbrains Mono
Extensions:
ES7+ React / Redux / React-Native snipppets
File Utils
Auto Close Tag
Auto Rename Tag
Highlight Matching Tag
Live Sass Compiler
Live Server
Path Autocomplete
Path IntelliSense
Prettier
Simple React Snippets
SVG Preview
Tailwind CSS IntelliSense
Thunder Client
vscode-faker
Great video! Where did you get the svg icons from? Im trying to add different icons for the languages that I know but cant seem to make it work. Thanks
Svg Repo
@@cristianmihai01 Thank you bro, do you have this project on Github?
When I installed the components with the ShadCN-UI command prompts, it installed all of the compenents as tsx files. Im not the best at switching between tsx and jsx files. The portion of the mobile nav is giving me a few issues
Please use chat gpt to convert your .jsx components to .tsx. It should work well :)
@@cristianmihai01 I’m still pretty new. Like tbh I get just changing the type but there are some imports for tsx that then won’t work and somethings currently in there which are for jsx which are failing. Was following the video and never had any issues until the mobile nav portion. Right now they are tsx. In your vid they all installed as jsx
34:09... Something is wrong with Stairs or StairTransition... using h-full w-full bg-white relative on Stairs whites out the screen... Without animation
Code of Stairs.jsx
import { motion } from "framer-motion";
// -- Variants
const stairAnimation = {
initial: {
top: "0%",
},
animate: {
top: "100%",
},
exit: {
top: ["100%", "0%"],
},
};
// calculate the reserve index for staggred delay
function reserveIndex(index) {
const totalSteps = 6; // number of steps
return totalSteps - index - 1;
}
function Stairs() {
return (
{[...Array(6)].map((_, index) => {
return (
);
})}
);
}
export default Stairs;
Yeah I'm the same. whole screen is white
I don't know what's the problem but on 100% zoom of my browser, The website takes full page and looks so bad. If anybody can help!
The display wallpaper looks good to me. From where did you get this wallpaper download?
You can search google for firewatch dark wallpaper :)
@@cristianmihai01 thank you so much
My pleasure :)
Very nice tutorial!!, i couldnt get the download cv button to actually download anything thu... :\ any tips?
Hey. One question. Where you using the chrome web browser on 80% zoom? Because in 100% normal zoom, there's a vertical scroll ball appearing and the stats are not shown after reloading. We need to scroll down to see the stats. Any fixes?
I loved the video, can you please tell me how you are storing the user data from the contact page. Thank you
By following the step, I cannot install components, it displays as below:
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: 'package.json'
Hi! Great tutorial. But my CiMenuburger is not appearing. Is there a fix ??
how did you learn tailwind and in general html-css combo this good? I can also make navbars etc but when I use tailwind it confuses me
I built a lot of projects! :)
Keep on coding and you'll get it! Best of luck :)
@@cristianmihai01 thank you lıove to watch
can you tell which version of Swipper are you using.
Cause I downloaded the latest version and it's not working :(
Version 11.1.3
so good !!
nice work
How to make mobile navbar close automatically after the page is selected from it. It is not closing over here automatically
Hey, just wondering what extensions you're using for vscode?
Theme: Material Theme
Icons: Material Icon Theme
Font: Jetbrains Mono
Extensions:
ES7+ React / Redux / React-Native snipppets
File Utils
Auto Close Tag
Auto Rename Tag
Highlight Matching Tag
Live Sass Compiler
Live Server
Path Autocomplete
Path IntelliSense
Prettier
Simple React Snippets
SVG Preview
Tailwind CSS IntelliSense
Thunder Client
vscode-faker
@@cristianmihai01 Cheers, I really appreciate it
thank you soo much !!!
You are welcome! :)
Ai folosit vreo librarie pentru animatia pozei de pe prima pagina sau ai facut-o de la 0 ? Ca incerc sa fac ceva similar si nu stiu de unde sa pornesc
Daca te referi la cerc e facut si exportat din figma ca svg dupa care animat in framer motion ca in video! Poza e de asemenea putin editata tot in figma si exportata ca png!
@@cristianmihai01 mersi frumos, i'll look into it, foarte tare aplicatia oricum!
Cu placere si multumesc si eu :)
For the email part how would i make it actually send an email?
Cristian bro, I am facing an issue, after clicking the resume and work tab. content gets rendered together with the strairsAnimation. for other tabs, it is working perfectly. so, what might be the issue here?
Does send message and download cv work?
Nice code thus far, but my tailwind.config file has different code than yours, how did anyone sort that?
Hi!
I want to buy the code source : Can i use it on WordPress or Blogger and edit my infos there?
Yes you can adapt it to your own needs!
@@cristianmihai01 but how? How Can i use it After buying Your source code?
This is built with Next.js and you can use it as it is or you can implement the code to wordpress by yourself :)
Is the contact form in the portfolio working or not working....I did not se any library that will make form working
Please let me know
Nope! But you can easily implement the form functionality with Formik, React Hook Form or simply email.js ;)
@cristianmihai01 All right will try that on my own for sure.
Thanks for the tutorial buddy.
You are welcome!
Hi bro.. I get an error while at the start of entering code in terminal, after entering "$". How to resolve it?
You don't have to put the "$" :)