Portfoolio

• 

  Landing page

• 

  Profile page

• 

  Generated portfolio

Inspiration

Creating a portfolio to showcase your education, work experience and best projects is often too difficult or time-consuming. Portfoolio attempts to streamline the portfolio-creation process as much as possible.

What it does

Portfoolio asks for the user's social account and some basic information to generate a portfolio that can be shared via a perma-link.

How we built it

The development process started by creating a interactive prototype in Figma. Once this was completed, we proceeded to build the web application using Next.js.

Tech stack

• JavaScript
• React
• Next.js
• Prisma
• TailwindCSS
• Vercel (deployment)

Challenges we ran into

Firstly, ensuring the profile form was responsive required a lot more effort than expected. While TailwindCSS sped up development significantly, properties relating to CSS' column properties are not included. While this caused a slight issue, a working solution was eventually implemented using in-line styling. Another challenge that we ran into was integrating the authentication pipeline with our database schema. For that, we had to ensure that updating profile information was independent of OAuth-provided data.

Accomplishments that we're proud of

We are proud that we were able to deliver the project in a timely manner, complete with all planned features and successfully deployed.

What we learned

We learned how to deploy a full-stack, authentication-based Next.js project. For Portfoolio, we leveraged useful Next.js features, including both client-side and server-rendering, image optimization, and API routes.

What's next for Portfoolio

For the next iteration of Portfoolio, it would be desirable to include more portfolio templates, as we currently only have one available. It would also be great to add more validation logic when filling out profile information.

Built With

• javascript
• next.js
• oauth
• prisma
• react
• tailwindcss
• vercel