React Portfolio Website Tutorial - Build and Deploy React JS Personal Portfolio Website
HTML-код
- Опубликовано: 13 июн 2024
- In this Reactjs project, we will make an awesome responsive personal portfolio website step-by-step. We learn React hooks, modern CSS, moduler SCSS, Slider js, framer motion, and many more. At the end we will also deploy this project so you can show off your skills.
No prior knowledge of Web React is required to follow this project. The project is surely suitable for beginners.
Website:
youtubebinjanportfolio.pages.dev
Support me on:
Patreon: / zainkeepscode
Buymeacoffee: www.buymeacoffee.com/zainkeep...
Repositories:
Portfolio Starter: github.com/ZainRk/Personal-Po...
Source Code: github.com/ZainRk/personal-po...
( Don't forget to give a star 🌟)
Designer:
dribbble.com/sajon
Time stamps:
00:00 Intro
04:30 Prerequisites
07:13 Starter Walkthrough
17:10 Header
50:47 Hero Section
1:09:41 Expertise Section
1:27:16 Works Section
1:43:00 Portfolio Section
1:54:25 People Section
2:10:20 Footer
2:20:00 Scrolling with Menu Item
2:22:05 Sidebar fix
2:23:54 Deployment
"Copyright Disclaimer under Section 107 of the copyright act 1976, allowance is made for fair use for purposes such as criticism, comment, news reporting, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational, or personal use tips the balance in favor of fair use."
INSTAGRAM :
/ zainkeepscode
FACEBOOK:
/ zainkeepscode-10757083...
i just discover your youtube channel 1 week ago i'm actually finish the part 1 of MERN social media APP you are awesome as hell ! you help me a lot to understand many concept .. i'll put it to my portfolio and i think you will help me to find react Job thanks again !
your responsiveness is on point and its something i def am going to emulate
can't wait, very beautiful.
Amazing, I love it!
I really learnt lot of things by you ,thank you so much 🙌🙌
Thanks man it's really helpful ❤
its awesome brother .love your creativity.....
great work bro!!!!
The best sensei on RUclips
Wow...been mssing u like foreva.tnks alot for this upload 🤗🤗🤗🤗🤗
Enjoy
Awesome project brother 🔥🔥❤️ thankyou very much for this.
Glad you like it!
thank you for what? have you ever try to code by following this tutorial and ever succeeded?
Thanks a lot for adding voice to this project 4:30
Awesome sir it's was my first tutorial and feel I learn a lot 🤩🤩 Please make tutorial from beginning to advance level course. Shal me very thankful 🙏🙏
You are on top. Thanks .I'm learning much.thanks for english language
You are welcome!
wow! Nice!
Keep posting more responsive portfolio and realtime projects and you earn a subscriber bro and pls bro make some responsive portfolio tutorials on html css also.. Because of system issue.. Can't installing react
Osm design sir...keep helping us with your beautiful projects☺️☺️☺️..sir please add dark mode to this project
Beautifull ♥️♥️
Nice , thanks for video
Welcome 🙌
Awesome video!
Thanks for support us to be better programmers!
I've a question for you, What vscode extensions are you using for snippets? because i tried to use your shortcuts and they didn't work for me.
Thanks!!
Es +7
Copilot
Can you please help me my MENU PART stay transparent while scrolling down.
What should i do?
After the deploy the dist on cloudflare
Out side sidebar clicking function not working
Working only at development time
Hi, i want to ask you this. have you write the CSS for menuIcon in Header.module.scss in this video? to which CSS is this 45:01 referring to?
Do you hate tailwind ? btw thank you for this nice project. If you have time please make some MERN Stack project and use next js.
Awesome
Thanks
Can i use this project for my business site ?? No limitation from ur side? i am gonna add login signup with payment gateway?
👏👏
Can I deploy it on render or railway?
How do you know both design and code?
You should type css along with react. Beginners like us don't know why you have written particular css class.
I sir i tried to connect you from last 3 4 days because there is lots of errors i am facing while writing social media website can you please help me to solve that errors
Why not to use tailwind css?
❤
Warning: React does not recognize the `dataName` prop on a DOM element. on "..\src\components\Experties\Experties.jsx" in line "" .. How to fix it?.
yarn vite commant not working for me, please help
Hello Zain i liked your style a lot, neat and clean, I am using your this design for my upcoming project, I a developer with 2 years experience overall, and no exp in react js, i need help in one of the section, how can i reach out to you, please let me know, it's a cool design. Thanks
You can reach me on instagram!
34.00
The hover $secondary not working
While entering yarn it shows me error
sir why my framer motion is not working for me
Good Video, just a small correction: It's expertise not experties. In english the word expertise is uncountable so you can't form the plural of it, because there is none. Your video section has it written correctly though.
Also as a fellow programmer I think it's very unintuitive to have the user click on "services" just to end up at "#expertise". Because to me a service is an action that can be performed (usually paid for), expertise on the other hand is simply knowledge or skill in some particular field.
Nonetheless a very solid video!
my scss file not affecting anything
Good One, but you should have made the icons of the expertise section visible first, and then you should have applied the other styles so that we could have seen the changes being made to the icon with each style applied to it.
if youve already get there. then i assume you have been passed the 45:01. would you please tell me on which CSS classname={css.menuIcon} referring to?
@@fakeITDevTeam You are right if you are confused here, because this was also the thing I was concerned about. As far as I see, classname={css.menuIcon} was useless in the code because it was never used anywhere. At least I did not find it anywhere. What about you...?
@@gmsoftwarejamali3478 actually my point in asking that question is, I have a problem where the menu icon (the one with 3 lines stacked that should appear only on small-size web) still appears even if its no longer in small-sized web mode. would you please give me any solution?
@@fakeITDevTeamYes, bro I understood it completely. This is the same problem I met. Icon for Opening menu when the website is opened on small devices also appears on the large screens or larger modes of the screen. I have found that the developer we have followed to build this portfolio has left many deficiencies in the code and design. I think we will have to implement our own logic to make it (menu icon) disappear when it's on larger devices.
@@fakeITDevTeam And one thing you might think is "why does the menu icon disappear for the developer we are following when he switches between large and small screen? This is because he must have some code for it which he has not shown us in the video. Because for this particular problem I replayed video again and again to see if I have made any mistake. But I found that I made no mistake and still got the same issue. Then I realized that the developer has not shown the code regarding making the menu icon disappear for the large screens.
In 56:10 seconds import this will work, @import '../../../styles/contants.scss' not as in the video. Hope it will work
Hello, Sir my font-family is not implementing, what's the possible problem?
because by default index.css index.html ke saath linked nahi hai so link hum ko khud hi karna padega
import "./styles/index.css" in main.jsx file
Thanks for helping.
@@dipperpine5182 Thank you so much😇
can anyone please help me because my yarn is not working .... or not starting
try Node version 14.12.1
Can you please provide the source code link>
hey why so late??uploading after 2 months !!
Assets???
all assets are available in public directory
Font is not working 😢
Hi, try to add the './styles/index.css' and './styles/global.css' in your main.jsx file. It worked for me :D
error package.json: Name contains illegal characters
drop your issue on Instagram. I will see what's happening on your side!
@@ZAINKEEPSCODE Ok, I will send you a screenshot of the issue there and thank you.
@@ZAINKEEPSCODE I actually ended up having more issues with the setup but I figured it out. Thanks for the tip.
Osm design sir...keep helping us with your beautiful projects☺☺☺..sir please add dark mode to this project