š„Build a Stunning Portfolio Website with React JS [ Framer-motion + Styled-components ]
React Portfolio Website Tutorialš
Demo Linkš¤: https://react-portfolio-sigma.vercel....
-----------------------------------------------
Need Web Development or AI Solutions Services? š
Let's bring your ideas to life!
Contact Me From Here: https://tally.so/r/wdlj0N
-----------------------------------------------
Blogš: https://devdreaming.com
Hi there š,
In this video,
I am going to create a whole Portfolio Website with ReactJS.
Here I have used very few libraries and made a unique design, You can check the demo link.
For this project we're going to use,
ā¶ļø Framer-motion (For Smooth Page Transition and Animations)
ā¶ļø Styled-components for styling
ā¶ļø Particle JS for cool background effects
-----------------------------------------------------------------------------------------------------------
Starter CODE:
https://github.com/codebucks27/React-...
Final CODE:
ā” Link š: https://devdreaming.com/videos/build-...
----------------------------------------------------------------------------------------------
NOTE: š“
react-particles-js has been deprecated. You can use react-tsparticles instead.
----------------------------------------------------------------------------------------------
TimeStampsš:
ā¶ļø Channel Intro: @0:00:00
ā¶ļø Demo @0:00:10
ā¶ļø Setup & Installation @4:12
ā¶ļø Creating GlobalStyles @9:20
ā¶ļø Creating Themes @13:09
ā¶ļø Creating Required files for each sections @16:00
ā¶ļø Main Page @20:30
ā¶ļø Blog Page @1:27:20
ā¶ļø MySkills Page @2:04:30
ā¶ļø About Page @2:23:45
ā¶ļø Work Page @2:33:47
ā¶ļø Creating SoundBar component @3:13:02
Don't forget to watch the whole video, we're going to learn a lot of stuff like,
ā¶ļø Complex Styling with Styled-components
ā¶ļø How to create Page Transition effects using Framer-motion
ā¶ļø How we can leverage advantages of component structure
ā¶ļø How to use ParticleJS in React JS for awesome background effects
ā¶ļø Uses of Lazy and suspence in reactJS to make components load faster
ā¶ļø Many awesome pure CSS animations.
Watch full video in order to understand, so that you can easily build and customize your own portfolio.
[š š¬šš«šØš§š š„š² š¬š®š š šš¬š š²šØš® ššØ š°š«š¢šš ššØšš šš„šØš§š š°š¢šš” š¦š š¬šØ š²šØš® ššš§ š„ššš«š§ šš”š šš„šØš° šØš šš«šššš¢š§š šš”š¢š¬]
In upcoming videos, I'm going to create lots of cool stuff with JavaScript and React so make sure to subscribe.
Like, Subš„ & Share! ā„
Learn More About,
Build awesomeš„ landing page for Apple iphone using ThreeJS + ReactJS
Ā Ā Ā ā¢Ā š„BuildĀ awesomeĀ 3DĀ landingĀ pageĀ forĀ Ap...Ā Ā
Build Responsive website with ReactJS, Styled-Components & GSAPā£ļø:
Ā Ā Ā ā¢Ā ReactĀ Websiteš¤©Ā :Ā BuildĀ ResponsiveĀ web...Ā Ā
If you want to learn Redux as a beginner here is Tutorial for you š:
Ā Ā Ā ā¢Ā ReactĀ ReduxĀ TutorialĀ forĀ beginnersĀ Ā
Build Devto Clone in React:
Ā Ā Ā ā¢Ā BuildĀ Dev.toĀ CloneĀ inĀ ReactĀ Ā
Build Awesome stuff with ReactJs (Playlist) :
Ā Ā Ā ā¢Ā BuildĀ withĀ ReactJsĀ Ā
React Advanced Topic (Playlist) :
Ā Ā Ā ā¢Ā ReactĀ AdvancedĀ ConceptsĀ |Ā EveryĀ React...Ā Ā
Thank You for watching! š
Where else you can find me:
Twitterš¤ : Ā Ā /Ā code_bucksĀ Ā
LinkedIn š: Ā Ā /Ā codebucksĀ Ā
Instagram š«: Ā Ā /Ā code.bucksĀ Ā
Email š§: [email protected]
Music Creditsšµ:
Casiio x Sleepermane - Nomadsš“
Provided by Lofi Girl
Watch: Ā Ā Ā ā¢Ā CasiioĀ xĀ SleepermaneĀ -Ā Nomadsš“Ā [lofiĀ ...Ā Ā
Listen: https://fanlink.to/lofigirl-music
Hoogway - You / 2 A.M Study Session
Provided by Lofi Girl
Watch: Ā Ā Ā ā¢Ā 2Ā A.MĀ StudyĀ SessionĀ šĀ [lofiĀ hipĀ hop]Ā Ā
Listen: https://open.spotify.com/artist/1Mh9G...
Sleepermane X Sebastian Kamae- Ships / 2 A.M Study Session
Provided by Lofi Girl
Watch: Ā Ā Ā ā¢Ā 2Ā A.MĀ StudyĀ SessionĀ šĀ [lofiĀ hipĀ hop]Ā Ā
Listen: https://open.spotify.com/artist/4gGsx...
Elior X Eaup - VHS / 2 A.M Study Session
Provided by Lofi Girl
Watch: Ā Ā Ā ā¢Ā 2Ā A.MĀ StudyĀ SessionĀ šĀ [lofiĀ hipĀ hop]Ā Ā
Listen: https://open.spotify.com/artist/2yCHw...
WYS - Nautilus / 2 A.M Study Session
Provided by Lofi Girl
Watch: Ā Ā Ā ā¢Ā 2Ā A.MĀ StudyĀ SessionĀ šĀ [lofiĀ hipĀ hop]Ā Ā
Listen: https://open.spotify.com/artist/2CiO7...
Casiio X Sleepermane - Night Owls / 2 A.M Study Session
Provided by Lofi Girl
Watch: Ā Ā Ā ā¢Ā 2Ā A.MĀ StudyĀ SessionĀ šĀ [lofiĀ hipĀ hop]Ā Ā
Listen: https://open.spotify.com/artist/4gGsx...
Get more awesome music from https://lofirecords.com/
Buy me a coffee and Support this channelš„°:
https://www.buymeacoffee.com/CodeBucks
Disclaimer:
All videos are for educational purpose and use them wisely. Any Resources used in this video are for educational purpose only.
#PortfolioWebsite
#ReactPortfolio
#PortfolioWebsiteWithReact
Watch video š„Build a Stunning Portfolio Website with React JS [ Framer-motion + Styled-components ] online without registration, duration hours minute second in high quality. This video was added by user CodeBucks 02 November 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 143,121 once and liked it 4 thousand people.