Dashboard Temp Share Shortlinks Frames API

HTMLify

about.html
Views: 41 | Author: karbonsites 
 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manifesto - Architectural Backend</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.163.0/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.5/dist/locomotive-scroll.min.js"></script>
</head>
<body data-scroll-container data-scroll-section>

    <header class="header">
        <div class="logo">ARCHITECT_DEV</div>
        <nav>
            <a href="index.html" class="nav-link">Home</a>
            <a href="about.html" class="nav-link active">Manifesto</a>
            <a href="index.html#experience" class="nav-link">Stack</a>
            <a href="index.html#projects" class="nav-link">Projects</a>
            <a href="index.html#contact" class="nav-link">Connect</a>
        </nav>
    </header>

    <main data-scroll-section>
        
        <!-- ABOUT HERO -->
        <section id="about-hero" class="section-full screen-height flex-center">
            <div class="about-hero-content">
                <h1 class="title-main" data-split-text>The Backend Philosophy</h1>
                <p class="subtitle">Scalability is not a feature; it is the architecture.</p>
            </div>
        </section>

        <!-- CORE PRINCIPLES -->
        <section id="principles" class="section-padded" data-scroll-section>
            <div class="principles-grid">
                <div class="principle-card" data-scroll data-scroll-speed="1.5">
                    <h3>01. Resilience</h3>
                    <p>Decoupled services using containerization ensure zero downtime during deployment cycles. State management is immutable and traceable.</p>
                </div>
                <div class="principle-card" data-scroll data-scroll-speed="1.2">
                    <h3>02. Performance</h3>
                    <p>Optimized runtime environments (Go/Node) coupled with aggressive caching strategies at the edge and core layers.</p>
                </div>
                <div class="principle-card" data-scroll data-scroll-speed="1.8">
                    <h3>03. Observability</h3>
                    <p>Full-stack telemetry implemented from ingress to database. Metrics, logs, and traces form a cohesive diagnostic picture.</p>
                </div>
                <div class="principle-card" data-scroll data-scroll-speed="1.0">
                    <h3>04. Simplicity</h3>
                    <p>Complex systems require simple interfaces. We leverage clean APIs (GraphQL/REST) to reduce cognitive load for consuming services.</p>
                </div>
            </div>
        </section>

        <!-- GLASSMORPHISM DETAIL -->
        <section id="detail-visual" class="section-padded screen-height flex-center" data-scroll-section>
            <div class="detail-visual-pane" data-scroll data-scroll-speed="-2"></div>
            <div class="detail-content text-left">
                <h2 class="section-title" data-split-text>Layered Abstraction</h2>
                <p class="p-large">The interface between front and back is a carefully constructed membrane. On the frontend, this is represented by Glassmorphism—a distortion effect that hints at the complexity lying beneath the surface, demanding focus on the immediate interaction layer while acknowledging the robust engine running silently behind.</p>
            </div>
        </section>

        <!-- CTA -->
        <section id="next-step" class="section-padded flex-center">
            <a href="index.html#projects" data-scroll-to="index.html#projects" class="btn-secondary large-btn">View Implemented Systems</a>
        </section>

    </main>

    <script src="script.js" defer></script>

  <a href="https://karbonsites.space/home" target="_blank" id="karbon-promo-banner">
      <span>✨</span>
      <div>Built with <b>Karbon Sites</b></div>
  </a>
</body>
</html>

Share this file: