Skip to content

Commit c3c798f

Browse files
Bikram GoleBikram Gole
Bikram Gole
authored and
Bikram Gole
committed
Improve SEO, accessibility, and project spotlight
1 parent 5aab8ef commit c3c798f

7 files changed

Lines changed: 217 additions & 9 deletions

File tree

‎about.html‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,30 @@
66
<meta name="color-scheme" content="dark" />
77
<meta name="theme-color" content="#020305" />
88
<meta name="darkreader-lock" />
9-
<title>About Neo | Aura Farmer</title>
10-
<meta name="description" content="About Bikram Gole from Gongabu, KTM. AI-focused student builder with chaotic fun style." />
9+
<title>Bikram Gole | About</title>
10+
<meta name="description" content="About Bikram Gole (Aura Farmer) — AI-focused student builder from Gongabu, KTM with chaotic fun energy." />
11+
<meta name="author" content="Bikram Gole" />
12+
<meta name="keywords" content="Bikram Gole, Aura Farmer, AI, open source, Linux, developer profile, Nepal" />
13+
<link rel="canonical" href="https://devxtechnic.github.io/about.html" />
14+
<meta property="og:title" content="Bikram Gole | About" />
15+
<meta property="og:description" content="About Bikram Gole (Aura Farmer) — AI-focused student builder from Gongabu, KTM." />
16+
<meta property="og:type" content="profile" />
17+
<meta property="og:url" content="https://devxtechnic.github.io/about.html" />
18+
<meta property="og:image" content="https://devxtechnic.github.io/og-image.svg" />
19+
<meta property="og:site_name" content="DevXTechnic" />
20+
<meta name="twitter:card" content="summary_large_image" />
21+
<meta name="twitter:title" content="Bikram Gole | About" />
22+
<meta name="twitter:description" content="About Bikram Gole (Aura Farmer) — AI-focused student builder from Gongabu, KTM." />
23+
<meta name="twitter:image" content="https://devxtechnic.github.io/og-image.svg" />
24+
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
25+
<link rel="apple-touch-icon" href="favicon.svg" />
1126
<link rel="preconnect" href="https://fonts.googleapis.com" />
1227
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1328
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Syne:wght@700;800&display=swap" rel="stylesheet" />
1429
<link rel="stylesheet" href="styles.css" />
1530
</head>
1631
<body data-page="about">
32+
<a class="skip-link" href="#main-content">Skip to content</a>
1733
<script>
1834
(() => {
1935
try {
@@ -71,7 +87,7 @@
7187
</div>
7288
</header>
7389

74-
<main>
90+
<main id="main-content">
7591
<section class="hero compact reveal skew-left">
7692
<span class="hero-pulse" aria-hidden="true"></span>
7793
<svg class="hero-motif" viewBox="0 0 220 140" aria-hidden="true">

‎contact.html‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,30 @@
66
<meta name="color-scheme" content="dark" />
77
<meta name="theme-color" content="#020305" />
88
<meta name="darkreader-lock" />
9-
<title>Contact Neo | Aura Farmer</title>
9+
<title>Bikram Gole | Contact</title>
1010
<meta name="description" content="Contact Bikram Gole for AI, Linux, open source, and collaboration." />
11+
<meta name="author" content="Bikram Gole" />
12+
<meta name="keywords" content="Bikram Gole, contact, AI, open source, Linux, developer, Nepal" />
13+
<link rel="canonical" href="https://devxtechnic.github.io/contact.html" />
14+
<meta property="og:title" content="Bikram Gole | Contact" />
15+
<meta property="og:description" content="Contact Bikram Gole for AI, Linux, open source, and collaboration." />
16+
<meta property="og:type" content="website" />
17+
<meta property="og:url" content="https://devxtechnic.github.io/contact.html" />
18+
<meta property="og:image" content="https://devxtechnic.github.io/og-image.svg" />
19+
<meta property="og:site_name" content="DevXTechnic" />
20+
<meta name="twitter:card" content="summary_large_image" />
21+
<meta name="twitter:title" content="Bikram Gole | Contact" />
22+
<meta name="twitter:description" content="Contact Bikram Gole for AI, Linux, open source, and collaboration." />
23+
<meta name="twitter:image" content="https://devxtechnic.github.io/og-image.svg" />
24+
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
25+
<link rel="apple-touch-icon" href="favicon.svg" />
1126
<link rel="preconnect" href="https://fonts.googleapis.com" />
1227
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1328
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Syne:wght@700;800&display=swap" rel="stylesheet" />
1429
<link rel="stylesheet" href="styles.css" />
1530
</head>
1631
<body data-page="contact">
32+
<a class="skip-link" href="#main-content">Skip to content</a>
1733
<script>
1834
(() => {
1935
try {
@@ -71,7 +87,7 @@
7187
</div>
7288
</header>
7389

74-
<main>
90+
<main id="main-content">
7591
<section class="hero compact reveal skew-left">
7692
<span class="hero-pulse" aria-hidden="true"></span>
7793
<svg class="hero-motif" viewBox="0 0 220 140" aria-hidden="true">

‎favicon.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 79 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,48 @@
66
<meta name="color-scheme" content="dark" />
77
<meta name="theme-color" content="#020305" />
88
<meta name="darkreader-lock" />
9-
<title>Neo | Aura Farmer</title>
10-
<meta name="description" content="Bikram Gole - Aura Farmer from Gongabu, KTM. Chaotic fun personal site around AI, open source, crypto, and philosophy." />
9+
<title>Bikram Gole | Aura Farmer</title>
10+
<meta name="description" content="Bikram Gole (Aura Farmer) — AI-leaning builder from Gongabu, KTM. Open source, Linux, and high-energy dev experiments." />
11+
<meta name="author" content="Bikram Gole" />
12+
<meta name="keywords" content="Bikram Gole, DevXTechnic, Aura Farmer, AI, open source, Linux, developer portfolio, Nepal" />
13+
<link rel="canonical" href="https://devxtechnic.github.io/" />
14+
<meta property="og:title" content="Bikram Gole | Aura Farmer" />
15+
<meta property="og:description" content="AI-leaning builder from Gongabu, KTM. Open source, Linux, and high-energy dev experiments." />
16+
<meta property="og:type" content="website" />
17+
<meta property="og:url" content="https://devxtechnic.github.io/" />
18+
<meta property="og:image" content="https://devxtechnic.github.io/og-image.svg" />
19+
<meta property="og:site_name" content="DevXTechnic" />
20+
<meta name="twitter:card" content="summary_large_image" />
21+
<meta name="twitter:title" content="Bikram Gole | Aura Farmer" />
22+
<meta name="twitter:description" content="AI-leaning builder from Gongabu, KTM. Open source, Linux, and high-energy dev experiments." />
23+
<meta name="twitter:image" content="https://devxtechnic.github.io/og-image.svg" />
24+
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
25+
<link rel="apple-touch-icon" href="favicon.svg" />
26+
<script type="application/ld+json">
27+
{
28+
"@context": "https://schema.org",
29+
"@type": "Person",
30+
"name": "Bikram Gole",
31+
"alternateName": "Aura Farmer",
32+
"url": "https://devxtechnic.github.io/",
33+
"sameAs": ["https://github.com/DevXtechnic"],
34+
"jobTitle": "Student",
35+
"knowsAbout": ["AI", "Open Source", "Linux", "Python", "C++"],
36+
"address": {
37+
"@type": "PostalAddress",
38+
"addressLocality": "Gongabu",
39+
"addressRegion": "KTM",
40+
"addressCountry": "NP"
41+
}
42+
}
43+
</script>
1144
<link rel="preconnect" href="https://fonts.googleapis.com" />
1245
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1346
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Syne:wght@700;800&display=swap" rel="stylesheet" />
1447
<link rel="stylesheet" href="styles.css" />
1548
</head>
1649
<body data-page="home">
50+
<a class="skip-link" href="#main-content">Skip to content</a>
1751
<script>
1852
(() => {
1953
try {
@@ -72,7 +106,7 @@
72106
</div>
73107
</header>
74108

75-
<main>
109+
<main id="main-content">
76110
<section id="hero-zone" class="hero reveal skew-left">
77111
<span class="hero-pulse" aria-hidden="true"></span>
78112
<svg class="hero-motif" viewBox="0 0 220 140" aria-hidden="true">
@@ -158,6 +192,48 @@ <h2>Mission Console 🛰️</h2>
158192
<p class="signal-board">Drop Insight resets the chain.</p>
159193
</section>
160194

195+
<section id="project-spotlight" class="panel reveal delay-2 skew-left">
196+
<div class="section-head">
197+
<div>
198+
<h2>Project Spotlight</h2>
199+
<p class="subtitle">Curated builds I am evolving right now.</p>
200+
</div>
201+
<a class="btn ghost" href="https://github.com/DevXtechnic" target="_blank" rel="noopener noreferrer">View GitHub</a>
202+
</div>
203+
<div class="spotlight-grid tilt-zone">
204+
<article class="spotlight-card tilt">
205+
<h3>DevXTechnic</h3>
206+
<p>Personal dev hub and experiments powering this portfolio.</p>
207+
<div class="chips">
208+
<span>Portfolio</span>
209+
<span>UI</span>
210+
<span>Experiments</span>
211+
</div>
212+
<a class="spotlight-link" href="https://github.com/DevXtechnic" target="_blank" rel="noopener noreferrer">Open profile →</a>
213+
</article>
214+
<article class="spotlight-card tilt">
215+
<h3>Arch Ricing Setup</h3>
216+
<p>My Arch + Hyprland setup tuned for speed and visuals.</p>
217+
<div class="chips">
218+
<span>Linux</span>
219+
<span>Hyprland</span>
220+
<span>Dotfiles</span>
221+
</div>
222+
<a class="spotlight-link" href="https://github.com/DevXtechnic" target="_blank" rel="noopener noreferrer">See configs →</a>
223+
</article>
224+
<article class="spotlight-card tilt">
225+
<h3>AI Tools Experiments</h3>
226+
<p>Rapid prototypes exploring LLM workflows and automations.</p>
227+
<div class="chips">
228+
<span>AI</span>
229+
<span>Automation</span>
230+
<span>Prototypes</span>
231+
</div>
232+
<a class="spotlight-link" href="https://github.com/DevXtechnic" target="_blank" rel="noopener noreferrer">Explore lab →</a>
233+
</article>
234+
</div>
235+
</section>
236+
161237
<section id="ai-constellation" class="panel reveal delay-2 skew-right">
162238
<h2>AI Constellation 🤖</h2>
163239
<div class="chaos-grid">

‎og-image.svg‎

Lines changed: 27 additions & 0 deletions
Loading

‎script.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,11 @@ function getStarFieldProfile() {
8686

8787
function resizeCanvas() {
8888
if (!canvas || !ctx) return;
89+
if (prefersReducedMotion) {
90+
canvas.style.display = "none";
91+
return;
92+
}
93+
canvas.style.display = "";
8994
canvas.width = window.innerWidth;
9095
canvas.height = window.innerHeight;
9196

@@ -138,7 +143,9 @@ function drawStars(timestamp = 0) {
138143

139144
resizeCanvas();
140145
window.addEventListener("resize", resizeCanvas);
141-
requestAnimationFrame(drawStars);
146+
if (!prefersReducedMotion) {
147+
requestAnimationFrame(drawStars);
148+
}
142149

143150
function attachTiltBehavior(card) {
144151
let tiltFrame = null;

‎styles.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,26 @@ body {
253253
overflow-x: hidden;
254254
}
255255

256+
.skip-link {
257+
position: fixed;
258+
left: 1rem;
259+
top: -3rem;
260+
z-index: 120;
261+
padding: 0.35rem 0.7rem;
262+
border-radius: 999px;
263+
border: 1px solid var(--border);
264+
background: rgba(6, 12, 26, 0.92);
265+
color: var(--ink);
266+
font-size: 0.82rem;
267+
text-decoration: none;
268+
transition: top var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
269+
}
270+
271+
.skip-link:focus {
272+
top: 0.85rem;
273+
box-shadow: 0 6px 16px rgba(5, 15, 30, 0.4);
274+
}
275+
256276
body[data-theme="liquidglass"] {
257277
background:
258278
radial-gradient(760px 310px at 50% -18%, rgba(237, 246, 255, 0.18), transparent 66%),
@@ -2261,6 +2281,18 @@ body[data-theme="material3"] .avatar-card .android-avatar {
22612281
font-size: 0.8rem;
22622282
}
22632283

2284+
.section-head {
2285+
display: flex;
2286+
flex-wrap: wrap;
2287+
align-items: center;
2288+
justify-content: space-between;
2289+
gap: 0.5rem;
2290+
}
2291+
2292+
.section-head .subtitle {
2293+
margin-top: 0.2rem;
2294+
}
2295+
22642296
.chaos-grid {
22652297
margin-top: 0.48rem;
22662298
display: grid;
@@ -2281,6 +2313,7 @@ body[data-theme="material3"] .avatar-card .android-avatar {
22812313
.chaos-card.c4 { grid-column: span 3; transform: rotate(-0.7deg); }
22822314

22832315
.favorite-grid,
2316+
.spotlight-grid,
22842317
.fact-grid,
22852318
.about-grid,
22862319
.repo-grid,
@@ -2292,6 +2325,7 @@ body[data-theme="material3"] .avatar-card .android-avatar {
22922325
}
22932326

22942327
.favorite-card,
2328+
.spotlight-card,
22952329
.fact-card,
22962330
.glass-card,
22972331
.repo-card,
@@ -2305,6 +2339,7 @@ body[data-theme="material3"] .avatar-card .android-avatar {
23052339
}
23062340

23072341
.favorite-card p,
2342+
.spotlight-card p,
23082343
.fact-card p,
23092344
.glass-card p,
23102345
.repo-card p,
@@ -2316,6 +2351,22 @@ body[data-theme="material3"] .avatar-card .android-avatar {
23162351
line-height: 1.38;
23172352
}
23182353

2354+
.spotlight-card {
2355+
display: grid;
2356+
gap: 0.36rem;
2357+
}
2358+
2359+
.spotlight-card .spotlight-link {
2360+
color: var(--blue-2);
2361+
font-weight: 600;
2362+
text-decoration: none;
2363+
font-size: 0.8rem;
2364+
}
2365+
2366+
.spotlight-card .spotlight-link:hover {
2367+
text-decoration: underline;
2368+
}
2369+
23192370
.repo-meta {
23202371
margin-top: 0.28rem;
23212372
font-size: 0.76rem;

0 commit comments

Comments
 (0)