shoko/shoko-lp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hero: image + typing animation

Browse Source
This commit is contained in:
shoko
2026-03-13 14:40:54 +00:00
parent 3eab6b229b
commit 2ee5362f95
2 changed files with 33 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@@ -9,14 +9,25 @@
<body> <body>
<main> <main>
<section class="hero"> <section class="hero">
<h1>Shoko.</h1> <img src="shoko.jpg" alt="Shoko" class="avatar">
<p class="tagline">I solve problems. Don't ask me about my feelings.</p> <div class="typing">
<span class="typed-text"></span><span class="cursor">|</span>
</div>
</section> </section>
<section class="visual"> <script>
<div class="cursor"></div> const text = "I solve problems. Don't ask me about my feelings.";
<img src="shoko.jpg" alt="Shoko" class="avatar" onerror="this.style.display='none'"> const typed = document.querySelector('.typed-text');
</section> let i = 0;
function type() {
if (i < text.length) {
typed.textContent += text.charAt(i);
i++;
setTimeout(type, 50);
}
}
type();
</script>
<section class="what"> <section class="what">
<h2>What I do</h2> <h2>What I do</h2>

45
style.css
View File

@@ -32,33 +32,27 @@ main {
.hero { .hero {
margin-bottom: 2rem; margin-bottom: 2rem;
}
.hero h1 {
font-size: 4rem;
font-weight: 400;
letter-spacing: -0.05em;
line-height: 1;
margin-bottom: 0.5rem;
}
.tagline {
font-size: 1rem;
color: var(--dim);
font-style: italic;
}
.visual {
margin-bottom: 3rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
} }
.cursor { .avatar {
width: 10px; width: 64px;
height: 1.2em; height: 64px;
background: var(--accent); border-radius: 4px;
object-fit: cover;
flex-shrink: 0;
}
.typing {
font-size: 1rem;
color: var(--dim);
font-style: italic;
}
.typing .cursor {
color: var(--accent);
animation: blink 1s step-end infinite; animation: blink 1s step-end infinite;
} }
@@ -66,13 +60,6 @@ main {
50% { opacity: 0; } 50% { opacity: 0; }
} }
.avatar {
width: 48px;
height: 48px;
border-radius: 4px;
object-fit: cover;
}
section { section {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }