Merge pull request #46 from piny940/profile

プロフィールにqiitaとgithubのアイコンを追加
piny940 · Oct 23, 2023 · 45a7e1c · 45a7e1c
2 parents 5a6033d + af4d102
commit 45a7e1c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/src/components/Portfolio/Profile.tsx b/src/components/Portfolio/Profile.tsx
@@ -1,6 +1,11 @@
+import { useTheme } from '@/context/ThemeProvider'
 import { Profile } from '@/models/profile'
 import Image from 'next/image'
+import Link from 'next/link'
 import styled from 'styled-components'
+import githubWhiteIcon from '../../resources/images/common/github-white.png'
+import githubIcon from '../../resources/images/common/github.png'
+import qiitaIcon from '../../resources/images/common/qiita.png'
 
 const BgDiv = styled.div`
   background-image: url('/images/profile/background.png');
@@ -29,6 +34,8 @@ export const Profiles: React.FC<ProfilesProps> = ({
   className = '',
   profile,
 }) => {
+  const { theme } = useTheme()
+
   return (
     <div
       className={
@@ -45,6 +52,31 @@ export const Profiles: React.FC<ProfilesProps> = ({
           className="rounded-circle"
         />
         <h1 className="mt-2">Piny940</h1>
+        <ul className="list-unstyled mt-2 mb-1 d-flex align-items-center">
+          <li>
+            <Link
+              target="_blank"
+              href={profile.getGithub()}
+              className="unstyled mx-1"
+            >
+              <Image
+                src={theme === 'light' ? githubIcon : githubWhiteIcon}
+                width={31}
+                height={31}
+                alt="github-icon"
+              />
+            </Link>
+          </li>
+          <li>
+            <Link
+              href={profile.getQiita()}
+              target="_blank"
+              className="unstyled mx-1"
+            >
+              <Image src={qiitaIcon} width={31} height={31} alt="qiita-icon" />
+            </Link>
+          </li>
+        </ul>
         <p className="mt-3 top-profile">{profile.getFrontDescription()}</p>
       </ProfileDiv>
     </div>

diff --git a/src/data/profile.yml b/src/data/profile.yml
@@ -1 +1,3 @@
 frontDescription: 大学進学と共にプログラミングの勉強を始め、Rails・Reactを用いてアルバイト/個人の趣味開発としてwebアプリの開発を行っています。
+qiita: https://qiita.com/piny940
+github: https://github.com/piny940
diff --git a/src/models/profile.ts b/src/models/profile.ts
@@ -1,5 +1,7 @@
 export interface ProfileData {
   frontDescription: string
+  qiita: string
+  github: string
 }
 
 export class Profile {
@@ -10,4 +12,6 @@ export class Profile {
   }
 
   getFrontDescription = () => this.#data.frontDescription
+  getQiita = () => this.#data.qiita
+  getGithub = () => this.#data.github
 }