lighthouse

koh110 · Oct 23, 2024 · 0f03803 · 0f03803
1 parent ed547c6
commit 0f03803
Show file tree

Hide file tree

Showing 19 changed files with 298 additions and 56 deletions.
diff --git a/app/(commonLayout)/contact/page.tsx b/app/(commonLayout)/contact/page.tsx
@@ -16,6 +16,7 @@ const title = 'Contact'
 
 export const metadata: Metadata = {
   title,
+  description: 'contact form',
   openGraph: {
     title
   }

diff --git a/app/(commonLayout)/log/page.tsx b/app/(commonLayout)/log/page.tsx
@@ -11,6 +11,7 @@ const title = 'Log'
 
 export const metadata: Metadata = {
   title,
+  description: 'koh110\'s log',
   openGraph: {
     title
   }

diff --git a/app/(commonLayout)/page.tsx b/app/(commonLayout)/page.tsx
@@ -10,6 +10,7 @@ export default function Index() {
 const title = 'About'
 export const metadata: Metadata = {
   title,
+  description: 'About koh110',
   openGraph: {
     title
   }

diff --git a/app/(commonLayout)/work/page.tsx b/app/(commonLayout)/work/page.tsx
@@ -11,6 +11,7 @@ const title = 'Work'
 
 export const metadata: Metadata = {
   title,
+  description: 'koh110\'s work',
   openGraph: {
     title
   }

diff --git a/app/globals.css b/app/globals.css
@@ -63,10 +63,10 @@ h2 {
   --color-on-base: rgba(42, 42, 42, 1);
   --color-background-body: rgb(223, 235, 247);
   --color-on-header: rgba(255, 255, 255, 1);
-  --color-header: rgba(42, 42, 42, 1);
+  --color-header: hsla(210, 14%, 9%, 0.9);
   --color-body: #545454;
   --color-border: rgb(211, 212, 228);
-  --color-link: #1da1f2;
+  --color-link: rgb(11 107 203);
   --color-body-card: rgb(255, 255, 255);
   --color-on-card: rgba(0, 0, 0, 0.7);
   --color-shadow: rgba(0, 0, 0, .5);
@@ -86,9 +86,10 @@ h2 {
 [data-theme='dark'] {
   --color-background-body: rgba(42, 42, 42, 1);
   --color-body: #ffffff;
-  --color-body-card: #1e1e1e;
+  --color-body-card: hsla(210, 14%, 9%, 0.8);
   --color-on-card: rgba(255, 255, 255, 0.7);
   --color-shadow: rgba(255, 255, 255, .2);
   --color-button: #a6c4dd;
   --color-on-button: rgb(24, 27, 29);
+  --color-link: rgb(149 226 255);
 }
diff --git a/components/CookieConsent/index.tsx b/components/CookieConsent/index.tsx
@@ -39,7 +39,7 @@ export default function CookieConsent() {
   return (
     <div className={styles.wrap} data-show-flag={showFlag}>
       <div className={styles.close}>
-        <button className={styles['icon-button']} onClick={onClose}>
+        <button className={styles['icon-button']} aria-label="close button" onClick={onClose}>
           <Icon iconName="ri-close-line" style={{ color: 'var(--color-body)' }} />
         </button>
       </div>

diff --git a/components/Header/ClientComponent.tsx b/components/Header/ClientComponent.tsx
@@ -29,7 +29,7 @@ export default function Header() {
         </h1>
       </header>
       <div className={styles.fixedHeader} style={fixedStyle}>
-        <h3>{title}</h3>
+        <h1>{title}</h1>
       </div>
     </>
   )

diff --git a/components/Header/styles.module.css b/components/Header/styles.module.css
@@ -30,7 +30,7 @@
 }
 
 .fixedHeader {
-  background-color: var(--color-background-body);
+  background: var(--color-header);
   opacity: 0;
   height: 2em;
   display: flex;
@@ -42,3 +42,9 @@
   transition: opacity 0.3s ease;
   z-index: 100;
 }
+
+.fixedHeader h1 {
+  color: var(--color-on-header);
+  font-size: 1.5em;
+  font-weight: 100;
+}
diff --git a/components/pages/About/History/HistoryElement.module.css b/components/pages/About/History/HistoryElement.module.css
@@ -63,6 +63,9 @@
 }
 .body :global(ul) {
   margin-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
 }
 .date {
   margin-bottom: 0.5em;

diff --git a/components/pages/About/ProfileIcon/index.tsx b/components/pages/About/ProfileIcon/index.tsx
@@ -19,6 +19,7 @@ export default function ProfileIcon() {
       </div>
       <a
         className={`${styles.account_icon} ${animationClass}`}
+        aria-label="blog"
         href="https://blog.koh.dev/"
         target="_blank"
         rel="noopener noreferrer"
@@ -27,6 +28,7 @@ export default function ProfileIcon() {
       </a>
       <a
         className={`${styles.account_icon} ${animationClass}`}
+        aria-label="X"
         href="https://twitter.com/koh110"
         target="_blank"
         rel="noopener noreferrer"
@@ -35,6 +37,7 @@ export default function ProfileIcon() {
       </a>
       <a
         className={`${styles.account_icon} ${animationClass}`}
+        aria-label="github"
         href="/~https://github.com/koh110"
         target="_blank"
         rel="noopener noreferrer"
@@ -43,6 +46,7 @@ export default function ProfileIcon() {
       </a>
       <a
         className={`${styles.account_icon} ${animationClass}`}
+        aria-label="facebook"
         href="https://www.facebook.com/kohta110"
         target="_blank"
         rel="noopener noreferrer"
@@ -51,6 +55,7 @@ export default function ProfileIcon() {
       </a>
       <a
         className={`${styles.account_icon} ${animationClass}`}
+        aria-label="linkedin"
         href="https://jp.linkedin.com/in/ito-kohta-24078410b"
         target="_blank"
         rel="noopener noreferrer"

diff --git a/components/pages/About/index.tsx b/components/pages/About/index.tsx
@@ -50,9 +50,9 @@ export default function About() {
           skills={[
             { name: 'Node.js', num: 100 },
             { name: 'express', num: 60 },
-            { name: 'Next.js', num: 30 },
-            { name: 'PHP', num: 10 },
-            { name: 'Java/Go/etc...', num: 5 }
+            { name: 'Hono', num: 20 },
+            { name: 'Next.js', num: 20 },
+            { name: 'PHP/Ruby/Java/Go/etc...', num: 5 }
           ]}
         />
         <Skill

diff --git a/components/pages/Log/LogElement.tsx b/components/pages/Log/LogElement.tsx
@@ -23,8 +23,8 @@ export default function LogElement(props: Props) {
         </div>
         {props.img && (
           <div className={styles.img_wrap}>
-            <a href={props.url} target="_blank" rel="noopener noreferrer">
-              <img src={props.img} />
+            <a href={props.url} target="_blank" rel="noopener noreferrer" aria-label={props.title}>
+              <img src={props.img} alt={props.title} />
             </a>
           </div>
         )}

diff --git a/components/pages/Work/AmazonElement.module.css b/components/pages/Work/AmazonElement.module.css
@@ -1,36 +1,38 @@
 .wrapper {
-  padding: 1rem;
+  padding: 1em;
   display: flex;
   max-width: 500px;
   background: var(--color-body-card);
   color: var(--color-on-card);
   border-radius: 8px;
 }
 .title {
-  padding: 0 1rem;
+  padding: 0 1em;
   font-weight: 400;
   font-size: 0.875rem;
 }
 .link {
   max-width: 120px;
   place-self: center;
 }
+.link a {
+  display: flex;
+}
 .link img {
   max-width: 120px;
   aspect-ratio: 1058 / 1500;
 }
 .body {
   display: flex;
   flex-direction: column;
-  max-width: calc(500px - 120px - 1rem);
+  max-width: calc(500px - 120px - 1.5em);
 }
 .content {
-  margin-top: 0.5em;
   flex: 1;
 }
 .content p {
   margin: 0;
-  padding: 0 1rem;
+  padding: 0 0 0 1em;
   color: var(--color-on-card);
   font-size: 0.875rem;
 }

diff --git a/components/pages/Work/AmazonElement.tsx b/components/pages/Work/AmazonElement.tsx
@@ -1,30 +1,31 @@
+import type { PropsWithChildren } from 'react'
 import styles from './AmazonElement.module.css'
 
 export type Props = {
-  type: 'amazon'
   title: string
   date: string
   desc: string
   img: string
   url: string
-  dangerouslySetInnerHTML?: string
 }
 
-export default function AmazonElement(props: Props) {
+export default function AmazonElement(props: PropsWithChildren<Props>) {
   return (
     <div className={styles.wrapper}>
       <div className={styles.link}>
-        <a href={props.url} target="_blank">
-          <img src={props.img} />
+        <a href={props.url} target="_blank" aria-label={props.title}>
+          <img src={props.img} alt={props.title} />
         </a>
       </div>
       <div className={styles.body}>
-        <div className={styles.title}>{props.title}</div>
+        <h2 className={styles.title}>{props.title}</h2>
         <div className={styles.content}>
           {props.desc.split('\n').map((e, i) => (
             <p key={i}>{e}</p>
           ))}
-          { props.dangerouslySetInnerHTML && <p dangerouslySetInnerHTML={{ __html: props.dangerouslySetInnerHTML }} /> }
+          <div style={{ padding: '0.5em 1em 0' }}>
+            {props.children}
+          </div>
           <p><a href={props.url} target="_blank">Amazon</a></p>
         </div>
       </div>

diff --git a/components/pages/Work/WorkElement.tsx b/components/pages/Work/WorkElement.tsx
@@ -17,8 +17,8 @@ export default function WorkElement(props: Props) {
       </div>
       {props.img && (
         <div className={styles.img_wrap}>
-          <a href={props.url} target="_blank" rel="noopener noreferrer">
-            <img src={props.img} />
+          <a href={props.url} target="_blank" rel="noopener noreferrer" aria-label={props.title}>
+            <img src={props.img} alt={props.title} />
           </a>
         </div>
       )}

diff --git a/components/pages/Work/index.tsx b/components/pages/Work/index.tsx
@@ -7,33 +7,6 @@ import styles from './index.module.css'
 
 const npmImage = '/npm-logo-simplifed-with-white-space.png'
 
-const books: AmazonLogProps[] = [
-  {
-    type: 'amazon',
-    title: '実践Node.js入門',
-    date: '2023/01/26',
-    desc: [
-      'Node.jsの入門書です。',
-      '基礎知識、環境構築、重要文法、非同期、CLIツール開発、Expressを用いたサーバーサイドの開発やフロントエンド（React）との連携などNode.jsの全体像が学べます。'
-    ].join(''),
-    img: '/nodejs-book.jpg',
-    url: `https://amzn.to/4b2hrIQ`,
-    dangerouslySetInnerHTML: [
-      `<div><a href="https://gihyo.jp/book/2023/978-4-297-12956-9" target="_blank">https://gihyo.jp/book/2023/978-4-297-12956-9</a></div>`,
-      `<div style="margin-top: 1em;"><a href="https://www.hanbit.co.kr/store/books/look.php?p_code=B5038538340" target="_blank">韓国語版</a></div>`,
-    ].join('')
-  },
-  {
-    type: 'amazon',
-    title: '動かして学ぶ! Slackアプリ開発入門',
-    date: '2020/12/14',
-    desc: 'SlackSDKを利用したアプリの作成方法についての解説本。\n業務フローの例に合わせてSlackAPIとサンプルコードを一緒に追っていく形式。',
-    img: '/slack-book.jpg',
-    url: `https://amzn.to/48zE5qE`,
-    dangerouslySetInnerHTML: `<a href="https://www.shoeisha.co.jp/book/detail/9784798164748" target="_blank">https://www.shoeisha.co.jp/book/detail/9784798164748</a>`
-  }
-]
-
 const softs: WorkProps[] = [
   {
     url: '/~https://github.com/koh110/tiny-type-api',
@@ -79,9 +52,32 @@ export default function Work() {
       <div>
         <h2 className={styles.title}>Book</h2>
         <div className={styles.book}>
-          {books.map((e, i) => {
-            return <AmazonElement key={`${i}-${e.title}`} {...e} />
-          })}
+          <AmazonElement
+            title="実践Node.js入門"
+            date="2023/01/26"
+            desc={[
+              'Node.jsの入門書です。',
+              '基礎知識、環境構築、重要文法、非同期、CLIツール開発、Expressを用いたサーバーサイドの開発やフロントエンド（React）との連携などNode.jsの全体像が学べます。'
+            ].join('')}
+            img="/nodejs-book.jpg"
+            url="https://amzn.to/4b2hrIQ"
+          >
+            <div>
+              <a href="https://gihyo.jp/book/2023/978-4-297-12956-9" target="_blank">https://gihyo.jp/book/2023/978-4-297-12956-9</a>
+            </div>
+            <div style={{ marginTop: '0.5em' }}>
+              <a href="https://www.hanbit.co.kr/store/books/look.php?p_code=B5038538340" target="_blank">韓国語版</a>
+            </div>
+          </AmazonElement>
+          <AmazonElement
+            title="動かして学ぶ! Slackアプリ開発入門"
+            date="2020/12/14"
+            desc={['SlackSDKを利用したアプリの作成方法についての解説本。業務フローの例に合わせてSlackAPIとサンプルコードを一緒に追っていく形式。'].join('')}
+            img="/slack-book.jpg"
+            url="https://amzn.to/48zE5qE"
+          >
+            <a href="https://www.shoeisha.co.jp/book/detail/9784798164748" target="_blank">https://www.shoeisha.co.jp/book/detail/9784798164748</a>
+          </AmazonElement>
         </div>
         <h2>Software</h2>
         <div className={styles.soft}>

diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,9 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'export'
 };
 
-module.exports = nextConfig
+module.exports = withBundleAnalyzer(nextConfig)
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,7 @@ const title = 'Contact' @@
     export const metadata: Metadata = {
       title,
+      description: 'contact form',
       openGraph: {
         title
       }
@@ Expand Down @@