Skip to content

Commit ef5d71c

Browse files
KernellsKernells
authored
Refactor index.html for improved layout and styles
Refactor HTML structure, update styles, and improve accessibility.
1 parent dcfb346 commit ef5d71c

1 file changed

Lines changed: 118 additions & 102 deletions

File tree

‎index.html‎

Lines changed: 118 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Kernels</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>KERNELS</title>
77

88
<style>
99
:root {
1010
--bg: #0b0d10;
11-
--accent: #5eead4;
11+
--panel: rgba(255,255,255,0.035);
12+
--border: rgba(255,255,255,0.08);
1213
--text: #e5e7eb;
1314
--muted: #9ca3af;
15+
--accent: #5eead4;
1416
}
1517

1618
* {
@@ -23,97 +25,74 @@
2325
body {
2426
background: radial-gradient(circle at top, #111827, var(--bg));
2527
color: var(--text);
26-
min-height: 100vh;
27-
overflow-x: hidden;
28+
line-height: 1.6;
2829
}
2930

3031
header {
31-
padding: 1.5rem 2rem;
32+
padding: 2rem;
3233
display: flex;
3334
justify-content: space-between;
3435
align-items: center;
3536
}
3637

3738
header h1 {
38-
font-size: 1.2rem;
39-
letter-spacing: 0.1em;
39+
letter-spacing: 0.15em;
40+
font-size: 1rem;
4041
color: var(--accent);
4142
}
4243

43-
header nav a {
44+
nav a {
4445
color: var(--muted);
4546
text-decoration: none;
4647
margin-left: 1.5rem;
47-
transition: color 0.2s;
4848
}
4949

50-
header nav a:hover {
50+
nav a:hover {
5151
color: var(--accent);
5252
}
5353

5454
.hero {
55-
height: 80vh;
55+
min-height: 80vh;
5656
display: flex;
5757
flex-direction: column;
5858
justify-content: center;
59-
align-items: center;
60-
text-align: center;
6159
padding: 2rem;
60+
max-width: 900px;
61+
margin: auto;
6262
}
6363

6464
.hero h2 {
65-
font-size: clamp(2.5rem, 6vw, 4rem);
65+
font-size: clamp(2.5rem, 5vw, 4rem);
6666
margin-bottom: 1rem;
6767
}
6868

6969
.hero p {
70-
max-width: 600px;
7170
color: var(--muted);
72-
margin-bottom: 2rem;
73-
}
74-
75-
.buttons {
76-
display: flex;
77-
gap: 1rem;
78-
}
79-
80-
.btn {
81-
padding: 0.75rem 1.5rem;
82-
border-radius: 8px;
83-
border: 1px solid var(--accent);
84-
background: transparent;
85-
color: var(--accent);
86-
cursor: pointer;
87-
transition: all 0.2s;
88-
}
89-
90-
.btn.primary {
91-
background: var(--accent);
92-
color: #020617;
93-
}
94-
95-
.btn:hover {
96-
transform: translateY(-2px);
97-
box-shadow: 0 10px 30px rgba(94,234,212,0.15);
71+
max-width: 650px;
9872
}
9973

10074
section {
10175
padding: 4rem 2rem;
102-
max-width: 1000px;
76+
max-width: 900px;
10377
margin: auto;
10478
}
10579

80+
section h3 {
81+
margin-bottom: 1rem;
82+
font-size: 1.5rem;
83+
}
84+
10685
.grid {
10786
display: grid;
108-
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
87+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
10988
gap: 1.5rem;
11089
}
11190

11291
.card {
113-
background: rgba(255,255,255,0.03);
114-
border: 1px solid rgba(255,255,255,0.06);
92+
background: var(--panel);
93+
border: 1px solid var(--border);
94+
border-radius: 14px;
11595
padding: 1.5rem;
116-
border-radius: 12px;
11796
transition: transform 0.2s, border 0.2s;
11897
}
11998

@@ -122,27 +101,53 @@
122101
border-color: var(--accent);
123102
}
124103

125-
footer {
126-
padding: 2rem;
127-
text-align: center;
104+
.muted {
128105
color: var(--muted);
129-
font-size: 0.9rem;
130106
}
131107

132-
/* floating particles */
133-
.particle {
134-
position: fixed;
135-
width: 4px;
136-
height: 4px;
108+
.qualities li {
109+
list-style: none;
110+
margin-bottom: 0.5rem;
111+
}
112+
113+
.qualities li::before {
114+
content: "— ";
115+
color: var(--accent);
116+
}
117+
118+
form {
119+
display: grid;
120+
gap: 1rem;
121+
max-width: 500px;
122+
}
123+
124+
input, textarea {
125+
background: transparent;
126+
border: 1px solid var(--border);
127+
border-radius: 8px;
128+
padding: 0.75rem;
129+
color: var(--text);
130+
}
131+
132+
textarea {
133+
resize: vertical;
134+
min-height: 120px;
135+
}
136+
137+
button {
137138
background: var(--accent);
138-
opacity: 0.15;
139-
border-radius: 50%;
140-
animation: float linear infinite;
139+
color: #020617;
140+
border: none;
141+
padding: 0.75rem;
142+
border-radius: 8px;
143+
cursor: pointer;
141144
}
142145

143-
@keyframes float {
144-
from { transform: translateY(110vh); }
145-
to { transform: translateY(-10vh); }
146+
footer {
147+
text-align: center;
148+
padding: 3rem 1rem;
149+
color: var(--muted);
150+
font-size: 0.9rem;
146151
}
147152
</style>
148153
</head>
@@ -151,72 +156,83 @@
151156
<header>
152157
<h1>KERNELS</h1>
153158
<nav>
154-
<a href="#features">Features</a>
155-
<a href="#about">About</a>
159+
<a href="#projects">Projects</a>
160+
<a href="#qualities">Qualities</a>
156161
<a href="#contact">Contact</a>
157162
</nav>
158163
</header>
159164

160165
<div class="hero">
161-
<h2>Build. Break. Learn.</h2>
166+
<h2>Simplicity, precision, and systems that last.</h2>
162167
<p>
163-
A personal space for experiments, tools, and ideas.
164-
Fast, minimal, and fully open.
168+
I focus on understanding systems at their core and refining them
169+
until only what matters remains.
165170
</p>
166-
<div class="buttons">
167-
<button class="btn primary" onclick="scrollToSection('features')">Explore</button>
168-
<button class="btn">GitHub</button>
169-
</div>
170171
</div>
171172

172-
<section id="features">
173-
<h2 style="margin-bottom:1.5rem;">Features</h2>
173+
<section id="projects">
174+
<h3>Projects</h3>
174175
<div class="grid">
175176
<div class="card">
176-
<h3>⚡ Fast</h3>
177-
<p>No frameworks, no builds, just raw HTML/CSS/JS.</p>
177+
<h4>GitHub Portfolio</h4>
178+
<p class="muted">
179+
A curated set of experimental and detail-oriented projects.
180+
</p>
181+
<p>
182+
<a href="https://github.com/Kernells" target="_blank" style="color:var(--accent);">
183+
github.com/Kernells →
184+
</a>
185+
</p>
178186
</div>
187+
179188
<div class="card">
180-
<h3>🧠 Experimental</h3>
181-
<p>Perfect for testing ideas, visuals, and logic.</p>
189+
<h4>Low-level Experiments</h4>
190+
<p class="muted">
191+
Focused explorations in correctness, performance, and clean abstractions.
192+
</p>
182193
</div>
194+
183195
<div class="card">
184-
<h3>🔒 Static</h3>
185-
<p>Runs entirely on GitHub Pages.</p>
196+
<h4>System Design Work</h4>
197+
<p class="muted">
198+
Minimalist implementations that favor clarity and maintainability.
199+
</p>
186200
</div>
187201
</div>
188202
</section>
189203

190-
<section id="about">
191-
<h2 style="margin-bottom:1rem;">About</h2>
192-
<p style="color:var(--muted); max-width:700px;">
193-
This site is a sandbox. You can add scripts, animations,
194-
tools, or entire mini-projects without any backend.
204+
<section id="qualities">
205+
<h3>Qualities</h3>
206+
<ul class="qualities muted">
207+
<li>Strong focus on correctness and edge cases</li>
208+
<li>Performance-aware without premature optimization</li>
209+
<li>Clean abstractions over clever hacks</li>
210+
<li>Quiet, deliberate development process</li>
211+
<li>Preference for long-term maintainability</li>
212+
</ul>
213+
</section>
214+
215+
<section id="contact">
216+
<h3>Contact</h3>
217+
<p class="muted" style="margin-bottom:1rem;">
218+
Send a message directly. No social noise.
195219
</p>
220+
221+
<!-- Replace action URL with your form provider endpoint -->
222+
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
223+
<input type="text" name="name" placeholder="Your name" required>
224+
<input type="email" name="email" placeholder="Your email" required>
225+
<textarea name="message" placeholder="Message" required></textarea>
226+
<button type="submit">Send</button>
227+
</form>
196228
</section>
197229

198-
<footer id="contact">
199-
© <span id="year"></span> kernels.github.io
230+
<footer>
231+
© <span id="year"></span> Kernels
200232
</footer>
201233

202234
<script>
203-
// smooth scroll
204-
function scrollToSection(id) {
205-
document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
206-
}
207-
208-
// footer year
209235
document.getElementById('year').textContent = new Date().getFullYear();
210-
211-
// particles
212-
for (let i = 0; i < 40; i++) {
213-
const p = document.createElement('div');
214-
p.className = 'particle';
215-
p.style.left = Math.random() * 100 + 'vw';
216-
p.style.animationDuration = 10 + Math.random() * 20 + 's';
217-
p.style.animationDelay = Math.random() * 10 + 's';
218-
document.body.appendChild(p);
219-
}
220236
</script>
221237

222238
</body>

0 commit comments

Comments
 (0)