From e341a25a0bbf2cf71a8b903c733fc247a5902fa5 Mon Sep 17 00:00:00 2001 From: Kristofers Solo Date: Wed, 18 Jan 2023 14:28:43 +0200 Subject: [PATCH] Created `Projects` page --- kristofersxyz/apps/main/urls.py | 2 + kristofersxyz/apps/main/views.py | 6 +- static/main/css/projects.css | 176 +++++++++++++++++++++++++++++++ static/main/js/projects.js | 9 ++ templates/main/projects.html | 75 +++++++++++++ 5 files changed, 266 insertions(+), 2 deletions(-) create mode 100644 static/main/css/projects.css create mode 100644 static/main/js/projects.js create mode 100644 templates/main/projects.html diff --git a/kristofersxyz/apps/main/urls.py b/kristofersxyz/apps/main/urls.py index 59006af..0d7543a 100644 --- a/kristofersxyz/apps/main/urls.py +++ b/kristofersxyz/apps/main/urls.py @@ -1,7 +1,9 @@ from django.urls import path + from . import views urlpatterns = [ path("", views.index, name="home"), + path("projects", views.projects, name="projects"), path("lightsaber", views.lightsaber, name="lightsaber"), ] diff --git a/kristofersxyz/apps/main/views.py b/kristofersxyz/apps/main/views.py index 28126fe..c80090b 100644 --- a/kristofersxyz/apps/main/views.py +++ b/kristofersxyz/apps/main/views.py @@ -2,10 +2,12 @@ from django.shortcuts import render def index(request): - """Homepage""" return render(request, "main/index.html", {"title": "Kristofers Solo Webpage"}) def lightsaber(request): - """Lightsaber page""" return render(request, "main/lightsaber.html", {"title": "Lightsaber"}) + + +def projects(request): + return render(request, "main/projects.html", {"title": "Projects"}) diff --git a/static/main/css/projects.css b/static/main/css/projects.css new file mode 100644 index 0000000..321e0aa --- /dev/null +++ b/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%; + } +} diff --git a/static/main/js/projects.js b/static/main/js/projects.js new file mode 100644 index 0000000..e36699d --- /dev/null +++ b/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`) + } +} diff --git a/templates/main/projects.html b/templates/main/projects.html new file mode 100644 index 0000000..2e8da97 --- /dev/null +++ b/templates/main/projects.html @@ -0,0 +1,75 @@ +{% extends "layout.html" %} +{% load static %} +{% block title %}{{ title }}{% endblock %} +{% block meta %} + + +{% endblock %} +{% block content %} +
+
+
+
+
+
+

Apartments

+

Places to be apart. Wait, what?

+
+
+
+
+
+
+
+
+

Apartments

+

Places to be apart. Wait, what?

+
+
+
+
+
+
+
+
+

Apartments

+

Places to be apart. Wait, what?

+
+
+
+
+
+
+
+
+

Apartments

+

Places to be apart. Wait, what?

+
+
+
+
+
+
+
+
+

Apartments

+

Places to be apart. Wait, what?

+
+
+
+
+
+
+
+
+

Apartments

+

Places to be apart. Wait, what?

+
+
+
+
+
+
+{% endblock %}