xFlip/aps3.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
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Soumo | OP Developer Portfolio</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/dist/tailwind.min.css" rel="stylesheet">
  <style>
    body {
      background: #000;
    }
    .glass {
      background: rgba(30, 30, 30, 0.7);
      backdrop-filter: blur(12px) saturate(180%);
      border-radius: 1.5rem;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 8px 32px 0 rgba(0,0,0,0.45);
    }
    .neon {
      text-shadow: 0 0 8px #00f0ff, 0 0 12px #00f0ff, 0 0 16px #00f0ff;
    }
    .neon-btn {
      box-shadow: 0 0 8px #00f0ff, 0 0 24px #00f0ff;
    }
  </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center font-sans text-white">

  <!-- Glassmorphism Card -->
  <main class="glass max-w-2xl w-full mx-4 my-16 p-10 flex flex-col items-center text-center animate-fade-in">
    <h1 class="text-5xl font-extrabold neon mb-2 tracking-tight">Soumo</h1>
    <h2 class="text-xl font-medium mb-6 text-cyan-400 tracking-wider">Ultimate Developer | Code Wizard</h2>
    <p class="text-gray-300 mb-8 text-lg">
      Welcome to my <span class="text-cyan-400 font-semibold">OP</span> portfolio. I’m Soumo, a developer who loves to build next-level, high-performance web experiences.<br>
      I craft clean, scalable solutions using the latest tech stacks. Whether it’s front-end magic, back-end power, or full-stack wizardry, I’m always ready to level up and push boundaries.<br>
      <span class="text-cyan-400 font-bold">Let’s create something legendary together!</span>
    </p>
    <a href="mailto:soumo@email.com" class="neon-btn px-8 py-3 rounded-full bg-cyan-500 text-black font-bold uppercase tracking-widest hover:bg-cyan-400 transition text-lg shadow-lg mb-8">Contact Me</a>
    <div class="w-full flex flex-wrap justify-center gap-4 mb-8">
      <span class="px-4 py-2 rounded-full bg-cyan-900/60 text-cyan-300 border border-cyan-500">JavaScript</span>
      <span class="px-4 py-2 rounded-full bg-purple-900/60 text-purple-300 border border-purple-500">React</span>
      <span class="px-4 py-2 rounded-full bg-pink-900/60 text-pink-300 border border-pink-500">Next.js</span>
      <span class="px-4 py-2 rounded-full bg-gray-800/60 text-gray-300 border border-gray-500">Tailwind CSS</span>
      <span class="px-4 py-2 rounded-full bg-green-900/60 text-green-300 border border-green-500">Node.js</span>
    </div>
    <div class="w-full flex flex-col gap-4">
      <div class="glass p-4 flex flex-col md:flex-row items-center justify-between mb-2">
        <div class="text-left">
          <h3 class="text-lg font-semibold text-cyan-400">⚡ Next-Gen Web App</h3>
          <p class="text-gray-400">A blazing fast, modern web application with real-time features and a sleek UI.</p>
        </div>
        <a href="#" class="mt-2 md:mt-0 px-4 py-2 rounded bg-cyan-700 hover:bg-cyan-600 text-white font-semibold transition">View</a>
      </div>
      <div class="glass p-4 flex flex-col md:flex-row items-center justify-between">
        <div class="text-left">
          <h3 class="text-lg font-semibold text-purple-400">🚀 Open Source Toolkit</h3>
          <p class="text-gray-400">Tools and utilities to supercharge your workflow and boost productivity.</p>
        </div>
        <a href="#" class="mt-2 md:mt-0 px-4 py-2 rounded bg-purple-700 hover:bg-purple-600 text-white font-semibold transition">View</a>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="mt-8 mb-4 text-gray-500 text-sm text-center">
    &copy; 2025 Soumo. Crafted with <span class="text-cyan-400">Tailwind CSS</span> & pure passion.
  </footer>

  <!-- Simple fade-in animation -->
  <script>
    document.querySelector('main').classList.add('opacity-0');
    setTimeout(() => {
      document.querySelector('main').classList.remove('opacity-0');
      document.querySelector('main').classList.add('opacity-100');
    }, 100);
  </script>
</body>
</html>