feat: /hire page, drop LinkedIn, About location -> SDU · Denmark

src/app/hire/page.tsx

@@ -0,0 +1,159 @@
+import Link from 'next/link';
+
+export const metadata = {
+  title: 'Hire me — Altan Esmer',
+  description:
+    'Open to full-time, contract, and freelance software engineering work.',
+};
+
+const openTo = [
+  'Full-time roles',
+  'Contract engagements',
+  'Freelance projects',
+  'Technical consulting',
+];
+
+export default function HirePage() {
+  return (
+    <section style={{ padding: '120px 0 100px' }}>
+      <div className="wrap" style={{ maxWidth: 760, margin: '0 auto' }}>
+        <div className="section-head">
+          <span className="num">06 //</span>
+          <span>./hire-me</span>
+          <span className="line" />
+        </div>
+
+        <h1
+          className="display"
+          style={{
+            fontWeight: 700,
+            fontSize: 'clamp(2.4rem,5vw,4.4rem)',
+            letterSpacing: '-0.04em',
+            lineHeight: 0.95,
+            margin: '0 0 16px',
+          }}
+        >
+          Let&apos;s work
+          <br />
+          <span className="grad-text">together.</span>
+        </h1>
+
+        <p
+          style={{
+            color: 'var(--muted)',
+            fontSize: 16,
+            maxWidth: 560,
+            marginBottom: 32,
+          }}
+        >
+          I&apos;m a full-stack engineer focused on developer tooling and
+          performant web experiences. If you&apos;re building something
+          interesting, I&apos;d love to hear about it.
+        </p>
+
+        <div
+          style={{
+            background: 'rgba(13,18,48,.7)',
+            border: '1px solid var(--line)',
+            borderRadius: 14,
+            padding: '24px 28px',
+            fontFamily: "'JetBrains Mono', ui-monospace, monospace",
+          }}
+        >
+          <div
+            style={{
+              fontSize: 11,
+              color: 'var(--dim)',
+              textTransform: 'uppercase',
+              letterSpacing: '0.14em',
+              marginBottom: 14,
+            }}
+          >
+            open to
+          </div>
+          <ul
+            style={{
+              listStyle: 'none',
+              padding: 0,
+              margin: 0,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 8,
+            }}
+          >
+            {openTo.map((item) => (
+              <li
+                key={item}
+                style={{
+                  fontSize: 14,
+                  color: 'var(--text)',
+                  display: 'flex',
+                  gap: 10,
+                  alignItems: 'center',
+                }}
+              >
+                <span style={{ color: 'var(--magenta)' }}>▸</span>
+                {item}
+              </li>
+            ))}
+          </ul>
+
+          <div
+            style={{
+              marginTop: 28,
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 12,
+            }}
+          >
+            <a
+              href="mailto:esmeraltan@gmail.com?subject=Hi%20Altan"
+              data-hot
+              style={{
+                fontFamily: "'JetBrains Mono', ui-monospace, monospace",
+                fontSize: 13,
+                color: 'var(--text)',
+                background:
+                  'linear-gradient(120deg, rgba(236,72,153,.25), rgba(139,92,246,.25))',
+                border: '1px solid rgba(236,72,153,.4)',
+                padding: '10px 16px',
+                borderRadius: 10,
+                textDecoration: 'none',
+              }}
+            >
+              $ ./email-altan
+            </a>
+            <Link
+              href="/#contact"
+              style={{
+                fontFamily: "'JetBrains Mono', ui-monospace, monospace",
+                fontSize: 13,
+                color: 'var(--muted)',
+                border: '1px solid var(--line)',
+                padding: '10px 16px',
+                borderRadius: 10,
+                textDecoration: 'none',
+              }}
+            >
+              or use the contact form
+            </Link>
+          </div>
+        </div>
+
+        <Link
+          href="/"
+          style={{
+            display: 'inline-block',
+            marginTop: 32,
+            fontFamily: "'JetBrains Mono', ui-monospace, monospace",
+            fontSize: 13,
+            color: 'var(--muted)',
+            textDecoration: 'none',
+          }}
+        >
+          ← back home
+        </Link>
+      </div>
+    </section>
+  );
+}

src/components/AboutSection.tsx

@@ -24,7 +24,7 @@ const timelineItems = [
   {
     year: '2018 — 2022',
     title: 'B.Sc. Computer Science',
-    meta: 'SDU · Cyprus',
+    meta: 'SDU · Denmark',
     body: 'Side-quest: organized student hackathons. Thesis on incremental computation.',
   },
 ]
@@ -124,7 +124,7 @@ export default function AboutSection() {
               {'  '}
               <span style={{ color: '#5eead4' }}>based</span>
               {': '}
-              <span style={{ color: '#b6e7d6' }}>{'\'Cyprus / EU\''}</span>
+              <span style={{ color: '#b6e7d6' }}>{'\'Denmark / EU\''}</span>
               {','}
             </div>
             <div>

src/components/ContactSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, FormEvent } from 'react';
+import { useState, useEffect, useRef, FormEvent } from 'react';
 
 interface FormState {
   name: string;
@@ -12,6 +12,8 @@ interface FormState {
 }
 
 export default function ContactSection() {
+  const sectionRef = useRef<HTMLElement>(null);
+
   const [form, setForm] = useState<FormState>({
     name: '',
     email: '',
@@ -21,6 +23,21 @@ export default function ContactSection() {
     errors: {},
   });
 
+  useEffect(() => {
+    const el = sectionRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) entry.target.classList.add('in');
+        });
+      },
+      { threshold: 0.12 }
+    );
+    el.querySelectorAll('.reveal').forEach((t) => observer.observe(t));
+    return () => observer.disconnect();
+  }, []);
+
   useEffect(() => {
     if (!form.submitted) return;
     const timer = setTimeout(() => {
@@ -53,7 +70,7 @@ export default function ContactSection() {
       .join('\n');
 
     const mailto =
-      `mailto:altan.esmer@gmail.com` +
+      `mailto:esmeraltan@gmail.com` +
       `?subject=${encodeURIComponent('Hi Altan')}` +
       `&body=${encodeURIComponent(body)}`;
 
@@ -68,7 +85,12 @@ export default function ContactSection() {
   }
 
   return (
-    <section id="contact" className="contact" style={{ padding: '100px 0' }}>
+    <section
+      id="contact"
+      ref={sectionRef}
+      className="contact"
+      style={{ padding: '100px 0' }}
+    >
       <div
         className="wrap contact-wrap"
         style={{ maxWidth: 760, margin: '0 auto', padding: '0 24px' }}

src/components/Footer.tsx

@@ -59,11 +59,7 @@ export default function Footer() {
               {[
                 { href: 'https://github.com/AltanEsmer', label: 'github.com/AltanEsmer' },
                 { href: 'https://github.com/AlesSystems', label: 'github.com/AlesSystems' },
-                { href: 'https://twitter.com/altanesmer', label: 'twitter.com/altanesmer' },
-                {
-                  href: 'https://linkedin.com/in/altanesmer',
-                  label: 'linkedin.com/in/altanesmer',
-                },
+                { href: 'mailto:esmeraltan@gmail.com', label: 'esmeraltan@gmail.com' },
               ].map(({ href, label }) => (
                 <a
                   key={href}

src/components/HeroSection.tsx

@@ -75,7 +75,7 @@ function TerminalBody() {
         <span style={{ paddingLeft: '1.5em', display: 'block' }}>
           <span style={{ color: 'var(--violet)' }}>&quot;based&quot;</span>
           <span style={{ color: 'var(--dim)' }}>: </span>
-          <span style={{ color: '#b6e7d6' }}>&quot;Cyprus / EU&quot;</span>
+          <span style={{ color: '#b6e7d6' }}>&quot;Denmark / EU&quot;</span>
           <span style={{ color: 'var(--dim)' }}>,</span>
         </span>
       ),
@@ -296,7 +296,7 @@ export default function HeroSection() {
               />
               open to work · remote / EU
             </span>
-            <span>📍 based in Cyprus</span>
+            <span>📍 based in Denmark</span>
             <span>
               uptime:{' '}
               <b style={{ color: 'var(--text)', fontWeight: 500 }}>

src/components/Nav.tsx

@@ -160,7 +160,7 @@ export default function Nav() {
 
         {/* CTA */}
         <a
-          href="#contact"
+          href="/hire"
           data-hot
           style={{
             fontFamily: "'JetBrains Mono', ui-monospace, monospace",