Dashboard Temp Share Shortlinks Frames API

HTMLify

index.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
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Architectural Backend & 3D Visual Experience</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 active">Home</a>
            <a href="about.html" class="nav-link">Manifesto</a>
            <a href="#experience" class="nav-link">Stack</a>
            <a href="#projects" class="nav-link">Projects</a>
            <a href="#contact" class="nav-link">Connect</a>
        </nav>
    </header>

    <main data-scroll-section>
        
        <!-- HERO SECTION: Three.js Abstract Geometry -->
        <section id="hero" class="section-full screen-height" data-scroll-section>
            <div id="hero-3d-container"></div>
            <div class="hero-content text-overlay">
                <h1 class="title-main" data-text="SYSTEM INITIATED">SYSTEM INITIATED</h1>
                <p class="subtitle">Architectural Backend & 3D Visual Experience</p>
                <div class="cta-box">
                    <a href="#about" data-scroll-to="#about" class="btn-primary scroll-down-btn">Explore Logic</a>
                </div>
            </div>
        </section>

        <!-- ABOUT SECTION: Liquid Text Distortion / Glassmorphism -->
        <section id="about" class="section-padded screen-height" data-scroll-section>
            <div class="glass-pane" data-scroll data-scroll-speed="-1"></div>
            <div class="content-wrapper">
                <h2 class="section-title" data-split-text>Logic Driven Design. Scalable Foundation.</h2>
                <div class="text-block">
                    <p class="p-large" data-scroll data-scroll-delay="0.2">We engineer backend systems where performance is paramount. Built on Node.js/Go principles, our architecture is designed for dynamic scaling and low-latency data pipelines. Every line of code serves a function, much like the precision required in 3D space.</p>
                    <p class="p-large" data-scroll data-scroll-delay="0.4">Our frontend marries high-fidelity rendering (Three.js, R3F) with robust orchestration (GSAP, Locomotive Scroll) to deliver experiences that feel physical, responsive, and utterly modern.</p>
                </div>
            </div>
        </section>

        <!-- EXPERIENCE/EDUCATION SECTION: Vertical SVG Path Tracing -->
        <section id="experience" class="section-padded" data-scroll-section>
            <h2 class="section-title align-center" data-split-text>Evolution Trajectory</h2>
            
            <div class="timeline-container">
                <svg class="timeline-svg" viewBox="0 0 100 2000" preserveAspectRatio="none">
                    <path id="timeline-path" d="M50 0 V2000" stroke="#4A4A4A" stroke-width="2" fill="none"></path>
                </svg>
                
                <div class="timeline-item" data-scroll data-scroll-target="#experience" data-scroll-offset="30%">
                    <div class="timeline-dot exp-dot"></div>
                    <div class="timeline-content exp-card">
                        <h3>Senior Software Architect</h3>
                        <p>TechCorp Global | 2021 - Present</p>
                        <p class="details">Led migration to Go microservices, improving API response time by 40%.</p>
                    </div>
                </div>

                <div class="timeline-item right" data-scroll data-scroll-target="#experience" data-scroll-offset="40%">
                    <div class="timeline-dot edu-dot"></div>
                    <div class="timeline-content edu-card">
                        <h3>M.S. Computer Science</h3>
                        <p>MIT | 2019</p>
                        <p class="details">Thesis on GPU-accelerated data structures and real-time rendering.</p>
                    </div>
                </div>

                <div class="timeline-item" data-scroll data-scroll-target="#experience" data-scroll-offset="50%">
                    <div class="timeline-dot exp-dot"></div>
                    <div class="timeline-content exp-card">
                        <h3>Full Stack Engineer</h3>
                        <p>Innovate Labs | 2017 - 2019</p>
                        <p class="details">Developed high-throughput Node.js API gateway handling 10k requests/sec.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- PROJECTS SECTION: Horizontal Scroll & Raycasting -->
        <section id="projects" class="section-full project-scroll-wrapper" data-scroll-section>
            <div class="horizontal-scroller" data-scroll-direction="horizontal" data-scroll-speed="1" data-scroll-repeat>
                
                <div class="project-container">
                    <h2 class="section-title project-title" data-split-text>Visualized Workflows</h2>

                    <!-- Project 1: CMS Gallery Mock -->
                    <div class="project-card" data-project-id="1">
                        <div class="project-image-placeholder" data-raycast-target>CMS Render Engine</div>
                        <div class="project-info">
                            <h3>CMS Data Visualization</h3>
                            <p>Dynamic mapping of complex data sets onto interactive WebGL surfaces.</p>
                        </div>
                    </div>

                    <!-- Project 2: 3D Topology -->
                    <div class="project-card" data-project-id="2">
                        <div class="project-image-placeholder" data-raycast-target>3D Topology Visualizer</div>
                        <div class="project-info">
                            <h3>Abstract Topology Mapping</h3>
                            <p>Utilizing InstancedMesh for dense, high-performance geometry rendering.</p>
                        </div>
                    </div>

                    <!-- Project 3: Low-Latency Network -->
                    <div class="project-card" data-project-id="3">
                        <div class="project-image-placeholder" data-raycast-target>Low-Latency Network Sim</div>
                        <div class="project-info">
                            <h3>Network Latency Simulation</h3>
                            <p>WebGL simulation of node communication with custom wave ripple shaders.</p>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- CONTACT SECTION: 3D Terminal Interface -->
        <section id="contact" class="section-padded screen-height" data-scroll-section>
            <div class="terminal-wrapper">
                <div id="terminal-3d-host"></div>
                <div class="terminal-overlay">
                    <h2 class="section-title" data-split-text>Establish Connection</h2>
                    <form id="contact-form-3d">
                        <div class="input-group">
                            <label for="name">USER@HOST:~$ name:</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="input-group">
                            <label for="email">USER@HOST:~$ email:</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="input-group textarea-group">
                            <label for="message">USER@HOST:~$ message:</label>
                            <textarea id="message" name="message" rows="4" required></textarea>
                        </div>
                        <button type="submit" class="btn-primary terminal-submit">Execute Transmission</button>
                    </form>
                </div>
            </div>
        </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: