Member-only story
Create Your Portfolio Using Next.js, Tailwind CSS, Stripe, and PayPal
Create a portfolio website using Next.js and Tailwind CSS with dark mode support, a donation page that integrates PayPal and Stripe
In this tutorial, I show how to create a portfolio website. I will use Next.js and Tailwind CSS with Dark mode support. Also, I add a simple “Sponsor”/”Support Me” page which will enable anyone to donate something to the website author using Stripe or PayPal.
Good Reasons for having a Portfolio:
- Show your code off: You can show some awesome projects you create here that should impress everyone visiting your portfolio
- Express yourself: Normally your personality does not shine through your resume but you can use your portfolio website to do this.
- Improve your online footprint: Your online footprint is important if you want to apply for a job because new companies will always google your name.
tl;dr: Go to GitHub, clone this repository, and switch to folder v0. Add a .env.local with the missing environment variables and deploy the content on Vercel.
Setting Up Next.js And Tailwind Configuration
Next.js can be installed with preconfigured Tailwind CSS with this single command:
Afterward, switch to your favorite IDE and open the projectyour-portfolio. In the project's root directory, you should create a components folder that will be used for every component within your Next.js app.
Additionally, you should add this folder as path to the tsconfig.json to better import the different components later. Then, add baseUrl if it is not already present.
The following snippet shows how the tsconfig.json should look like after adding both properties:
