Merge pull request #14 from dorimiamn/fix-profile-icon

プロフィールアイコンの縦横比が崩れる問題の修正
dorimiamn · Jan 13, 2025 · 876bcfd · 876bcfd
2 parents f203d94 + 1d6d534
commit 876bcfd
Showing 1 changed file with 20 additions and 39 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,46 +1,27 @@
 import Image from 'next/image'
 
+function SNSLinkWithIcon({href,alt,imageSrc}:{href: string, alt: string, imageSrc: string}) {
+  return (
+    <a href={href} target="_blank" rel="noopener noreferrer" className='mx-2'>
+      <Image
+        src={imageSrc}
+        width={50}
+        height={50}
+        alt={alt}
+      />
+    </a>
+  )
+}
+
 // 各種 SNS Link 用コンポーネント
 
 function SNSLinkComponent() {
   return (
-    <div className="flex flex-row w-full">
-      <a href="https://github.com/dorimiamn" target="_blank" rel="noopener noreferrer">
-        <Image
-          className='mx-2'
-          src="/github-mark.png"
-          width={50}
-          height={50}
-          alt="GitHub"
-        />
-      </a>
-      <a href="https://x.com/dorimiamn" target="_blank" rel="noopener noreferrer">
-        <Image
-          className='mx-2'
-          src="/logo-black-x.png"
-          width={50}
-          height={50}
-          alt="Twitter"
-        />
-      </a>
-      <a href="https://qiita.com/dorimiamn" target="_blank" rel="noopener noreferrer">
-        <Image
-          className='mx-2'
-          src="/qiita-icon.png"
-          width={50}
-          height={50}
-          alt="Qiita"
-        />
-      </a>
-      <a href="https://misskey.kyoupro.com/@dorimiamn" target="_blank" rel="noopener noreferrer">
-        <Image
-          className='mx-2'
-          src="/misskey_icon.png"
-          width={50}
-          height={50}
-          alt="Misskey Kyoupro"
-        />
-      </a>
+    <div className="flex flex-row w-full justify-center items-center">
+      <SNSLinkWithIcon href="https://github.com/dorimiamn" alt="GitHub" imageSrc="/github-mark.png"/>
+      <SNSLinkWithIcon href="https://x.com/dorimiamn" alt="X" imageSrc="/logo-black-x.png"/>
+      <SNSLinkWithIcon href="https://qiita.com/dorimiamn" alt="Qiita" imageSrc="/qiita-icon.png"/>
+      <SNSLinkWithIcon href="https://misskey.kyoupro.com/@dorimiamn" alt="Misskey Kyoupro" imageSrc="/misskey_icon.png"/>
     </div>
   )
 }
@@ -51,14 +32,14 @@ function MyProfileComponent() {
     <div className="container w-4/6 mx-auto my-10">
       <div className="flex flex-row">
         <Image
-          className="rounded-full"
+          className="rounded-full object-contain m-auto"
           src="/profile_icon_square.jpg"
           width={100}
           height={100}
           alt="Picture of dorimiamn's icon"
         />
         <div className="flex flex-col w-5/6 mx-4 my-0">
-          <h1 className="text-4xl mb-2">dorimiamn</h1>
+          <h1 className="text-4xl mt-1 mb-4 text-center">dorimiamn</h1>
           <SNSLinkComponent />
         </div>
       </div>