Manaiakalani.com/index.html at main · Manaiakalani/Manaiakalani.com · 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
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maximilian Stein</title>
    <meta name="description" content="Maximilian Stein (Manaiakalani) — Community Strategy Lead for Microsoft Intune & Microsoft Security in Customer Experience Engineering (CxE). Connecting engineering teams with the global technical community.">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://manaiakalani.com/">
    <meta property="og:title" content="Maximilian Stein">
    <meta property="og:description" content="Connecting engineering teams with the global technical community through actionable insights and real customer engagement.">
    <meta property="og:image" content="https://manaiakalani.com/favicon.png">
    <meta property="twitter:card" content="summary">
    <meta property="twitter:title" content="Maximilian Stein">
    <meta property="twitter:description" content="Connecting engineering teams with the global technical community through actionable insights and real customer engagement.">
    <meta name="theme-color" content="#0f4c81">

    <!-- Canonical -->
    <link rel="canonical" href="https://manaiakalani.com/">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="apple-touch-icon" href="favicon.png">

    <!-- Preconnect -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>

    <!-- Google Fonts: Doto -->
    <link href="https://fonts.googleapis.com/css2?family=Doto:wght@400;700&display=swap" rel="stylesheet">
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
          integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
          crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- External CSS -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="geocities.css">

    <!-- Prevent flash: apply saved theme/geocities before paint -->
    <script>
        (function() {
            var t = localStorage.getItem('theme');
            if (t === 'dark' || (!t && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.documentElement.setAttribute('data-theme', 'dark');
            }
            if (localStorage.getItem('geocities') === 'true') {
                document.documentElement.setAttribute('data-geocities', 'true');
            }
        })();
    </script>

    <!-- Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Person",
        "name": "Maximilian Stein",
        "alternateName": "Manaiakalani",
        "url": "https://manaiakalani.com",
        "jobTitle": "Community Strategy Lead",
        "sameAs": [
            "https://linkedin.com/in/manaiakalani",
            "https://github.com/manaiakalani"
        ]
    }
    </script>


</head>
<body>
    <!-- Header Section -->
    <header>
        <div class="container">
            <h1>MANAIAKALANI</h1>
            <p class="header-subtitle">Aloha, I'm Maximilian Stein (Manaiakalani)</p>
            <p id="typing-effect"></p>
            <nav class="site-nav" aria-label="Main">
                <a href="index.html" class="active">About</a>
                <a href="thoughts.html">Thoughts</a>
                <a href="projects.html">Projects</a>
            </nav>
        </div>
        <button class="theme-toggle" aria-label="Toggle dark mode">
            <i class="fas fa-moon"></i>
            <i class="fas fa-sun"></i>
        </button>
        <button class="geocities-toggle" aria-label="Toggle GeoCities mode" title="Welcome to 1997!">
            <span class="gc-icon">🚧</span>
        </button>
    </header>

    <!-- About Me Section -->
    <section id="about">
        <div class="container">
            <h2>About Me</h2>
            <div class="about-text">
                <p>
                    I lead <strong>community strategy</strong> for <strong>Microsoft Intune</strong> and <strong>Microsoft Security</strong> across social media and technical blogs within <strong>Customer Experience Engineering (CxE)</strong>. My work connects engineering teams with the global technical community by turning real customer conversations into <em>actionable insights</em>, <em>technical guidance</em>, and engagement that <em>actually helps people get their work done</em>.
                </p>
                <p>
                    With <strong>more than eight years at Microsoft</strong>, I focus on bringing customers, engineers, and community voices together to improve how products evolve and how people experience them. My role often sits <em>between teams</em>—translating feedback, identifying patterns, and helping shape solutions that scale.
                </p>
                <p>
                    Before Microsoft, I worked my way up from <strong>systems administrator</strong> in Hawai'i through <strong>desktop support</strong> and <strong>service technician</strong> roles. That hands-on background gives me a practical perspective on the customer journey—<em>from the person racking the server to the person deploying the endpoint</em>.
                </p>
                <p>
                    <em>It looks like you're trying to build something useful. Need help with that?</em> 🖇️
                </p>
            </div>
        </div>
    </section>

    <!-- Featured Projects Teaser -->
    <section class="featured-teaser">
        <div class="container">
            <h2>Featured Projects</h2>
            <div class="featured-grid">
                <a href="https://github.com/Manaiakalani/borderlands-loot-hub" target="_blank" rel="noopener noreferrer" class="project-card">
                    <h3>Borderlands SHiFT Vault</h3>
                    <p>A sleek, Borderlands-themed SHiFT code aggregator for Vault Hunters. Find and copy Golden Key codes for BL1–BL4 & Wonderlands.</p>
                    <div class="project-meta">
                        <span class="lang-badge"><span class="lang-dot" style="background:#3178c6"></span> TypeScript</span>
                    </div>
                </a>
                <a href="https://github.com/Manaiakalani/pulse-wa" target="_blank" rel="noopener noreferrer" class="project-card">
                    <h3>Pulse WA</h3>
                    <p>Washington State public health dashboard — 15+ live data sources, real-time charts, and interactive maps.</p>
                    <div class="project-meta">
                        <span class="lang-badge"><span class="lang-dot" style="background:#3178c6"></span> TypeScript</span>
                    </div>
                </a>
                <a href="https://github.com/Manaiakalani/supabase-dashboard" target="_blank" rel="noopener noreferrer" class="project-card">
                    <h3>Supabase Dashboard</h3>
                    <p>Unified dashboard for managing multiple Supabase projects from a single interface.</p>
                    <div class="project-meta">
                        <span class="lang-badge"><span class="lang-dot" style="background:#3178c6"></span> TypeScript</span>
                    </div>
                </a>
            </div>
            <a href="projects.html" class="view-all">View All Projects →</a>
        </div>
    </section>

    <!-- Footer Section -->
    <footer>
        <div class="container">
            <div class="cube-wrapper" aria-hidden="true">
                <canvas id="ascii-cube"></canvas>
            </div>
            <div class="social-icons">
                <a href="https://www.linkedin.com/in/manaiakalani/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
                <a href="https://twitter.com/manaiakalani" target="_blank" rel="noopener noreferrer" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="https://github.com/manaiakalani" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><i class="fab fa-github"></i></a>
                <a href="https://instagram.com/manaiakalani" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                <a href="https://www.youtube.com/kimaker213" target="_blank" rel="noopener noreferrer" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
                <a href="https://bsky.app/profile/did:plc:kurxpumma6piictgpr424wcj" target="_blank" rel="noopener noreferrer" aria-label="Bluesky"><i class="fas fa-cloud"></i></a>
            </div>
            <p class="footer-text">Made with <span class="heart-beat" aria-hidden="true">❤️</span> in Seattle, WA</p>
        </div>
    </footer>

    <!-- External JavaScript -->
    <script src="script.js"></script>
    <script src="geocities.js"></script>

    <!-- ASCII Cube -->
    <script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
        }
    }
    </script>
    <script type="module">
        import { initCube } from './cube.js';
        const canvas = document.getElementById('ascii-cube');
        if (canvas) initCube(canvas, './cube-texture.webp');
    </script>
</body>
</html>