feat: rebuild using sourcegraph amp to drive dev
Some checks reported errors
continuous-integration/drone/push Build encountered an error
Some checks reported errors
continuous-integration/drone/push Build encountered an error
This commit is contained in:
parent
af2a54ff92
commit
7d43da156c
33
AGENTS.md
Normal file
33
AGENTS.md
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
# AGENTS.md
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
|
||||||
|
Personal digital business card / portfolio website for Solomon Laing. A static, framework-less site with zero build steps — plain HTML, CSS, and vanilla JavaScript.
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
- **index.html** — Single-page site structure (header, bio sections, social links, contact info, footer)
|
||||||
|
- **style.css** — All styling; mobile-first with a `600px` breakpoint
|
||||||
|
- **main.js** — Text word-split animation on click (using anime.js)
|
||||||
|
- **cards.js** — Card entrance animation and hover effects (using anime.js)
|
||||||
|
- **demo.js** — Stagger grid animation loop (using anime.js)
|
||||||
|
- **assets/** — SVG icons and resume PDF
|
||||||
|
|
||||||
|
## Key Conventions
|
||||||
|
|
||||||
|
- **No build tools or bundlers.** All JS is loaded via `<script>` tags directly in the browser. Do not introduce npm, webpack, vite, or any build step.
|
||||||
|
- **No frameworks.** Vanilla HTML/CSS/JS only.
|
||||||
|
- **anime.js v4** is loaded from CDN (`https://cdn.jsdelivr.net/npm/animejs@4.0.0/lib/anime.iife.min.js`). Use the v4 API (`anime.animate`, `anime.createTimeline`, `anime.utils`, `anime.stagger`, `anime.createSpring`).
|
||||||
|
- Font: **Roboto** via Google Fonts.
|
||||||
|
- Color palette: dark background (`#1a1617`), light text (`#d7d6d4`), accent sections (`#6B5C4A`, `#564945`, `#262527`).
|
||||||
|
- CSS uses nested selectors (modern CSS nesting).
|
||||||
|
- No CSS preprocessors.
|
||||||
|
|
||||||
|
## Deployment
|
||||||
|
|
||||||
|
- CI/CD via **Drone CI** (`.drone.yml`): SSH pipeline clones the repo to `/var/www/html/solomonlai.ng` on `webhost.forest`.
|
||||||
|
- Branch: `main`
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
No build, lint, or test commands — this is a zero-build static site. Open `index.html` in a browser to preview.
|
||||||
BIN
assets/profile.jpg
Normal file
BIN
assets/profile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
214
index.html
214
index.html
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" data-theme="dark">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
@ -7,112 +7,138 @@
|
|||||||
<title>SolomonLai.ng</title>
|
<title>SolomonLai.ng</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
|
||||||
|
rel="stylesheet" />
|
||||||
<link href="style.css" rel="stylesheet">
|
<link href="style.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header class="title">
|
|
||||||
<div class="container">
|
|
||||||
<h1>I am <br /> Solomon Laing</h1>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<main>
|
<main>
|
||||||
<section class="accent1 region">
|
<div class="vcard">
|
||||||
<div class="container row">
|
<div class="vcard-header">
|
||||||
<div class="col f-row">
|
<h1 class="vcard-name vcard-header-left"><span class="name-first">Solomon</span></h1>
|
||||||
<p class="animate-me">Trained in Engineering and IT I spend my time building and maintaining
|
<div class="vcard-header-right">
|
||||||
software for
|
<div class="vcard-header-title">
|
||||||
various companies and organisations. Solving problems is my passion and I strive to get
|
<h1 class="vcard-name"><span class="name-last">Laing</span></h1>
|
||||||
things
|
<p class="vcard-subtitle">Full Stack Software Developer</p>
|
||||||
done, and do them well.</p>
|
</div>
|
||||||
</div>
|
<button class="theme-toggle" aria-label="Toggle theme">
|
||||||
<div class="col f-row">
|
<svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="20" height="20">
|
||||||
<p class="animate-me">
|
<path fill="currentColor"
|
||||||
I have a penchant for Linux (or GNU/Linux if you prefer) and besides maintaining a
|
d="M223.5 32C100 32 0 132.3 0 256s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z" />
|
||||||
collection of personalisations through scripts and software customisations, I also manage a
|
</svg>
|
||||||
homelab on which I self host many of the services that I use daily.</p>
|
<svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391l-19.9 107.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
<section class="accent2 region">
|
<div class="vcard-body">
|
||||||
<div class="container row cards">
|
<div class="vcard-image">
|
||||||
<div class="card">
|
<img src="assets/profile.jpg" alt="Solomon Laing" />
|
||||||
<a href="https://www.linkedin.com/in/inkletblot/" target="_blank">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
|
|
||||||
<path fill="currentColor" stroke="currentColor"
|
|
||||||
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
|
||||||
<a href="https://gitlab.inkletblot.com/" target="_blank">
|
<div class="vcard-content">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
<div class="vcard-tags">
|
||||||
viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
|
<span class="tag">Angular</span>
|
||||||
<path fill="currentColor" stroke="currentColor"
|
<span class="tag-sep">·</span>
|
||||||
d="M0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96zm337.5 12.5l44.6 116.4 .4 1.2c5.6 16.8 7.2 35.2 2.3 52.5c-5 17.2-15.4 32.4-29.8 43.3l-.2 .1-68.4 51.2-54.1 40.9c-.5 .2-1.1 .5-1.7 .8c-2 1-4.4 2-6.7 2c-3 0-6.8-1.8-8.3-2.8l-54.2-40.9L93.5 322.3l-.4-.3-.2-.1c-14.3-10.8-24.8-26-29.7-43.3s-4.2-35.7 2.2-52.5l.5-1.2 44.7-116.4c.9-2.3 2.5-4.3 4.5-5.6c1.6-1 3.4-1.6 5.2-1.8c1.3-.7 2.1-.4 3.4 .1c.6 .2 1.2 .5 2 .7c1 .4 1.6 .9 2.4 1.5c.6 .4 1.2 1 2.1 1.5c1.2 1.4 2.2 3 2.7 4.8l29.2 92.2H285l30.2-92.2c.5-1.8 1.4-3.4 2.6-4.8s2.8-2.4 4.5-3.1c1.7-.6 3.6-.9 5.4-.7s3.6 .8 5.2 1.8c2 1.3 3.7 3.3 4.6 5.6z" />
|
<span class="tag">.NET Core</span>
|
||||||
</svg>
|
<span class="tag-sep">·</span>
|
||||||
</a>
|
<span class="tag">TypeScript</span>
|
||||||
</div>
|
<span class="tag-sep">·</span>
|
||||||
<div class="card">
|
<span class="tag">C#</span>
|
||||||
<a href="https://github.com/inkletblot/" target="_blank">
|
</div>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
|
<div class="vcard-bio">
|
||||||
<path fill="currentColor" stroke="currentColor"
|
<div class="bio-paragraph">
|
||||||
d="M448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM265.8 407.7c0-1.8 0-6 .1-11.6c.1-11.4 .1-28.8 .1-43.7c0-15.6-5.2-25.5-11.3-30.7c37-4.1 76-9.2 76-73.1c0-18.2-6.5-27.3-17.1-39c1.7-4.3 7.4-22-1.7-45c-13.9-4.3-45.7 17.9-45.7 17.9c-13.2-3.7-27.5-5.6-41.6-5.6s-28.4 1.9-41.6 5.6c0 0-31.8-22.2-45.7-17.9c-9.1 22.9-3.5 40.6-1.7 45c-10.6 11.7-15.6 20.8-15.6 39c0 63.6 37.3 69 74.3 73.1c-4.8 4.3-9.1 11.7-10.6 22.3c-9.5 4.3-33.8 11.7-48.3-13.9c-9.1-15.8-25.5-17.1-25.5-17.1c-16.2-.2-1.1 10.2-1.1 10.2c10.8 5 18.4 24.2 18.4 24.2c9.7 29.7 56.1 19.7 56.1 19.7c0 9 .1 21.7 .1 30.6c0 4.8 .1 8.6 .1 10c0 4.3-3 9.5-11.5 8C106 393.6 59.8 330.8 59.8 257.4c0-91.8 70.2-161.5 162-161.5s166.2 69.7 166.2 161.5c.1 73.4-44.7 136.3-110.7 158.3c-8.4 1.5-11.5-3.7-11.5-8zm-90.5-54.8c-.2-1.5 1.1-2.8 3-3.2c1.9-.2 3.7 .6 3.9 1.9c.3 1.3-1 2.6-3 3c-1.9 .4-3.7-.4-3.9-1.7zm-9.1 3.2c-2.2 .2-3.7-.9-3.7-2.4c0-1.3 1.5-2.4 3.5-2.4c1.9-.2 3.7 .9 3.7 2.4c0 1.3-1.5 2.4-3.5 2.4zm-14.3-2.2c-1.9-.4-3.2-1.9-2.8-3.2s2.4-1.9 4.1-1.5c2 .6 3.3 2.1 2.8 3.4c-.4 1.3-2.4 1.9-4.1 1.3zm-12.5-7.3c-1.5-1.3-1.9-3.2-.9-4.1c.9-1.1 2.8-.9 4.3 .6c1.3 1.3 1.8 3.3 .9 4.1c-.9 1.1-2.8 .9-4.3-.6zm-8.5-10c-1.1-1.5-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3c1.1 1.5 1.1 3.3 0 4.1c-.9 .6-2.6 0-3.7-1.5zm-6.3-8.8c-1.1-1.3-1.3-2.8-.4-3.5c.9-.9 2.4-.4 3.5 .6c1.1 1.3 1.3 2.8 .4 3.5c-.9 .9-2.4 .4-3.5-.6zm-6-6.4c-1.3-.6-1.9-1.7-1.5-2.6c.4-.6 1.5-.9 2.8-.4c1.3 .7 1.9 1.8 1.5 2.6c-.4 .9-1.7 1.1-2.8 .4z" />
|
<p class="animate-me">Trained in Engineering and IT I spend my time building and maintaining
|
||||||
</svg>
|
software for various companies and organisations. Solving problems is my passion and I strive
|
||||||
</a>
|
to get things done, and do them well.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="bio-paragraph">
|
||||||
<a href="https://inkletblot.com/" target="_blank">
|
<p class="animate-me">I have a penchant for Linux (or GNU/Linux if you prefer) and besides
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
maintaining a collection of personalisations through scripts and software customisations, I
|
||||||
viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
|
also manage a homelab on which I self host many of the services that I use daily.</p>
|
||||||
<path fill="currentColor" stroke="currentColor"
|
</div>
|
||||||
d="M352 256c0 22.2-1.2 43.6-3.3 64l-185.3 0c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64l185.3 0c2.2 20.4 3.3 41.8 3.3 64zm28.8-64l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0l-176.6 0c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0L18.6 160C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192l123.1 0c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64L8.1 320C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6l176.6 0c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352l116.7 0zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6l116.7 0z" />
|
</div>
|
||||||
</svg>
|
|
||||||
</a>
|
<hr class="vcard-divider" />
|
||||||
</div>
|
|
||||||
<div class="card make-icon-smaller">
|
<div class="vcard-section">
|
||||||
<a href="assets/resume.pdf" target="_blank">
|
<h2 class="section-title">Contact</h2>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
<ul class="contact-list">
|
||||||
viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
|
<li>
|
||||||
<path fill="currentColor" stroke="currentColor"
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
|
||||||
d="M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 288c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128z" />
|
<path fill="currentColor"
|
||||||
</svg>
|
d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z" />
|
||||||
</a>
|
</svg>
|
||||||
|
<a href="tel:+61478586308">+61 478 586 308</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z" />
|
||||||
|
</svg>
|
||||||
|
<a href="mailto:solomonlaing@pm.me">solomonlaing@pm.me</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="16" height="16">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 288c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128z" />
|
||||||
|
</svg>
|
||||||
|
<a href="assets/resume.pdf" target="_blank">Download Resume <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="12" height="12" style="vertical-align: middle; margin-bottom: 2px;"><path fill="currentColor" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-160c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 160c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="vcard-divider" />
|
||||||
|
|
||||||
|
<div class="vcard-section">
|
||||||
|
<h2 class="section-title">Find me on:</h2>
|
||||||
|
<div class="social-links cards">
|
||||||
|
<a class="social-link card" href="https://www.linkedin.com/in/inkletblot/" target="_blank">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="20" height="20">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
|
||||||
|
</svg>
|
||||||
|
<span>LinkedIn</span>
|
||||||
|
</a>
|
||||||
|
<a class="social-link card" href="https://github.com/inkletblot/" target="_blank">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="20" height="20">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM265.8 407.7c0-1.8 0-6 .1-11.6c.1-11.4 .1-28.8 .1-43.7c0-15.6-5.2-25.5-11.3-30.7c37-4.1 76-9.2 76-73.1c0-18.2-6.5-27.3-17.1-39c1.7-4.3 7.4-22-1.7-45c-13.9-4.3-45.7 17.9-45.7 17.9c-13.2-3.7-27.5-5.6-41.6-5.6s-28.4 1.9-41.6 5.6c0 0-31.8-22.2-45.7-17.9c-9.1 22.9-3.5 40.6-1.7 45c-10.6 11.7-15.6 20.8-15.6 39c0 63.6 37.3 69 74.3 73.1c-4.8 4.3-9.1 11.7-10.6 22.3c-9.5 4.3-33.8 11.7-48.3-13.9c-9.1-15.8-25.5-17.1-25.5-17.1c-16.2-.2-1.1 10.2-1.1 10.2c10.8 5 18.4 24.2 18.4 24.2c9.7 29.7 56.1 19.7 56.1 19.7c0 9 .1 21.7 .1 30.6c0 4.8 .1 8.6 .1 10c0 4.3-3 9.5-11.5 8C106 393.6 59.8 330.8 59.8 257.4c0-91.8 70.2-161.5 162-161.5s166.2 69.7 166.2 161.5c.1 73.4-44.7 136.3-110.7 158.3c-8.4 1.5-11.5-3.7-11.5-8zm-90.5-54.8c-.2-1.5 1.1-2.8 3-3.2c1.9-.2 3.7 .6 3.9 1.9c.3 1.3-1 2.6-3 3c-1.9 .4-3.7-.4-3.9-1.7zm-9.1 3.2c-2.2 .2-3.7-.9-3.7-2.4c0-1.3 1.5-2.4 3.5-2.4c1.9-.2 3.7 .9 3.7 2.4c0 1.3-1.5 2.4-3.5 2.4zm-14.3-2.2c-1.9-.4-3.2-1.9-2.8-3.2s2.4-1.9 4.1-1.5c2 .6 3.3 2.1 2.8 3.4c-.4 1.3-2.4 1.9-4.1 1.3zm-12.5-7.3c-1.5-1.3-1.9-3.2-.9-4.1c.9-1.1 2.8-.9 4.3 .6c1.3 1.3 1.8 3.3 .9 4.1c-.9 1.1-2.8 .9-4.3-.6zm-8.5-10c-1.1-1.5-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3c1.1 1.5 1.1 3.3 0 4.1c-.9 .6-2.6 0-3.7-1.5zm-6.3-8.8c-1.1-1.3-1.3-2.8-.4-3.5c.9-.9 2.4-.4 3.5 .6c1.1 1.3 1.3 2.8 .4 3.5c-.9 .9-2.4 .4-3.5-.6zm-6-6.4c-1.3-.6-1.9-1.7-1.5-2.6c.4-.6 1.5-.9 2.8-.4c1.3 .7 1.9 1.8 1.5 2.6c-.4 .9-1.7 1.1-2.8 .4z" />
|
||||||
|
</svg>
|
||||||
|
<span>GitHub</span>
|
||||||
|
</a>
|
||||||
|
<a class="social-link card" href="https://git.inkletblot.com/inkletblot/" target="_blank">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="5.67 143.05 628.65 387.55" width="20" height="20">
|
||||||
|
<path fill="currentColor" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"/>
|
||||||
|
<path fill="currentColor" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8C343.2,346.5,335,363.3,326.8,380.1z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Gitea</span>
|
||||||
|
</a>
|
||||||
|
<a class="social-link card" href="https://inkletblot.com/" target="_blank">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M352 256c0 22.2-1.2 43.6-3.3 64l-185.3 0c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64l185.3 0c2.2 20.4 3.3 41.8 3.3 64zm28.8-64l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0l-176.6 0c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0L18.6 160C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192l123.1 0c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64L8.1 320C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6l176.6 0c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352l116.7 0zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6l116.7 0z" />
|
||||||
|
</svg>
|
||||||
|
<span>Website</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="vcard-footer"><strong>@inkletblot</strong> pretty much everywhere</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
<section class="accent3 region">
|
|
||||||
<div class="container row">
|
|
||||||
<div class="col">
|
|
||||||
<div class="row">
|
|
||||||
<h2>Contact</h2>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<a class="contact" href="tel:+64478586308">+61 478 586 308</a>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<a class="contact" href="mailto:solomonlaing@pm.me">solomonlaing@pm.me</a>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<p class="contact">@inkletblot pretty much everywhere</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col center top-gap">
|
|
||||||
<div class="stagger-visualizer"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<footer class="foot">
|
|
||||||
<div class="container row">
|
|
||||||
<p>Thank you for your time.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</main>
|
||||||
|
|
||||||
|
<div class="stagger-visualizer"></div>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.0/lib/anime.iife.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.0/lib/anime.iife.min.js"></script>
|
||||||
|
<script src="theme.js"></script>
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
<script src="cards.js"></script>
|
<script src="cards.js"></script>
|
||||||
<script src="demo.js"></script>
|
<script src="demo.js"></script>
|
||||||
|
|||||||
452
style.css
452
style.css
@ -1,3 +1,48 @@
|
|||||||
|
:root,
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg: #17171A;
|
||||||
|
--card-bg: #17171A;
|
||||||
|
--card-border: #CFD1D4;
|
||||||
|
--text-primary: #F7F9FC;
|
||||||
|
--text-secondary: #999BA4;
|
||||||
|
--accent-blue: #0083E2;
|
||||||
|
--divider: #CFD1D4;
|
||||||
|
--icon-color: #F7F9FC;
|
||||||
|
--part-color: #F7F9FC;
|
||||||
|
--part-bg-color: rgba(247, 249, 252, 0.06);
|
||||||
|
--card-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] {
|
||||||
|
--bg: #F7F9FC;
|
||||||
|
--card-bg: #F7F9FC;
|
||||||
|
--card-border: #C9CBCE;
|
||||||
|
--text-primary: #393F53;
|
||||||
|
--text-secondary: #6F7588;
|
||||||
|
--accent-blue: #0075CB;
|
||||||
|
--divider: #C9CBCE;
|
||||||
|
--icon-color: #393F53;
|
||||||
|
--part-color: #393F53;
|
||||||
|
--part-bg-color: rgba(57, 63, 83, 0.06);
|
||||||
|
--card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root:not([data-theme="dark"]) {
|
||||||
|
--bg: #F7F9FC;
|
||||||
|
--card-bg: #F7F9FC;
|
||||||
|
--card-border: #C9CBCE;
|
||||||
|
--text-primary: #393F53;
|
||||||
|
--text-secondary: #6F7588;
|
||||||
|
--accent-blue: #0075CB;
|
||||||
|
--divider: #C9CBCE;
|
||||||
|
--icon-color: #393F53;
|
||||||
|
--part-color: #393F53;
|
||||||
|
--part-bg-color: rgba(57, 63, 83, 0.06);
|
||||||
|
--card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
@ -7,13 +52,19 @@
|
|||||||
body,
|
body,
|
||||||
html {
|
html {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
|
||||||
font-family: Roboto, sans-serif;
|
font-family: Roboto, sans-serif;
|
||||||
color: #d7d6d4;
|
color: var(--text-primary);
|
||||||
background: #1a1617;
|
background: var(--bg);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 2rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
p,
|
p,
|
||||||
@ -26,140 +77,319 @@ h4 {
|
|||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.accent1 {
|
|
||||||
color: #d7d6d4;
|
|
||||||
background: #6B5C4A;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accent2 {
|
|
||||||
color: #d7d6d4;
|
|
||||||
background: #564945;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accent3 {
|
|
||||||
color: #d7d6d4;
|
|
||||||
background: #262527;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 80%;
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title,
|
|
||||||
.region {
|
|
||||||
padding: 2rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.foot {
|
|
||||||
padding-top: 2rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.f-row {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-gap {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col:not(:first-child) {
|
|
||||||
padding-top: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cards {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
display: block;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
>img {
|
|
||||||
max-width: 100px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.make-icon-smaller {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
margin: auto;
|
|
||||||
height: 75%;
|
|
||||||
padding-bottom: 5%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
a,
|
||||||
a:hover,
|
a:hover,
|
||||||
a:active,
|
a:active,
|
||||||
a:link,
|
a:link,
|
||||||
a:focus,
|
a:focus,
|
||||||
a:visited {
|
a:visited {
|
||||||
color: #d7d6d4;
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:600px) {
|
.theme-transitioning,
|
||||||
.row {
|
.theme-transitioning *,
|
||||||
|
.theme-transitioning *::before,
|
||||||
|
.theme-transitioning *::after {
|
||||||
|
transition: color 500ms ease, background-color 500ms ease, border-color 500ms ease, box-shadow 500ms ease, opacity 500ms ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: 1000px;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid var(--card-border);
|
||||||
|
border-radius: 12px;
|
||||||
|
background: var(--card-bg);
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
padding: 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-header {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-header-right {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-header-title {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-name {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-first {
|
||||||
|
color: var(--accent-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-last {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-subtitle {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 6px;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-divider {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--divider);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-image {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
max-width: 280px;
|
||||||
|
border-radius: 10px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-content {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column-reverse;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.4rem;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
border: 1px solid var(--divider);
|
||||||
|
padding: 0.25rem 0.6rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-sep {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-bio {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-letter {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--accent-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.6rem;
|
||||||
|
|
||||||
|
li {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 3rem;
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: var(--icon-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col {
|
svg {
|
||||||
flex: 1;
|
flex-shrink: 0;
|
||||||
padding-top: 0 !important;
|
color: var(--icon-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards {
|
span {
|
||||||
gap: unset;
|
white-space: nowrap;
|
||||||
justify-content: space-between;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.card {
|
.vcard-footer {
|
||||||
max-width: 115px;
|
font-size: 0.8rem;
|
||||||
}
|
color: var(--text-secondary);
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stagger-visualizer {
|
.stagger-visualizer {
|
||||||
|
position: fixed;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 12rem;
|
width: 60rem;
|
||||||
height: 6rem;
|
height: 30rem;
|
||||||
|
top: 0;
|
||||||
|
rotate: 90deg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.part {
|
.part {
|
||||||
width: 1rem;
|
width: 5rem;
|
||||||
height: 1rem;
|
height: 5rem;
|
||||||
border: 1px solid #d7d6d4;
|
border: 1px solid var(--part-bg-color);
|
||||||
background-color: #d7d6d4;
|
background-color: var(--part-bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.vcard {
|
||||||
|
padding: 32px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-header {
|
||||||
|
flex-flow: row;
|
||||||
|
gap: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-header-text {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-body {
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-image {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
min-width: 220px;
|
||||||
|
align-self: stretch;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
flex-flow: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcard-tags {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.stagger-visualizer {
|
||||||
|
width: 120rem;
|
||||||
|
height: 60rem;
|
||||||
|
rotate: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.part {
|
||||||
|
width: 10rem;
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
28
theme.js
Normal file
28
theme.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
const toggle = document.querySelector('.theme-toggle');
|
||||||
|
const iconMoon = toggle.querySelector('.icon-moon');
|
||||||
|
const iconSun = toggle.querySelector('.icon-sun');
|
||||||
|
|
||||||
|
function getPreferredTheme() {
|
||||||
|
const stored = localStorage.getItem('theme');
|
||||||
|
if (stored) return stored;
|
||||||
|
return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyTheme(theme) {
|
||||||
|
document.documentElement.setAttribute('data-theme', theme);
|
||||||
|
iconMoon.style.display = theme === 'light' ? 'block' : 'none';
|
||||||
|
iconSun.style.display = theme === 'dark' ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
applyTheme(getPreferredTheme());
|
||||||
|
|
||||||
|
toggle.addEventListener('click', () => {
|
||||||
|
const current = document.documentElement.getAttribute('data-theme');
|
||||||
|
const next = current === 'dark' ? 'light' : 'dark';
|
||||||
|
document.documentElement.classList.add('theme-transitioning');
|
||||||
|
localStorage.setItem('theme', next);
|
||||||
|
applyTheme(next);
|
||||||
|
setTimeout(() => {
|
||||||
|
document.documentElement.classList.remove('theme-transitioning');
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user