Turn template into Keith Rana's portfolio with real content, photos and bundled font
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Msa87P1aZQSV9MWhEu3VfJ
This commit is contained in:
38 files changed
+491
-271
No files matched your search
@@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
dist
|
||||
@@ -0,0 +1,45 @@
|
||||
# PRD: Keith Rana Portfolio (built from the "Jack 3D Creator" template)
|
||||
|
||||
## The restaurant analogy
|
||||
| Stage | Restaurant | This project |
|
||||
|---|---|---|
|
||||
| Phase 1 (done) | Food stand: one great dish, open today | The full single-page site with Keith's real content, photos and animations |
|
||||
| Phase 2 | Small restaurant: a few tables, a real menu | Make it easy to edit (content in one file), better mobile + accessibility |
|
||||
| Phase 3 | Full restaurant: front of house + back of house | Real contact form, email, project pages, CMS, analytics |
|
||||
|
||||
Front of house = what visitors see. Back of house = forms, email, storage, security.
|
||||
|
||||
## Core features
|
||||
1. Hero: giant "Hi, i'm jack" title, nav, magnetic portrait, Contact button
|
||||
2. Marquee: two rows of GIFs sliding left/right as you scroll
|
||||
3. About: floating 3D icons + words that light up as you scroll
|
||||
4. Services: white panel, 5 numbered services
|
||||
5. Projects: 3 cards that stack and shrink as you scroll
|
||||
6. Reusable parts: ContactButton, LiveProjectButton, FadeIn, Magnet, AnimatedText
|
||||
|
||||
## Phased roadmap
|
||||
**Phase 1 — Food stand (today).** Static site, all 5 sections, all animations, responsive.
|
||||
Done when: builds with no errors; page loads with no console errors; every button/link works; all image URLs load.
|
||||
|
||||
**Phase 2 — Small restaurant.** Nav links smooth-scroll to sections, Contact Me opens a mailto, content moved into editable data files, reduced-motion support, alt text, SEO tags, image fallbacks.
|
||||
|
||||
**Phase 3 — Full restaurant.** Contact form with a backend (server-side validation, spam protection, rate limits), project detail pages, CMS, analytics, hosting.
|
||||
|
||||
## Test ladder (each step must pass before the next)
|
||||
1. Page loads with no errors
|
||||
2. Buttons / links / forms work
|
||||
3. Real external APIs/assets work (images load)
|
||||
4. Security check (no secrets in code, safe external links, dependency audit)
|
||||
|
||||
## Security notes
|
||||
Phase 1 has no forms, no logins, no secrets, so risk is low. External links use rel="noopener noreferrer". When Phase 3 adds a form, validation and spam protection must live on the server, and API keys must never be in front-end code.
|
||||
|
||||
## Phase 1 status (done)
|
||||
- Content comes from Keith's existing portfolio: profile, 8 capabilities, 3 roles + 5 earlier roles, 4 projects, 10 certifications, contact details (all in `src/data/content.ts`).
|
||||
- Sections: Hero (portrait), scrolling photo/skills rows, About, Capability, Experience, Projects (stacking cards), Credentials, Contact.
|
||||
- Photos and the Kanit font ship inside the site (no outside image hosts needed).
|
||||
- Tested at 360, 390, 768, 1024, 1440 and 1920 px wide: no sideways scroll, no console errors, all images load.
|
||||
- Cloud preview: `node scripts/build-preview.mjs out.html` builds one self-contained page.
|
||||
|
||||
## Not used yet
|
||||
- `it_helpdesk.db` (87 IT help-desk FAQs) was supplied but is not portfolio content. Candidate for a Phase 2 FAQ section if wanted.
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Keith Rana, IT Service Delivery Manager in Melbourne, Australia." />
|
||||
<title>Keith Rana -- IT Service Delivery</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+2754
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "keith-portfolio",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc --noEmit && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/kanit": "^5.3.0",
|
||||
"framer-motion": "^12.38.0",
|
||||
"lucide-react": "^0.344.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.5",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.18",
|
||||
"postcss": "^8.4.35",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.5.3",
|
||||
"vite": "^5.4.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
plugins: { tailwindcss: {}, autoprefixer: {} },
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
// Builds ONE self-contained HTML page for the Claude cloud preview.
|
||||
// Claude's cloud pages block outside images and files, so photos and fonts are baked in.
|
||||
// Usage: node scripts/build-preview.mjs <output.html>
|
||||
import { execFileSync } from 'node:child_process';
|
||||
import { readFileSync, readdirSync, writeFileSync } from 'node:fs';
|
||||
|
||||
const out = process.argv[2] ?? 'preview.html';
|
||||
execFileSync('npm', ['run', 'build'], { stdio: 'inherit', env: { ...process.env, INLINE: '1' } });
|
||||
|
||||
const dir = 'dist/assets/';
|
||||
const files = readdirSync(dir);
|
||||
const js = readFileSync(dir + files.find((f) => f.endsWith('.js')), 'utf8').replace(/<\/script/g, '<\\/script');
|
||||
const css = readFileSync(dir + files.find((f) => f.endsWith('.css')), 'utf8');
|
||||
|
||||
const html = `<meta charset="utf-8">
|
||||
<title>Keith Rana Portfolio</title>
|
||||
<style>${css}
|
||||
html,body{background:#0C0C0C}</style>
|
||||
<div id="root"></div>
|
||||
<script type="module">${js}</script>
|
||||
`;
|
||||
writeFileSync(out, html);
|
||||
const mb = Buffer.byteLength(html) / 1048576;
|
||||
console.log(`wrote ${out} (${mb.toFixed(1)} MB)${mb > 16 ? ' WARNING: over the 16 MB page limit' : ''}`);
|
||||
@@ -0,0 +1,23 @@
|
||||
import HeroSection from './sections/HeroSection';
|
||||
import MarqueeSection from './sections/MarqueeSection';
|
||||
import AboutSection from './sections/AboutSection';
|
||||
import ServicesSection from './sections/ServicesSection';
|
||||
import ExperienceSection from './sections/ExperienceSection';
|
||||
import ProjectsSection from './sections/ProjectsSection';
|
||||
import CredentialsSection from './sections/CredentialsSection';
|
||||
import ContactSection from './sections/ContactSection';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<main style={{ background: '#0C0C0C', overflowX: 'clip' }}>
|
||||
<HeroSection />
|
||||
<MarqueeSection />
|
||||
<AboutSection />
|
||||
<ServicesSection />
|
||||
<ExperienceSection />
|
||||
<ProjectsSection />
|
||||
<CredentialsSection />
|
||||
<ContactSection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 641 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
@@ -0,0 +1,30 @@
|
||||
import { useRef } from 'react';
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import type { MotionValue } from 'framer-motion';
|
||||
|
||||
function Char({ char, index, total, progress }: { char: string; index: number; total: number; progress: MotionValue<number> }) {
|
||||
const start = index / total;
|
||||
const end = start + 1 / total;
|
||||
const opacity = useTransform(progress, [start, end], [0.2, 1]);
|
||||
return (
|
||||
<span className="relative">
|
||||
<span className="invisible">{char}</span>
|
||||
<motion.span className="absolute left-0 top-0" style={{ opacity }}>
|
||||
{char}
|
||||
</motion.span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AnimatedText({ text, className, style }: { text: string; className?: string; style?: React.CSSProperties }) {
|
||||
const ref = useRef<HTMLParagraphElement>(null);
|
||||
const { scrollYProgress } = useScroll({ target: ref, offset: ['start 0.8', 'end 0.2'] });
|
||||
const chars = Array.from(text);
|
||||
return (
|
||||
<p ref={ref} className={className} style={style} aria-label={text}>
|
||||
{chars.map((c, i) =>
|
||||
c === ' ' ? ' ' : <Char key={i} char={c} index={i} total={chars.length} progress={scrollYProgress} />
|
||||
)}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { profile } from "../data/content";
|
||||
|
||||
export default function ContactButton() {
|
||||
return (
|
||||
<a
|
||||
href={`mailto:${profile.email}`}
|
||||
className="inline-block whitespace-nowrap rounded-full px-8 py-3 text-xs font-medium uppercase tracking-widest text-white sm:px-10 sm:py-3.5 sm:text-sm md:px-12 md:py-4 md:text-base"
|
||||
style={{
|
||||
background: 'linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%)',
|
||||
boxShadow: '0px 4px 4px rgba(181, 1, 167, 0.25), 4px 4px 12px #7721B1 inset',
|
||||
outline: '2px solid white',
|
||||
outlineOffset: '-3px',
|
||||
}}
|
||||
>
|
||||
Contact Me
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import type { MotionProps } from 'framer-motion';
|
||||
import type { ComponentType, ElementType, ReactNode } from 'react';
|
||||
|
||||
type FadeInProps = {
|
||||
children: ReactNode;
|
||||
delay?: number;
|
||||
duration?: number;
|
||||
x?: number;
|
||||
y?: number;
|
||||
className?: string;
|
||||
as?: ElementType;
|
||||
};
|
||||
|
||||
const cache = new Map<ElementType, ComponentType<MotionProps & { className?: string }>>();
|
||||
const getMotion = (el: ElementType) => {
|
||||
if (!cache.has(el)) cache.set(el, motion.create(el as 'div') as ComponentType<MotionProps & { className?: string }>);
|
||||
return cache.get(el)!;
|
||||
};
|
||||
|
||||
export default function FadeIn({
|
||||
children,
|
||||
delay = 0,
|
||||
duration = 0.7,
|
||||
x = 0,
|
||||
y = 30,
|
||||
className,
|
||||
as = 'div',
|
||||
}: FadeInProps) {
|
||||
const Component = getMotion(as);
|
||||
return (
|
||||
<Component
|
||||
className={className}
|
||||
initial={{ opacity: 0, x, y }}
|
||||
whileInView={{ opacity: 1, x: 0, y: 0 }}
|
||||
viewport={{ once: true, margin: '50px', amount: 0 }}
|
||||
transition={{ duration, delay, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
type MagnetProps = {
|
||||
children: ReactNode;
|
||||
padding?: number;
|
||||
strength?: number;
|
||||
activeTransition?: string;
|
||||
inactiveTransition?: string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function Magnet({
|
||||
children,
|
||||
padding = 100,
|
||||
strength = 2,
|
||||
activeTransition = 'transform 0.3s ease-out',
|
||||
inactiveTransition = 'transform 0.6s ease-in-out',
|
||||
className,
|
||||
}: MagnetProps) {
|
||||
const [active, setActive] = useState(false);
|
||||
const [pos, setPos] = useState({ x: 0, y: 0 });
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const onMove = (e: MouseEvent) => {
|
||||
if (!ref.current) return;
|
||||
const { left, top, width, height } = ref.current.getBoundingClientRect();
|
||||
const cx = left + width / 2;
|
||||
const cy = top + height / 2;
|
||||
const dx = Math.abs(cx - e.clientX);
|
||||
const dy = Math.abs(cy - e.clientY);
|
||||
if (dx < width / 2 + padding && dy < height / 2 + padding) {
|
||||
setActive(true);
|
||||
setPos({ x: (e.clientX - cx) / strength, y: (e.clientY - cy) / strength });
|
||||
} else {
|
||||
setActive(false);
|
||||
setPos({ x: 0, y: 0 });
|
||||
}
|
||||
};
|
||||
window.addEventListener('mousemove', onMove);
|
||||
return () => window.removeEventListener('mousemove', onMove);
|
||||
}, [padding, strength]);
|
||||
|
||||
return (
|
||||
<div ref={ref} className={className} style={{ position: 'relative', display: 'inline-block' }}>
|
||||
<div
|
||||
style={{
|
||||
transform: `translate3d(${pos.x}px, ${pos.y}px, 0)`,
|
||||
transition: active ? activeTransition : inactiveTransition,
|
||||
willChange: 'transform',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import portrait from '../assets/portrait.jpg';
|
||||
import leadership from '../assets/leadership.webp';
|
||||
import systems from '../assets/systems.webp';
|
||||
import signalMark from '../assets/signal-mark.webp';
|
||||
|
||||
export const images = { portrait, leadership, systems, signalMark };
|
||||
|
||||
export const profile = {
|
||||
name: 'Keith Rana',
|
||||
firstName: 'keith',
|
||||
role: 'IT Service Delivery Manager',
|
||||
location: 'Melbourne, Australia',
|
||||
email: 'keith_rana@yahoo.com',
|
||||
phone: '04 1668 7558',
|
||||
phoneHref: 'tel:+61416687558',
|
||||
tagline: 'an it service delivery manager keeping critical services steady while the work keeps moving',
|
||||
};
|
||||
|
||||
export const aboutText =
|
||||
'A results-driven IT professional with over 16 years of experience across telecommunications, education, and managed services, including more than 8 years leading technical teams. I make technology service delivery visible, stable, and continually better. Let\'s make delivery more dependable.';
|
||||
|
||||
export const stats = [
|
||||
{ value: '16+', label: 'Years in IT' },
|
||||
{ value: '8+', label: 'Years leading' },
|
||||
];
|
||||
|
||||
export const expertise = [
|
||||
{ name: 'IT Service Delivery', description: 'End-to-end accountability for service delivery against agreed SLAs, with reporting to senior stakeholders.' },
|
||||
{ name: 'Enterprise Infrastructure', description: 'Enterprise network, server and endpoint environments, including Fortinet, Zscaler and SCCM.' },
|
||||
{ name: 'ITIL & Change Control', description: 'ITIL process, measured change and service reporting that improve compliance and service quality.' },
|
||||
{ name: 'Incident & Escalation Leadership', description: 'Major incident management, workload prioritisation and escalations led with a calm, evidence-based approach.' },
|
||||
{ name: 'Vendor & Stakeholder Management', description: 'Clear ownership of the vendor relationships that sit behind every service the business relies on.' },
|
||||
{ name: 'Microsoft 365 & Intune', description: 'Hands-on depth in Microsoft 365, Azure and Intune across cloud applications and end-user devices.' },
|
||||
{ name: 'Cybersecurity & Access', description: 'Security, identity and access practices built into daily operations, backed by Microsoft security certifications.' },
|
||||
{ name: 'Team Development', description: 'Coaching, performance conversations, training and mentoring that grow capable, confident support teams.' },
|
||||
];
|
||||
|
||||
export const roles = [
|
||||
{
|
||||
dates: 'Oct 2023 — Present',
|
||||
role: 'IT Service Delivery Manager',
|
||||
organisation: 'AFL Telecommunications',
|
||||
summary: 'Leading the daily delivery of business-critical IT services, balancing prompt resolution, availability, security, and a dependable experience for end users.',
|
||||
points: [
|
||||
'Own service operations across cloud applications, Windows and Linux environments, desktops, virtual apps, networks, and end-user support.',
|
||||
'Lead a support and service-desk team through coaching, performance conversations, workload prioritisation, and escalations.',
|
||||
'Use incident patterns, service-performance reporting, change controls, and feedback loops to improve ITIL compliance and service quality.',
|
||||
],
|
||||
},
|
||||
{
|
||||
dates: 'Dec 2021 — Sep 2023',
|
||||
role: 'Information Technology Manager',
|
||||
organisation: 'Suzanne Cory High School',
|
||||
summary: 'Managed technology services, documentation, knowledge systems, infrastructure capacity, and Microsoft 365 operations in a fast-moving education environment.',
|
||||
points: [
|
||||
'Oversaw Microsoft 365 services, endpoint operations, security, quality, and the administration and maintenance of core IT infrastructure.',
|
||||
'Led a skilled IT specialist team with a focus on strategic direction, mentoring, service effectiveness, and superior customer outcomes.',
|
||||
'Coordinated systems migrations, upgrades, and deployments to defined scope and schedule constraints.',
|
||||
],
|
||||
},
|
||||
{
|
||||
dates: 'May 2018 — Nov 2021',
|
||||
role: 'IT Support Specialist — Team Lead',
|
||||
organisation: 'Wesley College Melbourne',
|
||||
summary: 'Directed a six-person IT support team and helped translate organisational priorities into reliable, well-documented technical service.',
|
||||
points: [
|
||||
'Established project scope, supported IT initiatives, and aligned delivery activity with strategic objectives.',
|
||||
'Worked across Casper Management, AirWatch MDM, Microsoft Intune, and operational processes informed by ITIL principles.',
|
||||
'Identified skills gaps, organised training, coordinated with project managers, and maintained clear project documentation.',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const foundations = [
|
||||
{ role: 'IT Support Officer', organisation: 'Mentone Grammar School', dates: 'Apr 2017 — Dec 2017' },
|
||||
{ role: 'IT Project Manager', organisation: 'Archirayan Infotech', dates: 'Aug 2015 — Jul 2016' },
|
||||
{ role: 'IT Technical Support', organisation: 'Has Tech Solutions', dates: 'Aug 2014 — Jul 2015' },
|
||||
{ role: 'IT Technical Engineer', organisation: 'Hindustan Cyber Services', dates: 'Oct 2012 — Aug 2014' },
|
||||
{ role: 'Assistant Systems Analyst', organisation: 'Prutha Technologies', dates: 'Oct 2009 — Sep 2010' },
|
||||
];
|
||||
|
||||
export const projects = [
|
||||
{
|
||||
category: 'Network',
|
||||
name: 'Network project',
|
||||
body: 'Fortinet Firewall upgrade, Fortinet 48P Switches upgrade, Fortinet access point uplift, and network topology upgrade.',
|
||||
delivered: ['Fortinet firewall upgrade', 'Fortinet 48P switches upgrade', 'Fortinet access point uplift', 'Network topology upgrade'],
|
||||
images: [systems, leadership] as [string, string],
|
||||
position: ['center', 'center'] as [string, string],
|
||||
},
|
||||
{
|
||||
category: 'Infrastructure',
|
||||
name: 'Server upgrade',
|
||||
body: 'Upgraded the server with existing VMs and services, migrated data, and configured updated network settings.',
|
||||
delivered: ['Server upgraded with existing VMs and services', 'Data migrated', 'Updated network settings configured'],
|
||||
images: [leadership, systems] as [string, string],
|
||||
position: ['70% 40%', '20% 60%'] as [string, string],
|
||||
},
|
||||
{
|
||||
category: 'Endpoint',
|
||||
name: 'SCCM implementation',
|
||||
body: 'Installed and configured SCCM, prepared the required settings, and established the task-sequence process.',
|
||||
delivered: ['SCCM installed and configured', 'Required settings prepared', 'Task-sequence process established'],
|
||||
images: [systems, leadership] as [string, string],
|
||||
position: ['80% 20%', '30% 70%'] as [string, string],
|
||||
},
|
||||
{
|
||||
category: 'Voice',
|
||||
name: 'Microsoft Teams calling',
|
||||
body: 'Delivered number-porting support, call-flow and dial-plan design, user training, documentation, and adoption monitoring.',
|
||||
delivered: ['Number-porting support', 'Call-flow and dial-plan design', 'User training and documentation', 'Adoption monitoring'],
|
||||
images: [leadership, systems] as [string, string],
|
||||
position: ['50% 80%', '60% 30%'] as [string, string],
|
||||
},
|
||||
];
|
||||
|
||||
export const certifications = [
|
||||
'Introduction to Cyber Security',
|
||||
'Windows Client',
|
||||
'Microsoft Teams Voice Engineer',
|
||||
'M365 Teams Administrator Associate',
|
||||
'Microsoft Azure Administrator Associate',
|
||||
'Microsoft Azure Security Engineer Associate',
|
||||
'M365 Security Administrator Associate',
|
||||
'Microsoft Information Protection Administrator Associate',
|
||||
'Project Management Essentials Certified',
|
||||
'Cloud Computing',
|
||||
];
|
||||
|
||||
export const education = { degree: 'Bachelor of Information Technology', school: 'Federation University', year: '2009' };
|
||||
@@ -0,0 +1,25 @@
|
||||
@import '@fontsource/kanit/latin-300.css';
|
||||
@import '@fontsource/kanit/latin-400.css';
|
||||
@import '@fontsource/kanit/latin-500.css';
|
||||
@import '@fontsource/kanit/latin-700.css';
|
||||
@import '@fontsource/kanit/latin-900.css';
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html, body, #root { background: #0C0C0C; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body { font-family: 'Kanit', sans-serif; }
|
||||
|
||||
.hero-heading {
|
||||
background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,46 @@
|
||||
import FadeIn from '../components/FadeIn';
|
||||
import AnimatedText from '../components/AnimatedText';
|
||||
import ContactButton from '../components/ContactButton';
|
||||
import { aboutText, images, stats } from '../data/content';
|
||||
|
||||
export default function AboutSection() {
|
||||
return (
|
||||
<section id="about" className="relative flex min-h-screen flex-col items-center justify-center gap-16 px-5 py-20 sm:gap-20 sm:px-8 md:gap-24 md:px-10">
|
||||
<FadeIn delay={0.1} x={-80} y={0} duration={0.9} className="absolute left-[1%] top-[3%] w-[90px] sm:left-[2%] sm:w-[130px] md:left-[4%] md:w-[170px]">
|
||||
<img src={images.signalMark} alt="" className="aspect-square w-full rounded-2xl object-cover" />
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.25} x={-80} y={0} duration={0.9} className="absolute bottom-[4%] left-[3%] w-[100px] sm:left-[6%] sm:w-[150px] md:left-[10%] md:w-[200px]">
|
||||
<img src={images.systems} alt="" className="aspect-[4/3] w-full -rotate-6 rounded-2xl object-cover" />
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.15} x={80} y={0} duration={0.9} className="absolute right-[1%] top-[3%] w-[100px] sm:right-[2%] sm:w-[150px] md:right-[4%] md:w-[210px]">
|
||||
<img src={images.leadership} alt="" className="aspect-[3/2] w-full rotate-6 rounded-2xl object-cover" />
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.3} x={80} y={0} duration={0.9} className="absolute bottom-[4%] right-[3%] sm:right-[6%] md:right-[10%]">
|
||||
<div className="flex gap-2 sm:gap-3">
|
||||
{stats.map((s) => (
|
||||
<div key={s.label} className="rounded-2xl border border-[#D7E2EA]/30 px-2.5 py-2 text-center sm:px-5 sm:py-3">
|
||||
<div className="hero-heading text-2xl font-black leading-none sm:text-5xl md:text-6xl">{s.value}</div>
|
||||
<div className="mt-1 whitespace-nowrap text-[9px] font-light uppercase tracking-wide text-[#D7E2EA] sm:text-xs">{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
<div className="relative z-10 flex flex-col items-center gap-10 sm:gap-14 md:gap-16">
|
||||
<FadeIn delay={0} y={40}>
|
||||
<h2 className="hero-heading text-center font-black uppercase leading-none tracking-tight" style={{ fontSize: 'clamp(3rem, 12vw, 160px)' }}>
|
||||
About me
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<AnimatedText
|
||||
text={aboutText}
|
||||
className="max-w-[560px] text-center font-medium leading-relaxed text-[#D7E2EA]"
|
||||
style={{ fontSize: 'clamp(1rem, 2vw, 1.35rem)' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative z-10 mb-24 sm:mb-28 md:mb-0">
|
||||
<ContactButton />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { ArrowUpRight, Phone } from 'lucide-react';
|
||||
import FadeIn from '../components/FadeIn';
|
||||
import ContactButton from '../components/ContactButton';
|
||||
import { profile } from '../data/content';
|
||||
|
||||
export default function ContactSection() {
|
||||
return (
|
||||
<section id="contact" className="flex flex-col items-center gap-10 px-5 pb-10 pt-20 sm:gap-14 sm:px-8 md:px-10 md:pt-28">
|
||||
<FadeIn>
|
||||
<h2 className="hero-heading text-center font-black uppercase leading-none tracking-tight" style={{ fontSize: 'clamp(2.6rem, 10vw, 140px)' }}>
|
||||
Let’s talk
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn>
|
||||
<p className="max-w-[560px] text-center font-medium leading-relaxed text-[#D7E2EA]" style={{ fontSize: 'clamp(1rem, 2vw, 1.35rem)' }}>
|
||||
Based in {profile.location}. Available for the right conversation.
|
||||
</p>
|
||||
</FadeIn>
|
||||
<FadeIn>
|
||||
<ContactButton />
|
||||
</FadeIn>
|
||||
<FadeIn className="w-full max-w-3xl">
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<a href={`mailto:${profile.email}`} className="flex min-w-0 items-center justify-between gap-3 rounded-3xl border border-[#D7E2EA]/25 p-5 text-[#D7E2EA] transition-colors hover:bg-[#D7E2EA]/10">
|
||||
<span className="min-w-0">
|
||||
<span className="block text-xs font-light uppercase tracking-widest opacity-70">Email</span>
|
||||
<strong className="block break-words font-medium">{profile.email}</strong>
|
||||
</span>
|
||||
<ArrowUpRight size={20} className="shrink-0" />
|
||||
</a>
|
||||
<a href={profile.phoneHref} className="flex min-w-0 items-center justify-between gap-3 rounded-3xl border border-[#D7E2EA]/25 p-5 text-[#D7E2EA] transition-colors hover:bg-[#D7E2EA]/10">
|
||||
<span className="min-w-0">
|
||||
<span className="block text-xs font-light uppercase tracking-widest opacity-70">Phone</span>
|
||||
<strong className="block font-medium">{profile.phone}</strong>
|
||||
</span>
|
||||
<Phone size={18} className="shrink-0" />
|
||||
</a>
|
||||
</div>
|
||||
</FadeIn>
|
||||
<footer className="mt-10 flex w-full flex-wrap justify-between gap-2 border-t border-[#D7E2EA]/20 pt-6 text-xs font-light uppercase tracking-wider text-[#D7E2EA]/70">
|
||||
<span>{profile.name}</span>
|
||||
<span>{profile.role}</span>
|
||||
<span>{profile.location}</span>
|
||||
</footer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import FadeIn from '../components/FadeIn';
|
||||
import { certifications, education } from '../data/content';
|
||||
|
||||
export default function CredentialsSection() {
|
||||
return (
|
||||
<section id="credentials" className="px-5 py-20 sm:px-8 sm:py-24 md:px-10 md:py-32">
|
||||
<FadeIn>
|
||||
<h2 className="hero-heading mb-10 text-center font-black uppercase leading-none tracking-tight sm:mb-14" style={{ fontSize: 'clamp(3rem, 12vw, 160px)' }}>
|
||||
Credentials
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn>
|
||||
<div className="mx-auto mb-12 flex max-w-5xl flex-col items-center gap-1 text-center text-[#D7E2EA] sm:mb-16">
|
||||
<span className="text-xs font-light uppercase tracking-widest opacity-70 sm:text-sm">Education</span>
|
||||
<strong className="font-medium uppercase" style={{ fontSize: 'clamp(1.1rem, 2.2vw, 2.1rem)' }}>{education.degree}</strong>
|
||||
<span className="font-light opacity-70">{education.school}, {education.year}</span>
|
||||
</div>
|
||||
</FadeIn>
|
||||
<div className="mx-auto grid max-w-5xl gap-3 sm:grid-cols-2">
|
||||
{certifications.map((c, i) => (
|
||||
<FadeIn key={c} delay={(i % 2) * 0.08}>
|
||||
<div className="flex h-full items-center gap-4 rounded-3xl border border-[#D7E2EA]/25 p-5 sm:p-6">
|
||||
<span className="hero-heading text-3xl font-black leading-none sm:text-4xl">{String(i + 1).padStart(2, '0')}</span>
|
||||
<p className="min-w-0 font-medium uppercase leading-snug text-[#D7E2EA]" style={{ fontSize: 'clamp(0.85rem, 1.4vw, 1.1rem)' }}>{c}</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import { Check } from 'lucide-react';
|
||||
import FadeIn from '../components/FadeIn';
|
||||
import { foundations, roles } from '../data/content';
|
||||
|
||||
export default function ExperienceSection() {
|
||||
return (
|
||||
<section id="experience" className="bg-white px-5 pb-28 pt-20 sm:px-8 sm:pb-32 sm:pt-24 md:px-10 md:pb-40 md:pt-32">
|
||||
<FadeIn>
|
||||
<h2 className="mb-16 text-center font-black uppercase leading-none text-[#0C0C0C] sm:mb-20 md:mb-28" style={{ fontSize: 'clamp(3rem, 12vw, 160px)' }}>
|
||||
Experience
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<div className="mx-auto max-w-5xl">
|
||||
{roles.map((r, i) => (
|
||||
<FadeIn key={r.role + r.organisation}>
|
||||
<article className="grid gap-4 py-8 sm:py-10 md:grid-cols-[220px_1fr] md:gap-12 md:py-12" style={{ borderTop: '1px solid rgba(12, 12, 12, 0.15)' }}>
|
||||
<div className="flex flex-col gap-1 text-[#0C0C0C]">
|
||||
<span className="text-sm font-medium uppercase tracking-wider opacity-60">{r.dates}</span>
|
||||
<span className="font-black uppercase leading-tight" style={{ fontSize: 'clamp(1.1rem, 1.8vw, 1.5rem)' }}>{r.organisation}</span>
|
||||
<span className="text-sm font-light opacity-60">{String(i + 1).padStart(2, '0')}</span>
|
||||
</div>
|
||||
<div className="flex min-w-0 flex-col gap-4 text-[#0C0C0C]">
|
||||
<h3 className="font-medium uppercase" style={{ fontSize: 'clamp(1rem, 2.2vw, 2.1rem)' }}>{r.role}</h3>
|
||||
<p className="max-w-2xl font-light leading-relaxed opacity-70" style={{ fontSize: 'clamp(0.9rem, 1.6vw, 1.2rem)' }}>{r.summary}</p>
|
||||
<ul className="flex max-w-2xl flex-col gap-3">
|
||||
{r.points.map((p) => (
|
||||
<li key={p} className="flex gap-3 font-light leading-relaxed" style={{ fontSize: 'clamp(0.85rem, 1.4vw, 1.05rem)' }}>
|
||||
<Check size={18} className="mt-1 shrink-0" />
|
||||
<span>{p}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
</FadeIn>
|
||||
))}
|
||||
|
||||
<FadeIn>
|
||||
<div className="grid gap-6 py-10 md:grid-cols-[220px_1fr] md:gap-12 md:py-12" style={{ borderTop: '1px solid rgba(12, 12, 12, 0.15)' }}>
|
||||
<h3 className="text-sm font-medium uppercase tracking-wider text-[#0C0C0C] opacity-60">Earlier foundations</h3>
|
||||
<div className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
|
||||
{foundations.map((f) => (
|
||||
<div key={f.role + f.organisation} className="flex min-w-0 flex-col text-[#0C0C0C]">
|
||||
<span className="text-xs font-medium uppercase tracking-wider opacity-60">{f.dates}</span>
|
||||
<strong className="font-medium uppercase">{f.role}</strong>
|
||||
<span className="font-light opacity-70">{f.organisation}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import FadeIn from '../components/FadeIn';
|
||||
import Magnet from '../components/Magnet';
|
||||
import ContactButton from '../components/ContactButton';
|
||||
import { images, profile } from '../data/content';
|
||||
|
||||
const links = [
|
||||
{ label: 'About', href: '#about' },
|
||||
{ label: 'Skills', href: '#skills' },
|
||||
{ label: 'Projects', href: '#projects' },
|
||||
{ label: 'Contact', href: '#contact' },
|
||||
];
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<section className="relative flex h-screen min-h-[600px] flex-col" style={{ overflowX: 'clip' }}>
|
||||
<FadeIn delay={0} y={-20}>
|
||||
<nav className="flex justify-between px-6 pt-6 md:px-10 md:pt-8" aria-label="Section navigation">
|
||||
{links.map((l) => (
|
||||
<a
|
||||
key={l.label}
|
||||
href={l.href}
|
||||
className="text-sm font-medium uppercase tracking-wider text-[#D7E2EA] transition-opacity duration-200 hover:opacity-70 md:text-lg lg:text-[1.4rem]"
|
||||
>
|
||||
{l.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</FadeIn>
|
||||
|
||||
<div className="overflow-hidden">
|
||||
<FadeIn delay={0.15} y={40}>
|
||||
<h1 className="hero-heading mt-6 w-full whitespace-nowrap text-center text-[16.5vw] font-black uppercase leading-none tracking-tight sm:mt-4 md:-mt-5">
|
||||
Hi, i’m {profile.firstName}
|
||||
</h1>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="absolute left-1/2 top-1/2 z-10 w-[min(280px,52vh)] -translate-x-1/2 -translate-y-1/2 sm:bottom-0 sm:top-auto sm:w-[min(360px,56vh)] sm:translate-y-0 md:w-[min(440px,58vh)] lg:w-[min(520px,58vh)]">
|
||||
<FadeIn delay={0.6} y={30}>
|
||||
<Magnet padding={150} strength={3} activeTransition="transform 0.3s ease-out" inactiveTransition="transform 0.6s ease-in-out" className="!block">
|
||||
<img
|
||||
src={images.portrait}
|
||||
alt="Keith Rana at his work desk"
|
||||
className="aspect-square w-full border border-[#D7E2EA]/30 object-cover object-top"
|
||||
style={{ borderRadius: '999px 999px 32px 32px' }}
|
||||
/>
|
||||
</Magnet>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto flex items-end justify-between gap-4 px-6 pb-7 sm:pb-8 md:px-10 md:pb-10">
|
||||
<FadeIn delay={0.35} y={20}>
|
||||
<p
|
||||
className="max-w-[160px] font-light uppercase leading-snug tracking-wide text-[#D7E2EA] sm:max-w-[220px] md:max-w-[260px]"
|
||||
style={{ fontSize: 'clamp(0.7rem, 1.4vw, 1.5rem)' }}
|
||||
>
|
||||
{profile.tagline}
|
||||
</p>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.5} y={20} className="relative z-20">
|
||||
<ContactButton />
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { expertise, images } from '../data/content';
|
||||
|
||||
const TILE_W = 420;
|
||||
const GAP = 12;
|
||||
|
||||
const photoTiles: { src: string; alt: string; position: string }[] = [
|
||||
{ src: images.portrait, alt: 'Keith Rana at his work desk', position: 'center 20%' },
|
||||
{ src: images.leadership, alt: 'Hands organising a service-delivery briefing', position: 'center' },
|
||||
{ src: images.systems, alt: 'Abstract composition of connected service pathways', position: 'center' },
|
||||
];
|
||||
|
||||
const photos = photoTiles.map((t) => (
|
||||
<img
|
||||
key={t.alt}
|
||||
src={t.src}
|
||||
alt={t.alt}
|
||||
loading="lazy"
|
||||
className="h-[270px] w-[420px] shrink-0 rounded-2xl object-cover"
|
||||
style={{ objectPosition: t.position }}
|
||||
/>
|
||||
));
|
||||
|
||||
const skills = expertise.map((e, i) => (
|
||||
<div
|
||||
key={e.name}
|
||||
className="flex h-[270px] w-[420px] shrink-0 flex-col justify-between rounded-2xl border border-[#D7E2EA]/25 p-6"
|
||||
style={{ background: 'linear-gradient(135deg, #14161a, #1d2127)' }}
|
||||
>
|
||||
<span className="hero-heading text-5xl font-black leading-none">{String(i + 1).padStart(2, '0')}</span>
|
||||
<span className="text-2xl font-medium uppercase leading-tight text-[#D7E2EA]">{e.name}</span>
|
||||
</div>
|
||||
));
|
||||
|
||||
function Row({ tiles, setWidth, transform }: { tiles: ReactNode[]; setWidth: number; transform: string }) {
|
||||
return (
|
||||
<div className="flex" style={{ gap: GAP, marginLeft: -setWidth, transform, willChange: 'transform' }} aria-hidden={tiles === skills}>
|
||||
{[0, 1, 2].map((copy) => (
|
||||
<div key={copy} className="flex" style={{ gap: GAP }}>
|
||||
{tiles}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MarqueeSection() {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const [offset, setOffset] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => {
|
||||
if (!ref.current) return;
|
||||
const top = ref.current.getBoundingClientRect().top + window.scrollY;
|
||||
setOffset((window.scrollY - top + window.innerHeight) * 0.3);
|
||||
};
|
||||
onScroll();
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
window.addEventListener('resize', onScroll);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', onScroll);
|
||||
window.removeEventListener('resize', onScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const width = (n: number) => n * (TILE_W + GAP) + GAP;
|
||||
|
||||
return (
|
||||
<section ref={ref} className="flex flex-col gap-3 bg-[#0C0C0C] pb-10 pt-24 sm:pt-32 md:pt-40" style={{ overflow: 'clip' }}>
|
||||
<Row tiles={photos} setWidth={width(photos.length)} transform={`translateX(${offset - 200}px)`} />
|
||||
<Row tiles={skills} setWidth={width(skills.length)} transform={`translateX(${-(offset - 200)}px)`} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { useRef } from 'react';
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import { Check } from 'lucide-react';
|
||||
import FadeIn from '../components/FadeIn';
|
||||
import { projects } from '../data/content';
|
||||
|
||||
type Project = (typeof projects)[number];
|
||||
|
||||
const radius = 'rounded-[40px] sm:rounded-[50px] md:rounded-[60px]';
|
||||
|
||||
function ProjectCard({ project, index, total }: { project: Project; index: number; total: number }) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'start start'] });
|
||||
const targetScale = 1 - (total - 1 - index) * 0.03;
|
||||
const scale = useTransform(scrollYProgress, [0, 1], [1, targetScale]);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="sticky top-24 min-h-[85vh]">
|
||||
<motion.div
|
||||
className={`border-2 border-[#D7E2EA] bg-[#0C0C0C] p-4 sm:p-6 md:p-8 ${radius}`}
|
||||
style={{ scale, top: `${index * 28}px`, position: 'relative', transformOrigin: 'top center' }}
|
||||
>
|
||||
<div className="mb-4 flex flex-col gap-3 sm:mb-6 md:flex-row md:items-center md:justify-between md:gap-10">
|
||||
<div className="flex items-center gap-4 sm:gap-8">
|
||||
<span className="hero-heading font-black leading-none" style={{ fontSize: 'clamp(3rem, 10vw, 140px)' }}>
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<div className="min-w-0 text-[#D7E2EA]">
|
||||
<p className="text-xs font-light uppercase tracking-widest opacity-70 sm:text-sm">{project.category}</p>
|
||||
<h3 className="font-medium uppercase" style={{ fontSize: 'clamp(1rem, 2.2vw, 2.1rem)' }}>{project.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="max-w-xl px-1 font-light leading-relaxed text-[#D7E2EA]/70" style={{ fontSize: 'clamp(0.85rem, 1.5vw, 1.15rem)' }}>
|
||||
{project.body}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3 sm:gap-4">
|
||||
<div className="flex w-[40%] flex-col gap-3 sm:gap-4">
|
||||
<img src={project.images[0]} alt="" loading="lazy" className={`w-full object-cover ${radius}`} style={{ height: 'clamp(130px, 16vw, 230px)', objectPosition: project.position[0] }} />
|
||||
<img src={project.images[1]} alt="" loading="lazy" className={`w-full object-cover ${radius}`} style={{ height: 'clamp(160px, 22vw, 340px)', objectPosition: project.position[1] }} />
|
||||
</div>
|
||||
<div className={`flex w-[60%] flex-col justify-center gap-3 border border-[#D7E2EA]/25 p-4 sm:gap-5 sm:p-8 md:p-12 ${radius}`} style={{ background: 'linear-gradient(135deg, #14161a, #1d2127)' }}>
|
||||
<span className="text-xs font-medium uppercase tracking-widest text-[#D7E2EA]/60 sm:text-sm">Delivered</span>
|
||||
<ul className="flex flex-col gap-2 sm:gap-4">
|
||||
{project.delivered.map((d) => (
|
||||
<li key={d} className="flex gap-2 font-light leading-snug text-[#D7E2EA] sm:gap-3" style={{ fontSize: 'clamp(0.8rem, 1.6vw, 1.35rem)' }}>
|
||||
<Check className="mt-0.5 h-4 w-4 shrink-0 sm:mt-1 sm:h-5 sm:w-5" />
|
||||
<span>{d}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ProjectsSection() {
|
||||
return (
|
||||
<section id="projects" className="relative z-10 -mt-10 rounded-t-[40px] bg-[#0C0C0C] px-5 py-20 sm:-mt-12 sm:rounded-t-[50px] sm:px-8 sm:py-24 md:-mt-14 md:rounded-t-[60px] md:px-10 md:py-32">
|
||||
<FadeIn>
|
||||
<h2 className="hero-heading mb-16 text-center font-black uppercase leading-none tracking-tight sm:mb-20 md:mb-28" style={{ fontSize: 'clamp(3rem, 12vw, 160px)' }}>
|
||||
Projects
|
||||
</h2>
|
||||
</FadeIn>
|
||||
{projects.map((p, i) => (
|
||||
<ProjectCard key={p.name} project={p} index={i} total={projects.length} />
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import FadeIn from '../components/FadeIn';
|
||||
import { expertise } from '../data/content';
|
||||
|
||||
export default function ServicesSection() {
|
||||
return (
|
||||
<section id="skills" className="rounded-t-[40px] bg-white px-5 pt-20 sm:rounded-t-[50px] sm:px-8 sm:pt-24 md:rounded-t-[60px] md:px-10 md:pt-32">
|
||||
<h2 className="mb-16 text-center font-black uppercase text-[#0C0C0C] sm:mb-20 md:mb-28" style={{ fontSize: 'clamp(3rem, 12vw, 160px)' }}>
|
||||
Capability
|
||||
</h2>
|
||||
<div className="mx-auto max-w-5xl">
|
||||
{expertise.map((s, i) => (
|
||||
<FadeIn key={s.name} delay={(i % 4) * 0.1}>
|
||||
<div
|
||||
className="flex items-start gap-4 py-8 sm:gap-8 sm:py-10 md:gap-12 md:py-12"
|
||||
style={{ borderTop: i === 0 ? undefined : '1px solid rgba(12, 12, 12, 0.15)' }}
|
||||
>
|
||||
<span className="min-w-[1.6em] font-black leading-none text-[#0C0C0C]" style={{ fontSize: 'clamp(3rem, 10vw, 140px)' }}>
|
||||
{String(i + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<div className="flex min-w-0 flex-col gap-3 text-[#0C0C0C]">
|
||||
<h3 className="font-medium uppercase" style={{ fontSize: 'clamp(1rem, 2.2vw, 2.1rem)' }}>{s.name}</h3>
|
||||
<p className="max-w-2xl font-light leading-relaxed opacity-60" style={{ fontSize: 'clamp(0.85rem, 1.6vw, 1.25rem)' }}>
|
||||
{s.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,6 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
||||
theme: { extend: { fontFamily: { sans: ['Kanit', 'sans-serif'] } } },
|
||||
plugins: [],
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
// INLINE=1 bakes every image and font into the JS/CSS (used for the one-file cloud preview).
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
base: './',
|
||||
build: { assetsInlineLimit: process.env.INLINE ? 100_000_000 : 4096 },
|
||||
});
|
||||
Reference in new issue
Block a user