Prompt Details
Model
(claude-4-7-opus)
Token size
3,333
Example input
[DESIGN_SYSTEM]: Color Palette NameHexUsage RuleContrast NotePrimary — Ink#1A1A2EMain text, headings, primary buttons, nav~16.5:1 on white (#FFFFFF). Exceeds WCAG AA and AAA.Secondary — Slate#3D5A80Links, active states, section borders, subheadings~7.2:1 on white. Passes WCAG AA for body text.Accent — Amber#C9882ACTA highlights, skill badges, "currently open to work" tag~3.4:1 on white; use for large text (18px+) only. Not for body text.Neutral 100#FAFAF8Page background—Neutral 200#EFEFECCard backgrounds, dividers—Neutral 300#D1D0CBPlaceholder text, disabled borders—Neutral 500#8A8A84Captions, metadata, footnote text~4.7:1 on Neutral 100. Passes WCAG AA.Neutral 800#2E2E2EBody copy~14.0:1 on Neutral 100. Exceeds WCAG AA and AAA.Success — Moss#2D6A4FOpen-to-work badge, positive confirmation~7.1:1 on white. Passes WCAG AA.Warning — Sienna#B5451BOutdated section notice, expiry alerts~5.3:1 on white. Passes WCAG AA.Error — Crimson#9B1D20Form validation errors~8.3:1 on white. Passes WCAG AA and AAA.Info — Slate#3D5A80Informational notices (same as Secondary)~7.2:1 on white. Passes WCAG AA. Typography System Heading Font: Cormorant Garamond Weight: 600 (SemiBold) for H1–H2; 500 (Medium) for H3–H4 Rationale: Cormorant Garamond carries old-world editorial authority — the kind of typeface used by law firms, financial publications, and serious institutions. It signals expertise and taste without being ornamental. LevelSize (px)Size (rem)WeightLine HeightH148px3rem6001.15H232px2rem6001.2H322px1.375rem5001.3H418px1.125rem5001.4 Body Font: DM Sans Weight: 400 (Regular) for body, 500 (Medium) for labels and emphasis Line height: 1.65 (generous for scannability) Rationale: DM Sans is geometric without being cold, professional without being dull. It pairs with Cormorant Garamond as a modern counterweight — the serif heading commands attention, the sans-serif body invites reading. Caption / Label Rules Font: DM Sans, 12px / 0.75rem, weight 500 Letter-spacing: 0.06em (wide-set for legibility at small sizes) Transform: UPPERCASE for section labels and metadata categories Color: --color-neutral-500 (#8A8A84) Font Pairing Rationale Cormorant Garamond + DM Sans mirrors the visual language of elite editorial media (think Monocle, Harvard Business Review). For a CV site targeting recruiters, this pairing communicates: "This is a person who makes considered choices." The contrast between the expressive serif and the neutral geometric sans creates a visual hierarchy that guides the eye naturally from title to detail. Spacing and Layout Base unit: 8px TokenValueUsage--spacing-xs4pxIcon gaps, tight inline spacing--spacing-sm8pxInternal component padding (badge, tag)--spacing-md16pxComponent padding, form fields--spacing-lg32pxSection internal spacing--spacing-xl64pxSection vertical margins Grid System BreakpointColumnsGutterPage MarginMobile (< 640px)416px16pxTablet (640–1024px)824px32pxDesktop (> 1024px)1232px64px
[APP_SECTIONS_WITH_TEXT]: Data processing agreement
[SECOND_LANGUAGE]: German
Example output
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src 'self' data:; connect-src 'self';" />
<meta name="referrer" content="strict-origin-when-cross-origin" />
<title id="meta-title">Hayden Smith — Customer Service & Sports Retail Portfolio</title>
<meta name="description" id="meta-desc" content="Year 11 student and keen sports enthusiast seeking casual customer service work in sports retail. Reliable, communicative, and team-focused." />
<link rel="canonical" href="https://haydensmith.example.com/" />
<link rel="alternate" hreflang="en" href="https://haydensmith.example.com/" />
<link rel="alternate" hreflang="de" href="https://haydensmith.example.com/?lang=de" />
<link rel="alternate" hreflang="x-default" href="https://haydensmith.example.com/" />
<!-- Open Graph / Twitter -->
<meta property="og:type" content="website" />
<meta property="og:title" id="og-title" content="Hayden Smith — Customer Service & Sports Retail Portfolio" />
<meta property="og:description" id="og-desc" content="Year 11 student and keen sports enthusiast seeking casual customer service work in sports retail." />
<meta property="og:locale" id="og-locale" content="en_AU" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" id="tw-title" content="Hayden Smith — Customer Service & Sports Retail Portfolio" />
<meta name="twitter:description" id="tw-desc" content="Year 11 student and keen sports enthusiast seeking casual customer service work in sports retail." />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
heading: ['"Cormorant Garamond"', 'Georgia', 'serif'],
body: ['"DM Sans"', 'system-ui', 'sans-serif'],
},
colors: {
ink: '#1A1A2E',
slate: '#3D5A80',
amber: '#C9882A',
n100: '#FAFAF8',
n200: '#EFEFEC',
n300: '#D1D0CB',
n500: '#8A8A84',
n800: '#2E2E2E',
moss: '#2D6A4F',
sienna: '#B5451B',
crimson: '#9B1D20',
},
borderRadius: { card: '1rem' },
},
},
};
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet" />
<style>
:root {
--color-ink:#1A1A2E; --color-slate:#3D5A80; --color-amber:#C9882A;
--color-neutral-100:#FAFAF8; --color-neutral-200:#EFEFEC; --color-neutral-300:#D1D0CB;
--color-neutral-500:#8A8A84; --color-neutral-800:#2E2E2E;
--color-moss:#2D6A4F; --color-sienna:#B5451B; --color-crimson:#9B1D20;
--spacing-xs:4px; --spacing-sm:8px; --spacing-md:16px; --spacing-lg:32px; --spacing-xl:64px;
}
html { scroll-behavior: smooth; }
body { font-family:'DM Sans',system-ui,sans-serif; line-height:1.65; }
h1,h2,h3,h4 { font-family:'Cormorant Garamond',Georgia,serif; }
.label { font-family:'DM Sans',sans-serif; font-size:.75rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline:3px solid var(--color-amber); outline-offset:2px; border-radius:4px;
}
.skip-link { position:absolute; left:8px; top:-48px; z-index:100; background:var(--color-ink); color:#fff; padding:10px 16px; border-radius:8px; transition:top .2s; }
.skip-link:focus { top:8px; }
.hero-glow { background:radial-gradient(ellipse 60% 50% at 70% 20%, rgba(201,136,42,.18), transparent 60%), radial-gradient(ellipse 50% 40% at 20% 80%, rgba(61,90,128,.14), transparent 60%); }
.dark .hero-glow { background:radial-gradient(ellipse 60% 50% at 70% 20%, rgba(201,136,42,.12), transparent 60%), radial-gradient(ellipse 50% 40% at 20% 80%, rgba(61,90,128,.18), transparent 60%); }
.grid-bg { background-image:linear-gradient(rgba(61,90,128,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(61,90,128,.05) 1px,transparent 1px); background-size:48px 48px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior:auto; }
.reveal { opacity:1 !important; transform:none !important; transition:none !important; }
}
</style>
</head>
<body class="bg-n100 text-n800 dark:bg-ink dark:text-n200 antialiased">
<a href="#main" class="skip-link" data-i18n="skip">Skip to main content</a>
<!-- NAVBAR -->
<header class="sticky top-0 z-50 backdrop-blur-md bg-n100/80 dark:bg-ink/80 border-b border-n200 dark:border-white/10">
<nav aria-label="Primary" class="max-w-[1200px] mx-auto px-4 md:px-8 h-16 flex items-center justify-between">
<a href="#home" class="font-heading text-2xl font-semibold text-ink dark:text-n100 tracking-tight">Hayden Smith</a>
<ul class="hidden lg:flex items-center gap-7 text-[15px]">
<li><a class="nav-link hover:text-slate dark:hover:text-amber transition" href="#about" data-i18n="nav.about">About</a></li>
<li><a class="nav-link hover:text-slate dark:hover:text-amber transition" href="#skills" data-i18n="nav.skills">Skills</a></li>
<li><a class="nav-link hover:text-slate dark:hover:text-amber transition" href="#experience" data-i18n="nav.experience">Experience</a></li>
<li><a class="nav-link hover:text-slate dark:hover:text-amber transition" href="#education" data-i18n="nav.education">Education</a></li>
<li><a class="nav-link hover:text-slate dark:hover:text-amber transition" href="#contact" data-i18n="nav.contact">Contact</a></li>
</ul>
<div class="flex items-center gap-2">
<a href="#resume" class="hidden sm:inline-flex items-center px-4 py-2 rounded-lg bg-ink text-n100 dark:bg-amber dark:text-ink text-sm font-medium hover:opacity-90 transition" data-i18n="nav.resume">Resume</a>
<button id="lang-toggle" type="button" aria-label="Switch language to German"
class="w-11 h-11 flex items-center justify-center rounded-lg border border-n300 dark:border-white/15 text-sm font-medium hover:bg-n200 dark:hover:bg-white/10 transition" title="Switch language">
<span id="lang-label">DE</span>
</button>
<button id="theme-toggle" type="button" aria-label="Toggle dark mode" aria-pressed="false"
class="w-11 h-11 flex items-center justify-center rounded-lg border border-n300 dark:border-white/15 hover:bg-n200 dark:hover:bg-white/10 transition">
<svg class="sun w-5 h-5 hidden dark:block" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
<svg class="moon w-5 h-5 block dark:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
</button>
<button id="menu-toggle" type="button" class="lg:hidden w-11 h-11 flex items-center justify-center rounded-lg border border-n300 dark:border-white/15" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
</button>
</div>
</nav>
<div id="mobile-menu" role="region" aria-label="Mobile navigation" class="lg:hidden hidden border-t border-n200 dark:border-white/10 bg-n100 dark:bg-ink">
<ul class="px-4 py-3 flex flex-col gap-1">
<li><a class="block px-3 py-3 rounded-lg hover:bg-n200 dark:hover:bg-white/10" href="#about" data-i18n="nav.about">About</a></li>
<li><a class="block px-3 py-3 rounded-lg hover:bg-n200 dark:hover:bg-white/10" href="#skills" data-i18n="nav.skills">Skills</a></li>
<li><a class="block px-3 py-3 rounded-lg hover:bg-n200 dark:hover:bg-white/10" href="#experience" data-i18n="nav.experience">Experience</a></li>
<li><a class="block px-3 py-3 rounded-lg hover:bg-n200 dark:hover:bg-white/10" href="#education" data-i18n="nav.education">Education</a></li>
<li><a class="block px-3 py-3 rounded-lg hover:bg-n200 dark:hover:bg-white/10" href="#resume" data-i18n="nav.resume">Resume</a></li>
<li><a class="block px-3 py-3 rounded-lg hover:bg-n200 dark:hover:bg-white/10" href="#contact" data-i18n="nav.contact">Contact</a></li>
</ul>
</div>
</header>
<main id="main">
<!-- HERO -->
<section id="home" class="relative overflow-hidden hero-glow">
<div class="absolute inset-0 grid-bg opacity-60" aria-hidden="true"></div>
<div class="relative max-w-[1200px] mx-auto px-4 md:px-8 py-16 md:py-24 grid md:grid-cols-2 gap-12 items-center">
<div class="reveal">
<p class="label text-amber mb-3"><span data-i18n="hero.greeting">Hi, I'm</span> Hayden</p>
<h1 class="font-heading text-5xl md:text-6xl font-semibold text-ink dark:text-n100 leading-[1.1] mb-4" data-i18n="hero.title">Customer Service & Sports Retail</h1>
<p class="font-heading text-2xl text-slate dark:text-amber mb-5" data-i18n="hero.headline">Nine years on the pitch. Ready to bring that energy to your shop floor.</p>
<p class="text-lg text-n800 dark:text-n300 max-w-xl mb-8" data-i18n="hero.intro">I'm a Year 11 student and lifelong sports enthusiast looking for casual or part-time customer service work in sports retail. I learn fast, communicate clearly, and genuinely enjoy helping people.</p>
<div class="flex flex-wrap gap-3">
<a href="#experience" class="inline-flex items-center px-5 py-3 rounded-lg bg-ink text-n100 dark:bg-amber dark:text-ink font-medium hover:opacity-90 transition" data-i18n="hero.cta1">View Experience</a>
<a href="#resume" class="inline-flex items-center px-5 py-3 rounded-lg border border-slate text-slate dark:text-amber dark:border-amber font-medium hover:bg-slate hover:text-n100 dark:hover:bg-amber dark:hover:text-ink transition" data-i18n="hero.cta2">Download Resume</a>
<a href="#contact" class="inline-flex items-center px-5 py-3 rounded-lg border border-n300 dark:border-white/20 font-medium hover:bg-n200 dark:hover:bg-white/10 transition" data-i18n="hero.cta3">Contact Me</a>
</div>
</div>
<div class="reveal flex justify-center md:justify-end">
<div class="relative">
<div class="w-52 h-52 md:w-64 md:h-64 rounded-full bg-gradient-to-br from-slate to-ink dark:from-amber dark:to-slate flex items-center justify-center shadow-2xl" role="img" aria-label="Initials avatar for Hayden Smith">
<span class="font-heading text-7xl font-semibold text-n100">HS</span>
</div>
<span class="absolute -bottom-2 left-1/2 -translate-x-1/2 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-moss text-n100 text-sm font-medium shadow-lg whitespace-nowrap">
<span class="w-2 h-2 rounded-full bg-n100" aria-hidden="true"></span><span data-i18n="hero.badge">Open to work</span>
</span>
</div>
</div>
</div>
</section>
<!-- AVAILABILITY STRIP -->
<section aria-label="Availability" class="border-y border-n200 dark:border-white/10 bg-n200/50 dark:bg-white/5">
<div class="max-w-[1200px] mx-auto px-4 md:px-8 py-6 flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-8 reveal">
<p class="label text-n500" data-i18n="avail.label">Availability</p>
<p class="text-n800 dark:text-n300"><span data-i18n="avail.weekday">Mon–Fri 4:30pm–10:00pm</span> · <span data-i18n="avail.weekend">Sat–Sun 8:00am–11:00pm</span> · <span class="font-medium text-ink dark:text-n100" data-i18n="avail.hours">up to 20 hrs/week</span></p>
</div>
</section>
<!-- ABOUT -->
<section id="about" class="max-w-[1200px] mx-auto px-4 md:px-8 py-16 md:py-20">
<p class="label text-amber mb-3 reveal" data-i18n="about.label">About</p>
<h2 class="font-heading text-4xl font-semibold text-ink dark:text-n100 mb-6 reveal" data-i18n="about.heading">Reliable, hardworking, and genuinely into sport</h2>
<div class="grid md:grid-cols-3 gap-8 items-start">
<p class="md:col-span-2 text-lg text-n800 dark:text-n300 reveal" data-i18n="about.body">I'm a Year 11 student at Park Hill Secondary College, studying Maths, English, Business Management, and VET Sport and Recreation. I've played soccer since I was eight, and I've spent years volunteering around my club — serving in the canteen, umpiring, and coaching junior players. I want to bring that same reliability and people-first attitude to a customer service role in sports retail.</p>
<ul class="grid gap-3 reveal">
<li class="p-5 rounded-card bg-n200 dark:bg-white/5 border border-n300/60 dark:border-white/10"><span class="block font-heading text-3xl text-slate dark:text-amber">9 yrs</span><span class="text-sm text-n500" data-i18n="about.h1">playing soccer</span></li>
<li class="p-5 rounded-card bg-n200 dark:bg-white/5 border border-n300/60 dark:border-white/10"><span class="block font-heading text-3xl text-slate dark:text-amber">2</span><span class="text-sm text-n500" data-i18n="about.h2">club leadership roles</span></li>
<li class="p-5 rounded-card bg-n200 dark:bg-white/5 border border-n300/60 dark:border-white/10"><span class="block font-heading text-3xl text-slate dark:text-amber">20 hrs</span><span class="text-sm text-n500" data-i18n="about.h3">weekly availability</span></li>
</ul>
</div>
</section>
<!-- SKILLS -->
<section id="skills" class="bg-n200/40 dark:bg-white/5 border-y border-n200 dark:border-white/10">
<div class="max-w-[1200px] mx-auto px-4 md:px-8 py-16 md:py-20">
<p class="label text-amber mb-3 reveal" data-i18n="skills.label">Skills</p>
<h2 class="font-heading text-4xl font-semibold text-ink dark:text-n100 mb-8 reveal" data-i18n="skills.heading">What I bring to the team</h2>
<ul id="skills-list" class="grid sm:grid-cols-2 gap-4"></ul>
</div>
</section>
<!-- EXPERIENCE -->
<section id="experience" class="max-w-[1200px] mx-auto px-4 md:px-8 py-16 md:py-20">
<p class="label text-amber mb-3 reveal" data-i18n="exp.label">Experience & Leadership</p>
<h2 class="font-heading text-4xl font-semibold text-ink dark:text-n100 mb-8 reveal" data-i18n="exp.heading">Work and club roles</h2>
<ol id="exp-list" class="relative border-l-2 border-n300 dark:border-white/15 ml-2 space-y-8"></ol>
</section>
<!-- EDUCATION -->
<section id="education" class="bg-n200/40 dark:bg-white/5 border-y border-n200 dark:border-white/10">
<div class="max-w-[1200px] mx-auto px-4 md:px-8 py-16 md:py-20">
<p class="label text-amber mb-3 reveal" data-i18n="edu.label">Education</p>
<h2 class="font-heading text-4xl font-semibold text-ink dark:text-n100 mb-8 reveal" data-i18n="edu.heading">Where I'm studying</h2>
<div class="reveal p-6 rounded-card bg-n100 dark:bg-white/5 border border-n300/60 dark:border-white/10 max-w-2xl">
<h3 class="font-heading text-2xl text-ink dark:text-n100 mb-1" data-i18n="edu.degree">Year 11</h3>
<p class="text-slate dark:text-amber font-medium mb-3" data-i18n="edu.school">Park Hill Secondary College</p>
<p class="text-n800 dark:text-n300"><span class="label text-n500 block mb-1" data-i18n="edu.subjlabel">Subjects</span><span data-i18n="edu.subjects">Maths · English · Business Management · VET Sport and Recreation</span></p>
</div>
</div>
</section>
<!-- RESUME -->
<section id="resume" class="max-w-[1200px] mx-auto px-4 md:px-8 py-16 md:py-20 text-center">
<p class="label text-amber mb-3 reveal" data-i18n="resume.label">Resume</p>
<h2 class="font-heading text-4xl font-semibold text-ink dark:text-n100 mb-3 reveal" data-i18n="resume.heading">Want the full resume?</h2>
<p class="text-lg text-n800 dark:text-n300 mb-6 max-w-xl mx-auto reveal" data-i18n="resume.body">Download a copy of my full CV with references and details.</p>
<a id="resume-dl" href="resume.pdf" download="Hayden-Smith-Resume.pdf" class="reveal inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-ink text-n100 dark:bg-amber dark:text-ink font-medium hover:opacity-90 transition">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
<span data-i18n="resume.btn">Download Resume (PDF)</span>
</a>
</section>
<!-- CONTACT -->
<section id="contact" class="bg-n200/40 dark:bg-white/5 border-y border-n200 dark:border-white/10">
<div class="max-w-[1200px] mx-auto px-4 md:px-8 py-16 md:py-20 grid md:grid-cols-2 gap-12">
<div class="reveal">
<p class="label text-amber mb-3" data-i18n="contact.label">Contact</p>
<h2 class="font-heading text-4xl font-semibold text-ink dark:text-n100 mb-4" data-i18n="contact.heading">Let's talk about a role</h2>
<p class="text-lg text-n800 dark:text-n300 mb-6" data-i18n="contact.body">I'm keen to hear about casual and part-time openings. The quickest way to reach me is email or phone.</p>
<ul class="space-y-3">
<li class="flex items-center gap-3">
<span class="label text-n500 w-20" data-i18n="contact.email">Email</span>
<button id="copy-email" type="button" class="text-slate dark:text-amber hover:underline font-medium" aria-describedby="copy-status">haydensmith@email.com</button>
</li>
<li class="flex items-center gap-3"><span class="label text-n500 w-20" data-i18n="contact.phone">Phone</span><a class="text-slate dark:text-amber hover:underline font-medium" href="tel:+0450112345">0450 123 456</a></li>
<li class="flex items-center gap-3"><span class="label text-n500 w-20" data-i18n="contact.location">Location</span><span class="text-n800 dark:text-n300">Park Hill, 3045</span></li>
</ul>
<p id="copy-status" role="status" aria-live="polite" class="mt-3 text-sm text-moss h-5"></p>
</div>
<form id="contact-form" class="reveal grid gap-4" novalidate>
<div>
<label for="cf-name" class="label text-n500 block mb-1"><span data-i18n="form.name">Name</span> <span class="text-crimson" aria-hidden="true">*</span></label>
<input id="cf-name" name="name" type="text" required aria-required="true" aria-describedby="err-name" class="w-full px-4 py-3 rounded-lg bg-n100 dark:bg-white/10 border border-n300 dark:border-white/15 focus:border-slate" />
<span id="err-name" class="text-sm text-crimson hidden" data-i18n="form.errName">Please enter your name.</span>
</div>
<div>
<label for="cf-email" class="label text-n500 block mb-1"><span data-i18n="form.email">Email</span> <span class="text-crimson" aria-hidden="true">*</span></label>
<input id="cf-email" name="email" type="email" required aria-required="true" aria-describedby="err-email" class="w-full px-4 py-3 rounded-lg bg-n100 dark:bg-white/10 border border-n300 dark:border-white/15 focus:border-slate" />
<span id="err-email" class="text-sm text-crimson hidden" data-i18n="form.errEmail">Please enter a valid email.</span>
</div>
<div>
<label for="cf-msg" class="label text-n500 block mb-1"><span data-i18n="form.message">Message</span> <span class="text-crimson" aria-hidden="true">*</span></label>
<textarea id="cf-msg" name="message" rows="4" required aria-required="true" aria-describedby="err-msg" class="w-full px-4 py-3 rounded-lg bg-n100 dark:bg-white/10 border border-n300 dark:border-white/15 focus:border-slate"></textarea>
<span id="err-msg" class="text-sm text-crimson hidden" data-i18n="form.errMsg">Please enter a message.</span>
</div>
<button type="submit" class="px-6 py-3 rounded-lg bg-ink text-n100 dark:bg-amber dark:text-ink font-medium hover:opacity-90 transition justify-self-start" data-i18n="form.submit">Send Message</button>
<p id="form-status" role="status" aria-live="polite" class="text-sm text-moss"></p>
</form>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="max-w-[1200px] mx-auto px-4 md:px-8 py-10 flex flex-col sm:flex-row items-center justify-between gap-4">
<div>
<p class="font-heading text-xl text-ink dark:text-n100">Hayden Smith</p>
<p class="text-sm text-n500" data-i18n="footer.tag">Customer service · Sports retail · Park Hill</p>
</div>
<p class="text-sm text-n500">© <span id="year"></span> Hayden Smith</p>
<a href="#home" class="inline-flex items-center gap-2 text-sm text-slate dark:text-amber hover:underline" data-i18n="footer.top">Back to top ↑</a>
</footer>
<script>
(function () {
'use strict';
// ---- i18n data (single editable object) ----
var I18N = {
en: {
_title: "Hayden Smith — Customer Service & Sports Retail Portfolio",
_desc: "Year 11 student and keen sports enthusiast seeking casual customer service work in sports retail. Reliable, communicative, and team-focused.",
_locale: "en_AU",
skip: "Skip to main content",
"nav.about":"About","nav.skills":"Skills","nav.experience":"Experience","nav.education":"Education","nav.contact":"Contact","nav.resume":"Resume",
"hero.greeting":"Hi, I'm","hero.title":"Customer Service & Sports Retail",
"hero.headline":"Nine years on the pitch. Ready to bring that energy to your shop floor.",
"hero.intro":"I'm a Year 11 student and lifelong sports enthusiast looking for casual or part-time customer service work in sports retail. I learn fast, communicate clearly, and genuinely enjoy helping people.",
"hero.cta1":"View Experience","hero.cta2":"Download Resume","hero.cta3":"Contact Me","hero.badge":"Open to work",
"avail.label":"Availability","avail.weekday":"Mon–Fri 4:30pm–10:00pm","avail.weekend":"Sat–Sun 8:00am–11:00pm","avail.hours":"up to 20 hrs/week",
"about.label":"About","about.heading":"Reliable, hardworking, and genuinely into sport",
"about.body":"I'm a Year 11 student at Park Hill Secondary College, studying Maths, English, Business Management, and VET Sport and Recreation. I've played soccer since I was eight, and I've spent years volunteering around my club — serving in the canteen, umpiring, and coaching junior players. I want to bring that same reliability and people-first attitude to a customer service role in sports retail.",
"about.h1":"playing soccer","about.h2":"club leadership roles","about.h3":"weekly availability",
"skills.label":"Skills","skills.heading":"What I bring to the team",
"exp.label":"Experience & Leadership","exp.heading":"Work and club roles",
"edu.label":"Education","edu.heading":"Where I'm studying","edu.degree":"Year 11","edu.school":"Park Hill Secondary College","edu.subjlabel":"Subjects","edu.subjects":"Maths · English · Business Management · VET Sport and Recreation",
"resume.label":"Resume","resume.heading":"Want the full resume?","resume.body":"Download a copy of my full CV with references and details.","resume.btn":"Download Resume (PDF)",
"contact.label":"Contact","contact.heading":"Let's talk about a role","contact.body":"I'm keen to hear about casual and part-time openings. The quickest way to reach me is email or phone.","contact.email":"Email","contact.phone":"Phone","contact.location":"Location",
"form.name":"Name","form.email":"Email","form.message":"Message","form.submit":"Send Message","form.errName":"Please enter your name.","form.errEmail":"Please enter a valid email.","form.errMsg":"Please enter a message.",
"footer.tag":"Customer service · Sports retail · Park Hill","footer.top":"Back to top ↑",
copyOk:"Email copied to clipboard.", sent:"Thanks! Your email app should open.",
skills:[
{t:"Customer service",d:"Served customers efficiently in the soccer club canteen, including face-to-face queries and busy periods."},
{t:"Cash handling & numeracy",d:"Operated the canteen register accurately; strong maths results back up careful cash handling."},
{t:"Communication",d:"Received positive feedback from supervisors during work experience for clear, friendly communication."},
{t:"Teamwork",d:"Built strong team habits through playing soccer since the age of eight."},
{t:"Organisation",d:"Handed in every school assignment on time — dependable with deadlines and routines."},
{t:"Responsibility & problem-solving","d":"Took the lead as an umpire and assistant coach, making quick, fair decisions."}
],
exp:[
{role:"Customer Service (Volunteer)",org:"Park Hill Soccer Club Canteen",dates:"Dec 2016 – Mar 2017",pts:["Served customers during busy match days.","Handled cash and operated the cash register."]},
{role:"Newspaper Deliverer",org:"Argo Newsagency",dates:"Jun 2016 – Feb 2017",pts:["Delivered weekend newspapers to homes reliably."]},
{role:"Assistant Coach (Junior Players)",org:"Park Hill Soccer Club",dates:"2017 – present",pts:["Help coach and develop junior players each season."]},
{role:"Soccer Umpire (Under-14s)",org:"Park Hill Soccer Club",dates:"2016 – present",pts:["Umpire under-14 matches, applying rules fairly and confidently."]}
]
},
de: {
_title: "Hayden Smith — Portfolio: Kundenservice & Sport-Einzelhandel",
_desc: "Schüler der 11. Klasse und begeisterter Sportler, der eine Aushilfsstelle im Kundenservice im Sport-Einzelhandel sucht. Zuverlässig, kommunikativ und teamorientiert.",
_locale: "de_DE",
skip: "Zum Hauptinhalt springen",
"nav.about":"Über mich","nav.skills":"Fähigkeiten","nav.experience":"Erfahrung","nav.education":"Ausbildung","nav.contact":"Kontakt","nav.resume":"Lebenslauf",
"hero.greeting":"Hallo, ich bin","hero.title":"Kundenservice & Sport-Einzelhandel",
"hero.headline":"Neun Jahre auf dem Platz. Bereit, diese Energie in Ihr Geschäft zu bringen.",
"hero.intro":"Ich bin SchĂĽler der 11. Klasse und ein lebenslanger Sportbegeisterter und suche eine Aushilfs- oder Teilzeitstelle im Kundenservice im Sport-Einzelhandel. Ich lerne schnell, kommuniziere klar und helfe wirklich gern.",
"hero.cta1":"Erfahrung ansehen","hero.cta2":"Lebenslauf herunterladen","hero.cta3":"Kontakt aufnehmen","hero.badge":"Offen fĂĽr Stellen",
"avail.label":"Verfügbarkeit","avail.weekday":"Mo–Fr 16:30–22:00 Uhr","avail.weekend":"Sa–So 8:00–23:00 Uhr","avail.hours":"bis zu 20 Std./Woche",
"about.label":"Über mich","about.heading":"Zuverlässig, fleißig und wirklich sportbegeistert",
"about.body":"Ich bin Schüler der 11. Klasse am Park Hill Secondary College und belege Mathematik, Englisch, Betriebswirtschaft sowie eine berufsbezogene Ausbildung in Sport und Freizeit. Seit meinem achten Lebensjahr spiele ich Fußball und engagiere mich seit Jahren ehrenamtlich in meinem Verein — im Kiosk, als Schiedsrichter und als Trainer für Nachwuchsspieler. Dieselbe Zuverlässigkeit und meine Freude am Umgang mit Menschen möchte ich in eine Kundenservice-Stelle im Sport-Einzelhandel einbringen.",
"about.h1":"Fußball gespielt","about.h2":"Vereins-Führungsrollen","about.h3":"wöchentliche Verfügbarkeit",
"skills.label":"Fähigkeiten","skills.heading":"Was ich ins Team einbringe",
"exp.label":"Erfahrung & Verantwortung","exp.heading":"Berufs- und Vereinsrollen",
"edu.label":"Ausbildung","edu.heading":"Wo ich lerne","edu.degree":"11. Klasse","edu.school":"Park Hill Secondary College","edu.subjlabel":"Fächer","edu.subjects":"Mathematik · Englisch · Betriebswirtschaft · Berufsausbildung Sport und Freizeit",
"resume.label":"Lebenslauf","resume.heading":"Möchten Sie den vollständigen Lebenslauf?","resume.body":"Laden Sie eine Kopie meines vollständigen Lebenslaufs mit Referenzen und Details herunter.","resume.btn":"Lebenslauf herunterladen (PDF)",
"contact.label":"Kontakt","contact.heading":"Sprechen wir ĂĽber eine Stelle","contact.body":"Ich freue mich ĂĽber Aushilfs- und Teilzeitangebote. Am schnellsten erreichen Sie mich per E-Mail oder Telefon.","contact.email":"E-Mail","contact.phone":"Telefon","contact.location":"Ort",
"form.name":"Name","form.email":"E-Mail","form.message":"Nachricht","form.submit":"Nachricht senden","form.errName":"Bitte geben Sie Ihren Namen ein.","form.errEmail":"Bitte geben Sie eine gĂĽltige E-Mail-Adresse ein.","form.errMsg":"Bitte geben Sie eine Nachricht ein.",
"footer.tag":"Kundenservice · Sport-Einzelhandel · Park Hill","footer.top":"Nach oben ↑",
copyOk:"E-Mail in die Zwischenablage kopiert.", sent:"Danke! Ihr E-Mail-Programm sollte sich öffnen.",
skills:[
{t:"Kundenservice",d:"Kunden im Vereinskiosk effizient bedient, auch bei direkten Anfragen und in StoĂźzeiten."},
{t:"Kassenführung & Rechnen",d:"Die Kiosk-Kasse zuverlässig bedient; gute Mathenoten untermauern den sorgfältigen Umgang mit Bargeld."},
{t:"Kommunikation",d:"Während des Praktikums positives Feedback von Vorgesetzten für klare, freundliche Kommunikation erhalten."},
{t:"Teamarbeit",d:"Starke Teamfähigkeit durch Fußball seit dem achten Lebensjahr entwickelt."},
{t:"Organisation",d:"Alle Schularbeiten pünktlich abgegeben — verlässlich bei Fristen und Abläufen."},
{t:"Verantwortung & Problemlösung",d:"Als Schiedsrichter und Co-Trainer Verantwortung übernommen und schnelle, faire Entscheidungen getroffen."}
],
exp:[
{role:"Kundenservice (ehrenamtlich)",org:"Park Hill Soccer Club – Kiosk",dates:"Dez. 2016 – März 2017",pts:["Kunden an arbeitsreichen Spieltagen bedient.","Bargeld verwaltet und die Kasse bedient."]},
{role:"Zeitungszusteller",org:"Argo Newsagency",dates:"Juni 2016 – Feb. 2017",pts:["Wochenendzeitungen zuverlässig an Haushalte zugestellt."]},
{role:"Co-Trainer (Nachwuchsspieler)",org:"Park Hill Soccer Club",dates:"2017 – heute",pts:["Helfe jede Saison beim Training und der Entwicklung von Nachwuchsspielern."]},
{role:"Fußball-Schiedsrichter (U14)",org:"Park Hill Soccer Club",dates:"2016 – heute",pts:["Leite U14-Spiele und wende die Regeln fair und souverän an."]}
]
}
};
var supported = ['en','de'];
var lang = 'en';
function esc(s){ var d=document.createElement('div'); d.textContent=s; return d.innerHTML; }
function renderLists(t){
var sk = document.getElementById('skills-list');
sk.innerHTML = t.skills.map(function(s){
return '<li class="reveal in p-5 rounded-card bg-n100 dark:bg-white/5 border border-n300/60 dark:border-white/10">'+
'<h3 class="font-heading text-xl text-ink dark:text-n100 mb-1">'+esc(s.t)+'</h3>'+
'<p class="text-n800 dark:text-n300 text-[15px]">'+esc(s.d)+'</p></li>';
}).join('');
var ex = document.getElementById('exp-list');
ex.innerHTML = t.exp.map(function(e){
var pts = e.pts.map(function(p){return '<li>'+esc(p)+'</li>';}).join('');
return '<li class="reveal in ml-6">'+
'<span class="absolute -left-[9px] w-4 h-4 rounded-full bg-amber border-2 border-n100 dark:border-ink" aria-hidden="true"></span>'+
'<div class="p-5 rounded-card bg-n100 dark:bg-white/5 border border-n300/60 dark:border-white/10">'+
'<p class="label text-n500 mb-1">'+esc(e.dates)+'</p>'+
'<h3 class="font-heading text-xl text-ink dark:text-n100">'+esc(e.role)+'</h3>'+
'<p class="text-slate dark:text-amber font-medium mb-2">'+esc(e.org)+'</p>'+
'<ul class="list-disc pl-5 text-n800 dark:text-n300 text-[15px] space-y-1">'+pts+'</ul></div></li>';
}).join('');
}
function applyLang(l){
lang = supported.indexOf(l) >= 0 ? l : 'en';
var t = I18N[lang];
document.documentElement.lang = lang;
document.querySelectorAll('[data-i18n]').forEach(function(el){
var k = el.getAttribute('data-i18n');
if (t[k] != null) el.textContent = t[k];
});
renderLists(t);
// meta
document.title = t._title;
setAttr('meta-title','text'); document.getElementById('meta-title').textContent = t._title;
document.getElementById('meta-desc').setAttribute('content', t._desc);
document.getElementById('og-title').setAttribute('content', t._title);
document.getElementById('og-desc').setAttribute('content', t._desc);
document.getElementById('og-locale').setAttribute('content', t._locale);
document.getElementById('tw-title').setAttribute('content', t._title);
document.getElementById('tw-desc').setAttribute('content', t._desc);
// toggle button
var other = lang === 'en' ? 'de' : 'en';
document.getElementById('lang-label').textContent = other.toUpperCase();
var lt = document.getElementById('lang-toggle');
lt.setAttribute('aria-label', lang === 'en' ? 'Switch language to German' : 'Sprache auf Englisch umstellen');
var st = document.getElementById('copy-status'); if (st && st.dataset.set){ st.textContent=''; st.dataset.set=''; }
try { localStorage.setItem('lang', lang); } catch(e){}
}
function setAttr(){}
// ---- Theme ----
var root = document.documentElement, tt = document.getElementById('theme-toggle');
function setTheme(dark){
root.classList.toggle('dark', dark);
tt.setAttribute('aria-pressed', String(dark));
try { localStorage.setItem('theme', dark ? 'dark':'light'); } catch(e){}
}
(function initTheme(){
var saved; try { saved = localStorage.getItem('theme'); } catch(e){}
if (saved) setTheme(saved === 'dark');
else setTheme(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
})();
tt.addEventListener('click', function(){ setTheme(!root.classList.contains('dark')); });
// ---- Lang init ----
(function initLang(){
var saved; try { saved = localStorage.getItem('lang'); } catch(e){}
if (saved && supported.indexOf(saved) >= 0) { applyLang(saved); return; }
var b = (navigator.language || 'en').slice(0,2).toLowerCase();
applyLang(supported.indexOf(b) >= 0 ? b : 'en');
})();
document.getElementById('lang-toggle').addEventListener('click', function(){
applyLang(lang === 'en' ? 'de' : 'en');
});
// ---- Mobile menu ----
var mt = document.getElementById('menu-toggle'), mm = document.getElementById('mobile-menu');
function closeMenu(){ mm.classList.add('hidden'); mt.setAttribute('aria-expanded','false'); }
mt.addEventListener('click', function(){
var open = mm.classList.toggle('hidden');
mt.setAttribute('aria-expanded', String(!open));
});
mm.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', closeMenu); });
document.addEventListener('keydown', function(e){ if (e.key === 'Escape') closeMenu(); });
// ---- Reveal on scroll ----
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!reduce && 'IntersectionObserver' in window) {
var io = new IntersectionObserver(function(entries){
entries.forEach(function(en){ if (en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); } });
}, { threshold: 0.12 });
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
} else {
document.querySelectorAll('.reveal').forEach(function(el){ el.classList.add('in'); });
}
// ---- Copy email ----
document.getElementById('copy-email').addEventListener('click', function(){
var email = 'haydensmith@email.com', st = document.getElementById('copy-status');
function done(){ st.textContent = I18N[lang].copyOk; st.dataset.set='1'; }
if (navigator.clipboard) navigator.clipboard.writeText(email).then(done, done);
else done();
});
// ---- Contact form (mailto) ----
var form = document.getElementById('contact-form');
form.addEventListener('submit', function(e){
e.preventDefault();
var name = document.getElementById('cf-name'), email = document.getElementById('cf-email'), msg = document.getElementById('cf-msg');
var ok = true;
function err(input, id, bad){
var el = document.getElementById(id);
el.classList.toggle('hidden', !bad);
input.setAttribute('aria-invalid', String(bad));
if (bad) ok = false;
}
err(name,'err-name', !name.value.trim());
err(email,'err-email', !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value.trim()));
err(msg,'err-msg', !msg.value.trim());
if (!ok) return;
var subject = encodeURIComponent('Portfolio enquiry from ' + name.value.trim());
var body = encodeURIComponent(msg.value.trim() + '\n\n— ' + name.value.trim() + ' (' + email.value.trim() + ')');
window.location.href = 'mailto:haydensmith@email.com?subject=' + subject + '&body=' + body;
document.getElementById('form-status').textContent = I18N[lang].sent;
});
// ---- Active nav link ----
var sections = document.querySelectorAll('main section[id]');
var navLinks = document.querySelectorAll('.nav-link');
if ('IntersectionObserver' in window) {
var nav = new IntersectionObserver(function(entries){
entries.forEach(function(en){
if (en.isIntersecting){
navLinks.forEach(function(l){
var on = l.getAttribute('href') === '#' + en.target.id;
l.classList.toggle('text-slate', on);
l.classList.toggle('font-medium', on);
if (on) l.setAttribute('aria-current','true'); else l.removeAttribute('aria-current');
});
}
});
}, { rootMargin: '-40% 0px -55% 0px' });
sections.forEach(function(s){ nav.observe(s); });
}
document.getElementById('year').textContent = new Date().getFullYear();
})();
</script>
</body>
</html>
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
11
Views
CLAUDE-4-7-OPUS
Attach your CV and get a complete, production-ready portfolio site as a single HTML file. Dark mode, accessibility, SEO, optional bilingual support, and your own design system — all baked in. No build step, no frameworks, no manual coding. 🎨✨
...more
Added 3 weeks ago
