Back to Discover
Tailwind CSS Portfolio Landing Page

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<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>
<body class="bg-gray-50 text-gray-800" x-data="{ mobileMenuOpen: false, activeSection: 'home' }">

  <!-- Navigation -->
  <nav class="fixed w-full bg-white shadow-sm z-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <div class="text-xl font-bold text-gray-900">Your Name</div>

        <!-- Desktop Menu -->
        <div class="hidden md:flex space-x-8">
          <a href="#home" class="text-gray-700 hover:text-gray-900 transition">Home</a>
          <a href="#about" class="text-gray-700 hover:text-gray-900 transition">About</a>
          <a href="#work" class="text-gray-700 hover:text-gray-900 transition">Work</a>
          <a href="#contact" class="text-gray-700 hover:text-gray-900 transition">Contact</a>
        </div>

        <!-- Mobile Menu Button -->
        <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden">
          <ion-icon :name="mobileMenuOpen ? 'close' : 'menu'" class="text-2xl"></ion-icon>
        </button>
      </div>

      <!-- Mobile Menu -->
      <div x-show="mobileMenuOpen" x-transition class="md:hidden pb-4">
        <a href="#home" @click="mobileMenuOpen = false" class="block py-2 text-gray-700 hover:text-gray-900">Home</a>
        <a href="#about" @click="mobileMenuOpen = false" class="block py-2 text-gray-700 hover:text-gray-900">About</a>
        <a href="#work" @click="mobileMenuOpen = false" class="block py-2 text-gray-700 hover:text-gray-900">Work</a>
        <a href="#contact" @click="mobileMenuOpen = false" class="block py-2 text-gray-700 hover:text-gray-900">Contact</a>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <section id="home" class="pt-32 pb-20 px-4 min-h-screen flex items-center">
    <div class="max-w-6xl mx-auto">
      <div class="max-w-3xl">
        <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
          Hi, I'm a Creative Developer
        </h1>
        <p class="text-xl text-gray-600 mb-8">
          I design and build beautiful digital experiences with a focus on simplicity and user experience.
        </p>
        <div class="flex flex-wrap gap-4">
          <a href="#work" class="bg-gray-900 text-white px-8 py-3 rounded-lg hover:bg-gray-800 transition">
            View My Work
          </a>
          <a href="#contact" class="border-2 border-gray-900 text-gray-900 px-8 py-3 rounded-lg hover:bg-gray-900 hover:text-white transition">
            Get In Touch
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section id="about" class="py-20 px-4 bg-white">
    <div class="max-w-6xl mx-auto">
      <h2 class="text-4xl font-bold text-gray-900 mb-12">About Me</h2>
      <div class="grid md:grid-cols-2 gap-12 items-center">
        <div>
          <p class="text-gray-600 mb-4">
            I'm a passionate developer with expertise in creating seamless web experiences. With a keen eye for design and a strong technical background, I bring ideas to life through clean code and intuitive interfaces.
          </p>
          <p class="text-gray-600 mb-6">
            I specialize in modern web technologies and love collaborating with teams to build products that make a difference.
          </p>
          <div class="flex space-x-4">
            <div class="text-center">
              <div class="text-3xl font-bold text-gray-900">5+</div>
              <div class="text-sm text-gray-600">Years Experience</div>
            </div>
            <div class="text-center">
              <div class="text-3xl font-bold text-gray-900">50+</div>
              <div class="text-sm text-gray-600">Projects Completed</div>
            </div>
            <div class="text-center">
              <div class="text-3xl font-bold text-gray-900">30+</div>
              <div class="text-sm text-gray-600">Happy Clients</div>
            </div>
          </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div class="bg-gray-50 p-6 rounded-lg">
            <ion-icon name="code-slash" class="text-3xl text-gray-900 mb-2"></ion-icon>
            <h3 class="font-semibold text-gray-900 mb-2">Development</h3>
            <p class="text-sm text-gray-600">Building responsive and performant applications</p>
          </div>
          <div class="bg-gray-50 p-6 rounded-lg">
            <ion-icon name="color-palette" class="text-3xl text-gray-900 mb-2"></ion-icon>
            <h3 class="font-semibold text-gray-900 mb-2">Design</h3>
            <p class="text-sm text-gray-600">Creating beautiful user interfaces</p>
          </div>
          <div class="bg-gray-50 p-6 rounded-lg">
            <ion-icon name="phone-portrait" class="text-3xl text-gray-900 mb-2"></ion-icon>
            <h3 class="font-semibold text-gray-900 mb-2">Mobile</h3>
            <p class="text-sm text-gray-600">Mobile-first responsive designs</p>
          </div>
          <div class="bg-gray-50 p-6 rounded-lg">
            <ion-icon name="rocket" class="text-3xl text-gray-900 mb-2"></ion-icon>
            <h3 class="font-semibold text-gray-900 mb-2">Performance</h3>
            <p class="text-sm text-gray-600">Optimized for speed and efficiency</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Work Section -->
  <section id="work" class="py-20 px-4">
    <div class="max-w-6xl mx-auto">
      <h2 class="text-4xl font-bold text-gray-900 mb-12">Featured Work</h2>
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition">
          <div class="h-48 bg-gradient-to-br from-blue-400 to-blue-600"></div>
          <div class="p-6">
            <h3 class="text-xl font-semibold text-gray-900 mb-2">Project One</h3>
            <p class="text-gray-600 mb-4">A modern web application with cutting-edge features</p>
            <a href="#" class="text-gray-900 font-medium inline-flex items-center">
              View Project
              <ion-icon name="arrow-forward" class="ml-2"></ion-icon>
            </a>
          </div>
        </div>
        <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition">
          <div class="h-48 bg-gradient-to-br from-purple-400 to-purple-600"></div>
          <div class="p-6">
            <h3 class="text-xl font-semibold text-gray-900 mb-2">Project Two</h3>
            <p class="text-gray-600 mb-4">E-commerce platform with seamless checkout</p>
            <a href="#" class="text-gray-900 font-medium inline-flex items-center">
              View Project
              <ion-icon name="arrow-forward" class="ml-2"></ion-icon>
            </a>
          </div>
        </div>
        <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition">
          <div class="h-48 bg-gradient-to-br from-green-400 to-green-600"></div>
          <div class="p-6">
            <h3 class="text-xl font-semibold text-gray-900 mb-2">Project Three</h3>
            <p class="text-gray-600 mb-4">Mobile app with intuitive user experience</p>
            <a href="#" class="text-gray-900 font-medium inline-flex items-center">
              View Project
              <ion-icon name="arrow-forward" class="ml-2"></ion-icon>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact" class="py-20 px-4 bg-white">
    <div class="max-w-4xl mx-auto text-center">
      <h2 class="text-4xl font-bold text-gray-900 mb-6">Let's Work Together</h2>
      <p class="text-xl text-gray-600 mb-12">
        Have a project in mind? I'd love to hear about it. Send me a message and let's create something amazing.
      </p>
      <div class="flex flex-wrap justify-center gap-6 mb-12">
        <a href="mailto:hello@example.com" class="flex items-center text-gray-700 hover:text-gray-900 transition">
          <ion-icon name="mail" class="text-2xl mr-2"></ion-icon>
          hello@example.com
        </a>
        <a href="tel:+1234567890" class="flex items-center text-gray-700 hover:text-gray-900 transition">
          <ion-icon name="call" class="text-2xl mr-2"></ion-icon>
          +1 (234) 567-890
        </a>
      </div>
      <div class="flex justify-center space-x-6">
        <a href="#" class="text-gray-700 hover:text-gray-900 transition">
          <ion-icon name="logo-github" class="text-3xl"></ion-icon>
        </a>
        <a href="#" class="text-gray-700 hover:text-gray-900 transition">
          <ion-icon name="logo-linkedin" class="text-3xl"></ion-icon>
        </a>
        <a href="#" class="text-gray-700 hover:text-gray-900 transition">
          <ion-icon name="logo-twitter" class="text-3xl"></ion-icon>
        </a>
        <a href="#" class="text-gray-700 hover:text-gray-900 transition">
          <ion-icon name="logo-dribbble" class="text-3xl"></ion-icon>
        </a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-gray-900 text-white py-8 px-4">
    <div class="max-w-6xl mx-auto text-center">
      <p>&copy; 2026 Your Name. All rights reserved.</p>
    </div>
  </footer>
Comments (0)

No comments yet. Be the first!