Home
Samuel Abera
Portfolio Hero Section 2

Portfolio Hero Section 2

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

This tailwind example is contributed by Samuel Abera, on 05-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information,Transitions,CV template

Hero Profile Animation Resume template

Author Samuel Abera

2.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-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.

Author:
R.P Ketan

1 year ago

23.3k
Modern resume template
modern resume template with data

Author:
Amit Pachange

1 year ago

17.4k
Hero

Author:
Aman kumar

10 months ago

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

Author:
Khalid

9 months ago

1.9k
3D Animated Image Gallery
3D Animated Image Gallery

Author:
Samuel Abera

8 months ago

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

Author:
Samuel Abera

6 months ago

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

Author:
Samuel Abera

6 months ago

4.3k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

5 months ago

894
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

3 months ago

1.1k
Portfolio Hero Section 4

Author:
Samuel Abera

4 weeks ago

775
User card with Social Icons

Author:
Anonymous

2 months ago

702
Designing a Responsive Form Layouts with Tailwind CSS
Enhance your web application by building a sleek and responsive Form Layouts using Tailwind CSS. This comprehensive guide walks you through creating an interactive Form Layouts section featuring.

Author:
zobaidul kaziex

3 months ago

718

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components