Created Projects page

static/main/css/projects.css

@@ -0,0 +1,176 @@
+:root {
+    --clr-card: hsl(218, 17%, 12%);
+    --clr-card-060: hsla(0, 0%, 100%, 0.06);
+    --clr-card-100: hsla(0, 0%, 100%, 0.1);
+    --clr-card-400: hsla(0, 0%, 100%, 0.4);
+    --clr-card-500: hsla(0, 0%, 100%, 0.5);
+}
+
+.body {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+#cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    max-width: 916px;
+    width: calc(100% - 20px);
+}
+
+#cards:hover > .card::after {
+    opacity: 1;
+}
+
+.card {
+    background-color: var(--clr-card-100);
+    border-radius: 10px;
+    cursor: pointer;
+    display: flex;
+    height: 260px;
+    flex-direction: column;
+    position: relative;
+    width: 300px;
+}
+
+.card:hover::before {
+    opacity: 1;
+}
+
+.card::before,
+.card::after {
+    border-radius: inherit;
+    content: "";
+    height: 100%;
+    left: 0px;
+    opacity: 0;
+    position: absolute;
+    top: 0px;
+    transition: opacity 500ms;
+    width: 100%;
+}
+
+.card::before {
+    background: radial-gradient(
+        800px circle at var(--mouse-x) var(--mouse-y),
+        var(--clr-card-060),
+        transparent 40%
+    );
+    z-index: 3;
+}
+
+.card::after {
+    background: radial-gradient(
+        600px circle at var(--mouse-x) var(--mouse-y),
+        var(--clr-card-400),
+        transparent 40%
+    );
+    z-index: 1;
+}
+
+.card > .card-content {
+    background-color: var(--clr-card);
+    border-radius: inherit;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    inset: 1px;
+    padding: 10px;
+    position: absolute;
+    z-index: 2;
+}
+
+/* -- ↓ ↓ ↓ extra card content styles ↓ ↓ ↓ -- */
+
+h1,
+h2,
+h3,
+h4,
+span {
+    color: rgb(240, 240, 240);
+    font-weight: 400;
+    margin: 0px;
+}
+
+.card-info-wrapper {
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-start;
+    padding: 0px 20px;
+}
+
+.card-info {
+    align-items: flex-start;
+    display: flex;
+    gap: 10px;
+}
+
+.card-info-title > h3 {
+    font-size: 1.1em;
+    line-height: 20px;
+}
+
+.card-info-title > h4 {
+    color: var(--clr-card-500);
+    font-size: 0.85em;
+    margin-top: 8px;
+}
+
+/* -- ↓ ↓ ↓ some responsiveness ↓ ↓ ↓ -- */
+
+@media (max-width: 1000px) {
+    body {
+        align-items: flex-start;
+        overflow: auto;
+    }
+
+    #cards {
+        max-width: 1000px;
+        padding: 10px 0px;
+    }
+
+    .card {
+        flex-shrink: 1;
+        width: calc(50% - 4px);
+    }
+}
+
+@media (max-width: 500px) {
+    .card {
+        height: 180px;
+    }
+
+    .card-image {
+        height: 80px;
+    }
+
+    .card-image > i {
+        font-size: 3em;
+    }
+
+    .card-info-wrapper {
+        padding: 0px 10px;
+    }
+
+    .card-info > i {
+        font-size: 0.8em;
+    }
+
+    .card-info-title > h3 {
+        font-size: 0.9em;
+    }
+
+    .card-info-title > h4 {
+        font-size: 0.8em;
+        margin-top: 4px;
+    }
+}
+
+@media (max-width: 35em) {
+    .card {
+        width: 100%;
+    }
+}

static/main/js/projects.js

@@ -0,0 +1,9 @@
+document.getElementById("cards").onmousemove = (e) => {
+    for (const CARD of document.getElementsByClassName("card")) {
+        const RECT = CARD.getBoundingClientRect(),
+            x = e.clientX - RECT.left,
+            y = e.clientY - RECT.top
+        CARD.style.setProperty("--mouse-x", `${x}px`)
+        CARD.style.setProperty("--mouse-y", `${y}px`)
+    }
+}