Shrijal Acharya

Build your Portfolio with React and Tailwind in minutes

A step-by-step guide on how you can build your portfolio site and host it for free.

Shrijal Acharya's photo
Shrijal Acharya
·

5 min read

Build your Portfolio with React and Tailwind in minutes

Table of contents

In this article, I will share how you can build a Portfolio with React and Tailwind CSS, and host it for free on a .tech domain for free for a year with GitHub Student Developer Pack.

I choose to start learning React a few weeks ago. I was familiar with Python, Java, and Shell Script, but I was ignorant of front-end frameworks. So, I decided to give React a try. Will of contributing to various Frontend OpenSource Projects was another motivation for studying React. For this, I decided to take a free YouTube course on React by Bob Ziroll on freeCodeCamp. I've posted my code for all the mini-projects here.

After finishing the tutorial, I was pretty confident with the React concepts and decided to do a major project. I had a thought: why not create a strong portfolio website? I already had a crappy portfolio created using plain HTML, CSS, and JS.

Let's get started!🚀

Setting up the Environment

We will use Yarn as the package manager. To Install Yarn, run the command:

npm install --global yarn

For setting up the local development environment, we will use Vite. Learn more about Vite here. To use Vite, run the following command:

yarn create vite

Give the project an appropriate project name, choose the framework, and hit enter. Now this should create an empty React project in your directory.

Inside the project folder run this command to install Vite as a development dependency.

yarn add vite --dev

Now, it's time to set up Tailwind CSS. Run this command to install Tailwind CSS and its dependencies.

yarn add --dev tailwindcss autoprefixer postcss

Now, we need to install Tailwind CSS config files. They help us to interact with our project and customize everything.

npx tailwindcss init -p

This command generates tailwind.config.js andpostcss.config.js configuration files. Now for Tailwind CSS to work with the project, we need to specify the files it should look out for. Add "./index.html", "./src/**/*.{js,ts,jsx,tsx}" inside the content array in the tailwind.config.js file.

The tailwind.config.js the file should now look something like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

Now, the final step in setting up Tailwind CSS is to add its directive to the CSS file which is src/index.css. Clear all the default styling and add the following

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, run this command to start the Vite local development server:

yarn run dev

The terminal output should look something like this:

Hold the ctrl key and click on the link in the terminal. It should open a new tab that looks like the following:

First look of the site

Head on to the App.tsx/jsx file and remove the child divs of the div with the class name App. Insert the following in place of it.

<h1 className="text-3xl font-bold underline text-center">Hello world!</h1>

This is the standard style of writing Tailwind CSS. Revisit the page and you should see this:

Congratulations on setting up your development server!🥳

GitHub Student Developer Pack and Code

It's not possible to explain all the code in this article. I've taken some UI references from a few YouTube videos. I will share the link to the Source Code here.

Step by Step instructions on how to get GitHub Student Developer Pack is linked here.

Hosting

After you've gotten your GH Student Developer Pack, go to get.tech. Sign up with your GitHub Account and you should be able to claim your one-year free .tech domain plan.

Now, to host your Source Files, go to netlify.com and create an account. Now, get back to the project folder and run the command:

yarn run build

After running this command, you should have a /dist directory at the root of your project. The previous command is simply intended to give you the impression that this is the only folder that contains your deployment-related files. All this is handled by Netlify itself.

💡Before, deploying the project make sure you push your project code to GitHub which will help in the rebuild of the code when you make any changes to the code in the future. So, you do not need to manually copy and paste your project each time in netlify.com

Head on to Netlify and click the following:

"Add New Site" > "Import an Existing Project" > "Choose Github" > "Select the repo"

For "build settings", have these values

Finally, click on "Deploy Site" and you should have your site deployed on something.netlify.app.

Now, to map this site to the domain we just purchased on get.tech, make sure you change the nameserver of your domain to Netlify nameservers. For this go under "Options" > "Set Up Netlify DNS" and copy the nameservers of Netlify, and paste it in "Custom nameserver" inside get.tech domain settings. Now, in Netlify under "Domain Settings" > "Add custom domain", add your purchased domain name.

With these changes, you should now have your site deployed on your custom domain.🚀

TLDR;

In conclusion, React and Vite go very smoothly together and can be used to build some very powerful front-end projects. In this blog, we discussed how to set up a React project with Vite locally, set up Tailwind CSS, get Github Developer Student Pack, and host the portfolio site for free.

It's recommended to maintain a proper folder structure in React by creating individual folders for each component. This practice increases the maintainability and scalability of your application, allowing for easier navigation and updates.

Let's Connect

If you enjoyed this post and would like to stay updated, feel free to connect with me on social media.

WeMakeDevsWeb DevelopmentReactTailwind CSS