Portfolio Hero Section 2

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

This tailwind example is contributed by $@(\/)(\/)¥, on 05-Jun-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information,Transitions,CV template

Hero Profile Animation Resume template

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

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

Tailwind v3.4 6.2k 8

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-white pt-4 md:pt-0">
                    <li><a class="md:p-4 py-3 px-0 block text-green-500 hover:text-green-500" href="#">Home</a></li>
                    <li><a class="md:p-4 py-3 px-0 block hover:text-green-500" href="#">About Me</a></li>
                    <li><a class="md:p-4 py-3 px-0 block hover:text-green-500" href="#">Education</a></li>
                    <li><a class="md:p-4 py-3 px-0 block hover:text-green-500" href="#">Experience</a></li>
                    <li><a class="md:p-4 py-3 px-0 block hover:text-green-500 md:mb-0 mb-2" href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<div class="w-full h-full relative top-10 pb-20">
        <div class="lg:px-16 px-8 flex sm:flex-row flex-col flex-col-reverse gap-6 justify-center items-center">
            <div class="sm:text-left text-center text-white">
                <h4 class="sm:text-2xl text-3xl font-semibold w-fit bg-gray-900/40 p-3">Hello, My name is
                    <span class="text-green-500 sm:text-2xl text-xl font-serif">Samuel Abera</span>
                </h4>
                <h1 class="mt-4 sm:text-4xl text-2xl">I'm
                    <span class="typing libre-baskerville-bold text-green-500"></span>
                </h1>

<p class="mt-4 text-lg capitalize">Experienced full-stack developer
                    with 4+
                    years of expertise in Laravel, NestJS, Nuxt.js, Next.js, Android, and some Flutter experience.</p>
                <div class=" mt-6 flex sm:flex-row flex-col gap-4 sm:justify-start justify-center">
                    <button class="p-2 px-6 text-white font-semibold rounded-full outline outline-2 outline-green-500 hover:bg-green-600 transition ease-in-out delay-150">Hire Me</button>
                    <button class="p-2 px-6 text-white font-semibold rounded-full outline outline-2 outline-yellow-500 hover:bg-yellow-600 transition ease-in-out delay-150">Download CV</button>
                </div>
            </div>

<img class="md:max-w-[30%] sm:max-w-[40%] max-w-[70%] sm:rounded-sm sm:rounded-br-[5rem] sm:rounded-tl-[5rem] rounded-full sm:outline-none outline outline-[.3rem] outline-green-400/60" src="https://techakim.com/sam/tg/7268/li/imgs/profile.jpg" alt="My Pic" />

</div>
    </div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js" referrerpolicy="no-referrer"></script>
<script>
    var typed = new Typed('.typing', {
    strings: ['', 'FullStack Developer,', 'Frontend Developer,', 'Backend Developer,', 'Mobile Apps Developer.'],
    typeSpeed: 100,
    BackSpeed: 60,
    loop: true
})
</script>

Related Examples

Basic Resume template
simple and clean layout that provides a professional look.

R.P Ketan

3 years ago

28.1k
Modern resume template
modern resume template with data

Amit Pachange

3 years ago

23.3k
Hero

Aman kumar

2 years ago

7.7k
Experience Card
Experience card section you can use for portfolio or other profiles.

Khalid

2 years ago

4.4k
3D Animated Image Gallery
3D Animated Image Gallery

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

2 years ago

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

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

2 years ago

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

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

2 years ago

9.7k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3k
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.6k
Portfolio Hero Section 4

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

1 year ago

4.8k
Single Page Portfolio

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

1 year ago

3.2k
Animated Profile Card
Animated profile card with profile completion circle

Shivam Vishwakarma

1 year ago

2.2k