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

45
style.css
View File

@@ -32,33 +32,27 @@ main {
.hero {
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;
align-items: center;
gap: 1rem;
}
.cursor {
width: 10px;
height: 1.2em;
background: var(--accent);
.avatar {
width: 64px;
height: 64px;
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;
}
@@ -66,13 +60,6 @@ main {
50% { opacity: 0; }
}
.avatar {
width: 48px;
height: 48px;
border-radius: 4px;
object-fit: cover;
}
section {
margin-bottom: 2.5rem;
}