Portfolio Website with Smooth Scrolling Navbar and Hero Section - TailwindCSS

Portfolio Website with Smooth Scrolling Navbar and Hero Section - TailwindCSS Project by SudhuCodes Made with TailwindCSS Language

Project Creator

@SudhuCodes — A project contributor on SudhuCodes platform.

Category

TailwindCSS — This project belongs to the tailwindcss category.

Upload Date

7/14/2025 — Uploaded to the SudhuCodes project library.

Project Description

Download free project assets built using tailwindcss. This open-source project is part of the SudhuCodes initiative to support developers and learners.

1<!DOCTYPE html>
2<!-- ------Code with SudhuCodes------ -->
3<html lang="en" class="scroll-smooth">
4
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>SudhuCodes - Professional Contact Us Section with Social Links and Clean UI TailwindCSS</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10    <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>
11    <link
12        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
13        rel="stylesheet">
14</head>
15
16<body class="font-['IBM_Plex_Sans']">
17
18    <!-- ---------Navbar--------- -->
19    <nav class="flex items-center justify-between bg-indigo-200 px-10 py-4 fixed w-full">
20        <a href="index.html" class="text-[26px] font-semibold text-indigo-700">DevSmith.</a>
21        <ul class="flex items-center gap-5">
22            <li><a href="#home" class="text-indigo-900 hover:text-indigo-600 hover:underline font-medium">Home</a></li>
23            <li><a href="#service" class="text-indigo-900 hover:text-indigo-600 hover:underline font-medium">Service</a>
24            </li>
25            <li><a href="#about" class="text-indigo-900 hover:text-indigo-600 hover:underline font-medium">About</a>
26            </li>
27            <li><a href="#projects"
28                    class="text-indigo-900 hover:text-indigo-600 hover:underline font-medium">Projects</a></li>
29            <li><a href="#contact" class="text-indigo-900 hover:text-indigo-600 hover:underline font-medium">Contact</a>
30            </li>
31        </ul>
32        <a class="bg-indigo-600 hover:bg-indigo-700 transition duration-300 py-2 px-4 rounded-full text-white"
33            href="#">Download CV <i class="fa-solid fa-file-arrow-down ml-1"></i></a>
34    </nav>
35    <!-- ---------Hero--------- -->
36    <section id="home" class="flex flex-col items-center justify-center h-screen bg-gray-50 px-6">
37        <img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=600"
38            alt="John Doe Profile Picture" class="h-44 w-44 rounded-full shadow-lg mt-16">
39        <h1 class="text-5xl font-semibold text-indigo-700 mt-8 text-center leading-tight">
40            John Doe
41        </h1>
42        <h2 class="text-2xl text-indigo-600 font-medium mt-3">
43            Full Stack Web Developer
44        </h2>
45        <p class="text-lg text-gray-600 text-center mt-6 max-w-2xl leading-relaxed">
46            Crafting modern web applications with a focus on impactful user experiences. Let's build solutions that
47            drive real value and push the boundaries of web development.
48        </p>
49        <div class="mt-10">
50            <a href="#contact"
51                class="px-6 py-3 bg-indigo-600 text-white rounded-full text-lg font-medium hover:bg-indigo-700 transition">
52                Get in Touch
53                <i class="fa-solid fa-arrow-up-right-from-square ml-1"></i>
54            </a>
55        </div>
56    </section>
57</body>
58
59</html>

Live Preview

You're free to use this code for your personal or educational projects. If you use it publicly, consider giving credit to @SudhuCodes.

Want more beginner-friendly and open-source projects like this one? Browse the full library on the SudhuCodes homepage.

Have suggestions or improvements? Contact us or contribute on GitHub.