Build A Multipage Photography Portfolio Website Using React JS, Tailwind CSS And Framer Motion

Build A Multipage Photography Portfolio Website Using React JS, Tailwind CSS And Framer Motion

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

🧡 Get Source Code

💙 Get Source Code With PayPal

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

📁 Assets

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

👨‍💻 Start project from scratch

⏱ Timestamps
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
00:00:00 Project Intro
00:03:05 Project Setup
00:05:00 Router & Routes
00:09:05 Header
00:10:38 Home Page Background
00:10:52 About Page Background
00:11:17 Portfolio Page Background
00:11:40 Contact Page Background
00:12:09 Header Styles
00:16:19 Mobile Navigation
00:25:00 Socials
00:28:18 Home Page Styles
00:31:21 About Page Styles
00:37:42 Portfolio Page Styles
00:44:00 Contact Page Styles
00:50:20 Animate Presence Implementation
00:51:03 Home Page Transitions
00:55:14 About Page Transitions
00:57:43 Portfolio Page Transitions
00:59:49 Contact Page Transitions
01:03:00 Custom Cursor
01:29:37 Final Project

👍 Thanks for watching!
Make sure to leave a like & Subscribe for more videos like this! ❤

#tailwindcss #reactjstutorial #reactjs #framer

[dariusz]

My mind was blowned this is art! Congrats!!

[techiesakar]

This is the first Framer Motion video, I've watched. Completed the project. And loved it and thank you so much ❤

[templatesjungle]

Thanks for choosing our web design for a tutorial. 👍✨❤

[Grand_GT]

This is an awesome portfolio. One thing to note is that when using gaps for flex, you don't need to specify flex-x or flex-y as flex is one-dimensional. You can simply use gap-12, unless you are using grid.

[radenagus_]

I got new knowledge every time I watch your content

[oluwaseunajibowo]

I just completed this project, I really learnt from it, thanks much ❤

[oscarabs]

Oh men this's so awesone, just a quick question, the negative roller in images, we can make in B&W roller?

[katherinescott]

@cristianmihai01 I'm playing around with this project and for some reason when I add a picture (like say the home page) it won't extend the page and in smaller screen the pic is off the the left. I have tried adjusting it and reviewed many time and not sure the problem. Not sure if anyone else has ran into this.. Thanks!

[javelopdev]

I'm pretty much a newbie when coding in react, but what's the point of transitions.js? Can't we get the same behaviour with CSS transitions? I don't really get how the js file works... any doc or tips you could give me?

[Ultron-]

Great project. Very classy. I wonder what it would be like to add a dark mode to this?

[RanjeetKumar_]

Amazing content as always Cristian, I wanted to asked about your approach from picking up the design to code. What steps you follow and also what are you working on currently : )

[williamrobersone]

Quick question, where can I go to create a similar logo? I''d like to make a SVG just like this.

[vivelumani]

Hi Cristian! Awesome video, I used this as a template for my portfolio website and I'm nearly done building it; however, I am running to some issues. When I was developing it, I displayed the website on an HP v21 monitor and it looks just like your website in terms of scaling. However, when I display the website on my standard sized dell laptop, the site is very zoomed in and causes overlaps with the text, pictures, header, etc. When I zoom out to 67% instead of 100% on my laptop, it displays normally. How can I render the website to where it scales normally on my laptop without having to manually zoom out? My concern is that when I publish the website, and people access it on their laptops, they'd see a zoomed in / distorted version and they might not know to zoom out manually. The display resolutions are the same for my monitor and laptop (1920 x 1080), so I don't know how to fix this. If you have an email or anything, I'd be happy to explain more in depth.

[mohamedmagdy]

when I get to the part of custom cursor it's movment is very slow because of the app keeps re rendring too much?

[coding-longus]

Awesome, can you combine it with Gsap library instead of motion?

[jaiyadav]

my logo takes space of half page I don't know what to do

[SufyanAhmed]

Very laggy on my site. I guess it is because of too many rerenders. Any fix?

[codeforsure]

why on exit transition is not working???

[ValentinWF]

Esto no es responsive en mi laptop se ve súper mal 🤨

[bigdevon]

Please how can we get the source code for this