mirror of https://github.com/mkrhere/pw2
Compare commits
4 Commits
cab162ff97
...
a1d9a25bed
| Author | SHA1 | Date |
|---|---|---|
 Muthu Kumar
|
a1d9a25bed | 5 months ago |
|
Muthu Kumar
|
feb6a4c485 | 5 months ago |
|
Muthu Kumar
|
f4b3ad8102 | 5 months ago |
|
Muthu Kumar
|
d7bddd37ad | 5 months ago |
15 changed files with 344 additions and 104 deletions
@ -1,13 +0,0 @@ |
|||
import React from "react"; |
|||
import { css } from "@emotion/css"; |
|||
|
|||
const Dashed: React.FC<{ children: React.ReactNode }> = ({ children }) => ( |
|||
<span |
|||
className={css` |
|||
border-bottom: 1px dashed var(--text-colour); |
|||
`}>
|
|||
{children} |
|||
</span> |
|||
); |
|||
|
|||
export default Dashed; |
|||
@ -0,0 +1,145 @@ |
|||
import React from "react"; |
|||
import { css, cx } from "@emotion/css"; |
|||
import { intersperse, sleep } from "../util"; |
|||
|
|||
const tripleBlink = async (el: HTMLElement) => { |
|||
const delay = 150; |
|||
|
|||
await sleep(1000); |
|||
el.style.opacity = "0.5"; |
|||
await sleep(delay); |
|||
el.style.opacity = "1"; |
|||
await sleep(delay); |
|||
el.style.opacity = "0.5"; |
|||
await sleep(delay); |
|||
el.style.opacity = "1"; |
|||
await sleep(delay); |
|||
el.style.opacity = "0.5"; |
|||
await sleep(delay * 2); |
|||
el.style.opacity = "1"; |
|||
}; |
|||
|
|||
const Flicker: React.FC<{ |
|||
children: React.ReactNode; |
|||
index: number; |
|||
description: string; |
|||
}> = ({ children, index, description }) => { |
|||
return ( |
|||
<span |
|||
className={css` |
|||
position: relative; |
|||
|
|||
& button:focus ~ .tooltip, |
|||
& button:hover ~ .tooltip { |
|||
opacity: 1; |
|||
} |
|||
|
|||
& button:focus, |
|||
& button:hover { |
|||
opacity: 1 !important; |
|||
} |
|||
`}>
|
|||
<button |
|||
className={css` |
|||
border-bottom: 1px dashed var(--text-colour); |
|||
opacity: 0; |
|||
background-color: transparent; |
|||
border: none; |
|||
color: inherit; |
|||
position: relative; |
|||
`}
|
|||
ref={async el => { |
|||
if (!el) return; |
|||
|
|||
await sleep(150); |
|||
await sleep(250 * index); |
|||
el.style.opacity = "1"; |
|||
|
|||
await sleep(1000 + Math.random() * 1000); |
|||
tripleBlink(el); |
|||
|
|||
while (true) { |
|||
await sleep(5000 + Math.random() * 10000); |
|||
el.style.opacity = String(0.5 + Math.random() * 0.5); |
|||
await sleep(2000); |
|||
tripleBlink(el); |
|||
} |
|||
}}> |
|||
{children} |
|||
</button> |
|||
<span |
|||
className={cx( |
|||
"tooltip", |
|||
css` |
|||
/* tooltip */ |
|||
position: absolute; |
|||
top: 150%; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
background: var(--card-tags); |
|||
color: var(--text-colour); |
|||
border-radius: 0.5rem; |
|||
padding: 0.5rem 0.8rem; |
|||
font-size: 0.8rem; |
|||
min-width: 20rem; |
|||
width: fit-content; |
|||
max-width: 80vw; |
|||
opacity: 0; |
|||
transition: opacity 0.2s; |
|||
user-select: none; |
|||
text-align: left; |
|||
|
|||
@media screen and (max-width: 65rem) { |
|||
position: fixed; |
|||
top: unset; |
|||
left: 1rem; |
|||
transform: translateY(2rem); |
|||
} |
|||
`,
|
|||
)}> |
|||
{description} |
|||
</span> |
|||
</span> |
|||
); |
|||
}; |
|||
|
|||
const FlickerList: React.FC<{ |
|||
list: { text: string; description: string }[]; |
|||
}> = ({ list }) => { |
|||
return ( |
|||
<ul |
|||
className={css` |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 0.5rem; |
|||
margin: 0; |
|||
padding: 0; |
|||
list-style: none; |
|||
|
|||
&:has(> li > span > button:focus) li > span > button:not(:focus), |
|||
&:has(> li > span > button:hover) li > span > button:not(:hover) |
|||
/* */ { |
|||
opacity: 0.5 !important; |
|||
} |
|||
`}>
|
|||
{[ |
|||
...intersperse( |
|||
list.map((item, index) => ( |
|||
<li |
|||
key={item.text} |
|||
className={css` |
|||
display: inline-block; |
|||
`}>
|
|||
<Flicker index={index} description={item.description}> |
|||
{item.text} |
|||
</Flicker> |
|||
</li> |
|||
)), |
|||
<li>·</li>, |
|||
), |
|||
]} |
|||
</ul> |
|||
); |
|||
}; |
|||
|
|||
export default FlickerList; |
|||
@ -0,0 +1,54 @@ |
|||
export const projects = [ |
|||
{ |
|||
title: window.location.hostname, |
|||
description: "This website.", |
|||
url: "https://github.com/MKRhere/pw2", |
|||
cat: "web", |
|||
tags: ["react", "vite"], |
|||
}, |
|||
{ |
|||
title: "hyperactive", |
|||
description: "Suite of web-app development libraries.", |
|||
url: "https://github.com/codefeathers/hyperactive", |
|||
cat: "lib", |
|||
tags: ["reactive", "ui-framework"], |
|||
}, |
|||
{ |
|||
title: "denoland/node_shims", |
|||
description: |
|||
"Node shims for Deno’s runtime API. Contributed repo into official denoland.", |
|||
url: "https://github.com/denoland/node_shims", |
|||
cat: "lib", |
|||
tags: ["deno", "shims"], |
|||
}, |
|||
{ |
|||
title: "Telegraf", |
|||
description: |
|||
"Active maintainer of one of the most popular Telegram Bot API libraries for Node.", |
|||
url: "https://github.com/telegraf/telegraf", |
|||
cat: "lib", |
|||
tags: ["typescript", "telegram", "bot-api"], |
|||
}, |
|||
{ |
|||
title: "runtype", |
|||
description: "Safely bring runtime values into TypeScript.", |
|||
url: "https://codefeathers.github.io/runtype", |
|||
cat: "lib", |
|||
tags: ["typescript", "runtime"], |
|||
}, |
|||
{ |
|||
title: "Telecraft", |
|||
description: "Pluggable Minecraft server administration toolkit.", |
|||
url: "https://github.com/MadrasMC/telecraft", |
|||
cat: "tool", |
|||
tags: ["minecraft", "node"], |
|||
}, |
|||
{ |
|||
title: "Storymap (WIP)", |
|||
description: |
|||
"Reverse-engineered thirdparty map renderer for Vintage Story in Zig ⚡️", |
|||
// url: "https://github.com/MadrasMC/storymap",
|
|||
cat: "tool", |
|||
tags: ["vintage-story", "zig", "wip"], |
|||
}, |
|||
]; |
|||
Loading…
Reference in new issue