spivanatalie64.github.io/index.html at main · spivanatalie64/spivanatalie64.github.io · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Natalie Spiva | Architect of Resilience</title>
    <meta name="description" content="Lead Infrastructure Architect for AcreetionOS. Master of 99.9% Uptime. Linux Expert & Cloudflare Backend Lead.">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
    <header>
        <div class="profile-container">
            <img src="Business.png" alt="Natalie Spiva" class="profile-img">
        </div>
        <h1>Natalie Spiva</h1>
        <p class="tagline">Lead Infrastructure Architect & Master of 99.9% Uptime</p>
        <nav>
            <a href="#about" class="nav-link">System Logs</a>
            <a href="#infrastructure" class="nav-link">Infrastructure</a>
            <a href="#contact" class="nav-link">Connect</a>
            <a href="resume.pdf" class="nav-link" target="_blank">Resume.pdf</a>
        </nav>
    </header>

    <main>
        <!-- Infrastructure Section -->
        <section id="infrastructure" class="glass-card">
            <h2><i class="fas fa-server"></i> AcreetionOS Infrastructure <span class="uptime-badge pulse">99.9% Uptime</span></h2>
            <p>I handle the <strong>heavy lifting</strong> for the AcreetionOS backbone. From Cloudflare optimization to decentralized node management, I ensure our systems are as resilient as they are open.</p>

            <div class="infra-status">
                <div class="status-item">
                    <strong>Primary Role</strong>
                    <span>Infrastructure Lead</span>
                </div>
                <div class="status-item">
                    <strong>Backend Layer</strong>
                    <span>Cloudflare Expert</span>
                </div>
                <div class="status-item">
                    <strong>Distribution</strong>
                    <span>Kernel & SysArch</span>
                </div>
                <div class="status-item">
                    <strong>Node Status</strong>
                    <span style="color: var(--accent-teal);">SYNCED</span>
                </div>
            </div>
        </section>

        <!-- About Section -->
        <section id="about" class="glass-card">
            <h2><i class="fas fa-microchip"></i> The Architect's Log</h2>
            <p>I am a trans woman, Linux architect, and co-creator of AcreetionOS. My life is a testament to 99.9% uptime—not just in the systems I build, but in my own survival and evolution.</p>

            <div style="margin-top: 20px;">
                <h3 style="color: var(--light-pink); margin-bottom: 10px;">The Oklahoma Escape</h3>
                <p>Trapped in an environment that sought to break me, I executed a critical system migration. Moving from Stillwater, Oklahoma to Spokane, Washington wasn't just a relocation; it was a life-saving escape. Today, I thrive in a culture that boosts me up, turning my unique neuroimmune profile into a masterclass in redundancy and resilience.</p>
            </div>

            <div style="margin-top: 20px;">
                <h3 style="color: var(--light-pink); margin-bottom: 10px;">Forged with Family</h3>
                <p>AcreetionOS was built from the ground up by my father, <strong>Darren Clift</strong>, and me. Together, we forged a partnership that turned Linux expertise into a mission for high-availability systems. We don't wait for results; we chisel away at the circle until it's a square.</p>
            </div>
        </section>

        <!-- Projects/Assets Section -->
        <section class="glass-card">
            <h2><i class="fas fa-project-diagram"></i> Ecosystem Nodes</h2>
            <p>Active development and management of the following decentralized networks:</p>
            <ul style="list-style: none; margin-top: 15px;">
                <li style="margin-bottom: 10px;"><i class="fas fa-chevron-right" style="color: var(--primary-pink);"></i> <strong>AcreetionOS:</strong> High-availability mission from the kernel up.</li>
                <li style="margin-bottom: 10px;"><i class="fas fa-chevron-right" style="color: var(--primary-pink);"></i> <strong>ArttulOS:</strong> Mapping the accessibility layer of the future.</li>
                <li style="margin-bottom: 10px;"><i class="fas fa-chevron-right" style="color: var(--primary-pink);"></i> <strong>Ion:</strong> <a href="https://spivanatalie64.github.io/ion-website/" style="color: var(--light-pink); text-decoration: none;">The modern, open-source Android ROM.</a></li>
                <li style="margin-bottom: 10px;"><i class="fas fa-chevron-right" style="color: var(--primary-pink);"></i> <strong>Global Mirror Network:</strong> 72+ active nodes worldwide.</li>
            </ul>
        </section>

        <!-- Contact Section -->
        <section id="contact" class="glass-card">
            <h2><i class="fas fa-link"></i> External Links</h2>
            <div class="social-grid">
                <a href="https://github.com/spivanatalie64" class="btn-social" target="_blank">
                    <i class="fab fa-github"></i> GitHub
                </a>
                <a href="https://gitlab.acreetionos.org" class="btn-social" target="_blank">
                    <i class="fab fa-gitlab"></i> GitLab
                </a>
                <a href="https://spivanatalie64.github.io/ion-website/" class="btn-social" target="_blank">
                    <i class="fab fa-android"></i> Ion ROM
                </a>
                <a href="https://x.com/spiva4spiva" class="btn-social" target="_blank">
                    <i class="fab fa-twitter"></i> Twitter/X
                </a>
                <a href="https://mastodon.acreetionos.org" class="btn-social" target="_blank">
                    <i class="fab fa-mastodon"></i> Mastodon
                </a>
            </div>
        </section>

        <div style="text-align: center; margin-top: 40px;">
            <img src="Average.jpg" alt="Natalie Personal" style="width: 100%; max-width: 400px; border-radius: 20px; border: 1px solid var(--glass-border);">
        </div>
    </main>

    <footer>
        <p>&copy; 2026 Sprungles.org | Natalie Cole-Clift Spiva</p>
        <p style="font-size: 0.7rem; margin-top: 10px; opacity: 0.6;">SYSTEM_UPTIME: 99.9% | ARCH_VER: 6.x-acreetion</p>
    </footer>

    <script>
        // Smooth scrolling for nav links
        document.querySelectorAll('.nav-link').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                if(this.getAttribute('href').startsWith('#')) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>