Home
Samuel Abera
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 Samuel Abera, 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

Author Samuel Abera

3.6k

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.8k
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.1k
Hero

Author:
Aman kumar

1 year ago

5.4k
Hero Section
Home hero section search bar

Author:
Samuel Abera

11 months ago

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

Author:
Samuel Abera

11 months ago

3k
Yoga Coach Hero Section

Author:
Samuel Abera

9 months ago

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

Author:
Samuel Abera

9 months ago

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

Author:
Samuel Abera

9 months ago

5.9k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

7 months ago

3.1k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

6 months ago

1k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

6 months ago

1.1k
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

6 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components