/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;
/* ─── Mobile breakpoint hook ─────────────────────────────────────── */
function useMobile(bp = 768) {
const [is, setIs] = useState(() => typeof window !== 'undefined' && window.innerWidth <= bp);
useEffect(() => {
const fn = () => setIs(window.innerWidth <= bp);
window.addEventListener('resize', fn, { passive: true });
fn();
return () => window.removeEventListener('resize', fn);
}, [bp]);
return is;
}
/* ─── Reveal hook ────────────────────────────────────────────────── */
function useReveal(threshold = 0.12) {
const ref = useRef(null);
const [visible, setVisible] = useState(false);
useEffect(() => {
if (!ref.current) return;
const io = new IntersectionObserver(
([e]) => { if (e.isIntersecting) { setVisible(true); io.disconnect(); } },
{ threshold }
);
io.observe(ref.current);
return () => io.disconnect();
}, [threshold]);
return [ref, visible];
}
/* ─── Back to top ─────────────────────────────────────────────────── */
function BackToTop() {
const [vis, setVis] = useState(false);
const [hover, setHover] = useState(false);
useEffect(() => {
const fn = () => setVis(window.scrollY > 500);
window.addEventListener('scroll', fn, { passive: true });
return () => window.removeEventListener('scroll', fn);
}, []);
const r = 26;
const circ = +(2 * Math.PI * r).toFixed(1);
return (
window.scrollTo({ top: 0, behavior: 'smooth' })}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
title="Back to top"
style={{
position: 'fixed', bottom: 'calc(28px + env(safe-area-inset-bottom, 0px))', right: 20, zIndex: 120,
width: 44, height: 44, borderRadius: 999,
background: '#0A0A0A', color: '#fff', border: 'none',
cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
opacity: vis ? 1 : 0, pointerEvents: vis ? 'all' : 'none',
transform: vis ? 'translateY(0)' : 'translateY(14px)',
transition: 'opacity 300ms, transform 400ms cubic-bezier(.22,1,.36,1)',
}}>
↑
);
}
/* ─── Nav link — chip fill from bottom ───────────────────────────── */
function NavLink({ label, id, go }) {
const [hover, setHover] = useState(false);
return (
go(id)}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
position: 'relative', display: 'inline-flex', alignItems: 'center',
fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 600,
letterSpacing: '0.02em',
color: hover ? '#fff' : '#0A0A0A',
cursor: 'pointer',
padding: '6px 11px', borderRadius: 7,
overflow: 'hidden',
transition: 'color 240ms cubic-bezier(.22,1,.36,1)',
}}>
{/* Fill chip — spring overshoot from bottom for life */}
{label}
);
}
/* ─── Nav ─────────────────────────────────────────────────────────── */
function Nav() {
const isMobile = useMobile(640);
const [scrolled, setScrolled] = useState(false);
const [ctaHover, setCtaHover] = useState(false);
const [ctaOffset, setCtaOffset] = useState({ x: 0, y: 0 });
const ctaBtnRef = useRef(null);
const handleCtaMove = (e) => {
if (!ctaBtnRef.current) return;
const rect = ctaBtnRef.current.getBoundingClientRect();
setCtaOffset({
x: (e.clientX - rect.left - rect.width / 2) * 0.10,
y: (e.clientY - rect.top - rect.height / 2) * 0.10,
});
};
useEffect(() => {
const fn = () => setScrolled(window.scrollY > 60);
window.addEventListener('scroll', fn, { passive: true });
return () => window.removeEventListener('scroll', fn);
}, []);
const go = (id) => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
return (
window.scrollTo({ top: 0, behavior: 'smooth' })}
style={{
fontFamily: "'Anton', sans-serif", fontSize: 20, letterSpacing: '0.05em',
color: '#000', cursor: 'pointer', lineHeight: 1,
}}>NK
{!isMobile && (
{[['Work','works'],['About','about'],['Skills','skills'],['Contact','contact']].map(([l,id]) => (
)}
{/* CTA — liquid fill interaction system */}
go('contact')}
onMouseEnter={() => setCtaHover(true)}
onMouseLeave={() => { setCtaHover(false); setCtaOffset({ x: 0, y: 0 }); }}
onMouseMove={ctaHover ? handleCtaMove : undefined}
style={{
position: 'relative', overflow: 'hidden',
fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 700,
letterSpacing: ctaHover ? '0.09em' : '0.06em',
textTransform: 'uppercase',
background: '#0A0A0A',
color: ctaHover ? '#0A0A0A' : '#fff',
padding: '10px 12px 10px 20px',
borderRadius: 999, cursor: 'pointer',
border: '1.5px solid #0A0A0A',
display: 'inline-flex', alignItems: 'center', gap: 10,
transform: `translate(${ctaHover ? ctaOffset.x : 0}px, ${ctaHover ? ctaOffset.y : 0}px) scale(${ctaHover ? 1.025 : 1})`,
boxShadow: ctaHover
? '0 10px 36px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.10)'
: '0 2px 10px rgba(0,0,0,0.12)',
transition: ctaHover
? 'transform 140ms cubic-bezier(.22,1,.36,1), letter-spacing 400ms cubic-bezier(.22,1,.36,1), color 120ms 160ms cubic-bezier(.22,1,.36,1), box-shadow 220ms'
: 'transform 500ms cubic-bezier(.34,1.56,.64,1), letter-spacing 300ms cubic-bezier(.22,1,.36,1), color 160ms cubic-bezier(.22,1,.36,1), box-shadow 340ms',
}}>
{/* Liquid fill — directional scaleX, springs in from left, retracts right-to-left */}
Get In Touch
{/* Arrow orbital — inverts with fill */}
→
→
);
}
/* ─── Hero nav item ───────────────────────────────────────────────── */
function HeroNavItem({ num, label, id, go }) {
const [hover, setHover] = useState(false);
return (
go(id)}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
display: 'flex', alignItems: 'center', gap: 12,
background: 'none', border: 'none', cursor: 'pointer', padding: '5px 0',
}}>
{num}
{label}
);
}
/* ─── Hero ─────────────────────────────────────────────────────────── */
function Hero() {
const isMobile = useMobile(640);
const [mounted, setMounted] = useState(false);
const [parallax, setParallax] = useState({ x: 0, y: 0 });
const heroRef = useRef(null);
useEffect(() => { const t = setTimeout(() => setMounted(true), 80); return () => clearTimeout(t); }, []);
useEffect(() => {
const el = heroRef.current;
if (!el) return;
const onMove = (e) => {
const rect = el.getBoundingClientRect();
const nx = (e.clientX - rect.left - rect.width / 2) / (rect.width / 2);
const ny = (e.clientY - rect.top - rect.height / 2) / (rect.height / 2);
setParallax({ x: nx * 20, y: ny * 11 });
};
el.addEventListener('mousemove', onMove, { passive: true });
return () => el.removeEventListener('mousemove', onMove);
}, []);
const go = (id) => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
const navItems = [['01', 'About', 'about'], ['02', 'Works', 'works'], ['03', 'Skills', 'skills'], ['04', 'Contact', 'contact']];
const fade = (delay = 0) => ({
opacity: mounted ? 1 : 0,
transform: mounted ? 'translateY(0)' : 'translateY(22px)',
transition: `opacity 1000ms ${delay}ms cubic-bezier(.22,1,.36,1), transform 1000ms ${delay}ms cubic-bezier(.22,1,.36,1)`,
});
return (
{/* Parallax bg */}
{/* Gradient veil */}
{/* Top meta row — hidden on mobile */}
{['PORTFOLIO \'23 — \'26', 'BASED IN TEL AVIV', 'OPEN FOR WORK'].map((item, i) => (
{i > 0 && {item}
))}
{/* Center nav — left column, hidden on mobile */}
{navItems.map(([num, label, id]) => (
{/* Scroll indicator — bottom-right, hidden on mobile */}
{/* Vertical animated line — taller for presence */}
{/* SCROLL text rotated */}
SCROLL
{/* Separator */}
{/* Name */}
NATANEL KALINER
{/* Tagline */}
Creating experiences that feel alive — game UI, product systems, and interactive moments that resonate.
{/* Discipline pills */}
{['UX / UI', 'GAME DESIGN', 'PRODUCT', 'MOTION'].map(t => (
{t}
))}
);
}
/* ─── About ──────────────────────────────────────────────────────── */
function About() {
const isMobile = useMobile(768);
const [ref, visible] = useReveal(0.12);
const stats = [
{ n: '4', label: 'Years of practice', plus: true },
{ n: '20', label: 'Projects shipped', plus: true },
{ n: 'TLV', label: 'Based in Israel', plus: false },
];
return (
{!isMobile && (
)}
{isMobile ? (
) : (
(01) — About
)}
Designing interactive experiences across{' '}
games ,{' '}
apps ,{' '}
and the web .
My approach is centered on real user experience — understanding real needs, translating them into clear interfaces, and shaping digital journeys that feel effortless. Whether it's an app, a responsive website, or an interactive product, my goal is to deliver designs that not only look good but also solve real problems.
{stats.map((item) => (
{item.n}{item.plus && + }
{item.label}
))}
);
}
/* ─── Marquee — depth layering: filled row + outline row ─────────── */
function Marquee() {
const [paused1, setPaused1] = useState(false);
const [paused2, setPaused2] = useState(false);
const row1 = ['EXPERIENCE DESIGN', 'GAME INTERFACES', 'INTERACTION CRAFT', 'VISUAL SYSTEMS', 'NARRATIVE UX', 'DIGITAL PRODUCTS'];
const row2 = ['FIGMA', 'UI ARCHITECTURE', 'MOTION DESIGN', 'PROTOTYPING', 'PRODUCT THINKING', 'FRAMER', 'CREATIVE DIRECTION'];
/* filled=true → solid white text (foreground, close)
filled=false → outline-only text (recedes, creates depth) */
const track = (items, reverse, speed, paused, setPaused, scale, starDelay, filled) => {
const doubled = [...items, ...items];
const fs = `clamp(${Math.round(28 * scale)}px, ${(4.2 * scale).toFixed(1)}vw, ${Math.round(66 * scale)}px)`;
const starFs = `clamp(${Math.round(11 * scale)}px, ${(1.5 * scale).toFixed(1)}vw, ${Math.round(20 * scale)}px)`;
return (
setPaused(true)}
onMouseLeave={() => setPaused(false)}
style={{
padding: filled ? '22px 0' : '8px 0 16px',
overflow: 'hidden',
position: 'relative', cursor: 'default',
}}>
{/* Wider edge fades for cinematic feel */}
{doubled.map((t, i) => (
{t}
{/* Star: rotation only — no vertical drift */}
✦
))}
{track(row1, false, 44, paused1, setPaused1, 1.0, 0, true)}
{track(row2, true, 22, paused2, setPaused2, 0.72, 1, false)}
);
}
/* ─── Skills ─────────────────────────────────────────────────────── */
const SKILLS = [
{ num: '01', title: 'UI / UX DESIGN', desc: 'Research-led interfaces, flows, and systems that survive contact with real users. From wireframe to shipped product.', tags: ['Wireframing', 'Prototyping', 'Design Systems', 'User Research'] },
{ num: '02', title: 'PRODUCT THINKING', desc: 'End-to-end product design from ambiguous brief to shipped surface — strategy, information architecture, scope.', tags: ['Discovery', 'Strategy', 'IA', 'Roadmapping'] },
{ num: '03', title: 'DIGITAL & WEB', desc: 'Marketing sites, brand systems, and motion-rich landing pages built to perform and convert with intention.', tags: ['Landing Pages', 'Brand', 'Webflow', 'Framer'] },
{ num: '04', title: 'GAME & INTERACTIVE', desc: 'Game UX, in-game interfaces, LiveOps design, and playful micro-interactions that deepen narrative experiences.', tags: ['Game UI', 'LiveOps', 'Motion', 'Narrative UX'] },
];
function SkillRow({ num, title, desc, tags, index, visible }) {
const isMobile = useMobile(768);
const [hover, setHover] = useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
display: 'grid',
gridTemplateColumns: isMobile ? '1fr' : '72px 1fr auto',
gap: isMobile ? 12 : 36,
alignItems: 'center', padding: isMobile ? '22px 16px' : '28px 24px',
borderBottom: '1px solid #DCDCDC',
background: hover ? '#0A0A0A' : '#fff',
color: hover ? '#fff' : '#0A0A0A',
transform: hover ? 'translateX(6px)' : 'translateX(0)',
transition: 'background 320ms cubic-bezier(.22,1,.36,1), color 320ms, transform 380ms cubic-bezier(.22,1,.36,1)',
cursor: 'default',
opacity: visible ? 1 : 0,
transitionDelay: `${150 + index * 80}ms`,
}}>
{!isMobile && {num} }
{isMobile &&
{num} }
{title}
{desc}
{tags.map(t => (
{t}
))}
{num}
}
);
}
function Skills() {
const isMobile = useMobile(768);
const [ref, visible] = useReveal(0.08);
return (
(02) — Disciplines
MY CRAFT
Four disciplines that overlap constantly. The surface shifts from game interface to product to web — the obsession with clarity, rhythm, and craft does not.
{SKILLS.map((s, i) =>
);
}
/* ─── Works ──────────────────────────────────────────────────────── */
const PROJECTS = [
{ id: 'yallaeat', img: 'project/yallaeat-assets/hero.png', title: 'YALLAEAT', subtitle: 'Rescuing food, sustainably.', tag: 'UI/UX Design', duration: '1.5 Months', year: '2025', link: 'project/yallaeat.html' },
{ id: 'twos', img: 'project/soul-assets/01_hero_visual.png', title: 'THE WEIGHT OF THE SOUL', subtitle: 'Symbolic pixel-art RPG — Egyptian mythology, fragment collection & emotional world design.', tag: 'Game Design', duration: '3 Months', year: '2025', link: 'project/soul.html' },
{ id: 'best-fiends', img: 'project/bestfiends-assets/01_hero_visual.png', title: 'BEST FIENDS', subtitle: 'Halloween LiveOps for a mobile game.', tag: 'Game UX', duration: 'Concept', year: '2025', link: 'project/best-fiends.html' },
{ id: 'airbnb', img: 'project/airbnb-assets/01_hero_visual.png', title: 'AIRBNB', subtitle: 'Neighborhood Matters — case study.', tag: 'UX Case Study', duration: '4 Weeks', year: '2023', link: 'project/airbnb.html' },
{ id: 'appcharge', img: 'project-appcharge.png', title: 'LIVEOPS STUDIO', subtitle: 'AI-powered game store builder — from design system to interactive prototype.', tag: 'AI Design System', duration: '8 Weeks', year: '2025', link: 'project/appcharge.html' },
{ id: 'fish-of-fortune', img: 'project/fish-of-fortune-assets/01_hero.png', title: 'FISH OF FORTUNE', subtitle: 'Playable underwater HTML game — AI-directed development, progression systems, and rapid iteration.', tag: 'Game Design', duration: '2 Weeks', year: '2025', link: 'project/fish-of-fortune.html' },
];
function ProjectCard({ project, index, visible, onOpen }) {
const [hover, setHover] = useState(false);
const handleClick = () => {
if (project.link) window.location.href = project.link;
else onOpen(project);
};
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
onClick={handleClick}
style={{
display: 'flex', flexDirection: 'column', gap: 18, cursor: 'pointer',
opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(36px)',
transitionDelay: `${150 + index * 80}ms`,
transition: 'opacity 800ms cubic-bezier(.22,1,.36,1), transform 800ms cubic-bezier(.22,1,.36,1)',
}}>
View Project
→
{project.year}
{project.title}
{project.tag}
{project.subtitle}
{project.duration}
);
}
/* ─── Works contact link — connected to interaction ecosystem ─────── */
function WorksLink({ href, children }) {
const [hover, setHover] = useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 5,
fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 700,
color: '#0A0A0A', textDecoration: 'none',
letterSpacing: hover ? '0.04em' : '0',
transition: 'letter-spacing 360ms cubic-bezier(.22,1,.36,1)',
}}>
{children}
{/* Underline — directional reveal matching fill system */}
{/* Arrow trajectory */}
↗
↗
);
}
/* ─── Works ──────────────────────────────────────────────────────── */
function Works({ onOpenProject }) {
const isMobile = useMobile(768);
const [ref, visible] = useReveal(0.06);
return (
(03) — Selected works
{String(PROJECTS.length).padStart(2, '0')} projects
{/* Year timeline — 2023 / 2026, ghost treatment */}
{[['SELECTED', '2023'], ['WORKS', '2026']].map(([word, year]) => (
{word}
{/* Thin solid connector */}
{/* Year — ghost: same black type at low opacity, much larger */}
{year}
))}
{PROJECTS.map((p, i) =>
)}
More work available upon request
Get in touch
);
}
/* ─── Project modal ───────────────────────────────────────────────── */
function ProjectModal({ project, onClose }) {
useEffect(() => {
document.body.style.overflow = project ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [project]);
if (!project) return null;
return (
e.stopPropagation()} style={{ background: '#fff', borderRadius: 18, maxWidth: 1060, width: '100%', maxHeight: '90vh', overflow: 'auto', position: 'relative' }}>
×
{project.tag} · {project.year}
{project.title}
{project.subtitle}
{[{l:'Role',v:'Lead UX/UI Designer'},{l:'Timeline',v:project.duration},{l:'Tools',v:'Figma, Framer'},{l:'Year',v:project.year}].map(({l,v}) => (
))}
{project.link && (
Full Case Study →
)}
);
}
/* ─── Contact ─────────────────────────────────────────────────────── */
function BoxField({ label, value, onChange, placeholder, multiline, error }) {
const [focus, setFocus] = useState(false);
const Tag = multiline ? 'textarea' : 'input';
return (
{label}
onChange(e.target.value)}
onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
placeholder={placeholder} rows={multiline ? 5 : undefined}
style={{
fontFamily: "'Inter', sans-serif", fontSize: 16, fontWeight: 400,
color: '#0A0A0A', background: '#F7F7F7',
border: `1.5px solid ${focus ? '#0A0A0A' : error ? '#C62828' : '#E0E0E0'}`,
borderRadius: 10, padding: '14px 16px', outline: 'none',
width: '100%', boxSizing: 'border-box',
resize: multiline ? 'none' : undefined,
transition: 'border-color 200ms',
}} />
{error && {error} }
);
}
/* ─── Send button — shimmer + arrow trajectory + magnetic ─────────── */
function SendButton({ status }) {
const btnRef = useRef(null);
const [hover, setHover] = useState(false);
const [offset, setOffset] = useState({ x: 0, y: 0 });
const isDisabled = status === 'sending' || status === 'success';
const handleMove = (e) => {
if (!btnRef.current || isDisabled) return;
const rect = btnRef.current.getBoundingClientRect();
const x = (e.clientX - rect.left - rect.width / 2) * 0.20;
const y = (e.clientY - rect.top - rect.height / 2) * 0.20;
setOffset({ x, y });
};
const bgColor = status === 'success' ? '#166534' : '#0A0A0A';
const borderColor = status === 'success' ? '#166534' : '#0A0A0A';
return (
!isDisabled && setHover(true)}
onMouseLeave={() => { setHover(false); setOffset({ x: 0, y: 0 }); }}
onMouseMove={hover && !isDisabled ? handleMove : undefined}
style={{
position: 'relative', overflow: 'hidden',
padding: '13px 28px', borderRadius: 999,
background: bgColor,
color: hover && !isDisabled ? bgColor : '#fff',
border: `1.5px solid ${borderColor}`,
fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 700,
letterSpacing: hover && !isDisabled ? '0.10em' : '0.08em',
textTransform: 'uppercase',
cursor: isDisabled ? 'default' : 'pointer',
display: 'inline-flex', alignItems: 'center', gap: 12,
opacity: status === 'sending' ? 0.7 : 1,
transform: `translate(${hover && !isDisabled ? offset.x : 0}px, ${hover && !isDisabled ? offset.y : 0}px) scale(${hover && !isDisabled ? 1.02 : 1})`,
transition: hover && !isDisabled
? 'transform 140ms cubic-bezier(.22,1,.36,1), box-shadow 200ms, color 120ms 180ms cubic-bezier(.22,1,.36,1), letter-spacing 420ms cubic-bezier(.22,1,.36,1), background 300ms, border-color 300ms'
: 'transform 520ms cubic-bezier(.34,1.56,.64,1), box-shadow 340ms, color 180ms cubic-bezier(.22,1,.36,1), letter-spacing 300ms cubic-bezier(.22,1,.36,1), background 300ms, border-color 300ms',
boxShadow: hover && !isDisabled
? '0 10px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10)'
: '0 2px 8px rgba(0,0,0,0.10)',
}}>
{/* Liquid fill */}
Sending…
) : status === 'success' ? (
✓ Message Sent!
) : (
<>
Send Message
{/* Arrow — naked trajectory */}
→
→
)}
);
}
/* ─── Social link — arrow trajectory + row shift ─────────────────── */
function SocialLink({ n, label, href }) {
const [hover, setHover] = useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
padding: '20px 0', borderBottom: '1px solid #E8E8E8', textDecoration: 'none',
}}>
{/* Number badge — fills on hover */}
{n}
{/* Label — slides right, same easing as arrow */}
{label}
{/* Arrow — diagonal exit/enter with subtle rotation */}
↗
↗
);
}
function Contact() {
const isMobile = useMobile(768);
const [form, setForm] = useState({ name: '', email: '', message: '' });
const [status, setStatus] = useState('idle'); // 'idle' | 'sending' | 'success' | 'error'
const [errors, setErrors] = useState({});
const set = (k) => (v) => {
setForm(f => ({ ...f, [k]: v }));
if (errors[k]) setErrors(e => ({ ...e, [k]: '' }));
};
const validate = () => {
const e = {};
if (!form.name.trim()) e.name = 'Name is required';
if (!form.email.trim()) e.email = 'Email is required';
else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) e.email = 'Please enter a valid email';
if (!form.message.trim()) e.message = 'Message is required';
return e;
};
const onSubmit = async (e) => {
e.preventDefault();
const errs = validate();
if (Object.keys(errs).length) { setErrors(errs); return; }
setErrors({});
setStatus('sending');
try {
const res = await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: form.name.trim(),
email: form.email.trim(),
message: form.message.trim(),
page_url: window.location.href,
submitted_at: new Date().toLocaleString('en-IL', { timeZone: 'Asia/Jerusalem' }),
botcheck: '', // honeypot — must stay empty
}),
});
const data = await res.json();
if (res.ok && data.success) {
setStatus('success');
setForm({ name: '', email: '', message: '' });
setTimeout(() => setStatus('idle'), 7000);
} else {
console.error('Contact API error:', data);
setStatus('error');
setTimeout(() => setStatus('idle'), 6000);
}
} catch (err) {
console.error('Network error:', err);
setStatus('error');
setTimeout(() => setStatus('idle'), 6000);
}
};
const socials = [
{ n: '001', label: 'Email', href: 'mailto:natanelkaliner@gmail.com' },
{ n: '002', label: 'LinkedIn', href: 'https://www.linkedin.com/in/natanel-kaliner-ab6966395' },
];
return (
);
}
/* ─── Footer link ─────────────────────────────────────────────────── */
function FooterLink({ label, href }) {
const [hover, setHover] = useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
padding: '14px 0', borderTop: '1px solid rgba(255,255,255,0.08)',
textDecoration: 'none',
color: hover ? '#fff' : 'rgba(255,255,255,0.62)',
transition: 'color 220ms cubic-bezier(.22,1,.36,1)',
}}>
{label}
{/* Arrow trajectory on footer links */}
↗
↗
);
}
function Footer() {
const isMobile = useMobile(768);
const go = (id) => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
const socials = [
{ label: 'Email', href: 'mailto:natanelkaliner@gmail.com' },
{ label: 'LinkedIn', href: 'https://www.linkedin.com/in/natanel-kaliner-ab6966395' },
];
return (
NATANEL
Product / UX Designer based in Tel Aviv. Available for freelance, full-time, and collaborations worldwide.
Connect
{socials.map(s =>
)}
·
© {new Date().getFullYear()} Natanel Kaliner
{!isMobile && (
{[['Work','works'],['About','about'],['Skills','skills'],['Contact','contact']].map(([l,id]) => (
go(id)}
style={{ fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 500, color: 'rgba(255,255,255,0.35)', cursor: 'pointer', transition: 'color 200ms', letterSpacing: '0.04em' }}
onMouseEnter={e => e.target.style.color = 'rgba(255,255,255,0.8)'}
onMouseLeave={e => e.target.style.color = 'rgba(255,255,255,0.35)'}>{l}
))}
)}
e.target.style.color = '#fff'}
onMouseLeave={e => e.target.style.color = 'rgba(255,255,255,0.4)'}>
natanelkaliner@gmail.com
);
}
/* ─── App ────────────────────────────────────────────────────────── */
function App() {
const [activeProject, setActiveProject] = useState(null);
return (
<>
setActiveProject(null)} />
)}
)