Merge branch 'add-css-styling' into 'main'

add: css styling See merge request odweta/sourceworks.dev!3
2026-09-12 14:23:38 +02:00
parent 9e51a5fe29 e382256330
commit b9c1cea0cf
5 changed files with 175 additions and 16 deletions
@@ -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% */
+}
@@ -0,0 +1,12 @@
+#title {
+    margin-top: 0;
+}
+
+footer ul,
+#bottom-line {
+    margin: 0;
+}
+
+li {
+    margin-bottom: 0.5rem;
+}
@@ -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;
+  }
+}
@@ -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;
+}
@@ -3,27 +3,45 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css"/>
+    <link rel="stylesheet" href="css/corrections.css"/>
+    <link rel="stylesheet" href="css/blink-cursor.css"/>
+    <link rel="stylesheet" href="css/glitch.css"/>
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <title>sourceworks.dev</title>
 </head>
 <body>
-    <h1>Odweta &#0150; Personal Home Page</h1>
-    <p>an Android programmer, sysadmin and <i>hacker</i></p>
+    <div class="card">
+        <h1 id="title" class="heading">Odweta &#0150; Personal Home Page</h1>
        
-    <h3>Programming projects:</h3>
+        <p class="quote">an Android developer, sysadmin and <span class="glitch" data-glitch="hacker">hacker</span></p>        
+
+        <h3 class="heading">&gt;<span class="blink-cursor">_</span> Programming projects:</h3>
        <ul>
-        <li><a href="https://gitlab.com/odweta/solon">Solon</a> &#0150; a custom frontend for a school administration system Škola Online as an Android app.</li>
-        <li><a href="https://gitlab.com/odweta/odwetalibc">odwetalibc</a> &#0150; an extention library of stock C functionalities, providing dynamic arrays, Python-like lists, some string manipulation enhancements and other utility functions.</li>
-        <li><a href="https://gitlab.com/odweta/vendetta">vendetta</a> &#0150; a tool for managing projects which use the odwetalibc library.</li>
-        <li><a href="https://github.com/odweta/fakturovac">Fakturovač</a> &#0150; software for creating and managing invoices.</li>
-        <li><a href="https://gitlab.com/odweta/searcher">Searcher</a> &#0150; a simple app which fetches the first page of google results for a specified query and saves it as a JSON file.</li>
+            <li><a class="link" href="https://gitlab.com/odweta/solon">Solon</a> &#0150; a custom frontend for a school administration system Škola Online as an Android app.</li>
+            <li><a class="link" href="https://gitlab.com/odweta/odwetalibc">odwetalibc</a> &#0150; an extention library of stock C functionalities, providing dynamic arrays, Python-like lists, some string manipulation enhancements and other utility functions.</li>
+            <li><a class="link" href="https://gitlab.com/odweta/vendetta">vendetta</a> &#0150; a tool for managing projects which use the odwetalibc library.</li>
+            <li><a class="link" href="https://github.com/odweta/fakturovac">Fakturovač</a> &#0150; software for creating and managing invoices.</li>
+            <li><a class="link" href="https://gitlab.com/odweta/searcher">Searcher</a> &#0150; a simple app which fetches the first page of google results for a specified query and saves it as a JSON file.</li>
        </ul>

        <footer>
-        <h3>Contact me at:</h3>
+            <h3 class="heading">💾 My work:</h3>
+            <ul>
+                <li>
+                    GitLab: <a href="https://gitlab.com/odweta">https://gitlab.com/odweta</a>
+                </li>
+                <li>
+                    GitHub: <a href="https://github.com/odweta">https://github.com/odweta</a>
+                </li>
+            </ul>
+
+            <h3 class="heading">📨 Contact me at:</h3>
            <ul>
                <li>Email: <a href="mailto:contact@sourceworks.dev">contact@sourceworks.dev</a></li>
-            <li>Matrix: @odweta:matrix.org</li>
+                <li id="bottom-line">Matrix: @odweta:matrix.org</li>
            </ul>
        </footer>
+    </div>
 </body>
 </html>