Skip to content

Instantly share code, notes, and snippets.

@ryosuzuki

ryosuzuki/index.html

Created April 4, 2026 19:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ryosuzuki/dba0d4f571f19998742e4270672b3dc7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ryosuzuki/dba0d4f571f19998742e4270672b3dc7 to your computer and use it in GitHub Desktop.
Download ZIP
Ami Suzuki - Pickleball Player Website
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鈴木亜美 | Pickleball Player</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--green: #2d6a4f;
--light-green: #52b788;
--yellow: #f4d03f;
--bg: #f9f6f0;
--text: #1a1a1a;
}
body { font-family: 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--text); }
.hero {
background: linear-gradient(135deg, var(--green) 0%, #1a4731 100%);
color: white;
padding: 80px 40px 60px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
width: 400px; height: 400px;
background: rgba(255,255,255,0.04);
border-radius: 50%;
top: -100px; right: -100px;
}
.hero-badge {
display: inline-block;
background: var(--yellow);
color: var(--green);
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
padding: 6px 16px;
border-radius: 20px;
margin-bottom: 20px;
text-transform: uppercase;
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -1px;
margin-bottom: 8px;
}
.hero h1 span { color: var(--yellow); }
.hero-subtitle {
font-size: 1.1rem;
opacity: 0.8;
margin-bottom: 32px;
letter-spacing: 1px;
}
.hero-ball {
font-size: 4rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
nav {
background: white;
border-bottom: 3px solid var(--yellow);
padding: 0 40px;
display: flex;
gap: 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
nav a {
display: block;
padding: 18px 24px;
color: var(--text);
text-decoration: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.5px;
transition: color 0.2s;
}
nav a:hover { color: var(--green); }
.section { padding: 70px 40px; max-width: 960px; margin: 0 auto; }
.section-title {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--light-green);
margin-bottom: 10px;
}
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; margin-bottom: 30px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-avatar {
width: 220px; height: 220px;
border-radius: 50%;
background: linear-gradient(135deg, var(--light-green), var(--green));
display: flex; align-items: center; justify-content: center;
font-size: 5rem;
margin: 0 auto;
box-shadow: 0 12px 40px rgba(45,106,79,0.3);
}
.about-text p { color: #444; line-height: 1.8; margin-bottom: 16px; }
.stats-section { background: var(--green); color: white; padding: 60px 40px; }
.stats-inner { max-width: 960px; margin: 0 auto; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat-num { font-size: 3rem; font-weight: 800; color: var(--yellow); line-height: 1; }
.stat-label { font-size: 0.85rem; opacity: 0.75; margin-top: 6px; letter-spacing: 1px; }
.achievements { display: grid; gap: 16px; }
.achievement-card {
background: white;
border-radius: 12px;
padding: 24px 28px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
border-left: 4px solid var(--light-green);
transition: transform 0.2s, box-shadow 0.2s;
}
.achievement-card:hover { transform: translateX(4px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.achievement-card.gold { border-left-color: #f4d03f; }
.achievement-card.silver { border-left-color: #aaa; }
.ach-icon { font-size: 2rem; flex-shrink: 0; }
.ach-year { font-size: 0.75rem; color: #999; margin-top: 2px; }
.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.style-card {
background: white;
border-radius: 16px;
padding: 28px 24px;
text-align: center;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.style-icon { font-size: 2.5rem; margin-bottom: 12px; }
.style-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.style-card p { font-size: 0.88rem; color: #666; line-height: 1.6; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-item {
aspect-ratio: 4/3;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
}
.g1 { background: linear-gradient(135deg, #2d6a4f, #52b788); }
.g2 { background: linear-gradient(135deg, #1a4731, #2d6a4f); }
.g3 { background: linear-gradient(135deg, #52b788, #80c49a); }
.g4 { background: linear-gradient(135deg, #f4d03f, #e8b800); grid-column: span 2; }
.g5 { background: linear-gradient(135deg, #2d6a4f, #1a4731); }
.contact-section { background: #1a1a1a; color: white; padding: 60px 40px; text-align: center; }
.contact-inner { max-width: 600px; margin: 0 auto; }
.contact-inner h2 { color: white; margin-bottom: 12px; }
.contact-inner p { color: #aaa; margin-bottom: 32px; }
.social-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.social-link {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
color: white;
text-decoration: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
transition: background 0.2s;
display: flex; align-items: center; gap: 8px;
}
.social-link:hover { background: rgba(255,255,255,0.15); }
footer { background: #111; color: #555; text-align: center; padding: 20px; font-size: 0.82rem; }
@media (max-width: 700px) {
.about-grid, .stats-grid, .style-grid, .gallery-grid { grid-template-columns: 1fr; }
nav { overflow-x: auto; }
.g4 { grid-column: span 1; }
}
</style>
</head>
<body>
<div class="hero">
<div class="hero-badge">Professional Pickleball Player</div>
<h1>鈴木 <span>亜美</span></h1>
<p class="hero-subtitle">AMI SUZUKI · Japan's Rising Pickleball Star</p>
<div class="hero-ball">🏓</div>
</div>
<nav>
<a href="#about">About</a>
<a href="#achievements">実績</a>
<a href="#style">スタイル</a>
<a href="#gallery">Gallery</a>
<a href="#contact">Contact</a>
</nav>
<div id="about" class="section">
<div class="about-grid">
<div class="about-avatar">🎾</div>
<div class="about-text">
<div class="section-title">Profile</div>
<h2>About Ami</h2>
<p>日本が誇るピックルボール選手、鈴木亜美。テニスで培った確かな技術とフットワークを武器に、国内外のトーナメントで活躍中。</p>
<p>攻撃的なネットプレーと精密なドロップショットを得意とし、「日本女子ピックルボール界のエース」として注目を集めています。</p>
<p>2022年にピックルボールに転向以来、急速にランキングを上げ、アジアトップ選手の一人として認められています。</p>
</div>
</div>
</div>
<div class="stats-section">
<div class="stats-inner">
<div class="stats-grid">
<div><div class="stat-num">#3</div><div class="stat-label">Japan Ranking</div></div>
<div><div class="stat-num">24</div><div class="stat-label">Tournament Wins</div></div>
<div><div class="stat-num">87%</div><div class="stat-label">Win Rate 2024</div></div>
<div><div class="stat-num">5+</div><div class="stat-label">Years Active</div></div>
</div>
</div>
</div>
<div id="achievements" class="section">
<div class="section-title">実績</div>
<h2>Achievements</h2>
<div class="achievements">
<div class="achievement-card gold">
<div class="ach-icon">🥇</div>
<div>
<strong>全日本ピックルボール選手権 女子シングルス 優勝</strong>
<div class="ach-year">2024</div>
</div>
</div>
<div class="achievement-card gold">
<div class="ach-icon">🥇</div>
<div>
<strong>APT アジアパシフィック女子ダブルス 優勝</strong>
<div class="ach-year">2024</div>
</div>
</div>
<div class="achievement-card silver">
<div class="ach-icon">🥈</div>
<div>
<strong>全日本ピックルボール選手権 女子シングルス 準優勝</strong>
<div class="ach-year">2023</div>
</div>
</div>
<div class="achievement-card">
<div class="ach-icon">🏆</div>
<div>
<strong>Japan Open 女子ミックスダブルス 優勝</strong>
<div class="ach-year">2023</div>
</div>
</div>
<div class="achievement-card">
<div class="ach-icon">⭐</div>
<div>
<strong>Japan Pickleball Federation 年間最優秀選手賞</strong>
<div class="ach-year">2023 / 2024</div>
</div>
</div>
</div>
</div>
<div id="style" style="background: #f0f4f0; padding: 70px 40px;">
<div style="max-width: 960px; margin: 0 auto;">
<div class="section-title">Playing Style</div>
<h2>プレースタイル</h2>
<div class="style-grid">
<div class="style-card">
<div class="style-icon">⚡</div>
<h3>攻撃的ネットプレー</h3>
<p>前衛での積極的なボレーとスマッシュで相手を圧倒。キッチンライン際の精密な配球が持ち味。</p>
</div>
<div class="style-card">
<div class="style-icon">🎯</div>
<h3>精密なドロップショット</h3>
<p>後衛からのソフトなドロップで相手を引き出し、チャンスを作る戦術的なプレースタイル。</p>
</div>
<div class="style-card">
<div class="style-icon">🏃‍♀️</div>
<h3>抜群のフットワーク</h3>
<p>テニス出身で培った素早い横の動きと回り込みで、守備範囲の広さを誇る。</p>
</div>
</div>
</div>
</div>
<div id="gallery" class="section">
<div class="section-title">Gallery</div>
<h2>Action Shots</h2>
<div class="gallery-grid">
<div class="gallery-item g1">🏓</div>
<div class="gallery-item g2">🏆</div>
<div class="gallery-item g3">🥇</div>
<div class="gallery-item g4">⭐</div>
<div class="gallery-item g5">🎾</div>
</div>
</div>
<div id="contact" class="contact-section">
<div class="contact-inner">
<h2>Contact</h2>
<p>大会出場・メディア取材・スポンサーシップのお問い合わせはこちら</p>
<div class="social-links">
<a href="#" class="social-link">📧 Email</a>
<a href="#" class="social-link">📷 Instagram</a>
<a href="#" class="social-link">🐦 X (Twitter)</a>
<a href="#" class="social-link">📹 YouTube</a>
</div>
</div>
</div>
<footer>&#169; 2024 鈴木亜美 Ami Suzuki. All rights reserved.</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment