Added glitch effect
This commit is contained in:
parent
db35dd46d6
commit
01d2f70f8a
@ -1,6 +1,6 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
@ -8,64 +8,78 @@ const { title } = Astro.props;
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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 name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>lukeh990 - {title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
<head>
|
||||
<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 name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>lukeh990 - {title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
html {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
background: #000;
|
||||
color: #8F0;
|
||||
}
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
color: #8F0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
src: url("fonts/JetBrains_Mono/JetBrainsMono-Regular.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
src: url("fonts/JetBrains_Mono/JetBrainsMono-Italic.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
html {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
#0e0d0e 25%,
|
||||
#0e0d0e 50%,
|
||||
#171819 50%,
|
||||
#171819 75%
|
||||
);
|
||||
background-size: 10px 10px;
|
||||
color: #8f0;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
color: #8f0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("fonts/JetBrains_Mono/JetBrainsMono-Regular.ttf")
|
||||
format("truetype");
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("fonts/JetBrains_Mono/JetBrainsMono-Italic.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
@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>
|
||||
|
||||
@ -1,34 +1,244 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout title="home">
|
||||
<main>
|
||||
<h1>lukeh990</h1>
|
||||
<h2>full-stack web dev</h2>
|
||||
<ul class="socials">
|
||||
<li>
|
||||
<a rel="me" href="https://tech.lgbt/@lukeh990" target="_blank" rel="noopener noreferrer">Mastodon</a>
|
||||
<a href="https://github.com/lukeh990" target="_blank" rel="noopener noreferrer">Github</a>
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
<main>
|
||||
<h1 class="glitch" data-glitch="LUKEH990">lukeh990</h1>
|
||||
<h2 class="glitch" data-glitch="FULL-STACK WEB DEV">full-stack web dev</h2>
|
||||
<ul class="socials">
|
||||
<li>
|
||||
<a
|
||||
rel="me"
|
||||
href="https://tech.lgbt/@lukeh990"
|
||||
target="_blank"
|
||||
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>
|
||||
|
||||
<style>
|
||||
main {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
main {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.socials {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.socials {
|
||||
list-style: none;
|
||||
margin: 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user