xFlip/aps1.html at main · Timeness/xFlip · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Soumo | Developer Portfolio</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/dist/tailwind.min.css" rel="stylesheet">
  <script>
    // Simple dark mode toggle
    function toggleDark() {
      document.documentElement.classList.toggle('dark');
    }
  </script>
</head>
<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-700 dark:from-gray-100 dark:via-gray-200 dark:to-gray-300 text-white dark:text-gray-900 min-h-screen transition-colors duration-300">
  <!-- Header -->
  <header class="flex justify-between items-center px-8 py-6">
    <span class="text-2xl font-bold tracking-wide">Soumo.dev</span>
    <button onclick="toggleDark()" class="rounded-full px-4 py-2 bg-white/10 hover:bg-white/20 dark:bg-gray-900/10 dark:hover:bg-gray-900/30 transition">Toggle Dark</button>
  </header>

  <!-- Hero Section -->
  <section class="flex flex-col items-center justify-center text-center mt-12">
    <h1 class="text-4xl md:text-6xl font-extrabold mb-4 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 text-transparent bg-clip-text">Hi, I'm Soumo</h1>
    <h2 class="text-xl md:text-2xl font-medium mb-6">Developer • Problem Solver • Tech Enthusiast</h2>
    <p class="max-w-xl text-lg md:text-xl text-gray-300 dark:text-gray-700 mb-8">
      I’m a passionate developer who loves building cool things with code. Whether it’s web apps, tools, or just experimenting with new tech, I’m always up for a challenge. I believe in writing clean, efficient code and turning ideas into reality. When I’m not coding, you’ll find me exploring new frameworks, contributing to open source, or leveling up my skills.<br><br>
      Let’s connect and create something awesome!
    </p>
    <a href="mailto:soumo@email.com" class="px-6 py-3 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold shadow-lg hover:scale-105 transition">Contact Me</a>
  </section>

  <!-- Skills Section -->
  <section class="mt-16 px-8">
    <h3 class="text-2xl font-bold mb-4">Skills</h3>
    <div class="flex flex-wrap gap-4">
      <span class="px-4 py-2 bg-white/10 rounded-full">JavaScript</span>
      <span class="px-4 py-2 bg-white/10 rounded-full">React</span>
      <span class="px-4 py-2 bg-white/10 rounded-full">Next.js</span>
      <span class="px-4 py-2 bg-white/10 rounded-full">Tailwind CSS</span>
      <span class="px-4 py-2 bg-white/10 rounded-full">Node.js</span>
      <span class="px-4 py-2 bg-white/10 rounded-full">HTML & CSS</span>
      <span class="px-4 py-2 bg-white/10 rounded-full">Git</span>
    </div>
  </section>

  <!-- Projects Section -->
  <section class="mt-16 px-8">
    <h3 class="text-2xl font-bold mb-4">Projects</h3>
    <div class="grid md:grid-cols-2 gap-6">
      <div class="bg-white/5 rounded-xl p-6 shadow-lg hover:scale-105 transition">
        <h4 class="font-semibold text-lg mb-2">Cool Web App</h4>
        <p class="text-gray-300 dark:text-gray-700 mb-2">A modern web application that solves real-world problems using the latest tech stack.</p>
        <a href="#" class="text-blue-400 hover:underline">View Project</a>
      </div>
      <div class="bg-white/5 rounded-xl p-6 shadow-lg hover:scale-105 transition">
        <h4 class="font-semibold text-lg mb-2">Open Source Tool</h4>
        <p class="text-gray-300 dark:text-gray-700 mb-2">An open-source tool designed to help developers boost productivity and efficiency.</p>
        <a href="#" class="text-blue-400 hover:underline">View Project</a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="mt-16 py-8 text-center text-gray-400 text-sm">
    &copy; 2025 Soumo. Made with <span class="text-pink-500">♥</span> and Tailwind CSS.
  </footer>
</body>
</html>