bufferpunk.com/index.html at main · bufferpunk/bufferpunk.com · 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Buffer Punk</title>
  <link rel="icon" href="src/images/Monkey Mind (With BG).png" />
  <link rel="stylesheet" href="src/styles/tailwind.css" />
  <style>
    /* Simple fade-in-up animation */
    @keyframes fade-in-up {
      0% { opacity: 0; transform: translateY(40px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-up {
      animation: fade-in-up 0.8s ease forwards;
    }
    .delay-200 { animation-delay: 0.2s; }
    .delay-400 { animation-delay: 0.4s; }
  </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-black via-gray-900 to-purple-900 text-white">
  <!-- Hero Section -->
  <section class="flex flex-col items-center justify-center text-center py-32 px-6">
    <section class="flex max-w-lg sm:gap-4 gap-1">
      <div>
        <img src="src/images/Monkey Mind (With BG).png" alt="Buffer Punk Logo" class="w-20 rounded-full object-cover" />
      </div>
      <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight animate-fade-in-up">
        Buffer Punk
      </h1>
    </section>
    <p class="mt-6 text-lg md:text-xl max-w-2xl text-gray-300 animate-fade-in-up delay-200">
      Open-source software, crafted with attitude. From seamless deployments to enterprise systems and dev tools.
    </p>
    <div class="mt-10 animate-fade-in-up delay-400">
      <button class="rounded-2xl bg-purple-600 hover:bg-purple-700 text-lg px-8 py-6 flex items-center gap-2" onclick="window.open('https://github.com/bufferpunk','_blank')">
        Explore Projects
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  </section>

  <!-- Projects Section -->
  <section class="py-20 px-6 max-w-6xl mx-auto">
    <h2 class="text-3xl md:text-5xl font-bold text-center mb-16">Our Projects</h2>
    <div class="grid md:grid-cols-3 gap-8">
      <div class="bg-gray-800 border border-gray-700 rounded-2xl p-6" onclick="window.open('https://github.com/bufferpunk/deploy-bash','_blank')">
        <h3 class="text-xl font-semibold">Deploy Bash</h3>
        <p class="text-gray-400 mt-3">
          Automate deployments like a punk—simple, fast, and reliable Bash tooling.
        </p>
      </div>

      <div class="bg-gray-800 border border-gray-700 rounded-2xl p-6" onclick="window.open('https://erp.co.rw','_blank')">
        <h3 class="text-xl font-semibold">Gen ERP</h3>
        <p class="text-gray-400 mt-3">
          A modern ERP platform designed to scale beyond HR into full enterprise solutions.
        </p>
      </div>

      <div class="bg-gray-800 border border-gray-700 rounded-2xl p-6" onclick="window.open('https://logmachine.bufferpunk.com','_blank')">
        <h3 class="text-xl font-semibold">LogMachine</h3>
        <p class="text-gray-400 mt-3">
          Collaborative logging system for developers. Real-time, open-source, and minimal.
        </p>
      </div>
    </div>
  </section>

  <!-- Call to Action -->
  <section class="bg-gradient-to-r from-purple-800 to-pink-700 py-20 px-6 text-center">
    <h2 class="text-3xl md:text-4xl font-bold mb-6">Join the Punk Movement</h2>
    <p class="text-lg text-gray-200 mb-10 max-w-2xl mx-auto">
      We build tools with edge. If you believe in open-source software that pushes boundaries, you’re in the right place.
    </p>
    <button class="rounded-2xl bg-black hover:bg-gray-900 text-lg px-8 py-6" onclick="window.open('https://github.com/bufferpunk','_blank')">
      Get Involved
    </button>
  </section>

  <!-- Footer -->
  <footer class="py-10 text-center text-gray-300 text-sm">
    &copy; <span id="year"></span> Buffer Punk.
    <a href="terms.html" class="ml-4 hover:text-gray-100">Terms & Conditions</a>
    <a href="privacy.html" class="ml-4 hover:text-gray-100">Privacy Policy</a>
  </footer>

  <script>
    document.getElementById("year").textContent = new Date().getFullYear();
  </script>
</body>
</html>