Single Page Portfolio

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

Hero Landing Page Resume template

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

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

Tailwind v3.4 3.2k 10

Fork Fullscreen

<div class="hidden lg:flex space-x-8">
            <a href="#about" class="text-green-400 hover:text-green-400">About</a>
            <a href="#what-i-do" class="text-gray-400 hover:text-green-400">What I Do</a>
            <a href="#testimonials" class="text-gray-400 hover:text-green-400">Testimonials</a>
            <a href="#clients" class="text-gray-400 hover:text-green-400">Clients</a>
            <a href="#fun-facts" class="text-gray-400 hover:text-green-400">Fun Facts</a>
          </div>

<div class="lg:hidden flex items-center">
            <button id="mobile-menu-button" class="text-green-400 hover:text-green-600 focus:outline-none">
            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
          </button>
          </div>
        </div>
      </div>

<div id="mobile-menu" class="absolute inset-0 bg-[#111111] bg-opacity-50 z-50 hidden">
        <div class="fixed inset-y-0 left-0 bg-[#111111] w-64 p-6 transform -translate-x-full transition-transform">
          <button id="close-menu-button" class="text-green-400 hover:text-green-600 focus:outline-none mb-4">
          <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
          <nav class="space-y-4">
            <a href="#about" class="block text-green-400 hover:text-green-400">About</a>
            <a href="#what-i-do" class="block text-gray-400 hover:text-green-400">What I Do</a>
            <a href="#testimonials" class="block text-gray-400 hover:text-green-400">Testimonials</a>
            <a href="#clients" class="block text-gray-400 hover:text-green-400">Clients</a>
            <a href="#fun-facts" class="block text-gray-400 hover:text-green-400">Fun Facts</a>
          </nav>
        </div>
      </div>
    </nav>

<div class="w-full h-full flex flex-col items-center">
      
      <section class="w-full relative flex items-center flex-col lg:flex-row" id="about">
        <img class="lg:w-1/2 " src="https://images.unsplash.com/photo-1513258496099-48168024aec0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMnx8cHJvZ3JhbW1lcnxlbnwwfDB8fHwxNzY0MDU1MTU4fDA&ixlib=rb-4.1.0&q=80&w=1080" alt="port image">
        
        <div
          class="lg:absolute lg:left-[40%] md:left-[30%] lg:w-[55%] lg:p-12 sm:p-6 p-4 flex flex-col justify-center bg-[#222222]">
          <p class="text-gray-400 text-sm mb-1">FullStack Developer</p>
          <h2 class="text-white md:text-5xl text-2xl font-bold mb-4">Samuel Abera</h2>
          <p class="text-gray-400 text-md mb-6">
            I am a dedicated and innovative FullStack Developer passionate about creating impactful
            digital experiences. With a keen eye for detail and a commitment to excellence, I specialize in designing
            and developing solutions that combine creativity with functionality.
          </p>
          
          <div>
            <button class="md:px-6 px-4 py-2 text-white font-semibold  outline outline-green-400 rounded-full hover:bg-green-500 transform trasition delay-300">Download CV</button>
          </div>
        </div>
      </section>

<section class="md:pt-20 pt-10 md:px-20 px-2" id="what-i-do">
        
        <div class="w-fit">
          <h2 class="text-2xl font-bold text-white pb-2">What I Do</h2>
          <div class="rounded-t-full border-[1px] border-gray-500 overflow-hidden">
            <hr class="border-[3px] border-green-400 w-[20%]" />
          </div>
        </div>

<div class="flex flex-col gap-2">
              <h3 class="text-xl font-semibold text-white">Web Development</h3>
              <p class="text-gray-400">
                Crafting responsive and intuitive websites tailored to your unique needs using cutting-edge
                technologies.
              </p>
            </div>
          </div>

<div class="flex sm:gap-4 gap-2">
            <span>
              <ion-icon class="sm:text-5xl text-3xl text-green-400" name="browsers-outline"></ion-icon>
            </span>

<div class="flex flex-col gap-2">
              <h3 class="text-xl font-semibold text-white">UI/UX Design</h3>
              <p class="text-gray-400">Creating visually appealing and user-centric designs that enhance user
                experiences and engagement.</p>
            </div>
          </div>

<div class="flex sm:gap-4 gap-2">
            <span>
              <ion-icon class="sm:text-5xl text-3xl text-green-400" name="archive-outline"></ion-icon>
            </span>

<div class="flex flex-col gap-2">
              <h3 class="text-xl font-semibold text-white">Custom CMS Solutions</h3>
              <p class="text-gray-400">Building reusable and efficient CMS APIs to simplify website management and
                scalability.</p>
            </div>
          </div>
          
          <div class="flex sm:gap-4 gap-2">
            <span>
              <ion-icon class="sm:text-5xl text-3xl text-green-400" name="phone-portrait-outline"></ion-icon>
            </span>
            <div class="flex flex-col gap-2">
              <h3 class="text-xl font-semibold text-white">Mobile App Dev't</h3>
              <p class="text-gray-400">Designing and developing user-friendly mobile applications for iOS and Android,
                ensuring seamless performance and user satisfaction.</p>
            </div>
          </div>
          
          <div class="flex sm:gap-4 gap-2">
            <span>
              <ion-icon class="sm:text-5xl text-3xl text-green-400" name="bag-check-outline"></ion-icon>
            </span>
            <div class="flex flex-col gap-2">
              <h3 class="text-xl font-semibold text-white">E-commerce Development</h3>
              <p class="text-gray-400">Creating robust platforms to elevate your online business presence.</p>
            </div>
          </div>
          
          <div class="flex sm:gap-4 gap-2">
            <span>
              <ion-icon class="sm:text-5xl text-3xl text-green-400" name="swap-horizontal-outline"></ion-icon>
            </span>
            <div class="flex flex-col gap-2">
              <h3 class="text-xl font-semibold text-white">API Integration</h3>
              <p class="text-gray-400">Seamlessly connecting systems to enhance functionality and performance.
              </p>
            </div>
          </div>

</div>
      </section>

<section class="sm:mt-20 mt-10 md:px-20 px-6" id="testimonial">
        
        <div class="w-fit sm:mb-20 mb-10">
          <h2 class="text-2xl font-bold text-white pb-2">Testimonials</h2>
          <div class="rounded-t-full border-[1px] border-gray-500 overflow-hidden">
            <hr class="border-[3px] border-green-400 w-[40%]" />
          </div>
        </div>

<p class="md:pl-8 text-gray-300 sm:text-xl font-semibold text-center font-serif">
              <span class="sm:text-5xl text-xl text-gray-300">❝</span>An exceptional professional! Delivered beyond our
              expectations, ensuring every detail was perfect. Highly recommended!
              <br><span class="sm:text-5xl text-xl text-gray-300">❞</span>
            </p>
            <div class="flex flex-col justify-center items-center">
              <p class="text-gray-400 sm:text-xl sm:mt-2">Emily Carter</p>
              <p class="text-gray-500">CEO of Innovate Solutions</p>
            </div>
          </div>
          
          <div class="flex flex-col justify-center-center border border-gray-400 md:p-8 p-2 rounded-xl relative">
            <img class="absolute lg:-left-6 lg:-top-10 -left-[25px] -top-4 sm lg:w-[6rem] lg:h-[6rem] sm:w-[4rem] sm:h-[4rem] w-[3rem] h-[3rem] rounded-full outline outline-offset-2 outline-green-400"
            src="https://images.unsplash.com/photo-1609010697446-11f2155278f0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHx5b3VuZyUyMG1hbnxlbnwwfDB8fHwxNzM1NDEzMTM4fDA&ixlib=rb-4.0.3&q=80&w=1080" alt="testimonials" />

<p class="md:pl-8 text-gray-300 sm:text-xl font-semibold text-center font-serif">
              <span class="sm:text-5xl text-xl text-gray-300">❝</span>
              Their ability to combine creativity and technical expertise is unmatched. The UI/UX design they delivered
              elevated our brand image significantly.
              <br><span class="sm:text-5xl text-xl text-gray-300">❞</span>
            </p>
            <div class="flex flex-col justify-center items-center">
              <p class="text-gray-400 sm:text-xl sm:mt-2">Ryan Mitchell</p>
              <p class="text-gray-500">Marketing Director at BrightWave Media</p>
            </div>
          </div>
          
          <div class="flex flex-col justify-center-center border border-gray-400 md:p-8 p-2 rounded-xl relative">
            <img class="absolute lg:-left-6 lg:-top-10 -left-[25px] -top-4 sm lg:w-[6rem] lg:h-[6rem] sm:w-[4rem] sm:h-[4rem] w-[3rem] h-[3rem] rounded-full outline outline-offset-2 outline-green-400"
            src="https://images.unsplash.com/photo-1598096969068-7f52cac10c83?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8eW91bmclMjBtYW58ZW58MHwwfHx8MTczNTQxMzEzOHww&ixlib=rb-4.0.3&q=80&w=1080" alt="testimonials" />

<p class="md:pl-8 text-gray-300 sm:text-xl font-semibold text-center font-serif">
              <span class="sm:text-5xl text-xl text-gray-300">❝</span>
              What stood out was the attention to detail and seamless communication throughout the project. The mobile
              app they developed exceeded our expectations.
              <br><span class="sm:text-5xl text-xl text-gray-300">❞</span>
            </p>
            <div class="flex flex-col justify-center items-center">
              <p class="text-gray-400 sm:text-xl sm:mt-2">James Patel</p>
              <p class="text-gray-500">Product Manager at TechSphere</p>
            </div>
          </div>
          
          <div class="flex flex-col justify-center-center border border-gray-400 md:p-8 p-2 rounded-xl relative">
            <img class="absolute lg:-left-6 lg:-top-10 -left-[25px] -top-4 sm lg:w-[6rem] lg:h-[6rem] sm:w-[4rem] sm:h-[4rem] w-[3rem] h-[3rem] rounded-full outline outline-offset-2 outline-green-400" 
            src="https://images.unsplash.com/photo-1524508762098-fd966ffb6ef9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwyfHx0ZWNoJTIwZ2lybHxlbnwwfDB8fHwxNzM1NDE5MTgxfDA&ixlib=rb-4.0.3&q=80&w=1080" alt="testimonials" />

<p class="md:pl-8 text-gray-300 sm:text-xl font-semibold text-center font-serif">
              <span class="sm:text-5xl text-xl text-gray-300">❝</span>
              Reliable, efficient, and innovative – their work has transformed our online platform. Our sales have seen
              a massive boost since launching the new website!
              <br><span class="sm:text-5xl text-xl text-gray-300">❞</span>
            </p>
            <div class="flex flex-col justify-center items-center">
              <p class="text-gray-400 sm:text-xl sm:mt-2">Sarah Nguyen</p>
              <p class="text-gray-500">Founder of Craft&Co</p>
            </div>
          </div>

</div>
      </section>

<section class="w-full sm:pt-20 pt-10 md:px-20 px-6" id="clients">
        
        <div class="w-fit sm:mb-20 mb-10">
          <h2 class="text-2xl font-bold text-white pb-2">Clients</h2>
          <div class="rounded-t-full border-[1px] border-gray-500 overflow-hidden">
            <hr class="border-[3px] border-green-400 w-[60%]" />
          </div>
        </div>

<section class="w-full sm:py-20 py-10 md:px-20 px-6" id="fun-facts">
        
        <div class="w-fit sm:mb-20 mb-10">
          <h2 class="text-2xl font-bold text-white pb-2">Fun Facts</h2>
          <div class="rounded-t-full border-[1px] border-gray-500 overflow-hidden">
            <hr class="border-[3px] border-green-400 w-[80%]" />
          </div>
        </div>

<div class="w-full grid gap-2 lg:grid-cols-4 sm:grid-cols-2 grid-cols-1">
          
          <div
            class="flex flex-col gap-4 items-center justify-center border border-2 border-gray-400 p-6 rounded-lg text-gray-400">
            <span class="text-4xl">😁</span>
            <h3 class="sm:text-xl text-md font-bold text-gray-200">Happy Clients</h3>
            <span class="sm:text-5xl text-3xl font-semibold">400<sup>+</sup></span>
          </div>
          
          <div
            class="flex flex-col gap-4 items-center justify-center border border-2 border-gray-400 p-6 rounded-lg text-gray-400">
            <span class="text-4xl">😬</span>
            <h3 class="sm:text-xl text-md font-bold text-gray-200">Working Hours</h3>
            <span class="sm:text-5xl text-3xl font-semibold">7,845<sup>+</sup></span>
          </div>
          
          <div
            class="flex flex-col gap-4 items-center justify-center border border-2 border-gray-400 p-6 rounded-lg text-gray-400">
            <span class="text-4xl">👋</span>
            <h3 class="sm:text-xl text-md font-bold text-gray-200">Certification</h3>
            <span class="sm:text-5xl text-3xl font-semibold">77<sup>+</sup></span>
          </div>
          
          <div
            class="flex flex-col gap-4 items-center justify-center border border-2 border-gray-400 p-6 rounded-lg text-gray-400">
            <span class="text-4xl">😲</span>
            <h3 class="sm:text-xl text-md  font-bold text-gray-200">Portfolios</h3>
            <span class="sm:text-5xl text-3xl font-semibold">65<sup>+</sup></span>
          </div>
        </div>
      </section>

<footer class="w-full mt-10 border-t-2 pt-4 pb-8 border-gray-500">
        <div class="flex sm:flex-row flex-col sm:justify-between items-center md:px-20 px-4">
          <div class="flex gap-4 items-center sm:text-xl text-sm text-gray-500">
            <a href="" class="hover:text-green-400">facebook</a>
            <a href="" class="hover:text-green-400">instagram</a>
            <a href="" class="hover:text-green-400">Linkedin</a>
          </div>
          <div class="text-lg text-gray-400">&copy;2024 Samuel Abera</div>
        </div>
      </footer>

</div>

</div>
</div>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.remove('hidden');
      mobileMenu.querySelector('div').classList.remove('-translate-x-full');
    });

closeMenuButton.addEventListener('click', () => {
      mobileMenu.querySelector('div').classList.add('-translate-x-full');
      setTimeout(() => mobileMenu.classList.add('hidden'), 300);
    });

mobileMenu.addEventListener('click', (e) => {
      if (e.target === mobileMenu) {
        closeMenuButton.click();
      }
    });
</script>

Related Examples

A Fullscreen Hero Section

Brandon D

4 years ago

23.3k
Hero

Aman kumar

2 years ago

7.7k
Hero Section
Home hero section search bar

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

2 years ago

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

Amit Pachange

2 years ago

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

Sahil Sasapara

2 years ago

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

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

2 years ago

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

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

2 years ago

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

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

2 years ago

9.7k
Hero Beer

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

2 years ago

5.5k
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
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Coastal UI

1 year ago

2.7k