feat: add fast-injection project card with description and links; adjust padding and margins in styles for better layout

jkyberneees · jkyberneees · commit 17a4b0df1fa1 · 2026-01-26T14:46:46.000+01:00
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -141,6 +141,110 @@ <h2>The Ecosystem</h2>
           </div>
 
           <div class="projects-grid">
+            <!-- fast-injection -->
+            <article class="project-card">
+              <div class="card-header">
+                <div class="project-meta">
+                  <h3>fast-injection</h3>
+                  <div class="tags">
+                    <span class="tag">Dependency Injection</span>
+                    <span class="tag">TypeScript</span>
+                    <span class="tag">Bun</span>
+                  </div>
+                </div>
+              </div>
+              <p class="project-desc">
+                Modern TypeScript dependency injection container optimized for Bun runtime. Blazing fast with
+                sub-microsecond resolution (~26M ops/sec for cached singletons), lightweight (&lt;5KB), and fully
+                type-safe. Supports singleton, transient, and scoped lifetimes with flexible API options: decorators,
+                functional, or imperative. Built-in security against prototype pollution, memory leaks, and DoS attacks.
+                Includes testing utilities for easy mocking and test isolation.
+              </p>
+              <div class="project-links">
+                <a href="https://github.com/BackendStack21/fast-injection" class="link-item"
+                  ><svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path
+                      d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+                    ></path></svg
+                  >GitHub</a
+                >
+                <a href="https://www.npmjs.com/package/fast-injection" target="_blank" class="link-item"
+                  ><svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path
+                      d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+                    ></path>
+                    <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+                    <line x1="12" y1="22.08" x2="12" y2="12"></line></svg
+                  >npm</a
+                >
+                <a href="https://fast-injection.21no.de" target="_blank" class="link-item"
+                  ><svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <line x1="2" y1="12" x2="22" y2="12"></line>
+                    <path
+                      d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+                    ></path></svg
+                  >Website</a
+                >
+              </div>
+              <div class="badges">
+                <img
+                  src="https://img.shields.io/github/stars/BackendStack21/fast-injection?style=flat-square&labelColor=1e293b&color=38bdf8"
+                  alt="GitHub Stars"
+                />
+                <img
+                  src="https://img.shields.io/npm/v/fast-injection?style=flat-square&labelColor=1e293b&color=38bdf8"
+                  alt="npm version"
+                />
+              </div>
+              <div class="code-preview">
+                <div class="code-header">
+                  <span>Quick Start</span>
+                  <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                </div>
+                <pre><code><span class="k">import</span> { Container } <span class="k">from</span> <span class="s">'fast-injection'</span>;
+<span class="k">import</span> { singleton, inject } <span class="k">from</span> <span class="s">'fast-injection/decorators'</span>;
+
+<span class="k">@singleton</span>()
+<span class="k">class</span> <span class="f">UserService</span> {
+  <span class="f">getUser</span>(id) { <span class="k">return</span> { id, name: <span class="s">'John'</span> }; }
+}
+
+<span class="k">const</span> container = <span class="k">new</span> <span class="f">Container</span>();
+container.<span class="f">register</span>(UserService);</code></pre>
+              </div>
+            </article>
+
             <!-- kMOSAIC -->
             <article class="project-card">
               <div class="card-header">
diff --git a/styles.css b/styles.css
@@ -207,12 +207,12 @@ ul {
 
 /* Hero Section */
 .hero {
-  padding: 160px 0 100px;
+  padding: 120px 0 60px;
   text-align: center;
 }
 
 .badge-wrapper {
-  margin-bottom: 24px;
+  margin-bottom: 16px;
   animation: fadeDown 0.8s ease-out;
 }
 
@@ -231,7 +231,7 @@ ul {
   font-size: clamp(40px, 5vw, 64px);
   font-weight: 800;
   line-height: 1.1;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
   letter-spacing: -0.02em;
   animation: fadeUp 0.8s ease-out 0.1s backwards;
 }
@@ -247,7 +247,7 @@ ul {
   font-size: clamp(16px, 2vw, 20px);
   color: var(--text-muted);
   max-width: 600px;
-  margin: 0 auto 40px;
+  margin: 0 auto 24px;
   animation: fadeUp 0.8s ease-out 0.2s backwards;
 }
 
@@ -263,7 +263,7 @@ ul {
   gap: 16px;
   justify-content: center;
   align-items: center;
-  margin-top: 40px;
+  margin-top: 24px;
   flex-wrap: wrap;
   animation: fadeUp 0.8s ease-out 0.4s backwards;
 }
@@ -283,7 +283,7 @@ ul {
 
 /* Blog Carousel */
 .blog-carousel {
-  padding: 80px 0;
+  padding: 50px 0;
   background: rgba(15, 23, 42, 0.3);
   border-bottom: 1px solid var(--border);
 }
@@ -420,7 +420,7 @@ ul {
   display: flex;
   justify-content: center;
   gap: 8px;
-  margin-top: 32px;
+  margin-top: 20px;
 }
 
 .carousel-dot {
@@ -474,7 +474,7 @@ ul {
 
 /* Features Section */
 .features {
-  padding: 80px 0;
+  padding: 50px 0;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   background: rgba(15, 23, 42, 0.5);
@@ -483,7 +483,7 @@ ul {
 .features-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 40px;
+  gap: 24px;
 }
 
 .feature-card {
@@ -514,12 +514,12 @@ ul {
 
 /* Projects Section */
 .projects {
-  padding: 100px 0;
+  padding: 60px 0;
 }
 
 .section-header {
   text-align: center;
-  margin-bottom: 60px;
+  margin-bottom: 40px;
 }
 
 .section-header h2 {
@@ -638,7 +638,7 @@ ul {
 .projects-cta {
   display: flex;
   justify-content: center;
-  margin-top: 60px;
+  margin-top: 40px;
 }
 
 /* Code Preview */
@@ -695,7 +695,7 @@ ul {
 
 /* Footer */
 .footer {
-  padding: 60px 0;
+  padding: 40px 0;
   border-top: 1px solid var(--border);
   background: var(--bg-dark);
 }
