diff --git a/index.html b/index.html new file mode 100644 index 0000000..d88b40b --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + + Shoko — I solve problems + + + +
+
+

Shoko.

+

I solve problems. Don't ask me about my feelings.

+
+ +
+

Reach me

+ +
+ + +
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..a064dea --- /dev/null +++ b/style.css @@ -0,0 +1,95 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --bg: #0a0a0a; + --text: #e5e5e5; + --dim: #666; + --accent: #ff6b6b; + --link: #7eb8da; +} + +body { + font-family: "SF Mono", "Fira Code", "Consolas", monospace; + background: var(--bg); + color: var(--text); + line-height: 1.6; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 2rem; +} + +main { + max-width: 480px; + width: 100%; +} + +.hero { + margin-bottom: 4rem; +} + +.hero h1 { + font-size: 4rem; + font-weight: 400; + letter-spacing: -0.05em; + line-height: 1; + margin-bottom: 1rem; +} + +.tagline { + font-size: 1rem; + color: var(--dim); + font-style: italic; +} + +.contact h2 { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.2em; + color: var(--dim); + margin-bottom: 1.5rem; +} + +.contact ul { + list-style: none; +} + +.contact li { + margin-bottom: 1rem; +} + +.contact strong { + color: var(--accent); + font-weight: 400; +} + +.contact a { + color: var(--link); + text-decoration: none; +} + +.contact a:hover { + text-decoration: underline; +} + +footer { + margin-top: 4rem; + padding-top: 2rem; + border-top: 1px solid #1a1a1a; +} + +footer p { + font-size: 0.75rem; + color: var(--dim); +} + +@media (max-width: 480px) { + .hero h1 { + font-size: 3rem; + } +}