Home
$@(\/)(\/)Y
Portfolio Hero Section 1

Portfolio Hero Section 1

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

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

Header Hero Resume template

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

Author $@(\/)(\/)Y

4.2k

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="shadow-2xl shadow-rose-600 animate-[spin_12s_linear_infinite] absolute left-0 right-0 rounded-full lg:max-w-[70%] max-w-[60%] mx-auto" src="https://techakim.com/sam/tg/7268/li/imgs/profile.jpg" alt="My Image" />
            <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

Author:
Prajwal Hallale

2 years ago

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

Author:
Junclarkaizen Pagu

1 year ago

10.8k
Hero

Author:
Aman kumar

1 year ago

6k
Hero Section
Home hero section search bar

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

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

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

3.6k
Yoga Coach Hero Section

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

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

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

11 months ago

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

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

11 months ago

6.7k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

10 months ago

3.7k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

9 months ago

1.3k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

9 months ago

1.4k
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.

Author:
Hezron Okoko

9 months ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components