Build and Deploy Responsive React Portfolio
In this article, we will learn how to create a stunning 3D portfolio website using React and Three.js, and how to deploy it to the web. This portfolio will be fully responsive and will showcase your projects in an interactive and engaging way.
What is Three.js?
Three.js is a popular JavaScript library used to create 3D computer graphics on the web. It provides a set of tools and abstractions for rendering 3D scenes using WebGL, making it easier to create interactive 3D content in the browser.
Getting Started with React and Three.js
First, we need to set up a new React project using Create React App. Once the project is set up, we can install Three.js and set up our 3D scene. We will create a new component to hold our 3D portfolio, and then start adding and animating 3D objects to showcase our projects.
Deploying the Portfolio
Once our 3D portfolio is ready, we can deploy it to the web using a hosting service such as Vercel or Netlify. These services make it easy to deploy and manage React applications, and they also provide custom domain support for a professional look.
Conclusion
Creating a 3D portfolio website with React and Three.js can be a fun and rewarding experience. It allows you to showcase your projects in a unique and interactive way, and it can make a great impression on potential clients and employers. By following the steps in this article, you can build and deploy your own responsive 3D portfolio and take your web development skills to the next level.
Hi friends. Thanks for watching 🙂 Don’t forget to check discounted hosting plans: http://hostinger.com/lamadev
Where can I get these images? Mainly the image on the "Think. Make. Solve." page?
6:14 – styled-components doesn't apply to the webpage after I run it. Can someone help me with this? The syntax is right and everything else is working alright.
Can I ask what are your installed extensions for VScode? im just a beginner and I dont know what are the ones I should install. thanks in advance if you noticed this comment!
remote: Repository not found.
What am I doing wrong, I struggle to even get connected to Github, step 1…
Is there a way to do this without Github at the beginning?
Can anyone please tell me what "yarm" is
youre a great teach but fuck me im so fucking stupid i just graduate and got a job as a web dev and then resign and I CANT FUCKING COPY EVEN THE CSS I TRIED TO MAKE THE COMPONENT CSS(done) BUT I JUST WANT TO TRY YOUR STYLE and i still cant wtf am i doing a "web dev" for 2 months and cant even copy a css hahahahahh im stressing my butt off my oh my.. i have the background etc but the fucking navbar wont fucking cooperate i just feel like i want to stab some stupid people like me huuuuuuuuuuuuuuuu i shall rest and I SHALL RETURN!
How do you use CSS with this projects?
great tutorial, keep it up bro
what plugin do you use that you type in something that short then it imports it from another thing when u type rafc what i meant and please i need more support cause i do not really understand what to do i tried following the steps but i gotten my texts orange on the app.jsx when i placed `in them`
❌::after => &::after ✅
Hi, thanks for this tutorial. Can you make a short or something like similar that shows a other way to make “no-inline” CSS?
As a very confused 'modern-web-dev' noob, with only old-skool html/css and very flaky 20-yr-old JS knowledge, this 1hr 43m tutorial took me ~16hrs to get through… 😂 …BUT… I got there in the end – and with everything working!!
Thank you for your in-depth explanations, and your calming voice (which btw, amazingly, doesn't sound like you're about to die of boredom, playing at 0.75x speed!) 🙏
I've learned WAY more than expected 💯💯💯
MeshDistortMaterial is not working on my code……
please provide some suggestion….
how to add image in cube?
Please which code snippet are you using.
Mine doesn't seem to work inside the backtick
Can u add react router for the navigation? It 'd help me a lot,
Ive been trying using react scroll but its not workinh
I love the way you explain things Lama Dev…I got an issue when using EmailJs : I've created several input in my form, when I send the form, I only receive the date from one input (im my case, the textarea), the others input are empty…Do you have an Idea please? Are we limited when using a free account? Thank you…
if you have a problem with animation that doesn't work in ur Works.jsx ListItem component try this code :
“`
const ListItem = styled.li`
font-size: 90px;
font-weight: bold;
cursor: pointer;
color: transparent;
-webkit-text-stroke: 1px white;
position: relative;
@media only screen and (max-width: 768px) {
font-size: 24px;
color: white;
-webkit-text-stroke: 0px;
}
&::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: pink;
width: 0px;
overflow: hidden;
white-space: nowrap;
}
&:hover::after {
width: 100%;
transition: width 0.5s linear;
}
`;
“`
I liked the tutorial thank you very much!
Can I ask you guys if you know where can I found more art like the one with the astronaut for free or free with attribution ?