init

src/layouts/frontpage/info/info.astro

@@ -0,0 +1,53 @@
+---
+import { data } from '@/data/data.js';
+
+type Props = {
+  class?: string;
+};
+
+const { class: className, ...rest } = Astro.props;
+const { basics } = data.profile;
+---
+
+<div class:list={['sidebar', className]} {...rest}>
+  <div>
+    <div><b>🌐 Location</b></div>
+    <div>{basics.location.city} {basics.location.countryCode}</div>
+  </div>
+  <div>
+    <div><b>✉️ Email</b></div>
+    <div><a href={`mailto:${basics.email}`}>{basics.email}</a></div>
+  </div>
+  <div>
+    <div><b>🕸️ Website</b></div>
+    <div><a href={basics.url}>{basics.url}</a></div>
+  </div>
+  <div>
+    <div><b>🙊 Lanuages</b></div>
+    <div>{basics.languages.map((l) => l.name).join(', ')}</div>
+  </div>
+</div>
+
+<style>
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+    text-align: right;
+    gap: var(--space-md);
+
+    @media screen and (max-width: 768px) {
+      text-align: center;
+      align-items: center;
+    }
+
+    @media print {
+      flex-direction: row;
+    }
+
+    b {
+      font-weight: bold;
+    }
+  }
+</style>