Portfolio Hero Section 1

visually stunning and captivating hero section component for your portfolio website.

This tailwind example is contributed by $@(\/)(\/)¥, on 04-Jun-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is CV template

Header Hero Resume template

$$@(\/)(\/)¥ profile image$

Author $@(\/)(\/)¥

Tailwind v3.4 6.4k 6

Fork Fullscreen

<div class="hidden md:flex md:items-center md:w-auto w-full" id="menu">
            <nav>
                <ul class="md:flex items-center justify-between text-base text-gray-100 dark:text-gray-600 pt-4 md:pt-0">
                    <li><a class="md:p-4 py-3 px-0 block text-rose-500" href="#">Home</a></li>
                    <li><a class="md:p-4 py-3 px-0 block" href="#">About Me</a></li>
                    <li><a class="md:p-4 py-3 px-0 block" href="#">Education</a></li>
                    <li><a class="md:p-4 py-3 px-0 block" href="#">Experience</a></li>
                    <li><a class="md:p-4 py-3 px-0 block" href="#">Projects</a></li>
                    <li><a class="md:p-4 py-3 px-0 block md:mb-0 mb-2" href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<div
        class="h-full w-full mx-auto relative top-12 pb-20 xl:px-16 px-8 flex md:flex-row flex-col gap-4 justify-center items-center pb-10 pt-4">
        <div class="w-full relative">
            
            <img class="relative z-10 rounded-full lg:max-w-[70%] max-w-[60%] mx-auto outline outline-[.7rem] outline-offset-[.1rem] outline-rose-400/30" src="https://techakim.com/sam/tg/7268/li/imgs/profile.jpg" alt="My Image" />
        </div>
        <div class="w-full flex flex-col justify-center gap-4 md:text-left text-center text-white dark:text-gray-800 md:mt-0 sm:mt-8 mt-4">
            <h1 class="md:text-4xl sm:text-3xl text-2xl font-semibold font-serif">Hello, My name is Samuel Abera</h1>
            <h3 class="capitalize text-rose-400">i'm <span class="typing text-green-500 dark:text-green-700">fullstack developer</span></h3>
            <p>Experienced full-stack developer with 4+ years of expertise in Laravel, NestJS, Nuxt.js, Next.js,
                Android, and some Flutter experience.</p>
            <div class="sm:mt-4 mt-2">
                <button class="px-6 py-1 bg-rose-500 text-white rounded-sm">Get In Touch</button>
            </div>
        </div>
    </div>
</div>

Related Examples

Hero section
Hero section for your project

Prajwal Hallale

4 years ago

9.2k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Junclarkaizen Pagu

3 years ago

12.3k
Hero

Aman kumar

2 years ago

7.7k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.5k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.1k
Yoga Coach Hero Section

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.7k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.3k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.8k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

AKASH GANDHAR

2 years ago

5.4k
Tailwind Pricing Section
Fully Responsive Pricing Section

AKASH GANDHAR

2 years ago

2.3k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

AKASH GANDHAR

2 years ago

2.8k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Hezron Okoko

2 years ago

3.7k