289 lines
9.2 KiB
TypeScript
289 lines
9.2 KiB
TypeScript
import type { TeamMember } from '../../types';
|
|
|
|
const FALLBACK_MEMBERS: TeamMember[] = [
|
|
{
|
|
id: 'studio-1',
|
|
name: 'Thibault Pouch',
|
|
role: 'Game Dev • Lore / CI-CD',
|
|
bio: 'Works on game dev, game lore, CI/CD, assets, and the web platform.',
|
|
avatarInitials: 'TP',
|
|
},
|
|
{
|
|
id: 'studio-2',
|
|
name: 'Pierre Ryssen',
|
|
role: 'Game Dev • Assets / Web',
|
|
bio: 'Works on game dev, assets, and the web platform.',
|
|
avatarInitials: 'PR',
|
|
},
|
|
{
|
|
id: 'studio-3',
|
|
name: 'Antoine Papillon',
|
|
role: 'Game Dev • Gameplay',
|
|
bio: 'Focused on core game development for the project.',
|
|
avatarInitials: 'AP',
|
|
},
|
|
{
|
|
id: 'studio-4',
|
|
name: 'Clement Augustinowick',
|
|
role: 'Game Dev • Gameplay',
|
|
bio: 'Focused on core game development for the project.',
|
|
avatarInitials: 'CA',
|
|
},
|
|
{
|
|
id: 'studio-5',
|
|
name: 'Dany Lhoir',
|
|
role: 'Game Dev • Multiplayer / Security',
|
|
bio: 'Works on game dev, multiplayer systems, and cybersecurity.',
|
|
avatarInitials: 'DL',
|
|
},
|
|
{
|
|
id: 'studio-6',
|
|
name: 'Timote Koenig',
|
|
role: 'Game Dev • Assets / Planning',
|
|
bio: 'Works on game dev, assets, and project planning.',
|
|
avatarInitials: 'TK',
|
|
},
|
|
];
|
|
|
|
export default function StudioPage() {
|
|
const members = FALLBACK_MEMBERS;
|
|
|
|
return (
|
|
<div style={{ maxWidth: '1000px', margin: '0 auto', padding: '4rem 1.5rem' }}>
|
|
{/* Header */}
|
|
<div style={{ marginBottom: '4rem' }}>
|
|
<div className="section-label">About</div>
|
|
<h1
|
|
style={{
|
|
fontFamily: 'var(--font-heading)',
|
|
color: 'var(--color-text)',
|
|
fontSize: 'clamp(2.5rem, 6vw, 4rem)',
|
|
marginTop: '0.5rem',
|
|
marginBottom: '1.5rem',
|
|
}}
|
|
>
|
|
CROWMATE STUDIO
|
|
</h1>
|
|
<div
|
|
className="crt-box"
|
|
style={{ padding: '2rem', marginBottom: '3rem' }}
|
|
>
|
|
<p
|
|
style={{
|
|
fontFamily: 'var(--font-mono)',
|
|
color: 'var(--color-text-dim)',
|
|
fontSize: '0.95rem',
|
|
lineHeight: 2,
|
|
margin: 0,
|
|
marginBottom: '1rem',
|
|
}}
|
|
>
|
|
CrowMate Studio is an independent game studio founded in 2023 by a team of six developers
|
|
who are all new to game development and learning by building together. We are headquartered
|
|
somewhere in Europe and operate fully remote.
|
|
</p>
|
|
<p
|
|
style={{
|
|
fontFamily: 'var(--font-mono)',
|
|
color: 'var(--color-text-dim)',
|
|
fontSize: '0.95rem',
|
|
lineHeight: 2,
|
|
margin: 0,
|
|
}}
|
|
>
|
|
<span style={{ color: 'var(--color-green)' }}>>></span>{' '}
|
|
Our debut title, <strong style={{ color: 'var(--color-text)' }}>Headless Hazard</strong>,
|
|
is currently in development. We believe that constraints breed creativity — and that
|
|
you don't need a $200 million budget to make something that sticks.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className="crt-box"
|
|
style={{ padding: '1.5rem 2rem', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '1rem' }}
|
|
>
|
|
{[
|
|
{ label: 'TEAM SIZE', value: '6 PEOPLE' },
|
|
{ label: 'FOUNDED', value: '2026' },
|
|
{ label: 'WORK MODE', value: 'REMOTE' },
|
|
{ label: 'CURRENT GAME', value: 'HEADLESS HAZARD' },
|
|
].map(({ label, value }) => (
|
|
<div key={label}>
|
|
<div
|
|
style={{
|
|
fontFamily: 'var(--font-mono)',
|
|
color: 'var(--color-green)',
|
|
fontSize: '0.72rem',
|
|
letterSpacing: '0.08em',
|
|
marginBottom: '0.45rem',
|
|
}}
|
|
>
|
|
{label}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontFamily: 'var(--font-heading)',
|
|
color: 'var(--color-text)',
|
|
fontSize: '1rem',
|
|
}}
|
|
>
|
|
{value}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* History & Vision */}
|
|
<div style={{ marginBottom: '4rem' }}>
|
|
<div className="section-label" style={{ marginBottom: '1rem' }}>Our Vision</div>
|
|
<h2
|
|
style={{
|
|
fontFamily: 'var(--font-heading)',
|
|
color: 'var(--color-text)',
|
|
fontSize: '1.8rem',
|
|
marginBottom: '1.5rem',
|
|
}}
|
|
>
|
|
WHY WE BUILD
|
|
</h2>
|
|
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
|
|
gap: '1.25rem',
|
|
}}
|
|
>
|
|
{[
|
|
{
|
|
title: 'Strange Mechanics',
|
|
content: 'We look for the game ideas that make people say "wait, how does that even work?" — then we find out.',
|
|
},
|
|
{
|
|
title: 'Atmospheric Worlds',
|
|
content: 'Every pixel, every sound, every line of UI text should reinforce the world. Atmosphere is not decoration, it is the game.',
|
|
},
|
|
{
|
|
title: 'Community First',
|
|
content: 'We build in public. We listen to our players. Bug reports are not annoyances — they are conversations.',
|
|
},
|
|
].map(({ title, content }) => (
|
|
<div key={title} className="crt-box" style={{ padding: '1.5rem' }}>
|
|
<h3
|
|
style={{
|
|
fontFamily: 'var(--font-heading)',
|
|
color: 'var(--color-amber)',
|
|
fontSize: '1rem',
|
|
marginBottom: '0.75rem',
|
|
}}
|
|
>
|
|
{title}
|
|
</h3>
|
|
<p style={{ color: 'var(--color-text-muted)', fontSize: '0.83rem', lineHeight: 1.75, margin: 0 }}>
|
|
{content}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Team */}
|
|
<div>
|
|
<div className="section-label" style={{ marginBottom: '1rem' }}>The Team</div>
|
|
<h2
|
|
style={{
|
|
fontFamily: 'var(--font-heading)',
|
|
color: 'var(--color-text)',
|
|
fontSize: '1.8rem',
|
|
marginBottom: '2rem',
|
|
}}
|
|
>
|
|
MEET THE CREW
|
|
</h2>
|
|
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
|
|
gap: '1.25rem',
|
|
}}
|
|
>
|
|
{members.map((member) => (
|
|
<div key={member.id} className="crt-box" style={{ padding: '1.5rem' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
|
|
{/* Avatar */}
|
|
<div
|
|
style={{
|
|
width: '48px',
|
|
height: '48px',
|
|
background: 'rgba(0,255,65,0.08)',
|
|
border: '1px solid var(--color-border)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontFamily: 'var(--font-heading)',
|
|
color: 'var(--color-green)',
|
|
fontSize: '1rem',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{member.avatarInitials}
|
|
</div>
|
|
<div>
|
|
<div
|
|
style={{
|
|
fontFamily: 'var(--font-heading)',
|
|
color: 'var(--color-text)',
|
|
fontSize: '1rem',
|
|
}}
|
|
>
|
|
{member.name}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontFamily: 'var(--font-mono)',
|
|
color: 'var(--color-green)',
|
|
fontSize: '0.7rem',
|
|
letterSpacing: '0.05em',
|
|
}}
|
|
>
|
|
{member.role}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{member.bio && (
|
|
<p style={{ color: 'var(--color-text-muted)', fontSize: '0.8rem', lineHeight: 1.7, margin: '0 0 1rem' }}>
|
|
{member.bio}
|
|
</p>
|
|
)}
|
|
|
|
{member.social && (
|
|
<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
|
|
{member.social.twitter && (
|
|
<a
|
|
href="#"
|
|
style={{ color: 'var(--color-text-muted)', fontSize: '0.72rem', fontFamily: 'var(--font-mono)' }}
|
|
>
|
|
{member.social.twitter}
|
|
</a>
|
|
)}
|
|
{member.social.github && (
|
|
<a
|
|
href="#"
|
|
style={{ color: 'var(--color-text-muted)', fontSize: '0.72rem', fontFamily: 'var(--font-mono)' }}
|
|
>
|
|
gh/{member.social.github}
|
|
</a>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|