add about me and picture

jaemin-s · Nov 28, 2024 · 605e701 · 605e701
1 parent f8fd96b
commit 605e701
Show file tree

Hide file tree

Showing 20 changed files with 572 additions and 179 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,9 @@
+{
+  "semi": false,
+  "printWidth": 120,
+  "arrowParens": "always",
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "all"
+}
diff --git a/app/domain/entities/aboutMe.entity.ts b/app/domain/entities/aboutMe.entity.ts
@@ -0,0 +1,5 @@
+export interface AboutMeProps {
+  header: string
+  body: string
+  children?: React.ReactNode
+}
diff --git a/app/domain/entities/svgStyle.entity.ts b/app/domain/entities/svgStyle.entity.ts
@@ -0,0 +1,5 @@
+export interface SvgStyle {
+  color?: string
+  width?: string
+  height?: string
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,21 +1,19 @@
-import type { Metadata } from "next";
-import "./globals.css";
+import type { Metadata } from 'next'
+import './globals.css'
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang="en">
-      <body>
-        {children}
-      </body>
+      <body>{children}</body>
     </html>
-  );
+  )
 }
diff --git a/app/presentation/component/ParallaxContainer.tsx b/app/presentation/component/ParallaxContainer.tsx
@@ -1,19 +1,19 @@
 import React, { ReactNode } from 'react'
 
 interface ParallaxProps {
-    children? : ReactNode,
-    imgSrc : string
+  children?: ReactNode
+  imgSrc: string
 }
 
-const ParallaxContainer: React.FC<ParallaxProps> = ({ children, imgSrc })  => {
-    
-    return (
-        <section 
-        className={'h-screen bg-cover relative parallaxGradient '}
-        style={{ backgroundImage: `url('${imgSrc}')`, backgroundAttachment: 'fixed' }}>
-            {children}
-        </section>
-    )
+const ParallaxContainer: React.FC<ParallaxProps> = ({ children, imgSrc }) => {
+  return (
+    <section
+      className={'h-screen bg-cover relative parallaxGradient '}
+      style={{ backgroundImage: `url('${imgSrc}')`, backgroundAttachment: 'fixed' }}
+    >
+      {children}
+    </section>
+  )
 }
 
-export default ParallaxContainer
+export default ParallaxContainer
diff --git a/app/presentation/component/article/AboutMe.tsx b/app/presentation/component/article/AboutMe.tsx
@@ -1,12 +1,42 @@
 import React from 'react'
 import ArticleHeader from '../text/ArticleHeader'
+import AboutMeCard from '../card/AboutMeCard'
+import IconProfile from '../svg/IconProfile'
+import IconCalendar from '../svg/IconCalendar'
+import IconLocation from '../svg/IconLocation'
+import IconPhone from '../svg/IconPhone'
+import IconMail from '../svg/IconMail'
+import IconEdu from '../svg/IconEdu'
 
 const AboutMe = () => {
+  const size = '48px'
+  const edu = `부천대학교
+정보통신학과`
   return (
-    <div className='h-full flex flex-col items-center justify-center'>
-        <ArticleHeader str='ABOUT ME'/>
+    <div className="h-full flex flex-col items-center justify-center">
+      <ArticleHeader str="ABOUT ME" />
+      <div className="grid grid-cols-3 gap-x-10 gap-y-8">
+        <AboutMeCard header="이름" body="심재민">
+          <IconProfile width={size} height={size} />
+        </AboutMeCard>
+        <AboutMeCard header="생년월일" body="95.01.25">
+          <IconCalendar width={size} height={size} />
+        </AboutMeCard>
+        <AboutMeCard header="위치" body="인천광역시 계양구">
+          <IconLocation width={size} height={size} />
+        </AboutMeCard>
+        <AboutMeCard header="연락처" body="010-2083-4033">
+          <IconPhone width={size} height={size} />
+        </AboutMeCard>
+        <AboutMeCard header="이메일" body="[email protected]">
+          <IconMail width={size} height={size} />
+        </AboutMeCard>
+        <AboutMeCard header="학력" body={edu}>
+          <IconEdu width={size} height={size} />
+        </AboutMeCard>
+      </div>
     </div>
   )
 }
 
-export default AboutMe
+export default AboutMe
diff --git a/app/presentation/component/article/SimpleIntroduce.tsx b/app/presentation/component/article/SimpleIntroduce.tsx
@@ -2,15 +2,20 @@ import React from 'react'
 import ArticleHeader from '../text/ArticleHeader'
 
 const SimpleIntroduce = () => {
-
-    const str = `SIM JAE MIN`
-    const str2 = `안녕하세요\n지속적인 성장과 혁신을 추구하는\n열정적인 프론트엔드 개발자\n심재민입니다`
+  const str = `SIM JAE MIN`
+  const str2 = `안녕하세요\n지속적인 성장과 혁신을 추구하는\n열정적인 프론트엔드 개발자\n심재민입니다`
   return (
-    <div className='h-full flex flex-col items-center justify-center'>
-        <ArticleHeader str={str} color='#ffeeaa'/>
-        <p className='whitespace-pre-wrap text-center text-xl'>{str2}</p>
+    <div className="h-full flex flex-col items-center justify-center">
+      <ArticleHeader str={str} color="#ffeeaa" />
+      <div className="flex gap-10 h-fit items-center">
+        <img
+          className="w-40 h-40 object-cover object-top rounded-full"
+          src="https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/personal/jm.jpg"
+        />
+        <p className="whitespace-pre-wrap text-center text-xl">{str2}</p>
+      </div>
     </div>
   )
 }
 
-export default SimpleIntroduce
+export default SimpleIntroduce
diff --git a/app/presentation/component/card/AboutMeCard.tsx b/app/presentation/component/card/AboutMeCard.tsx
@@ -0,0 +1,18 @@
+import { AboutMeProps } from '@/app/domain/entities/aboutMe.entity'
+import React from 'react'
+import SubHeaderText from '../text/SubHeaderText'
+import BodyText from '../text/BodyText'
+
+const AboutMeCard = ({ header, body, children }: AboutMeProps) => {
+  return (
+    <div className="flex">
+      <div className="flex pr-4">{children}</div>
+      <div className="flex flex-col gap-1">
+        <SubHeaderText str={header} />
+        <BodyText str={body} />
+      </div>
+    </div>
+  )
+}
+
+export default AboutMeCard
diff --git a/app/presentation/component/svg/IconCalendar.tsx b/app/presentation/component/svg/IconCalendar.tsx
@@ -0,0 +1,12 @@
+import { SvgStyle } from '@/app/domain/entities/svgStyle.entity'
+import React from 'react'
+
+const IconCalendar = ({ color = '#ffffff', width = '24px', height = '24px' }: SvgStyle) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height={height} viewBox="0 -960 960 960" width={width} fill={color}>
+      <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" />
+    </svg>
+  )
+}
+
+export default IconCalendar
diff --git a/app/presentation/component/svg/IconEdu.tsx b/app/presentation/component/svg/IconEdu.tsx
@@ -0,0 +1,12 @@
+import { SvgStyle } from '@/app/domain/entities/svgStyle.entity'
+import React from 'react'
+
+function IconEdu({ color = '#ffffff', width = '24px', height = '24px' }: SvgStyle) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height={height} viewBox="0 -960 960 960" width={width} fill={color}>
+      <path d="M480-120 200-272v-240L40-600l440-240 440 240v320h-80v-276l-80 44v240L480-120Zm0-332 274-148-274-148-274 148 274 148Zm0 241 200-108v-151L480-360 280-470v151l200 108Zm0-241Zm0 90Zm0 0Z" />
+    </svg>
+  )
+}
+
+export default IconEdu
diff --git a/app/presentation/component/svg/IconLocation.tsx b/app/presentation/component/svg/IconLocation.tsx
@@ -0,0 +1,12 @@
+import { SvgStyle } from '@/app/domain/entities/svgStyle.entity'
+import React from 'react'
+
+function IconLocation({ color = '#ffffff', width = '24px', height = '24px' }: SvgStyle) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height={height} viewBox="0 -960 960 960" width={width} fill={color}>
+      <path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z" />
+    </svg>
+  )
+}
+
+export default IconLocation
diff --git a/app/presentation/component/svg/IconMail.tsx b/app/presentation/component/svg/IconMail.tsx
@@ -0,0 +1,12 @@
+import { SvgStyle } from '@/app/domain/entities/svgStyle.entity'
+import React from 'react'
+
+function IconMail({ color = '#ffffff', width = '24px', height = '24px' }: SvgStyle) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height={height} viewBox="0 -960 960 960" width={width} fill={color}>
+      <path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z" />
+    </svg>
+  )
+}
+
+export default IconMail
diff --git a/app/presentation/component/svg/IconPhone.tsx b/app/presentation/component/svg/IconPhone.tsx
@@ -0,0 +1,12 @@
+import { SvgStyle } from '@/app/domain/entities/svgStyle.entity'
+import React from 'react'
+
+function IconPhone({ color = '#ffffff', width = '24px', height = '24px' }: SvgStyle) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height={height} viewBox="0 -960 960 960" width={width} fill={color}>
+      <path d="M280-40q-33 0-56.5-23.5T200-120v-720q0-33 23.5-56.5T280-920h400q33 0 56.5 23.5T760-840v720q0 33-23.5 56.5T680-40H280Zm0-120v40h400v-40H280Zm0-80h400v-480H280v480Zm0-560h400v-40H280v40Zm0 0v-40 40Zm0 640v40-40Z" />
+    </svg>
+  )
+}
+
+export default IconPhone
diff --git a/app/presentation/component/svg/IconProfile.tsx b/app/presentation/component/svg/IconProfile.tsx
@@ -0,0 +1,12 @@
+import { SvgStyle } from '@/app/domain/entities/svgStyle.entity'
+import React from 'react'
+
+const IconProfile = ({ color = '#ffffff', width = '24px', height = '24px' }: SvgStyle) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height={height} viewBox="0 -960 960 960" width={width} fill={color}>
+      <path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z" />
+    </svg>
+  )
+}
+
+export default IconProfile
diff --git a/app/presentation/component/text/ArticleHeader.tsx b/app/presentation/component/text/ArticleHeader.tsx
@@ -3,8 +3,10 @@ import React from 'react'
 
 const ArticleHeader = ({ str, color = '#ffffff' }: TextProps) => {
   return (
-    <p className='font-extrabold text-[12vmin] whitespace-pre-wrap text-center pb-4 border-b-4 mb-8' style={{ color }}>{str}</p>
+    <p className="font-extrabold text-[12vmin] whitespace-pre-wrap text-center pb-4 border-b-4 mb-8" style={{ color }}>
+      {str}
+    </p>
   )
 }
 
-export default ArticleHeader
+export default ArticleHeader
diff --git a/app/presentation/component/text/BodyText.tsx b/app/presentation/component/text/BodyText.tsx
@@ -0,0 +1,8 @@
+import { TextProps } from '@/app/domain/entities/text.entity'
+import React from 'react'
+
+const BodyText = ({ str, color = '#000000' }: TextProps) => {
+  return <p className="text-lg whitespace-pre-wrap">{str}</p>
+}
+
+export default BodyText
diff --git a/app/presentation/component/text/SubHeaderText.tsx b/app/presentation/component/text/SubHeaderText.tsx
@@ -0,0 +1,8 @@
+import { TextProps } from '@/app/domain/entities/text.entity'
+import React from 'react'
+
+const SubHeaderText = ({ str, color = '#000000' }: TextProps) => {
+  return <h3 className="font-bold text-xl">{str}</h3>
+}
+
+export default SubHeaderText
diff --git a/app/presentation/screen/MainScreen.tsx b/app/presentation/screen/MainScreen.tsx
@@ -9,23 +9,23 @@ import Career from '../component/article/Career'
 const MainScreen = () => {
   return (
     <div className="bg-gray-600 w-screen h-screen overflow-y-scroll">
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-01.webp"}>
-        <SimpleIntroduce/>
+      <ParallaxContainer imgSrc={'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-01.webp'}>
+        <SimpleIntroduce />
       </ParallaxContainer>
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-02.webp"}>
-        <AboutMe/>
+      <ParallaxContainer imgSrc={'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-02.webp'}>
+        <AboutMe />
       </ParallaxContainer>
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-03.webp"}>
-        <Skills/>
+      <ParallaxContainer imgSrc={'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-03.webp'}>
+        <Skills />
       </ParallaxContainer>
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-04.webp"}>
-        <Career/>
+      <ParallaxContainer imgSrc={'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-04.webp'}>
+        <Career />
       </ParallaxContainer>
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-05.webp"}>
-        <Projects/>
+      <ParallaxContainer imgSrc={'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-05.webp'}>
+        <Projects />
       </ParallaxContainer>
     </div>
   )
 }
 
-export default MainScreen
+export default MainScreen
diff --git a/package.json b/package.json
@@ -15,12 +15,23 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
+    "@types/eslint-plugin-jsx-a11y": "^6",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "eslint": "^9.15.0",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-next": "15.0.3",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "postcss": "^8",
+    "prettier": "^3.4.1",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.16.0"