-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
202 lines (190 loc) · 8.65 KB
/
Copy pathindex.html
File metadata and controls
202 lines (190 loc) · 8.65 KB
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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="AOM Vibe Lab — a personal space for building practical apps with AI-assisted vibe coding." />
<title>AOM Vibe Lab</title>
<link rel="stylesheet" href="styles.css" />
<script defer src="script.js"></script>
</head>
<body>
<header class="site-header">
<div class="container nav-wrap">
<a class="brand" href="#top" aria-label="AOM Vibe Lab home">
<span class="brand-mark" aria-hidden="true">A</span>
<span>AOM Vibe Lab</span>
</a>
<nav class="nav" aria-label="Primary navigation">
<a href="#projects">Projects</a>
<a href="#about">About</a>
<a href="#principles">Principles</a>
</nav>
<button class="menu-button" type="button" aria-label="Open navigation" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main id="top">
<section class="hero section">
<div class="container hero-grid">
<div class="hero-copy reveal">
<p class="eyebrow">Personal AI app studio</p>
<h1>Building useful little apps through <span>vibe coding.</span></h1>
<p class="hero-text">
A personal space for turning everyday interests, ideas, and pain points into practical software — one experiment at a time.
</p>
<div class="hero-actions">
<a class="button primary" href="#projects">Explore projects</a>
<a class="button secondary" href="https://github.com/aomemail" target="_blank" rel="noreferrer">View GitHub</a>
</div>
</div>
<aside class="hero-card reveal" aria-label="Current focus">
<div class="status-row">
<span class="status-dot"></span>
<span>Currently building</span>
</div>
<h2>myLINE Personal Assistant</h2>
<p>
A LINE bot designed as a personal AI assistant for conversation, file capture, and link summarization.
</p>
<div class="mini-meta">
<span>AI assistant</span>
<span>LINE Bot</span>
<span>In design</span>
</div>
</aside>
</div>
</section>
<section class="section stats-section" aria-label="Lab summary">
<div class="container stats-grid reveal">
<div><strong>4</strong><span>Active ideas</span></div>
<div><strong>1</strong><span>Published app</span></div>
<div><strong>∞</strong><span>Things to explore</span></div>
</div>
</section>
<section class="section" id="projects">
<div class="container">
<div class="section-heading reveal">
<p class="eyebrow">Selected work</p>
<h2>Projects built around real interests.</h2>
<p>Each project starts with a personal question, a practical problem, or something worth learning by building.</p>
</div>
<div class="project-grid">
<article class="project-card featured reveal">
<div class="project-topline">
<span class="project-number">01</span>
<span class="badge live">Live</span>
</div>
<div>
<p class="project-kicker">Sports & games</p>
<h3>dEX World Cup Predictor</h3>
<p>
A football prediction game created around the 2026 World Cup, with AI prediction insights inspired by FIFA Bench data and room to expand into EPL and UEFA Champions League competitions.
</p>
</div>
<div class="tag-list">
<span>React</span><span>TypeScript</span><span>Azure</span><span>AI Assist</span>
</div>
<a class="project-link" href="https://icy-tree-0a42f9300.7.azurestaticapps.net" target="_blank" rel="noreferrer">Open project <span>↗</span></a>
</article>
<article class="project-card reveal">
<div class="project-topline">
<span class="project-number">02</span>
<span class="badge concept">Concept</span>
</div>
<div>
<p class="project-kicker">Events & decision support</p>
<h3>SET in the City 2026 Planner</h3>
<p>
A single-page app that helps visitors decide which talks, stages, and conference rooms to attend when several interesting sessions happen at the same time.
</p>
</div>
<div class="tag-list">
<span>SPA</span><span>Scheduling</span><span>Personalized</span>
</div>
</article>
<article class="project-card reveal">
<div class="project-topline">
<span class="project-number">03</span>
<span class="badge active">Active</span>
</div>
<div>
<p class="project-kicker">Personal finance</p>
<h3>RMF Rebalance Lab</h3>
<p>
A master view of RMF holdings across multiple brokers and asset managers, designed to simplify allocation review and annual portfolio rebalancing decisions.
</p>
</div>
<div class="tag-list">
<span>Portfolio</span><span>Data view</span><span>Rebalancing</span>
</div>
</article>
<article class="project-card reveal">
<div class="project-topline">
<span class="project-number">04</span>
<span class="badge building">Building</span>
</div>
<div>
<p class="project-kicker">Personal productivity</p>
<h3>myLINE Personal Assistant</h3>
<p>
A LINE-based assistant that brings AI conversation, persistent file capture, and web or video link summarization into a familiar everyday chat experience.
</p>
</div>
<div class="tag-list">
<span>LINE Bot</span><span>OpenAI</span><span>Cloud</span><span>Automation</span>
</div>
</article>
</div>
</div>
</section>
<section class="section muted-section" id="about">
<div class="container split-grid">
<div class="section-heading reveal">
<p class="eyebrow">About the lab</p>
<h2>Learning software by making things I actually want to use.</h2>
</div>
<div class="body-copy reveal">
<p>
AOM Vibe Lab is my personal playground for AI-assisted software development. I use modern AI tools to explore ideas faster, understand unfamiliar technologies, and turn rough concepts into working applications.
</p>
<p>
The goal is not to build everything. It is to keep learning, solve real personal pain points, and create a growing collection of useful apps across sports, events, investing, and everyday productivity.
</p>
</div>
</div>
</section>
<section class="section" id="principles">
<div class="container">
<div class="section-heading reveal">
<p class="eyebrow">How I build</p>
<h2>Simple principles, practical outcomes.</h2>
</div>
<div class="principle-grid">
<div class="principle reveal"><span>01</span><h3>Start with curiosity</h3><p>Build around subjects I already care about and want to understand better.</p></div>
<div class="principle reveal"><span>02</span><h3>Solve a real pain point</h3><p>Prefer useful workflows over demos that look impressive but do little.</p></div>
<div class="principle reveal"><span>03</span><h3>Learn in public</h3><p>Document the process, mistakes, and improvements as each project evolves.</p></div>
<div class="principle reveal"><span>04</span><h3>Keep it maintainable</h3><p>Use clear structure and reusable foundations so experiments can grow.</p></div>
</div>
</div>
</section>
<section class="section contact-section">
<div class="container contact-card reveal">
<div>
<p class="eyebrow">What comes next</p>
<h2>More experiments are on the way.</h2>
<p>This homepage will grow along with every app, lesson, and new area of interest.</p>
</div>
<a class="button primary" href="https://github.com/aomemail" target="_blank" rel="noreferrer">Follow on GitHub</a>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-wrap">
<p>© <span id="year"></span> AOM Vibe Lab</p>
<p>Built with curiosity, AI, and a lot of iteration.</p>
</div>
</footer>
</body>
</html>