121 lines
4.4 KiB
JavaScript
121 lines
4.4 KiB
JavaScript
import Layout from '../components/Layout';
|
||
import SocialLinks from '../components/SocialLinks';
|
||
import AnimatedName from '../components/AnimatedName';
|
||
import SectionHeading from '../components/SectionHeading';
|
||
import Reveal from '../components/Reveal';
|
||
import Icon from '../components/Icon';
|
||
import { profile, focusAreas, stack } from '../data/profile';
|
||
|
||
export default function Home() {
|
||
return (
|
||
<Layout>
|
||
{/* HERO */}
|
||
<section className="hero">
|
||
<div className="hero-backdrop" aria-hidden="true" />
|
||
<div className="shell hero-grid">
|
||
<div className="hero-content">
|
||
<h1 className="hero-title">
|
||
Hey, I’m {profile.firstName}.
|
||
<span className="hero-title-muted">{profile.tagline}</span>
|
||
</h1>
|
||
|
||
<p className="hero-subtitle">{profile.intro}</p>
|
||
|
||
<div className="hero-actions">
|
||
<a href={`mailto:${profile.email}`} className="button button-primary">
|
||
Let’s work together
|
||
<Icon name="arrowRight" size={16} />
|
||
</a>
|
||
<a href="https://github.com/jesseinit" target="_blank" rel="noopener noreferrer" className="button button-ghost">
|
||
<Icon name="github" size={16} />
|
||
View GitHub
|
||
</a>
|
||
</div>
|
||
|
||
<div className="hero-meta">
|
||
<span className="meta-item">
|
||
<Icon name="pin" size={16} /> {profile.location}
|
||
</span>
|
||
<span className="meta-divider" />
|
||
<SocialLinks variant="icons" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hero-visual">
|
||
<div className="portrait">
|
||
<img src="/hero.jpg" alt={profile.name} className="portrait-image" />
|
||
</div>
|
||
<div className="terminal-card" aria-hidden="true">
|
||
<div className="terminal-bar">
|
||
<span />
|
||
<span />
|
||
<span />
|
||
<em>~/whoami</em>
|
||
</div>
|
||
<pre className="terminal-body">
|
||
<code>
|
||
<span className="t-prompt">$</span> whoami{'\n'}
|
||
<span className="t-accent">
|
||
<AnimatedName />
|
||
</span>
|
||
{'\n'}
|
||
<span className="t-prompt">$</span> cat role.txt{'\n'}
|
||
<span className="t-muted">{profile.role.toLowerCase()} @ {profile.location.split(',')[0].toLowerCase()}</span>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ABOUT */}
|
||
<section id="about" className="section">
|
||
<div className="shell">
|
||
<SectionHeading index="01" eyebrow="About" title="Engineering for the long run." />
|
||
<div className="about-grid">
|
||
<Reveal className="about-copy">
|
||
{profile.about.map((paragraph) => (
|
||
<p key={paragraph}>{paragraph}</p>
|
||
))}
|
||
</Reveal>
|
||
<div className="focus-grid">
|
||
{focusAreas.map((area, i) => (
|
||
<Reveal key={area.title} className="focus-card" delay={i * 80}>
|
||
<span className="focus-icon">
|
||
<Icon name={area.icon} size={20} />
|
||
</span>
|
||
<h3 className="focus-title">{area.title}</h3>
|
||
<p className="focus-description">{area.description}</p>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* STACK */}
|
||
<section id="stack" className="section">
|
||
<div className="shell">
|
||
<SectionHeading index="02" eyebrow="Stack" title="Tools I reach for.">
|
||
The technologies I use day to day to design, build and run production systems.
|
||
</SectionHeading>
|
||
<div className="stack-grid">
|
||
{stack.map((group, i) => (
|
||
<Reveal key={group.group} className="stack-group" delay={i * 80}>
|
||
<h3 className="stack-title">{group.group}</h3>
|
||
<ul className="tag-list">
|
||
{group.items.map((item) => (
|
||
<li key={item} className="tag tag-large">
|
||
{item}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Layout>
|
||
);
|
||
}
|