Nicholai/nicholai-work-2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update navigation links and global styles for improved branding and user engagement. Changed 'Contact' link to 'Let's Talk' and updated accent color in CSS for a more vibrant design.

Browse Source
This commit is contained in:
Nicholai 2025-12-06 14:04:40 -07:00
parent a721419987
commit 3096a4dabb
3 changed files with 126 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Navigation.astro
View File

@ -9,11 +9,11 @@
<a href="/blog"
class="text-xs font-bold uppercase tracking-widest text-slate-500 hover:text-white transition-colors">02.
Blog</a>
</div>
</div>
<a href="mailto:nicholai@nicholai.work"
<a href="/contact"
class="border border-slate-600 px-6 py-3 text-xs font-bold uppercase tracking-widest hover:border-brand-accent hover:bg-brand-accent/10 transition-all cursor-none-target">
Contact
Let's Talk
</a>
</nav>

122
src/pages/contact.astro Normal file
View File

@ -0,0 +1,122 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
---
<BaseLayout title={`Contact | ${SITE_TITLE}`} description="Get in touch for collaboration or inquiries.">
<section class="container mx-auto px-6 lg:px-12">
<div class="mb-16">
<h1 class="text-6xl md:text-8xl font-bold uppercase text-white mb-4 tracking-tighter">
Let's <span class="text-transparent bg-clip-text bg-gradient-to-tr from-brand-accent to-white">Talk</span>
</h1>
<p class="text-slate-400 font-mono">/// GET IN TOUCH</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-24">
<!-- Contact Form -->
<div class="lg:col-span-8">
<form class="space-y-6" action="#" method="POST">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label for="name" class="text-xs font-bold uppercase tracking-widest text-slate-500">Name</label>
<input
type="text"
id="name"
name="name"
placeholder="Your Name"
class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors placeholder:text-slate-600"
required
/>
</div>
<div class="space-y-2">
<label for="email" class="text-xs font-bold uppercase tracking-widest text-slate-500">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="name@example.com"
class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors placeholder:text-slate-600"
required
/>
</div>
</div>
<div class="space-y-2">
<label for="subject" class="text-xs font-bold uppercase tracking-widest text-slate-500">Subject</label>
<select
id="subject"
name="subject"
class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors appearance-none"
>
<option value="general" class="bg-brand-dark">General Inquiry</option>
<option value="project" class="bg-brand-dark">Project Collaboration</option>
<option value="freelance" class="bg-brand-dark">Freelance Availability</option>
<option value="other" class="bg-brand-dark">Other</option>
</select>
</div>
<div class="space-y-2">
<label for="message" class="text-xs font-bold uppercase tracking-widest text-slate-500">Message</label>
<textarea
id="message"
name="message"
rows="6"
placeholder="Tell me about your project..."
class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors placeholder:text-slate-600 resize-none"
required
></textarea>
</div>
<div class="pt-4">
<button type="submit" class="btn-primary group relative overflow-hidden">
<span class="relative z-10">Send Message</span>
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition-opacity"></div>
</button>
</div>
</form>
</div>
<!-- Sidebar Info -->
<div class="lg:col-span-4 space-y-12">
<div>
<h3 class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-6">Contact Info</h3>
<ul class="space-y-4">
<li>
<a href="mailto:nicholai@nicholai.work" class="text-xl text-white hover:text-brand-accent transition-colors font-mono block">
nicholai@nicholai.work
</a>
</li>
<li>
<a href="tel:7196604281" class="text-xl text-white hover:text-brand-accent transition-colors font-mono block">
719 660 4281
</a>
</li>
</ul>
</div>
<div>
<h3 class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-6">Location</h3>
<p class="text-lg text-slate-300">
Colorado Springs, CO<br/>
Mountain Standard Time (MST)
</p>
</div>
<div class="pt-8 border-t border-white/10">
<h3 class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-6">Availability</h3>
<div class="flex items-center gap-3">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-accent opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-brand-accent"></span>
</span>
<span class="text-sm font-bold text-brand-accent uppercase tracking-wide">Open to opportunities</span>
</div>
<p class="mt-4 text-slate-400 text-sm leading-relaxed">
Currently accepting new projects for Q3 2026. Reach out to schedule a discovery call.
</p>
</div>
</div>
</div>
</section>
</BaseLayout>

2
src/styles/global.css
View File

@ -3,7 +3,7 @@
@theme {
--color-brand-dark: #0B0D11;
--color-brand-panel: #151921;
--color-brand-accent: #FFB84C;
--color-brand-accent: #ff4d00;
--color-brand-cyan: #22D3EE;
--color-brand-red: #E11D48;