luke/lukeh990.io
1
1
Fork 0
Code Pull Requests Actions Packages Activity

Merge pull request #3 from lukeh990/master

Browse Source 
Added glitch effect
This commit is contained in:
Luke Harding 2023-12-11 20:45:55 -05:00 committed by GitHub
commit 4ea522c825
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 308 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
src/layouts/Layout.astro
View File

@ -1,6 +1,6 @@
--- ---
interface Props { interface Props {
title: string; title: string;
} }
const { title } = Astro.props; const { title } = Astro.props;
@ -8,64 +8,78 @@ const { title } = Astro.props;
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="Hi! am Luke. I am studying Computer Science. Interests: Web Development, Rust, Self-Hosting, AI, Networking, Business, Linux" /> <meta
<meta name="viewport" content="width=device-width" /> name="description"
<meta name="generator" content={Astro.generator} /> content="Hi! am Luke. I am studying Computer Science. Interests: Web Development, Rust, Self-Hosting, AI, Networking, Business, Linux"
<title>lukeh990 - {title}</title> />
</head> <meta name="viewport" content="width=device-width" />
<body> <meta name="generator" content={Astro.generator} />
<slot /> <title>lukeh990 - {title}</title>
</body> </head>
<body>
<slot />
</body>
</html> </html>
<style is:global> <style is:global>
html { html {
font-family: 'JetBrains Mono', monospace; font-family: "JetBrains Mono", monospace;
background: #000; background: repeating-linear-gradient(
color: #8F0; 0deg,
} #0e0d0e 25%,
html, body { #0e0d0e 50%,
margin: 0; #171819 50%,
padding: 0; #171819 75%
height: 100%; );
width: 100%; background-size: 10px 10px;
} color: #8f0;
h1 { }
font-size: 2.5em; html,
text-transform: uppercase; body {
font-weight: 800; margin: 0;
margin: 0; padding: 0;
} height: 100%;
h2 { width: 100%;
font-size: 1.5em; }
text-transform: uppercase; h1 {
font-weight: 600; font-size: 2.5em;
margin: 0; text-transform: uppercase;
} font-weight: 800;
a { margin: 0;
color: #8F0; }
text-transform: uppercase; h2 {
} font-size: 1.5em;
@font-face { text-transform: uppercase;
font-family: 'JetBrains Mono'; font-weight: 600;
src: url("fonts/JetBrains_Mono/JetBrainsMono-Regular.ttf") format("truetype"); margin: 0;
font-weight: 400; }
} a {
@font-face { color: #8f0;
font-family: 'JetBrains Mono'; text-transform: uppercase;
src: url("fonts/JetBrains_Mono/JetBrainsMono-Italic.ttf") format("truetype"); }
font-weight: 400; @font-face {
font-style: italic; font-family: "JetBrains Mono";
} src: url("fonts/JetBrains_Mono/JetBrainsMono-Regular.ttf")
@font-face { format("truetype");
font-family: 'JetBrains Mono'; font-weight: 400;
src: url("fonts/JetBrains_Mono/JetBrainsMono-ExtraBold.ttf") format("truetype"); }
font-weight: 800; @font-face {
} font-family: "JetBrains Mono";
@font-face { src: url("fonts/JetBrains_Mono/JetBrainsMono-Italic.ttf") format("truetype");
font-family: 'JetBrains Mono'; font-weight: 400;
src: url("fonts/JetBrains_Mono/JetBrainsMono-SemiBold.ttf") format("truetype"); font-style: italic;
font-weight: 600; }
} @font-face {
font-family: "JetBrains Mono";
src: url("fonts/JetBrains_Mono/JetBrainsMono-ExtraBold.ttf")
format("truetype");
font-weight: 800;
}
@font-face {
font-family: "JetBrains Mono";
src: url("fonts/JetBrains_Mono/JetBrainsMono-SemiBold.ttf")
format("truetype");
font-weight: 600;
}
</style> </style>

260
src/pages/index.astro
View File

@ -1,34 +1,244 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from "../layouts/Layout.astro";
--- ---
<Layout title="home"> <Layout title="home">
<main> <main>
<h1>lukeh990</h1> <h1 class="glitch" data-glitch="LUKEH990">lukeh990</h1>
<h2>full-stack web dev</h2> <h2 class="glitch" data-glitch="FULL-STACK WEB DEV">full-stack web dev</h2>
<ul class="socials"> <ul class="socials">
<li> <li>
<a rel="me" href="https://tech.lgbt/@lukeh990" target="_blank" rel="noopener noreferrer">Mastodon</a> <a
<a href="https://github.com/lukeh990" target="_blank" rel="noopener noreferrer">Github</a> rel="me"
</li> href="https://tech.lgbt/@lukeh990"
</ul> target="_blank"
</main> rel="noopener noreferrer"
class="glitch"
data-glitch="MASTODON">Mastodon</a
>
<a
href="https://github.com/lukeh990"
target="_blank"
rel="noopener noreferrer"
class="glitch"
data-glitch="GITHUB">Github</a
>
</li>
</ul>
</main>
</Layout> </Layout>
<style> <style>
main { main {
text-align: center; text-align: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
} }
.socials { .socials {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.glitch {
position: relative;
z-index: 1;
}
.glitch:before {
content: attr(data-glitch);
position: absolute;
top: 0;
left: -2px;
width: 100%;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-before 3s infinite linear alternate-reverse;
}
.glitch:after {
content: attr(data-glitch);
position: absolute;
top: 0;
left: 2px;
width: 100%;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-after 2s infinite linear alternate-reverse;
}
@keyframes noise-before {
0% {
clip: rect(61px, 9999px, 52px, 0);
}
5% {
clip: rect(33px, 9999px, 144px, 0);
}
10% {
clip: rect(121px, 9999px, 115px, 0);
}
15% {
clip: rect(144px, 9999px, 162px, 0);
}
20% {
clip: rect(62px, 9999px, 180px, 0);
}
25% {
clip: rect(34px, 9999px, 42px, 0);
}
30% {
clip: rect(147px, 9999px, 179px, 0);
}
35% {
clip: rect(99px, 9999px, 63px, 0);
}
40% {
clip: rect(188px, 9999px, 122px, 0);
}
45% {
clip: rect(154px, 9999px, 14px, 0);
}
50% {
clip: rect(63px, 9999px, 37px, 0);
}
55% {
clip: rect(161px, 9999px, 147px, 0);
}
60% {
clip: rect(109px, 9999px, 175px, 0);
}
65% {
clip: rect(157px, 9999px, 88px, 0);
}
70% {
clip: rect(173px, 9999px, 131px, 0);
}
75% {
clip: rect(62px, 9999px, 70px, 0);
}
80% {
clip: rect(24px, 9999px, 153px, 0);
}
85% {
clip: rect(138px, 9999px, 40px, 0);
}
90% {
clip: rect(79px, 9999px, 136px, 0);
}
95% {
clip: rect(25px, 9999px, 34px, 0);
}
100% {
clip: rect(173px, 9999px, 166px, 0);
}
}
@keyframes noise-after {
0% {
clip: rect(26px, 9999px, 33px, 0);
}
5% {
clip: rect(140px, 9999px, 198px, 0);
}
10% {
clip: rect(184px, 9999px, 89px, 0);
}
15% {
clip: rect(121px, 9999px, 6px, 0);
}
20% {
clip: rect(181px, 9999px, 99px, 0);
}
25% {
clip: rect(154px, 9999px, 133px, 0);
}
30% {
clip: rect(134px, 9999px, 169px, 0);
}
35% {
clip: rect(26px, 9999px, 187px, 0);
}
40% {
clip: rect(147px, 9999px, 137px, 0);
}
45% {
clip: rect(31px, 9999px, 52px, 0);
}
50% {
clip: rect(191px, 9999px, 109px, 0);
}
55% {
clip: rect(74px, 9999px, 54px, 0);
}
60% {
clip: rect(145px, 9999px, 75px, 0);
}
65% {
clip: rect(153px, 9999px, 198px, 0);
}
70% {
clip: rect(99px, 9999px, 136px, 0);
}
75% {
clip: rect(118px, 9999px, 192px, 0);
}
80% {
clip: rect(1px, 9999px, 83px, 0);
}
85% {
clip: rect(145px, 9999px, 98px, 0);
}
90% {
clip: rect(121px, 9999px, 154px, 0);
}
95% {
clip: rect(156px, 9999px, 44px, 0);
}
100% {
clip: rect(67px, 9999px, 122px, 0);
}
}
</style> </style>