Home
$@(\/)(\/)¥
Portfolio Hero Section 3

Portfolio Hero Section 3

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

This tailwind example is contributed by $@(\/)(\/)¥, on 09-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Front page,CV template

Header Hero Landing Page Resume template

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

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

8.6k

Fork Fullscreen

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

<div
        class="absolute hidden sm:block md:top-16 sm:top-[8%] top-[10%] xl:top-4 xl:left-[30%] lg:left-[35%] md:right-[20%] sm:left-[18%] left-[10%] overflow-hidden">
        <img class="2xl:h-[760px] xl:h-[600px] md:h-[450px] sm:h-[480px]" src="https://techakim.com/sam/tg/7268/li/imgs/2.png" alt="Image" />
    </div>

<div class="lg:px-16 px-4 pb-4 h-full flex flex-col sm:flex-row sm:items-center mt-10 sm:mt-0 text-white">
        
        <div class="w-full flex flex-col z-10">
            <h4 class="text-lg font-semibold text-white xl:text-2xl">Hey There</h4>
            <h1 class="2xl:text-8xl md:text-6xl sm:text-4xl text-3xl font-semibold font-serif mt-2">I'm
                <span class="">Samuel</span>
            </h1>
            <h1 class="md:text-6xl sm:text-4xl text-3xl font-semibold font-serif">Abera</h1>
            <h4 class="text-rose-500 mt-4 lg:text-2xl xl:3xl">--FullStack Developer</h4>

<p class="lg:w-[70%] w-full text-white text-md mt-4 md:text-lg 2xl:text-2xl">Experienced full-stack developer with 4+
                years
                of expertise in Laravel, NestJS, Nuxt.js, Next.js, Android, and some Flutter experience.</p>

<div>
                <button class="mt-6 px-6 py-1 bg-rose-500 text-lg text-white rounded-sm lg:text-2xl">Get In Touch</button>
            </div>
        </div>

<div
            class="w-full flex sm:flex-col justify-center mt-4 sm:mt-0 sm:gap-8 gap-2 bg-gray-700/60 sm:bg-transparent p-4 rounded-lg z-10">
            <div class="flex flex-col sm:items-end items-center">
                <div class="inline-flex gap-1 items-center">
                    <h2 class="xl:text-8xl md:text-6xl sm:text-4xl text-3xl font-semibold">5</h2>
                    <h2 class="text-rose-500 xl:text-6xl md:text-7xl sm:text-4xl text-3xl font-extrabold">+</h2>
                </div>
                <h4 class="text-sm sm:text-lg xl:text-2xl text-center">Years of Expireance</h4>
            </div>
            <div class="flex flex-col sm:items-end items-center">
                <div class="inline-flex gap-1 items-center">
                    <h2 class="xl:text-8xl md:text-6xl sm:text-4xl text-3xl font-semibold">55</h2>
                    <h2 class="text-rose-500 xl:text-8xl md:text-6xl sm:text-4xl text-3xl font-extrabold">+</h2>
                </div>
                <h4 class="text-sm sm:text-lg xl:text-2xl text-center">Component Contribution</h4>
            </div>
            <div class="flex flex-col sm:items-end items-center">
                <div class="inline-flex gap-1 items-center">
                    <h2 class="xl:text-8xl md:text-6xl sm:text-4xl text-3xl font-semibold">127K</h2>
                    <h2 class="text-rose-500 xl:text-8xl md:text-6xl sm:text-4xl text-3xl font-extrabold">+</h2>
                </div>
                <h4 class="text-sm sm:text-lg xl:text-2xl text-center">User's Got Help</h4>
            </div>
        </div>
    </div>

</div>

Related Examples

Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9.1k
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

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

Author:
Junclarkaizen Pagu

2 years ago

11.8k
Hero

Author:
Aman kumar

2 years ago

7.2k
Hero Section
Home hero section search bar

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

1 year ago

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

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

1 year ago

4.3k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

15k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.9k
Yoga Coach Hero Section

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

1 year ago

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

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

1 year ago

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

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

1 year ago

5.5k
Hero Beer

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

1 year ago

5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components