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

Portfolio Hero Section 5

This tailwind example is contributed by $@(\/)(\/)Y, on 31-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Front page,CV template

Hero Navbar Landing Page Resume template

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

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

908

Fork Fullscreen

<div class="h-screen w-full overflow-y-scroll bg-black dark:bg-gray-200">
    <nav
        class="w-full sm:w-10/12 lg:w-8/12 mx-auto relative z-10 flex items-center justify-between dark:bg-white bg-black/80 md:mt-10 py-4 text-white dark:text-black border-b border-green-600/20 dark:border-green-600/20 shadow-lg shadow-green-400/20">
        
        <div class="flex-shrink-0 px-4">
            <a href="#" class="text-xl font-bold text-gray-700">
                <span class="px-1 bg-green-400 rounded-full animate-[ping_1.9s_linear_infinite]">S</span>
                <span class="px-1 bg-green-400 rounded-full animate-[ping_2s_linear_infinite]">A</span>
                <span class="px-1 bg-green-400 rounded-full animate-[ping_2.1s_linear_infinite]">M</span>
                <span class="px-1 bg-green-400 rounded-full animate-[ping_2.2s_linear_infinite]">U</span>
                <span class="px-1 bg-green-400 rounded-full animate-[ping_2.3s_linear_infinite]">E</span>
                <span class="px-1 bg-green-400 rounded-full animate-[ping_2.4s_linear_infinite]">L</span>
            </a>
        </div>
        <ul
            class="hidden text-lg md:flex w-1/2 items-center justify-between gap-4 py-2 cursor-pointer md:px-10 border-r-2 border-l-2 border-gray-800 dark:border-gray-300">
            <li class="rounded-b border-b-[3px] border-green-600">Home</li>
            <li class="rounded-b hover:border-b-[3px] hover:border-green-600">Service</li>
            <li class="rounded-b hover:border-b-[3px] hover:border-green-600">About</li>
            <li class="rounded-b hover:border-b-[3px] hover:border-green-600">Pricing</li>
        </ul>

<button class="block md:hidden text-3xl pr-4" id="nav__toggle-open">
                <i class="uil uil-bars"></i>
            </button>
        <button class="hidden md:hidden text-3xl pr-4" id="nav__toggle-close">
                <i class="uil uil-multiply"></i>
            </button>

<ul id="mobile-nav"
            class="hidden md:hidden sm:w-full w-[98%] mx-auto absolute top-[4rem] left-0 right-0 w-full flex-col items-center gap-4 bg-black dark:bg-white rounded-b cursor-pointer shadow shadow-green-600">
            <li class="p-2 rounded shadow shadow-green-600">Home</li>
            <li class="p-2 rounded hover:shadow hover:shadow-green-600">Service</li>
            <li class="p-2 rounded hover:shadow hover:shadow-green-600">About</li>
            <li class="p-2 rounded hover:shadow hover:shadow-green-600">Pricing</li>
            <li class="p-2 rounded hover:shadow hover:shadow-green-600">
                <button class="flex justify-start">
            <a href="mailto:samuelabera87@gmail.com"
                class="bg-green-600 text-white px-6 py-2 rounded-md relative overflow-hidden group">
                <span
            class="absolute top-0 left-0 w-full h-full bg-white opacity-20 transform -skew-x-12 -translate-x-full group-hover:translate-x-0 transition duration-500"
          ></span>
                <span class="relative z-10 font-bold text-gray-800">Hire Me</span>
            </a>
        </button>
            </li>
        </ul>

</nav>

<div
        class="w-[90%] md:w-[88%] mx-auto flex gap-6 items-center text-white dark:text-black justify-between pb-20 mt-12 md:mt-24">
        
        <div class="w-full flex flex-col gap-6 py-10 md:py-0">
            <h1 class="xl:text-7xl lg:text-6xl md:text-5xl text-4xl font-semibold">Hi there, I am</h1>
            <h1 class="xl:text-7xl lg:text-6xl md:text-5xl text-4xl font-semibold text-green-600">Samuel Abera!</h1>

<p class="sm:text-lg text-md">Experienced full-stack developer with 5+ years of expertise in
                Laravel, NestJS and
                Nuxt.js experience.</p>
            <div class="flex gap-2">
                
                <a href="mailto:samuelabera87@gmail.com"
                    class="bg-green-600 text-white px-6 py-2 rounded-md relative overflow-hidden group">
                    <span
            class="absolute top-0 left-0 w-full h-full bg-white opacity-20 transform -skew-x-12 -translate-x-full group-hover:translate-x-0 transition duration-500"
          ></span>
                    <span class="relative z-10 font-bold text-gray-800">Hire Me</span>
                </a>
                
                <button class="relative text-gray-200 dark:text-black px-6 py-2 rounded-md overflow-hidden group">
                    <span class="absolute inset-0 bg-green-600 transform -translate-x-full group-hover:translate-x-0 transition duration-300"
          ></span>
          <span class="relative z-10 font-bold group-hover:text-gray-800">Latest Projects</span>
                </button>
            </div>

<div class="flex items-center sm:gap-10 gap-6">
                <div class="flex flex-col gap-1">
                    <h4 class="text-xl sm:text-3xl font-bold">5 <sup class="font-bold -ml-1">+</sup>
                    </h4>
                    <p class="text-sm sm:text-base text-gray-300 dark:text-gray-800">Years Expireance</p>
                </div>
                <div class="flex flex-col gap-1">
                    <h4 class="text-xl sm:text-3xl font-bold">77+</h4>
                    <p class="text-sm sm:text-base text-gray-300 dark:text-gray-800">Projects Completed</p>
                </div>
                <div class="flex flex-col gap-1">
                    <h4 class="text-xl sm:text-3xl font-bold">98%</h4>
                    <p class="text-sm sm:text-base text-gray-300 dark:text-gray-800">Faster Project Delivery</p>
                </div>
            </div>
        </div>

<div class="xl:w-1/2 w-full flex items-center justify-center hidden lg:block">
            <div class="relative bg-black border border-none dark:border-gray-300 rounded-lg p-2 dark:bg-white">
                <img class="h-[80%] object-center object-cover" src="https://techakim.com/sam/tg/7268/li/imgs/2.png" alt="Portfolio Image" />
                
                <div
                    class="absolute bg-green-600 text-gray-800 shadow-md shadow-green-600 animate-bounce px-2 py-1 rounded top-10 -left-10 border border-gray-400 z-10">
                    <div class="flex gap-1 items-center">
                        <svg class="w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="mobile">
                            <path fill="#88a1ba"
                                d="M37 32H5c-1.1 0-2-.9-2-2V10c0-1.1.9-2 2-2h32c1.1 0 2 .9 2 2v20c0 1.1-.9 2-2 2z">
                            </path>
                            <path fill="#f7f7fb" d="M37 32H5c-1.1 0-2-.9-2-2v-4h36v4c0 1.1-.9 2-2 2z"></path>
                            <path fill="#444a54"
                                d="M24 41h-6a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm-5-2h4v-6h-4v6z">
                            </path>
                            <path fill="#f7f7fb" d="M18 32h6v8h-6z"></path>
                            <circle cx="21" cy="29" r="1" fill="#444a54"></circle>
                            <path fill="#444a54"
                                d="M37 7H5c-1.654 0-3 1.346-3 3v20c0 1.654 1.346 3 3 3h12v6h-5.5a1 1 0 0 0 0 2h19a1 1 0 1 0 0-2H25v-6h12c1.654 0 3-1.346 3-3V10c0-1.654-1.346-3-3-3zM4 10c0-.551.449-1 1-1h32c.552 0 1 .449 1 1v15H4V10zm19 29h-4v-6h4v6zm15-9c0 .551-.448 1-1 1H5c-.551 0-1-.449-1-1v-3h34v3z">
                            </path>
                            <path fill="#f7f7fb"
                                d="M43 40h-8a2 2 0 0 1-2-2V20a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2z"></path>
                            <path fill="#88a1ba" d="M33 22h12v14H33z"></path>
                            <path fill="#444a54"
                                d="M43 17h-8c-1.654 0-3 1.346-3 3v18c0 1.654 1.346 3 3 3h8c1.654 0 3-1.346 3-3V20c0-1.654-1.346-3-3-3zm-9 6h10v12H34V23zm0-3c0-.551.448-1 1-1h8c.552 0 1 .449 1 1v1H34v-1zm10 18c0 .551-.448 1-1 1h-8c-.552 0-1-.449-1-1v-1h10v1z">
                            </path>
                        </svg>
                        <h3 class="font-bold">Full-Stack Web Dev't</h3>
                    </div>
                </div>
                
                <div
                    class="absolute bg-green-600 text-gray-800 shadow-md shadow-green-600 animate-bounce px-2 py-1 rounded top-1/2 -right-14 border border-gray-400 z-10">
                    <div class="flex gap-1 items-center">
                        <svg class="w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="ai-mind">
                            <path fill="#57a4ff"
                                d="M80.25,63.75v184l1.86,2.06a34.676,34.676,0,0,0-1.86,4,35.29,35.29,0,0,0-2.05,17.94,33.74,33.74,0,0,0,.71,3.63,35.291,35.291,0,0,0-35.25,53.87,35.277,35.277,0,0,0,0,68.89,35.334,35.334,0,0,0,35.25,53.87,35.346,35.346,0,0,0,65.22,25.72,35.338,35.338,0,0,0,65.21-25.72,35.415,35.415,0,0,0,37.53-19.99c0-.01.01-.01.01-.02.05-.09.08-.2.13-.29l.04.04h201.2v-368Zm336,336h-168l-1.71-2.11a35.271,35.271,0,0,0-1.95-68.39,35.3,35.3,0,0,0-35.25-53.87,35.768,35.768,0,0,0,1.08-8.71,35.344,35.344,0,0,0-66.29-17.02,35.351,35.351,0,0,0-30.97-18.27c-.3,0-.61,0-.91.01V95.75h304Z">
                            </path>
                            <path fill="#004fac"
                                d="M105.141 326.806c-6.9-.425-13.525 3.44-20.153 11.755a84.01 84.01 0 00-9.41-5.716 8 8 0 00-7.168 14.3 78.124 78.124 0 0114.569 10.088C88.919 362.487 96 370.7 96 380a8 8 0 0016 0c0-12.728-6.914-23.308-14.719-31.206 4.036-5.154 6.362-5.908 6.807-6a3.475 3.475 0 01.844.955 1.564 1.564 0 01-.087-.166l14.31-7.156C118.693 335.5 114.376 327.381 105.141 326.806zM187.5 350.192a14.762 14.762 0 015.86-1.186c2.177.076 4.961.762 7.324 5.276C187.933 365.643 184 381.713 184 391a7.981 7.981 0 007.955 7.977H192a8.02 8.02 0 008-7.933c.012-1.057.583-25.943 25.94-32.283a8 8 0 00-3.88-15.522 55.321 55.321 0 00-7.776 2.557c-8.736-15.305-24.86-14.452-33.862-9.951a8 8 0 007.081 14.347z">
                            </path>
                            <path fill="#004fac"
                                d="M496,168a8,8,0,0,0,8-8V112a8,8,0,0,0-8-8H456V64a8,8,0,0,0-8-8H408V16a8,8,0,0,0-8-8H352a8,8,0,0,0-8,8V56H296V16a8,8,0,0,0-8-8H240a8,8,0,0,0-8,8V56H184V16a8,8,0,0,0-8-8H128a8,8,0,0,0-8,8V56H80a8,8,0,0,0-8,8v40H32a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8H72v48H32a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8H42.7a43.316,43.316,0,0,0-10.15,44.98,43.284,43.284,0,0,0,0,78.04,43.342,43.342,0,0,0,37.22,57.61v.44A43.3,43.3,0,0,0,144,491.37a43.3,43.3,0,0,0,74.23-30.3v-.44A42.941,42.941,0,0,0,232,457.14V480a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V440h48v40a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V440h40a8,8,0,0,0,8-8V392h40a8,8,0,0,0,8-8V336a8,8,0,0,0-8-8H456V280h40a8,8,0,0,0,8-8V224a8,8,0,0,0-8-8H456V168Zm-40-48h32v32H456ZM360,24h32V56H360ZM248,24h32V56H248ZM136,24h32V56H136ZM40,152V120H72v32Zm0,112V232H72v21.25A42.968,42.968,0,0,0,69.88,264Zm95.95,211.95a27.294,27.294,0,0,1-49.73-19.81,39.024,39.024,0,0,0,20-23.68,8,8,0,1,0-15.34-4.56,23.01,23.01,0,0,1-21.93,16.34c-.25,0-.5.02-.75.04a27.313,27.313,0,0,1-17.83-41.51,7.989,7.989,0,0,0-5.01-12.12,27.305,27.305,0,0,1,0-53.3,7.989,7.989,0,0,0,5.01-12.12A27.313,27.313,0,0,1,68.2,283.72c.25.02.5.04.75.04A23.01,23.01,0,0,1,90.88,300.1a8.018,8.018,0,0,0,7.67,5.72,8.218,8.218,0,0,0,2.28-.33,8.005,8.005,0,0,0,5.39-9.95,39.024,39.024,0,0,0-20-23.68,27.286,27.286,0,0,1,23.97-32.07A8.3,8.3,0,0,0,112,240a8,8,0,0,0,2.25-.33,27.329,27.329,0,0,1,21.7,12.38ZM120,224.2V104H408V392H269.64a43.186,43.186,0,0,0-14.19-67.02,43.342,43.342,0,0,0-37.22-57.61v-.44A43.3,43.3,0,0,0,144,236.63,43.374,43.374,0,0,0,120,224.2ZM237.63,402.77a27.315,27.315,0,0,1-17.77,41.5c-.18-.01-.35-.03-.52-.03A23.013,23.013,0,0,1,197.4,427.9a8,8,0,0,0-15.34,4.56,39.02,39.02,0,0,0,19.7,23.53,27.67,27.67,0,0,1,.47,5.08,27.3,27.3,0,0,1-50.28,14.74V252.19a27.3,27.3,0,0,1,50.28,14.74,27.67,27.67,0,0,1-.47,5.08,39.02,39.02,0,0,0-19.7,23.53,8.005,8.005,0,0,0,5.39,9.95,8.218,8.218,0,0,0,2.28.33,8.018,8.018,0,0,0,7.67-5.72,23.013,23.013,0,0,1,21.94-16.34c.17,0,.34-.02.52-.03a27.315,27.315,0,0,1,17.77,41.5,7.989,7.989,0,0,0,5.01,12.12,27.305,27.305,0,0,1,0,53.3,7.989,7.989,0,0,0-5.01,12.12ZM280,472H248V445.02a42.309,42.309,0,0,0,3.58-5.02H280Zm112,0H360V440h32Zm48-48H257.43a43.443,43.443,0,0,0-.56-16H416a8,8,0,0,0,8-8V96a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8V224.6a43.09,43.09,0,0,0-16,7.06V72H440Zm48-80v32H456V344Zm0-112v32H456V232Z">
                            </path>
                        </svg>
                        <h3 class="font-bold">AI & Machine Learning</h3>
                    </div>
                </div>

<div
                    class="absolute bg-green-600 text-gray-800 shadow-md shadow-green-600 animate-bounce px-2 py-1 rounded bottom-20 -left-14 border border-gray-400 z-10">
                    <div class="flex gap-1 items-center">
                        <svg class="w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="setting-mobile">
                            <g>
                                <path fill="#9fdbf3" d="M11 7h26v34H11z"></path>
                                <path fill="#b2e5fb" d="M14 7v9a23 23 0 0 0 23 23c.1 0 0 1.2 0-32Z"></path>
                                <path fill="#374f68" d="M37 3v4H11V3a2 2 0 0 1 2-2h22a2 2 0 0 1 2 2Z"></path>
                                <path fill="#425b72" d="M37 3v2H18a4 4 0 0 1-4-4h21a2 2 0 0 1 2 2Z"></path>
                                <path fill="#374f68" d="M37 41v4a2 2 0 0 1-2 2H13a2 2 0 0 1-2-2v-4Z"></path>
                                <path fill="#425b72" d="M37 41v4H18a4 4 0 0 1-4-4Z"></path>
                                <path fill="#edebf2"
                                    d="M27 5h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2zm-2 40h-2a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM17 5a1 1 0 0 1-.38-1.92A1 1 0 1 1 17 5z">
                                </path>
                                <path fill="#db5669"
                                    d="M33 25.5v-3l-2.31-.58a7.59 7.59 0 0 0-.49-1.17l1.22-2.05-2.12-2.12-2.05 1.22a7.59 7.59 0 0 0-1.17-.49L25.5 15h-3l-.58 2.31a7.59 7.59 0 0 0-1.17.49l-2.05-1.22-2.12 2.12 1.22 2.05a7.59 7.59 0 0 0-.49 1.17L15 22.5v3l2.31.58a7.59 7.59 0 0 0 .49 1.17l-1.22 2.05 2.12 2.12 2.05-1.22a7.59 7.59 0 0 0 1.17.49L22.5 33h3l.58-2.31a7.59 7.59 0 0 0 1.17-.49l2.05 1.22 2.12-2.12-1.22-2.05a7.59 7.59 0 0 0 .49-1.17ZM24 27a3 3 0 1 1 3-3 3 3 0 0 1-3 3Z">
                                </path>
                                <path fill="#f26674"
                                    d="M33 25.5v-3l-2.31-.58a7.59 7.59 0 0 0-.49-1.17l1.22-2.05-2.12-2.12-2.05 1.22a7.59 7.59 0 0 0-1.17-.49L25.5 15h-3l-.58 2.31c-1.64.52-.65.8-2.43-.26A9 9 0 0 0 26 30.94c.11-.47-.15 0 1.23-.74l2.05 1.22 2.12-2.12-1.2-2.05a7.59 7.59 0 0 0 .49-1.17ZM24 27a3 3 0 1 1 3-3 3 3 0 0 1-3 3Z">
                                </path>
                                <path
                                    d="M35 0H13a3 3 0 0 0-3 3v42a3 3 0 0 0 3 3h22a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3ZM12 8h24v32H12Zm0-5a1 1 0 0 1 1-1h22a1 1 0 0 1 1 1v3H12Zm24 42a1 1 0 0 1-1 1H13a1 1 0 0 1-1-1v-3h24Z">
                                </path>
                                <path
                                    d="M27 3h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2zm-4 42h2a1 1 0 0 0 0-2h-2a1 1 0 0 0 0 2zM17.92 3.62A1 1 0 1 0 17 5a1 1 0 0 0 .92-1.38zM24 20a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm0 6a2 2 0 1 1 2-2 2 2 0 0 1-2 2z">
                                </path>
                                <path
                                    d="M33.24 21.53c-2.08-.52-1.74-.35-1.91-.73 1-1.58 1.47-2.15.8-2.81-2.16-2.16-2.49-2.78-3.34-2.27-1.84 1.1-1.49 1-1.87.83-.45-1.78-.48-2.55-1.42-2.55-3.06 0-3.73-.2-4 .76-.52 2.08-.35 1.74-.73 1.91-1.58-1-2.15-1.47-2.81-.8-2.16 2.16-2.78 2.5-2.27 3.34 1.11 1.85 1 1.48.83 1.87-1.78.45-2.55.48-2.55 1.42 0 3.06-.2 3.73.76 4 2.08.52 1.74.35 1.91.73-1 1.58-1.47 2.15-.8 2.81 2.16 2.16 2.5 2.78 3.34 2.27 1.84-1.1 1.49-1 1.87-.83.45 1.78.48 2.55 1.42 2.55 3.05 0 3.73.2 4-.76.52-2.08.35-1.74.73-1.91 1.58 1 2.15 1.47 2.81.8 2.16-2.16 2.78-2.5 2.27-3.34-1.1-1.84-1-1.49-.83-1.87 1.78-.45 2.55-.48 2.55-1.42 0-3.06.2-3.76-.76-4ZM32 24.72c-1.67.42-2.07.41-2.27 1.06-.59 1.9-1 .93.44 3.37l-1 1c-1.49-.9-1.76-1.18-2.36-.86-1.76.92-1.39 0-2.07 2.69h-1.46c-.42-1.67-.41-2.07-1.06-2.27-1.9-.59-.92-1-3.37.44l-1-1c.9-1.49 1.18-1.76.86-2.36-.92-1.76 0-1.39-2.69-2.07v-1.44c1.64-.41 2.06-.4 2.27-1.06.59-1.9 1-.92-.44-3.37l1-1c1.48.89 1.76 1.18 2.36.86 1.76-.93 1.39 0 2.07-2.69h1.44c.42 1.67.41 2.07 1.06 2.27 1.9.59.92 1 3.37-.44l1 1c-.87 1.45-1.18 1.74-.86 2.36.92 1.76 0 1.39 2.69 2.07Z">
                                </path>
                            </g>
                        </svg>
                        <h3 class="font-bold">Mobile App Dev't</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

const nav = document.getElementById('mobile-nav');
        const openNavBtn = document.getElementById('nav__toggle-open');
        const closeNavBtn = document.getElementById('nav__toggle-close');

openNavBtn.addEventListener('click', () => {
            nav.classList.remove('hidden');
            openNavBtn.classList.add('hidden');
            closeNavBtn.classList.remove('hidden');
        });

closeNavBtn.addEventListener('click', () => {
            nav.classList.add('hidden');
            openNavBtn.classList.remove('hidden');
            closeNavBtn.classList.add('hidden');
        });
</script>

Related Examples

A Fullscreen Hero Section

Author:
Brandon D

2 years ago

19.1k
Hero

Author:
Aman kumar

1 year ago

6.1k
Hero w/ navbar
the modern and clean hero section

Author:
Carla Hoffman

1 year ago

4.1k
Hero Section
Home hero section search bar

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

1 year ago

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

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

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

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

1 year ago

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

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

1 year ago

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

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

1 year ago

6.8k
Hero Beer

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

1 year ago

3.9k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

11 months ago

2.2k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

11 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components