The Ultimate Guide to Making a Static/Responsive Portfolio Website with Tailwind CSS

A portfolio website is more than a simple resume. It is a thing that proves that you can do what you talk about in your resume. Making a good-looking Portfolio website is good but too many things will make a mess and would likely take much time to load.

Today, we are going to make a static portfolio website using many frameworks such as tippy.js, popper.js but mostly we are going to use tailwind.css.

Folder Structure :
login/
├── index.html
├── me.jpg
└── favicon.png


What is Tailwind CSS?
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
Tailwind is A utility-first CSS framework for rapidly building custom designs. It was made by Adam Wathan and Steve Schoger.
Why should I choose Tailwind over Bootstrap?
There are many reasons why you should consider Tailwind over Bootstrap

  1. It is more lightweight - The good thing about Tailwind is that it is very lightweight. Tailwind compressed is 45.2kB while Bootstrap compressed is 147kB.
  2. The documentation is easier to read than bootstrap - This may change from people's views but I think that Tailwind has better documentation than Bootstrap. The reasons are that you can quickly search by pressing / , they give examples with normal CSS in the right. Easier To Understand3. It is easier to write and read - In Bootstrap, If you wanted to have a custom style, you had to create classes that come close to Bootstrap's classes but just needed to be just a little bit adjusted too often. But if you use Tailwind, all you have to do is add it to the colors object in the Tailwind configuration file. That's it!

What are Tippy.js and Popper.js?
Tippy and Popper are JavaScript Libraries to help developers make the popper that shows when we hover over the links. We will use this to show our social tags when they hover over SVG icons.
Did You Know? Medium uses Popper.js for its editor.
Let's start coding!

  1. Add frameworks
    First, Let's make an index.html file and make a simple skeleton and the frameworks via CDN. Enter the code below.

  2. Add the divs and classes
    Now, we are going to fill the body tag with divs and classes. If you don't understand anything in the code, you can always comment it below or look it up on the Tailwind.css Documentation.

  3. Add the background photo and profile picture
    We must add the background and profile picture. Add the files and change Line 6, Line 16, Line 19, and Line 79.

  4. Lastly, Add the JS
    Everything is set except for popper.js so let's add the script.


Final Code

It should look like this
The final code should look the same as below.


Congratulations!
You have successfully made a static and responsive website with Tailwind CSS! You can make it better by adding many things such as the menu's, more pages, etc. If you liked it, don't forget to share it with your friends and/or give me a clap (plz). Thanks for reading!
Reference
"Create a Beautiful Portfolio Web Page using HTML and CSS" from https://www.udemy.com/course/thecompletewebdeveloper/
(I am not promoting/promoted)
(I have asked permission to make this)