🚀 Task 2: Styling Portfolio using Tailwind CSS

📖 About This Project

In this task, you will transform a plain HTML portfolio into a beautifully styled web page using Tailwind CSS. The goal is to apply responsive design principles and create an aesthetically pleasing layout while keeping the code minimal, clean, and effective.

Let's get started!

You don't need to copy the contents and styles from the sample output. Your portfolio should reflect your own details (name, photo, skills, etc.) and your creative design. Be creative and make it your own! 🎨

🎯 Expected Output

output 🔗 Live Demo
💡 Tips

🎯 Centering a div (Horizontally & Vertically)

Use flex with items-center and justify-center to center content.

<div class="flex items-center justify-center h-screen bg-gray-200">
    <p class="text-lg font-semibold">I am centered!</p>
</div>

🖼️ Making an Image Circular

Add rounded-full and border to shape and style the image.

<img src="profile.jpg" class="w-32 h-32 rounded-full border-4 border-gray-300 shadow-md">

🌈 Adding a Gradient Background

Use bg-gradient-to-r to create a smooth color transition.

<div class="bg-gradient-to-r from-purple-400 to-pink-500 p-6 rounded-lg">
    <p class="text-white text-lg font-bold">Gradient Background</p>
</div>

🔲 Creating a Bordered Card

Use border-4 with rounded-lg to create a card-style design.

<div class="border-4 border-yellow-500 p-4 rounded-lg shadow-lg">
    <p class="text-yellow-800 font-bold">This is a card with a border.</p>
</div>

📱 Making Text Responsive

Adjust text size dynamically using Tailwind's responsive classes.

<p class="text-base sm:text-lg md:text-xl lg:text-2xl">
    This text changes size based on screen width!
</p>

💻 Adding Hover Effects

Make elements interactive by using hover: utilities.

<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition">
    Hover Me
</button>

🎨 Animating Elements

Use scale and transition for smooth animations.

<div class="p-4 bg-green-400 text-white font-bold text-center hover:scale-105 transition duration-300">
    Hover to Zoom
</div>

🔗 Styling Links with Hover Effects

Use hover:text-color to change text color on hover.

<a href="#" class="text-blue-500 underline hover:text-blue-700 transition">
    Click Me
</a>

🔘 Creating a Simple Button

Use Tailwind classes to create a stylish button with hover effects.

<button class="bg-yellow-500 text-white font-semibold px-4 py-2 rounded-lg shadow-md hover:bg-yellow-600 transition">
    Click Me
</button>
📌 Steps

Steps will provide later

📤 Submit Your Project