diff --git a/css/blink-cursor.css b/css/blink-cursor.css new file mode 100644 index 0000000..6326dde --- /dev/null +++ b/css/blink-cursor.css @@ -0,0 +1,8 @@ +.blink-cursor { + animation: blink-cursor 1s steps(1) infinite; +} + +@keyframes blink-cursor{ + 0%, 50% { opacity: 0.0; } /* invisible 0%..50% */ + 50%, 100% { opacity: 1.0; } /* visible 50%..100% */ +} \ No newline at end of file diff --git a/css/corrections.css b/css/corrections.css new file mode 100644 index 0000000..39e0872 --- /dev/null +++ b/css/corrections.css @@ -0,0 +1,12 @@ +#title { + margin-top: 0; +} + +footer ul, +#bottom-line { + margin: 0; +} + +li { + margin-bottom: 0.5rem; +} diff --git a/css/glitch.css b/css/glitch.css new file mode 100644 index 0000000..f85b7e3 --- /dev/null +++ b/css/glitch.css @@ -0,0 +1,90 @@ +.glitch { + position: relative; + display: inline-block; + isolation: isolate; + z-index: 0; +} + +/* Duplicated text layers inherit the element's color */ +.glitch::before, +.glitch::after { + content: attr(data-glitch); + position: absolute; + inset: 0; + width: 100%; + height: 100%; + color: inherit; + pointer-events: none; +} + +/* Horizontal glitch slices */ +.glitch::before { + z-index: 1; + animation: glitch-cyan 1.5s infinite steps(1); +} + +.glitch::after { + z-index: 2; + animation: glitch-red 1.2s infinite steps(1); +} + +/* Horizontal slices move left and right */ +@keyframes glitch-cyan { + 0%, + 100% { + clip-path: inset(0 0 80% 0); + transform: translateX(-8px); + } + + 15% { + clip-path: inset(20% 0 55% 0); + transform: translateX(10px); + } + + 30% { + clip-path: inset(55% 0 25% 0); + transform: translateX(-12px); + } + + 45%, + 70% { + clip-path: inset(0 0 100% 0); + transform: translateX(0); + } + + 80% { + clip-path: inset(35% 0 45% 0); + transform: translateX(7px); + } +} + +@keyframes glitch-red { + 0%, + 100% { + clip-path: inset(75% 0 5% 0); + transform: translateX(8px); + } + + 20% { + clip-path: inset(10% 0 70% 0); + transform: translateX(-11px); + } + + 35%, + 60% { + clip-path: inset(0 0 100% 0); + transform: translateX(0); + } + + 75% { + clip-path: inset(50% 0 30% 0); + transform: translateX(-7px); + } +} + +@media (prefers-reduced-motion: reduce) { + .glitch::before, + .glitch::after { + animation: none; + } +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..3595ac6 --- /dev/null +++ b/css/style.css @@ -0,0 +1,31 @@ +* { + color: #ebdbb2; + font-family: 'Courier New', Courier, monospace; + box-sizing: border-box; +} + +body { + display: flex; + background-color: #282828; +} + +.heading, +.link { + color: #d79921; +} + +.quote { + border-left: solid 2px #a89984; + padding-left: 1rem; + font-style: italic; + margin-left: 0.5rem; +} + +.card { + width: 70%; + margin-inline: auto; + margin-top: 5rem; + background-color: #3c3836; + border-radius: 2rem; + padding: 2rem; +} \ No newline at end of file diff --git a/index.html b/index.html index d8d001e..0a9355c 100644 --- a/index.html +++ b/index.html @@ -3,27 +3,45 @@ + + + + + sourceworks.dev -

Odweta – Personal Home Page

-

an Android programmer, sysadmin and hacker

- -

Programming projects:

- +
+

Odweta – Personal Home Page

+ +

an Android developer, sysadmin and hacker

- + + +
\ No newline at end of file