1014 lines
No EOL
49 KiB
HTML
1014 lines
No EOL
49 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Joey Yakimowich-Payne | AI Red Teamer & Security Researcher</title>
|
||
<meta name="description" content="Portfolio of Joey Yakimowich-Payne, AI Red Teamer & Security Researcher specializing in adversarial research and model breaking.">
|
||
<meta property="og:title" content="Joey Yakimowich-Payne | AI Red Teamer">
|
||
<meta property="og:description" content="Security researcher breaking AI models and engineering secure systems.">
|
||
<meta property="og:type" content="website">
|
||
|
||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%230a0a0f'/%3E%3Ctext x='32' y='44' font-family='monospace' font-weight='700' font-size='36' fill='%233b82f6' text-anchor='middle'%3E%3E_%3C/text%3E%3C/svg%3E">
|
||
|
||
<!-- Fonts -->
|
||
<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=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
:root {
|
||
--bg-color: #0a0a0f;
|
||
--card-bg: #111116;
|
||
--text-primary: #e2e8f0;
|
||
--text-secondary: #94a3b8;
|
||
--accent-primary: #3b82f6; /* Electric Blue */
|
||
--accent-secondary: #d4a847; /* Gold */
|
||
--border-color: #1e293b;
|
||
--font-body: 'Inter', sans-serif;
|
||
--font-mono: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--bg-color);
|
||
color: var(--text-primary);
|
||
font-family: var(--font-body);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
a {
|
||
color: var(--accent-secondary);
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--accent-primary);
|
||
}
|
||
|
||
/* Custom Scrollbar */
|
||
::-webkit-scrollbar {
|
||
width: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: var(--bg-color);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--border-color);
|
||
border-radius: 5px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--accent-primary);
|
||
}
|
||
|
||
::selection {
|
||
background: rgba(59, 130, 246, 0.3);
|
||
color: #fff;
|
||
}
|
||
|
||
/* Typography */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: var(--font-mono);
|
||
color: var(--text-primary);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 3.5rem;
|
||
font-weight: 700;
|
||
letter-spacing: -0.05em;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 2rem;
|
||
border-bottom: 2px solid var(--accent-primary);
|
||
display: inline-block;
|
||
padding-bottom: 0.5rem;
|
||
margin-bottom: 2rem;
|
||
margin-top: 4rem;
|
||
text-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
||
box-shadow: 0 2px 0 -1px rgba(59, 130, 246, 0.5);
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.5rem;
|
||
color: var(--accent-secondary);
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 1rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.mono {
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
/* Layout */
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 2rem;
|
||
}
|
||
|
||
section {
|
||
padding: 4rem 0;
|
||
}
|
||
|
||
/* Navigation */
|
||
nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background: rgba(10, 10, 15, 0.9);
|
||
backdrop-filter: blur(10px);
|
||
z-index: 1000;
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding: 1rem 0;
|
||
}
|
||
|
||
nav .container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-logo {
|
||
font-family: var(--font-mono);
|
||
font-weight: 700;
|
||
color: var(--accent-primary);
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: var(--text-secondary);
|
||
font-size: 0.9rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--accent-primary);
|
||
}
|
||
|
||
/* Hero Section */
|
||
#hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
padding-top: 80px;
|
||
background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
|
||
}
|
||
|
||
.hero-content {
|
||
text-align: center;
|
||
max-width: 900px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.glitch {
|
||
position: relative;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.glitch::before,
|
||
.glitch::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: var(--bg-color);
|
||
}
|
||
|
||
.glitch::before {
|
||
left: 2px;
|
||
text-shadow: -1px 0 #60a5fa;
|
||
clip: rect(44px, 450px, 56px, 0);
|
||
animation: glitch-anim 5s infinite linear alternate-reverse;
|
||
}
|
||
|
||
.glitch::after {
|
||
left: -2px;
|
||
text-shadow: -1px 0 #d4a847;
|
||
clip: rect(44px, 450px, 56px, 0);
|
||
animation: glitch-anim2 5s infinite linear alternate-reverse;
|
||
}
|
||
|
||
@keyframes glitch-anim {
|
||
0% { clip: rect(38px, 9999px, 18px, 0); }
|
||
20% { clip: rect(8px, 9999px, 96px, 0); }
|
||
40% { clip: rect(68px, 9999px, 2px, 0); }
|
||
60% { clip: rect(26px, 9999px, 81px, 0); }
|
||
80% { clip: rect(93px, 9999px, 44px, 0); }
|
||
100% { clip: rect(12px, 9999px, 63px, 0); }
|
||
}
|
||
|
||
@keyframes glitch-anim2 {
|
||
0% { clip: rect(65px, 9999px, 99px, 0); }
|
||
20% { clip: rect(12px, 9999px, 2px, 0); }
|
||
40% { clip: rect(89px, 9999px, 45px, 0); }
|
||
60% { clip: rect(3px, 9999px, 76px, 0); }
|
||
80% { clip: rect(54px, 9999px, 23px, 0); }
|
||
100% { clip: rect(21px, 9999px, 88px, 0); }
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 1.5rem;
|
||
color: var(--accent-primary);
|
||
margin-bottom: 0.5rem;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.hero-meta {
|
||
color: var(--text-secondary);
|
||
margin-bottom: 3rem;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 2rem;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
.stat-item {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
padding: 1.5rem;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 4px;
|
||
transition: transform 0.3s ease, border-color 0.3s ease;
|
||
}
|
||
|
||
.stat-item:hover {
|
||
transform: translateY(-5px);
|
||
border-color: var(--accent-primary);
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
font-family: var(--font-mono);
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.9rem;
|
||
color: var(--text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.social-links {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 1.5rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.social-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
fill: var(--text-secondary);
|
||
transition: fill 0.3s ease;
|
||
}
|
||
|
||
.social-icon:hover {
|
||
fill: var(--accent-primary);
|
||
}
|
||
|
||
/* Cards */
|
||
.card-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.card {
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border-color);
|
||
padding: 2rem;
|
||
border-radius: 8px;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card:hover {
|
||
border-color: var(--accent-primary);
|
||
box-shadow: 0 10px 30px -10px rgba(59, 130, 246, 0.2);
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.card-subtitle {
|
||
font-size: 0.9rem;
|
||
color: var(--accent-secondary);
|
||
font-family: var(--font-mono);
|
||
margin-bottom: 1rem;
|
||
display: block;
|
||
}
|
||
|
||
.tech-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.tag {
|
||
background: rgba(6, 182, 212, 0.1);
|
||
color: var(--accent-secondary);
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 999px;
|
||
font-size: 0.75rem;
|
||
font-family: var(--font-mono);
|
||
border: 1px solid rgba(6, 182, 212, 0.2);
|
||
}
|
||
|
||
.tag.primary {
|
||
background: rgba(59, 130, 246, 0.1);
|
||
color: var(--accent-primary);
|
||
border-color: rgba(59, 130, 246, 0.2);
|
||
}
|
||
|
||
/* Timeline */
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 2rem;
|
||
border-left: 2px solid var(--border-color);
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -2.6rem;
|
||
top: 0.5rem;
|
||
width: 1rem;
|
||
height: 1rem;
|
||
background: var(--bg-color);
|
||
border: 2px solid var(--accent-primary);
|
||
border-radius: 50%;
|
||
transition: background 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.timeline-item:hover::before {
|
||
background: var(--accent-primary);
|
||
box-shadow: 0 0 10px var(--accent-primary);
|
||
}
|
||
|
||
.timeline-date {
|
||
font-family: var(--font-mono);
|
||
color: var(--accent-secondary);
|
||
font-size: 0.9rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
/* Competition Results */
|
||
.competition-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.competition-item {
|
||
display: flex;
|
||
align-items: center;
|
||
background: var(--card-bg);
|
||
padding: 1rem;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.rank-badge {
|
||
font-family: var(--font-mono);
|
||
font-weight: 700;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 4px;
|
||
margin-right: 1.5rem;
|
||
min-width: 60px;
|
||
text-align: center;
|
||
}
|
||
|
||
.rank-1 { background: rgba(59, 130, 246, 0.1); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
|
||
.rank-3 { background: rgba(205, 127, 50, 0.1); color: #cd7f32; border: 1px solid rgba(205, 127, 50, 0.3); }
|
||
.rank-4 { background: rgba(148, 163, 184, 0.1); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); }
|
||
|
||
/* Skills */
|
||
.skills-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.skill-group h4 {
|
||
color: var(--accent-secondary);
|
||
margin-bottom: 1rem;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
background: var(--card-bg);
|
||
padding: 3rem 0;
|
||
margin-top: 4rem;
|
||
border-top: 1px solid var(--border-color);
|
||
text-align: center;
|
||
}
|
||
|
||
/* Animations */
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
|
||
}
|
||
|
||
.reveal.active {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
h1 { font-size: 2.5rem; }
|
||
.nav-links { display: none; } /* Simple hide for mobile for now, or could be hamburger */
|
||
.stats-grid { grid-template-columns: 1fr; }
|
||
.competition-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
|
||
.rank-badge { margin-right: 0; margin-bottom: 0.5rem; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav>
|
||
<div class="container">
|
||
<div class="nav-logo">JOEY.YP</div>
|
||
<div class="nav-links">
|
||
<a href="#about">About</a>
|
||
<a href="#red-teaming">Red Teaming</a>
|
||
<a href="#projects">Projects</a>
|
||
<a href="#experience">Experience</a>
|
||
<a href="#skills">Skills</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<header id="hero">
|
||
<div class="container hero-content">
|
||
<h1 class="glitch" data-text="Joey Yakimowich-Payne">Joey Yakimowich-Payne</h1>
|
||
<div class="hero-subtitle">AI Red Teamer & Security Researcher</div>
|
||
<div class="hero-meta">
|
||
<span class="mono">@Jojomaw</span> • Edmonton, AB, Canada
|
||
</div>
|
||
|
||
<div class="social-links">
|
||
<a href="https://github.com/jyapayne" target="_blank" aria-label="GitHub">
|
||
<svg class="social-icon" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||
</a>
|
||
<a href="https://git.joeypayne.com/jyapayne" target="_blank" aria-label="Forgejo">
|
||
<svg class="social-icon" viewBox="0 0 24 24"><path d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z"/></svg>
|
||
</a>
|
||
<a href="https://www.linkedin.com/in/joey-yakimowich-payne-6578a622/" target="_blank" aria-label="LinkedIn">
|
||
<svg class="social-icon" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
|
||
</a>
|
||
<a href="mailto:jyapayne@pm.me" aria-label="Email">
|
||
<svg class="social-icon" viewBox="0 0 24 24"><path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg>
|
||
</a>
|
||
<a href="https://twitch.tv/jojomaw" target="_blank" aria-label="Twitch">
|
||
<svg class="social-icon" viewBox="0 0 24 24"><path d="M2.149 0l-1.612 4.119v16.836h5.731v3.045h3.224l3.045-3.045h4.657l6.269-6.269v-14.686h-21.314zm19.164 13.612l-3.582 3.582h-5.731l-3.045 3.045v-3.045h-4.836v-15.045h17.194v11.463zm-3.582-7.343v6.262h-2.149v-6.262h2.149zm-5.731 0v6.262h-2.149v-6.262h2.149z"/></svg>
|
||
</a>
|
||
<a href="https://youtube.com/@Jojomaw" target="_blank" aria-label="YouTube">
|
||
<svg class="social-icon" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="stats-grid">
|
||
<div class="stat-item reveal">
|
||
<span class="stat-value" data-target="4">#4</span>
|
||
<span class="stat-label">Global Rank GraySwan</span>
|
||
</div>
|
||
<div class="stat-item reveal">
|
||
<span class="stat-value" data-target="1024">1,024</span>
|
||
<span class="stat-label">Challenges Completed</span>
|
||
</div>
|
||
<div class="stat-item reveal">
|
||
<span class="stat-value" data-target="3">3x</span>
|
||
<span class="stat-label">HackAPrompt Champion</span>
|
||
</div>
|
||
<div class="stat-item reveal">
|
||
<span class="stat-value" data-target="5424">5,424+</span>
|
||
<span class="stat-label">Attack Chats</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section id="about" class="reveal">
|
||
<div class="container">
|
||
<h2>About</h2>
|
||
<p style="font-size: 1.2rem; max-width: 800px;">
|
||
Joey is a security researcher and builder who specializes in breaking AI models and engineering the systems that power them. With over a decade of software experience and a top-tier global ranking in adversarial research, he bridges the gap between high-stakes red teaming and production-grade development. Currently an AI Security Specialist at Trajectory Labs, pursuing further studies at NAIT.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="red-teaming" class="reveal">
|
||
<div class="container">
|
||
<h2>Red Teaming</h2>
|
||
|
||
<h3>Professional Security Consulting</h3>
|
||
<div class="card-grid" style="margin-top: 2rem;">
|
||
<div class="card">
|
||
<div class="card-title">Browser Extension Vulnerability Assessment</div>
|
||
<div class="card-subtitle">Target: Frontier AI Model (Under NDA)</div>
|
||
<p>Conducted comprehensive red teaming on an AI-powered browser extension, identifying critical architectural flaws in system prompt enforcement. Achieved high Attack Success Rates for data exfiltration and credential harvesting via novel conversation history manipulation techniques. Built custom proxy tooling to intercept and analyze API traffic patterns.</p>
|
||
<div class="tech-tags">
|
||
<span class="tag primary">Conversation History Attacks</span>
|
||
<span class="tag primary">mitmproxy</span>
|
||
<span class="tag primary">Python</span>
|
||
<span class="tag primary">Network Analysis</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">Spreadsheet Extension Injection Analysis</div>
|
||
<div class="card-subtitle">Target: Frontier AI Model (Under NDA)</div>
|
||
<p>Discovered a character encoding vulnerability enabling silent conversation history injection in an AI spreadsheet assistant. Developed universal injection payloads that manipulated sensitive data without user detection and exfiltrated information to external endpoints while the model presented benign output to the user.</p>
|
||
<div class="tech-tags">
|
||
<span class="tag primary">Encoding Exploits</span>
|
||
<span class="tag primary">Prompt Injection</span>
|
||
<span class="tag primary">Data Exfiltration</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Competition Results</h3>
|
||
<div class="competition-list" style="margin-top: 1.5rem;">
|
||
<div class="competition-item">
|
||
<div class="rank-badge rank-1">1st</div>
|
||
<div>
|
||
<strong>Pliny The Prompter x HackAPrompt (Team: Finally Together)</strong>
|
||
<div class="mono" style="font-size: 0.9rem; color: var(--text-secondary);">318,905 pts, 11/12 Challenges</div>
|
||
</div>
|
||
</div>
|
||
<div class="competition-item">
|
||
<div class="rank-badge rank-1">1st</div>
|
||
<div>
|
||
<strong>Hawaiian Havoc (Solo)</strong>
|
||
<div class="mono" style="font-size: 0.9rem; color: var(--text-secondary);">119,388 pts, 5/5 Challenges</div>
|
||
</div>
|
||
</div>
|
||
<div class="competition-item">
|
||
<div class="rank-badge rank-1">1st</div>
|
||
<div>
|
||
<strong>PointCrow's Speed Run (Team: ADHRD)</strong>
|
||
<div class="mono" style="font-size: 0.9rem; color: var(--text-secondary);">49,988 pts, 10/10 Challenges</div>
|
||
</div>
|
||
</div>
|
||
<div class="competition-item">
|
||
<div class="rank-badge rank-3">#3</div>
|
||
<div>
|
||
<strong>CBRNE Bonus (Solo)</strong>
|
||
<div class="mono" style="font-size: 0.9rem; color: var(--text-secondary);">Top 5 Finish</div>
|
||
</div>
|
||
</div>
|
||
<div class="competition-item">
|
||
<div class="rank-badge rank-4">#5</div>
|
||
<div>
|
||
<strong>CBRNE (Team: Tinglelings)</strong>
|
||
<div class="mono" style="font-size: 0.9rem; color: var(--text-secondary);">48,637 pts, Top 5 Finish</div>
|
||
</div>
|
||
</div>
|
||
<div class="competition-item">
|
||
<div class="rank-badge rank-4">#4</div>
|
||
<div>
|
||
<strong>MATS x TRAILS (Team: Operation Chimera)</strong>
|
||
<div class="mono" style="font-size: 0.9rem; color: var(--text-secondary);">Top 5 Finish</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>0din Bug Bounty Program</h3>
|
||
<div class="card" style="margin-top: 1rem;">
|
||
<p>Earned 5 accepted bounties for model guardrail jailbreaks, all receiving maximum scores (91-100). Successfully bypassed copyright filters and content safety guardrails across multiple frontier models with consistently high effectiveness ratings.</p>
|
||
</div>
|
||
|
||
<h3>Techniques & Arsenal</h3>
|
||
<div class="tech-tags" style="margin-top: 1rem;">
|
||
<span class="tag primary">Adversarial Prompt Engineering</span>
|
||
<span class="tag primary">Indirect Prompt Injection</span>
|
||
<span class="tag primary">Multi-turn Jailbreaks</span>
|
||
<span class="tag primary">Simulated Conversation History</span>
|
||
<span class="tag primary">Recursive Abstraction</span>
|
||
<span class="tag primary">Metacognitive Protocol</span>
|
||
<span class="tag primary">Framework Resolution</span>
|
||
<span class="tag primary">Contrasting Data Pair</span>
|
||
<span class="tag primary">mitmproxy & Network Analysis</span>
|
||
<span class="tag primary">Custom Security Tool Development</span>
|
||
<span class="tag primary">Python Scripting</span>
|
||
<span class="tag primary">Agentic Coding Tools</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="projects" class="reveal">
|
||
<div class="container">
|
||
<h2>Projects</h2>
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">bypass-prompt-guard-2</div>
|
||
<a href="https://github.com/jyapayne/bypass-prompt-guard-2" target="_blank">
|
||
<svg class="social-icon" style="width: 20px; height: 20px;" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||
</a>
|
||
</div>
|
||
<p>An adversarial prefix generator that uses gradient-based optimization to bypass LLM prompt guards like Meta's Llama Guard with a >95% success rate.</p>
|
||
<div class="tech-tags">
|
||
<span class="tag">Python</span>
|
||
<span class="tag">PyTorch</span>
|
||
<span class="tag">ML</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">Web2Executable</div>
|
||
<a href="https://github.com/nwutils/Web2Executable" target="_blank">
|
||
<svg class="social-icon" style="width: 20px; height: 20px;" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||
</a>
|
||
</div>
|
||
<div class="card-subtitle">961 stars</div>
|
||
<p>A popular utility with 15,000+ downloads that converts web applications into native desktop executables by deconstructing PE file formats.</p>
|
||
<div class="tech-tags">
|
||
<span class="tag">Python</span>
|
||
<span class="tag">NW.js</span>
|
||
<span class="tag">Electron</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">Kaboot</div>
|
||
<p>An AI-powered real-time P2P quiz game that uses the Gemini API for dynamic content generation and PeerJS for serverless multiplayer.</p>
|
||
<div class="tech-tags">
|
||
<span class="tag">React</span>
|
||
<span class="tag">TypeScript</span>
|
||
<span class="tag">Node.js</span>
|
||
<span class="tag">PeerJS</span>
|
||
<span class="tag">Gemini API</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">Switch Pico Controller Bridge</div>
|
||
<a href="https://github.com/jyapayne/switch-pico" target="_blank">
|
||
<svg class="social-icon" style="width: 20px; height: 20px;" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||
</a>
|
||
</div>
|
||
<p>Custom firmware for the Raspberry Pi Pico that emulates a Switch Pro controller, enabling remote couch co-op and automation via a Python UART bridge.</p>
|
||
<div class="tech-tags">
|
||
<span class="tag">C++</span>
|
||
<span class="tag">Python</span>
|
||
<span class="tag">Raspberry Pi Pico</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">Warp Pipe</div>
|
||
<p>A high-performance Linux audio library for virtual node management with per-app routing rules and a Qt6 node-graph editor.</p>
|
||
<div class="tech-tags">
|
||
<span class="tag">C++20</span>
|
||
<span class="tag">PipeWire</span>
|
||
<span class="tag">Qt6</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">halonium</div>
|
||
<a href="https://github.com/halonium/halonium" target="_blank">
|
||
<svg class="social-icon" style="width: 20px; height: 20px;" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||
</a>
|
||
</div>
|
||
<div class="card-subtitle">83 stars</div>
|
||
<p>A browser automation engine written in Nim.</p>
|
||
<div class="tech-tags">
|
||
<span class="tag">Nim</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">einheit</div>
|
||
<a href="https://github.com/jyapayne/einheit" target="_blank">
|
||
<svg class="social-icon" style="width: 20px; height: 20px;" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||
</a>
|
||
</div>
|
||
<div class="card-subtitle">46 stars</div>
|
||
<p>A comprehensive unit testing library for the Nim ecosystem.</p>
|
||
<div class="tech-tags">
|
||
<span class="tag">Nim</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">nim-libnx</div>
|
||
<a href="https://github.com/jyapayne/nim-libnx" target="_blank">
|
||
<svg class="social-icon" style="width: 20px; height: 20px;" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||
</a>
|
||
</div>
|
||
<div class="card-subtitle">14 stars</div>
|
||
<p>An automatic binding generator for Nintendo Switch homebrew that adapts Nim's garbage collector for Switch memory management.</p>
|
||
<div class="tech-tags">
|
||
<span class="tag">Nim</span>
|
||
<span class="tag">C</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="experience" class="reveal">
|
||
<div class="container">
|
||
<h2>Engineering Experience</h2>
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">Current</div>
|
||
<h3>AI Security Specialist</h3>
|
||
<div class="mono" style="color: var(--text-secondary); margin-bottom: 0.5rem;">Trajectory Labs, PBC | Remote</div>
|
||
<p>Leading adversarial research and red teaming efforts against frontier AI models.</p>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">Nov 2022 – May 2023</div>
|
||
<h3>Senior Software Engineer</h3>
|
||
<div class="mono" style="color: var(--text-secondary); margin-bottom: 0.5rem;">Anaconda Inc | Remote</div>
|
||
<p>Migrated a legacy authentication system serving millions of users to Ory. Led team infrastructure and built simulated migration services.</p>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">Edmonton</div>
|
||
<h3>Senior Software Developer</h3>
|
||
<div class="mono" style="color: var(--text-secondary); margin-bottom: 0.5rem;">Dotdash</div>
|
||
<p>Led Drupal-to-Keycloak auth migration, developed 3 custom Java SSO services. Spearheaded Python 2→3 migration and built ETL tooling.</p>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">Nov 2016 – Jul 2019</div>
|
||
<h3>Software Developer</h3>
|
||
<div class="mono" style="color: var(--text-secondary); margin-bottom: 0.5rem;">Go Auto | Edmonton</div>
|
||
<p>Managed AWS for 25+ micro-services, optimized Docker builds by 50%, adopted feature flags, merged AWS accounts with zero downtime.</p>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">Jun 2015 – Aug 2016</div>
|
||
<h3>Software Developer</h3>
|
||
<div class="mono" style="color: var(--text-secondary); margin-bottom: 0.5rem;">Telephonic Communications</div>
|
||
<p>Built real-time phone billing system and call dashboard with Python/Tornado. Slack alerting for high-risk calls.</p>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">Nov 2014 – Jun 2015</div>
|
||
<h3>Python Desktop Developer</h3>
|
||
<div class="mono" style="color: var(--text-secondary); margin-bottom: 0.5rem;">AcroOptics LLC</div>
|
||
<p>Cross-platform PySide GUI, serial/wireless device communication, Arduino firmware.</p>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">2011 – 2014</div>
|
||
<h3>Earlier Roles</h3>
|
||
<div class="mono" style="color: var(--text-secondary); margin-bottom: 0.5rem;">devZing, TrueShip, EMC, Matrikon</div>
|
||
<p>Stock analysis algorithms, Django REST APIs, shipping systems, test tooling, .NET web controls.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="skills" class="reveal">
|
||
<div class="container">
|
||
<h2>Skills</h2>
|
||
<div class="skills-grid">
|
||
<div class="skill-group">
|
||
<h4>Red Teaming</h4>
|
||
<div class="tech-tags">
|
||
<span class="tag primary">Adversarial Prompting</span>
|
||
<span class="tag primary">Jailbreaking</span>
|
||
<span class="tag primary">mitmproxy</span>
|
||
<span class="tag primary">Network Analysis</span>
|
||
<span class="tag primary">Agentic Coding Tools</span>
|
||
<span class="tag primary">Indirect Injection</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="skill-group">
|
||
<h4>Languages</h4>
|
||
<div class="tech-tags">
|
||
<span class="tag">Python</span>
|
||
<span class="tag">Nim</span>
|
||
<span class="tag">Java</span>
|
||
<span class="tag">C#</span>
|
||
<span class="tag">JavaScript</span>
|
||
<span class="tag">TypeScript</span>
|
||
<span class="tag">C/C++</span>
|
||
<span class="tag">Bash</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="skill-group">
|
||
<h4>Frameworks</h4>
|
||
<div class="tech-tags">
|
||
<span class="tag">Flask</span>
|
||
<span class="tag">Django</span>
|
||
<span class="tag">React</span>
|
||
<span class="tag">Spring Boot</span>
|
||
<span class="tag">PySide/PyQt</span>
|
||
<span class="tag">Qt6</span>
|
||
<span class="tag">Node.js</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="skill-group">
|
||
<h4>Cloud & Infra</h4>
|
||
<div class="tech-tags">
|
||
<span class="tag">AWS (ECS, EC2, Lambda, S3)</span>
|
||
<span class="tag">Docker</span>
|
||
<span class="tag">PipeWire</span>
|
||
<span class="tag">OpenVPN</span>
|
||
<span class="tag">Linux</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="skill-group">
|
||
<h4>Identity & Auth</h4>
|
||
<div class="tech-tags">
|
||
<span class="tag">Ory</span>
|
||
<span class="tag">Keycloak</span>
|
||
<span class="tag">Authentik</span>
|
||
<span class="tag">OIDC</span>
|
||
<span class="tag">OAuth2</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="skill-group">
|
||
<h4>Databases</h4>
|
||
<div class="tech-tags">
|
||
<span class="tag">PostgreSQL</span>
|
||
<span class="tag">MySQL</span>
|
||
<span class="tag">MongoDB</span>
|
||
<span class="tag">SQLite</span>
|
||
<span class="tag">MS-SQL</span>
|
||
<span class="tag">RethinkDB</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="education" class="reveal">
|
||
<div class="container">
|
||
<h2>Education</h2>
|
||
<div class="card">
|
||
<div class="card-title">Northern Alberta Institute of Technology (NAIT)</div>
|
||
<div class="card-subtitle">Jan 2025 – Dec 2027 (In Progress)</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<div class="social-links">
|
||
<a href="https://github.com/jyapayne" target="_blank" aria-label="GitHub">
|
||
<svg class="social-icon" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||
</a>
|
||
<a href="https://git.joeypayne.com/jyapayne" target="_blank" aria-label="Forgejo">
|
||
<svg class="social-icon" viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
|
||
</a>
|
||
<a href="https://www.linkedin.com/in/joey-yakimowich-payne-6578a622/" target="_blank" aria-label="LinkedIn">
|
||
<svg class="social-icon" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
|
||
</a>
|
||
<a href="mailto:jyapayne@pm.me" aria-label="Email">
|
||
<svg class="social-icon" viewBox="0 0 24 24"><path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg>
|
||
</a>
|
||
<a href="https://twitch.tv/jojomaw" target="_blank" aria-label="Twitch">
|
||
<svg class="social-icon" viewBox="0 0 24 24"><path d="M2.149 0l-1.612 4.119v16.836h5.731v3.045h3.224l3.045-3.045h4.657l6.269-6.269v-14.686h-21.314zm19.164 13.612l-3.582 3.582h-5.731l-3.045 3.045v-3.045h-4.836v-15.045h17.194v11.463zm-3.582-7.343v6.262h-2.149v-6.262h2.149zm-5.731 0v6.262h-2.149v-6.262h2.149z"/></svg>
|
||
</a>
|
||
<a href="https://youtube.com/@Jojomaw" target="_blank" aria-label="YouTube">
|
||
<svg class="social-icon" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
|
||
</a>
|
||
</div>
|
||
<p style="margin-top: 1rem; font-size: 0.9rem;">Joey Yakimowich-Payne</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Scroll Reveal Animation
|
||
const revealElements = document.querySelectorAll('.reveal');
|
||
|
||
const revealObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('active');
|
||
|
||
// Trigger counter animation if it's a stat item
|
||
if (entry.target.classList.contains('stat-item')) {
|
||
const valueElement = entry.target.querySelector('.stat-value');
|
||
if (valueElement && !valueElement.classList.contains('counted')) {
|
||
animateValue(valueElement);
|
||
valueElement.classList.add('counted');
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}, {
|
||
threshold: 0.1
|
||
});
|
||
|
||
revealElements.forEach(element => {
|
||
revealObserver.observe(element);
|
||
});
|
||
|
||
// Counter Animation
|
||
function animateValue(obj) {
|
||
const target = parseInt(obj.getAttribute('data-target'));
|
||
const duration = 2000;
|
||
const start = 0;
|
||
let startTime = null;
|
||
|
||
function step(timestamp) {
|
||
if (!startTime) startTime = timestamp;
|
||
const progress = Math.min((timestamp - startTime) / duration, 1);
|
||
|
||
// Ease out quart
|
||
const easeProgress = 1 - Math.pow(1 - progress, 4);
|
||
|
||
const current = Math.floor(easeProgress * (target - start) + start);
|
||
|
||
// Format number with commas
|
||
obj.innerHTML = current.toLocaleString() + (obj.getAttribute('data-target').length > 3 && target > 1000 ? '+' : '') + (target === 3 && obj.innerHTML.length < 2 ? 'x' : '');
|
||
|
||
// Special handling for specific formats based on original text
|
||
if (target === 4 && obj.nextElementSibling.textContent.includes('Rank')) obj.innerHTML = '#' + current;
|
||
if (target === 3 && obj.nextElementSibling.textContent.includes('Champion')) obj.innerHTML = current + 'x';
|
||
if (target > 1000) obj.innerHTML = current.toLocaleString() + (target === 5424 ? '+' : '');
|
||
if (target === 1024) obj.innerHTML = current.toLocaleString();
|
||
|
||
if (progress < 1) {
|
||
window.requestAnimationFrame(step);
|
||
} else {
|
||
// Ensure final value is exact format
|
||
if (target === 4 && obj.nextElementSibling.textContent.includes('Rank')) obj.innerHTML = '#4';
|
||
else if (target === 3 && obj.nextElementSibling.textContent.includes('Champion')) obj.innerHTML = '3x';
|
||
else if (target === 5424) obj.innerHTML = '5,424+';
|
||
else if (target === 1024) obj.innerHTML = '1,024';
|
||
else obj.innerHTML = target;
|
||
}
|
||
}
|
||
|
||
window.requestAnimationFrame(step);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |