From 8066d0255038c0717d4829c234398c1e59fd3ec0 Mon Sep 17 00:00:00 2001
From: kigawa <contact@kigawa.net>
Date: Wed, 1 May 2024 20:10:14 +0000
Subject: [PATCH] Refactor Profile section to About, adjust styles

---
 src/components/GlobalStyle.astro     |  6 +++---
 src/components/LabeledItem.astro     |  6 +++---
 src/components/main/About.astro      | 19 +++++++++++++++++++
 src/components/main/MainScroll.astro |  2 +-
 src/components/main/Profile.astro    |  6 ------
 src/components/main/Section.astro    |  3 +--
 src/components/nav/Nav.astro         |  2 +-
 7 files changed, 28 insertions(+), 16 deletions(-)
 create mode 100644 src/components/main/About.astro
 delete mode 100644 src/components/main/Profile.astro

diff --git a/src/components/GlobalStyle.astro b/src/components/GlobalStyle.astro
index 3606019..8d02c11 100644
--- a/src/components/GlobalStyle.astro
+++ b/src/components/GlobalStyle.astro
@@ -5,7 +5,7 @@ import Theme from "./Theme.astro";
 
 <style is:global lang="scss">
   @font-face {
-    font-family  : "DistantGalaxy";
+    font-family  : "UDEVGothicJPDOC";
     src          : url("/font/UDEVGothic_v1-3-1/UDEVGothicJPDOC-Bold.ttf") format("truetype");
     font-weight  : normal;
     font-style   : normal;
@@ -32,8 +32,8 @@ import Theme from "./Theme.astro";
   body {
     background-color : var(--mcolor-surface);
     padding          : 0;
-    font-family      : "DistantGalaxy", sans-serif;
-    line-height      : 1.2;
+    font-family      : "UDEVGothicJPDOC", sans-serif;
+    line-height      : 1.8;
     min-height       : 100vh;
     color            : var(--mcolor-on-surface);
     font-size: 1.2rem;
diff --git a/src/components/LabeledItem.astro b/src/components/LabeledItem.astro
index 91658f1..11329cf 100644
--- a/src/components/LabeledItem.astro
+++ b/src/components/LabeledItem.astro
@@ -13,7 +13,7 @@ const {text} = Astro.props
 <style>
   div.wrapper {
     padding: 0;
-    margin: 15px 0;
+    margin: 7px 0;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -21,12 +21,12 @@ const {text} = Astro.props
     p {
       display: block;
       font-size: 1.3rem;
-      margin: 5px 0;
+      margin: 3px 0;
       width: 120px;
     }
     div {
       padding: 0 0 0 30px;
-      margin: 5px 0;
+      margin: 3px 0;
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/main/About.astro b/src/components/main/About.astro
new file mode 100644
index 0000000..450a097
--- /dev/null
+++ b/src/components/main/About.astro
@@ -0,0 +1,19 @@
+---
+import Section from "./Section.astro";
+---
+<Section title="about">
+  <h3>バックエンド・ライブラリ開発・インフラ構築を得意とするITエンジニアです。</h3>
+  <p>
+    webバックエンドの開発だけでなく、連携したChrome拡張機能やWindowsサービス、リアクトを用いたフロントエンド開発や、webサーバーへのCDの構築などの経験があります。
+    プライベートでは、webアプリケーションよりもライブラリ開発や、ゲームのmod開発などが多くなっています。
+  </p>
+  <p>コミュニティ運営も行っており、クローズドな30人規模のコミュニティで副代表を務め、開発者を兼任してMinecraftを利用したRPG開発を行っています。</p>
+</Section>
+
+<style>
+  h3{
+    display: block;
+    border-radius: 5px;
+    margin: 20px 10px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/main/MainScroll.astro b/src/components/main/MainScroll.astro
index 64351a8..d495b64 100644
--- a/src/components/main/MainScroll.astro
+++ b/src/components/main/MainScroll.astro
@@ -1,5 +1,5 @@
 ---
-import Profile from "./Profile.astro";
+import Profile from "./About.astro";
 ---
 <div class="scroll">
   <Profile/>
diff --git a/src/components/main/Profile.astro b/src/components/main/Profile.astro
deleted file mode 100644
index bac666c..0000000
--- a/src/components/main/Profile.astro
+++ /dev/null
@@ -1,6 +0,0 @@
----
-import Section from "./Section.astro";
----
-<Section title="profile">
-<h3>バックエンド・ライブラリ開発・インフラ構築を得意とするITエンジニア。</h3>
-</Section>
\ No newline at end of file
diff --git a/src/components/main/Section.astro b/src/components/main/Section.astro
index dfe4749..1453811 100644
--- a/src/components/main/Section.astro
+++ b/src/components/main/Section.astro
@@ -10,7 +10,6 @@ const {title} = Astro.props
 </section>
 <style>
   section {
-    height: 800px;
     border-radius: 5px;
     border: 2px solid var(--mcolor-outline);
     background-color: var(--mcolor-secondary-container);
@@ -25,7 +24,7 @@ const {title} = Astro.props
     max-width: 500px;
     border-bottom: 2px solid var(--mcolor-outline);
     position: relative;
-    margin: 0 0 0 20px;
+    margin: 0 0 60px 20px;
     padding: 0 10px;
     &::before {
       border-bottom: 2px solid var(--mcolor-outline);
diff --git a/src/components/nav/Nav.astro b/src/components/nav/Nav.astro
index de3af07..0441453 100644
--- a/src/components/nav/Nav.astro
+++ b/src/components/nav/Nav.astro
@@ -6,7 +6,7 @@ import LabeledItem from "../LabeledItem.astro";
   <nav>
     <a href="/"><h1>kigawa's portfolio</h1></a>
     <ul>
-      <NavButton title="profile"/>
+      <NavButton title="about"/>
       <NavButton title="skill"/>
       <NavButton title="experience"/>
       <NavButton title="products"/>