R3F Portfolio Generator

Have you seen those amazing 3D web apps but haven't had the time to put together one for yourself? Use this tool to unlock and streamline the awesome powers of R3F and make yourself a new portfolio!

Comment

Inspiration

The reason I got into learning Three.js and R3F was to build a cool portfolio that would impress any employer, and I see many prospective learners looking at this tech for the same reason. So, I though it would be really nice to build a little generator for a R3F portfolio that doesn't require an intense amount of resources to learn the tech from the ground up just for one project.

What it does

On the first run, the application provides a form for the user to enter information such as name, tagline, details for three projects, and some contact info which will all be used to build an R3F site which will appear after that form is submitted and on all subsequent runs of the application.

How we built it

I built this application using quite a wide range of technologies. It is a full-stack MERN (MongoDB, Express, React, and Node) application, but instead of your regular old React, I have used R3F to get some of those cool 3D effects. R3F itself largely consists of two libraries, @react-three/fiber and @react-three/drei, both of which contain important components for this project. Additionally, MongoDB Atlas is a crucial part of this project and the way it is set up. Since usercan can only update their site information once on the initial run, subsequent edits must be made through the beautiful and intuitive interface provided by MongoDB Atlas. And since there's a wonderful free forever tier, users can utilize this tool absolutely free of cost!

Challenges we ran into

The challenges for me all dealt with the mixing of technologies. I had made MERN apps in the past, but not with R3F. I had made R3F apps in the past, but not as full-stack applications. I had separately made apps that had 3D components, and those that had regular HTML elements, but I had not mixed them in any substantial way. For me this was at the core of my goals for this project. It allowed me to bring together a significant amount of awesome technologies that I had worked with in isolation and put them together in one place.

Accomplishments that we're proud of

Continuing on from the previous section, I am very proud that I was able to blend all of these awesome technologies into one project - and in such a short amount of time! (I am also at home with a newborn baby, so time was very limited for and distractions from the project were many!). Additionally, I went into this project with the idea that I wanted to help others, and that required me to think about how I could keep the set up simple for first-time users. I spent more time than I would like to admit on the README instructions which include streamlined commands for quick and customized set up of the project. I truly hope that this provides first-time users with a smooth experience! Finally, I absolutely love the light/dark mode option which changes the background from a daytime sky to a nighttime sky - yes, I know it is a bit frivolous but it is so cool!

What we learned

Again, continuing from the previous sections, the main thing I learned here was how to integrate all of these technologies into one project. There are many working parts, many very different libraries involved, and yet the project feels singular and whole, whereas I thought it would feel much more clunky. Furthermore, since this is meant to be a tool for others to use with ease, I spent extra time learning about npm commands including how users could utilize them with arguments and how I could use them to automate certain processes that would decrease the time and complexity of set up required of my good friend, the user.

What's next for R3F Portfolio Generator

I believe this project could go really far and help a lot of folks make impressive 3D portfolios that catch the attention of recruiters and employers. I can already think of a million customization options that could be implemented. Furthermore, I think that using something like MongoDB Atlas opens up a lot of doors for further potential, such as the ability to make the site more dynamic and easily updatable; something like a blog could be easily added and maintained through the MongoDB Atlas platform. Finally, since this is a Hackathon, as you can imagine there are many small bugs that should be worked out before this tool is fully advertised to the world. Not only that, but some of the styling seems very elementary since I did not spend a significant amount of time on some of the aesthetic aspects as a trade off for focusing more on the functionality.

Share this project:

Updates