最低限のプロフィール表示

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.insertSpaces": true,
+  "editor.tabSize": 2,
+  "editor.detectIndentation": false,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+}

package.json

@@ -10,6 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^3.0.10"
+    "astro": "^3.0.10",
+    "sass": "^1.66.1"
   }
 }

src/components/Links.astro

@@ -0,0 +1,87 @@
+---
+const links = [
+  {
+    title: "GitHub",
+    url: "https://github.com/nedew",
+  },
+  {
+    title: "Twitter",
+    url: "https://twitter.com/nedew",
+  },
+  {
+    title: "Scrapbox",
+    url: "https://scrapbox.io/nedew",
+  },
+  {
+    title: "Blog",
+    url: "https://nedew.dev",
+  },
+];
+---
+
+<div class="links">
+  {
+    links.map((link) => (
+      <div class="link">
+        <a href={link.url} rel="noopener noreferrer" class="link-anchor">
+          <div class="link-title">{link.title}</div>
+        </a>
+      </div>
+    ))
+  }
+</div>
+<style lang="scss">
+  .links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem 1.5rem;
+    text-align: center;
+    padding-top: 1.5rem;
+    max-width: 100%;
+  }
+
+  .link {
+    height: 36px;
+    width: 100px;
+    font-weight: bold;
+    box-sizing: border-box;
+    color: var(--color-text);
+  }
+
+  .link-anchor {
+    position: relative;
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    width: 100%;
+    height: 100%;
+    padding-bottom: 18px;
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 10px;
+      left: 0;
+      bottom: 0;
+      background-color: #d6d6d6;
+      transition: all 0.3s ease-in-out;
+    }
+
+    &:hover {
+      &::after {
+        background-color: var(--color-primary);
+      }
+    }
+  }
+
+  .link-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    line-height: 1;
+    font-size: 1.2rem;
+  }
+</style>

src/components/Profile.astro

@@ -0,0 +1,75 @@
+---
+import { Image } from "astro:assets";
+import icon from "../images/icon.png";
+import Links from "./Links.astro";
+---
+
+<div class="wrapper">
+  <div class="profile">
+    <div class="icon">
+      <Image src={icon} width={150} alt="Profile Icon" />
+    </div>
+    <div>
+      <h1 class="name">Nero Nakamichi</h1>
+      <div class="summary">
+        <p>I'm a software engineer</p>
+      </div>
+    </div>
+    <Links />
+  </div>
+
+  <style lang="scss">
+    .wrapper {
+      min-height: calc(
+        100vh - var(--frame-width) * 2 - var(--frame-padding) * 2
+      );
+      display: flex;
+      align-items: center;
+    }
+
+    .profile {
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 2rem;
+      text-align: center;
+      margin: auto;
+      color: var(--color-text);
+      margin: auto;
+      padding-bottom: 5rem;
+    }
+
+    .icon {
+      background-size: cover;
+      // margin-right: 1.5rem;
+
+      img {
+        border-radius: 50%;
+        margin-bottom: 1rem;
+      }
+    }
+
+    .name {
+      // font-family: Montserrat, sans-serif;
+      font-size: 2.2rem;
+      // font-weight: 700;
+      // font-weight: bold;
+      line-height: 1;
+      margin: 0;
+      margin-bottom: 1.5rem;
+    }
+
+    .summary {
+      margin-bottom: 1rem;
+      font-size: 1.1rem;
+
+      p {
+        margin: 0;
+        opacity: 0.9;
+
+        &:not(:last-child) {
+          margin-bottom: 1em;
+        }
+      }
+    }
+  </style>
+</div>

src/layouts/Frame.astro

@@ -0,0 +1,26 @@
+---
+
+---
+
+<div class="frame">
+  <div class="contents">
+    <slot />
+  </div>
+</div>
+<style>
+  .frame {
+    background-color: var(--color-bg);
+    box-sizing: border-box;
+    border: solid;
+    border-color: var(--color-primary);
+    border-width: var(--frame-width);
+    min-height: 100dvh;
+    width: 100vw;
+    padding: var(--frame-padding);
+  }
+
+  .contents {
+    /* background-color: #fff;
+    margin: 20px; */
+  }
+</style>