feat: Added gpg keys page

Author: MathisBurger

pages/gpg.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import Wrapper from '../components/Wrapper';
+import style from '../styles/gpg.module.scss';
+import { Calendar, Clock, Key, Mail } from 'lucide-react';
+
+const gpgKeys = [
+  {
+    name: 'Private',
+    email: 'handymathis@gmail.com',
+    fingerprint: '1A7C B156 9C23 250D ED19 47B9 AFE7 60E2 AA90 75D3',
+    created: '2023-11-28',
+    expires: null,
+  },
+  {
+    name: 'Work',
+    email: 'mburger@die-netzwerkstatt.de',
+    fingerprint: 'EBBD 616F 8904 EE13 C458 DCDA B491 59DB 4F79 868D',
+    created: '2023-03-29',
+    expires: null,
+  },
+];
+
+const GpgPage = () => {
+  return (
+    <Wrapper>
+      <Header active="gpg" />
+      <div className={style.container}>
+        <h1>GPG Keys</h1>
+        <div className={style.box}>
+          {gpgKeys.map((key) => (
+            <div key={key.fingerprint} className={style.elementBox}>
+              <h2>{key.name}</h2>
+
+              <div className={style.field}>
+                <Mail className={style.icon} />
+                <span className={style.label}>Email:</span>
+                <span className={style.value}>{key.email}</span>
+              </div>
+
+              <div className={style.field}>
+                <Key className={style.icon} />
+                <span className={style.label}>Fingerprint:</span>
+                <span className={style.value}>{key.fingerprint}</span>
+              </div>
+
+              <div className={style.field}>
+                <Calendar className={style.icon} />
+                <span className={style.label}>Created:</span>
+                <span className={style.value}>{key.created}</span>
+              </div>
+
+              <div className={style.field}>
+                <Clock className={style.icon} />
+                <span className={style.label}>Expires:</span>
+                <span className={style.value}>
+                  {key.expires ?? 'not specified'}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <Footer />
+    </Wrapper>
+  );
+};
+
+export default GpgPage;

styles/gpg.module.scss

@@ -0,0 +1,91 @@
+.container {
+  width: 100%;
+  background: #0f1019;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2em 0 10em;
+}
+
+.container h1 {
+  padding-top: 1.5em;
+  text-align: center;
+  font-size: 4em;
+  margin-bottom: 2em;
+}
+
+.box {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+  justify-content: center;
+}
+
+.elementBox {
+  width: 30vw;
+  min-height: 250px;
+  border-radius: 5px;
+  border: 1px solid #49519a;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.5em;
+  background-color: #1a1b2b;
+  transition: 0.3s;
+}
+
+@media only screen and (max-width: 880px) {
+  .box {
+    flex-direction: column;
+  }
+  .elementBox {
+    width: 80vw;
+  }
+}
+
+.elementBox:hover {
+  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.6);
+  transform: scale(1.05);
+}
+
+.elementBox h2 {
+  font-size: 1.4em;
+  margin-bottom: 1em;
+  text-align: center;
+}
+
+.field {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1em;
+  margin-bottom: 0.8em;
+  text-align: left;
+  width: 100%;
+}
+
+.fieldValue {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 0.8em;
+  text-align: left;
+}
+
+.icon {
+  font-size: 1.2em;
+  margin-bottom: 0.2em;
+  color: #6b57a1;
+}
+
+.label {
+  font-weight: bold;
+  margin-bottom: 0.2em;
+  font-size: 0.9em;
+}
+
+.value {
+  font-size: 0.9em;
+  word-break: break-all; // to handle long fingerprints
+}