https://briehq.com/

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Brie - Bug capture extension</title>
7
8    <!-- SEO Meta Tags -->
9    <meta
10      name="description"
11      content="Debugging platform that captures screenshots, logs, network calls, and user actions in one shareable link."
12    />
13 
14    <meta name="author" content="Bug capture" />
15    <meta name="robots" content="index, follow" />
16
17    <!-- Open Graph / Social Media -->
18    <meta property="og:type" content="website" />
19    <meta
20      property="og:title"
21      content="Brie - Bug capture extension"
22    />
23    <meta
24      property="og:description"
25      content="Debugging platform that captures screenshots, logs, network calls, and user actions in one shareable link."
26    />
27    <meta property="og:image" content="/og-image.jpg" />
28
29    <!-- Twitter Card -->
30    <meta name="twitter:card" content="summary_large_image" />
31    <meta
32      name="twitter:title"
33      content="Brie - Bug capture extensiono"
34    />
35    <meta
36      name="twitter:description"
37      content="Brie - Bug capture extension"
38    />
39
40    <link
41      rel="stylesheet"
42      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/geist.css"
43    />
44
45    <style>
46      * {
47        margin: 0;
48        padding: 0;
49        box-sizing: border-box;
50      }
51
52      body {
53        font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI",
54          sans-serif;
55        background-color: #ffffff;
56        color: #0f172a;
57        line-height: 1.5;
58        min-height: 100vh;
59        display: flex;
60        flex-direction: column;
61        -webkit-font-smoothing: antialiased;
62        -moz-osx-font-smoothing: grayscale;
63      }
64
65      main {
66        flex: 1;
67        display: flex;
68        align-items: center;
69        justify-content: center;
70        padding: 3rem 1rem;
71      }
72
73      .container {
74        width: 100%;
75        max-width: 28rem;
76        margin: 0 auto;
77        text-align: center;
78      }
79
80      .projects-grid {
81        margin-bottom: 0.75rem;
82        display: grid;
83        gap: 0.75rem;
84      }
85
86      .project-card {
87        background: #ffffff;
88        border: 2px solid #e2e8f0;
89        border-radius: 0.5rem;
90        padding: 1rem;
91        text-decoration: none;
92        color: inherit;
93        display: block;
94        text-align: left;
95        transition: border-color 0.2s;
96        cursor: pointer;
97      }
98
99      .project-card:hover {
100        border-color: #cbd5e1;
101      }
102
103      .project-card:focus-visible {
104        outline: 2px solid #3b82f6;
105        outline-offset: 2px;
106      }
107
108      .project-header {
109        display: flex;
110        align-items: center;
111        justify-content: space-between;
112        margin-bottom: 0.25rem;
113      }
114
115      .project-title {
116        font-size: 1rem;
117        font-weight: 500;
118        color: #0f172a;
119      }
120
121      .project-meta {
122        font-size: 0.75rem;
123        color: #64748b;
124        display: flex;
125        align-items: center;
126        gap: 0.5rem;
127      }
128
129      .arrow-icon {
130        width: 1rem;
131        height: 1rem;
132        color: #64748b;
133        transition: transform 0.2s;
134      }
135
136      .project-card:hover .arrow-icon {
137        transform: translateX(2px);
138      }
139
140      .project-description {
141        font-size: 0.875rem;
142        color: #64748b;
143        line-height: 1.5;
144      }
145
146      @media (max-width: 640px) {
147        .container {
148          max-width: 100%;
149        }
150
151        .project-card {
152          padding: 1rem;
153        }
154      }
155
156      @media (prefers-reduced-motion: reduce) {
157        * {
158          animation-duration: 0.01ms !important;
159          animation-iteration-count: 1 !important;
160          transition-duration: 0.01ms !important;
161        }
162      }
163    </style>
164  </head>
165  <body>
166    <main>
167      <div class="container">
168        <div class="projects-grid" role="list">
169          <!-- Brie Project -->
170          <a
171            href="https://brie.io"
172            class="project-card"
173            target="_blank"
174            rel="noopener noreferrer"
175            role="listitem"
176            aria-label="Brie - Bug capture extension"
177          >
178            <div class="project-header">
179              <div class="project-title">Brie</div>
180              <div class="project-meta">

181                <span>Backend · Web · Extension</span>
182                <svg
183                  class="arrow-icon"
184                  viewBox="0 0 24 24"
185                  fill="none"
186                  stroke="currentColor"
187                  stroke-width="2"
188                  stroke-linecap="round"
189                  stroke-linejoin="round"
190                  aria-hidden="true"
191                >
192                  <line x1="5" y1="12" x2="19" y2="12"></line>
193                  <polyline points="12 5 19 12 12 19"></polyline>
194                </svg>
195              </div>
196            </div>
197            <p class="project-description">
198              Debugging platform that captures screenshots, logs, network calls,
199              and user actions in one shareable link.
200            </p>
201          </a>
202
203        </div>
204       
205      </div>
206    </main>
207
208    

208<script>
209      // Keyboard navigation
210      document.querySelectorAll(".project-card").forEach((card) => {
211        card.addEventListener("keydown", (e) => {
212          if (e.key === "Enter" || e.key === " ") {
213            e.preventDefault();
214            card.click();
215          }
216        });
217      });
218    </script>

218
219  </body>
220</html>