update: Add Article Header

app/domain/entities/text.entity.ts

@@ -0,0 +1,5 @@
+export interface TextProps {
+    str: string;
+    color?: string;
+   }
+

app/page.tsx

@@ -1,33 +1,7 @@
-import ParallaxContainer from "./presentation/component/ParallaxContainer";
+import MainScreen from "./presentation/screen/MainScreen";
 
 export default function Home() {
   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"}>
-        <article className="h-screen flex items-center justify-center text-2xl">
-          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
-        </article>
-      </ParallaxContainer>
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-02.webp"}>
-        <article className="h-screen flex items-center justify-center text-2xl">
-          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
-        </article>
-      </ParallaxContainer>
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-03.webp"}>
-        <article className="h-screen flex items-center justify-center text-2xl">
-          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
-        </article>
-      </ParallaxContainer>
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-04.webp"}>
-        <article className="h-screen flex items-center justify-center text-2xl">
-          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
-        </article>
-      </ParallaxContainer>
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-05.webp"}>
-        <article className="h-screen flex items-center justify-center text-2xl">
-          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
-        </article>
-      </ParallaxContainer>
-    </div>
+    <MainScreen/>
   );
 }

app/presentation/component/article/AboutMe.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ArticleHeader from '../text/ArticleHeader'
+
+type Props = {}
+
+const AboutMe = (props: Props) => {
+  return (
+    <div className='h-full flex flex-col items-center justify-center'>
+        <ArticleHeader str='ABOUT ME'/>
+    </div>
+  )
+}
+
+export default AboutMe

app/presentation/component/article/Career.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ArticleHeader from '../text/ArticleHeader'
+
+type Props = {}
+
+const Career = (props: Props) => {
+  return (
+    <div className='h-full flex flex-col items-center justify-center'>
+        <ArticleHeader str='CAREER'/>
+    </div>
+  )
+}
+
+export default Career

app/presentation/component/article/Projects.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ArticleHeader from '../text/ArticleHeader'
+
+type Props = {}
+
+const Projects = (props: Props) => {
+  return (
+    <div className='h-full flex flex-col items-center justify-center'>
+        <ArticleHeader str='PROJECTS'/>
+    </div>
+  )
+}
+
+export default Projects

app/presentation/component/article/SimpleIntroduce.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import ArticleHeader from '../text/ArticleHeader'
+
+type Props = {}
+
+const SimpleIntroduce = (props: Props) => {
+
+    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-2xl'>{str2}</p>
+    </div>
+  )
+}
+
+export default SimpleIntroduce

app/presentation/component/article/Skills.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ArticleHeader from '../text/ArticleHeader'
+
+type Props = {}
+
+const Skills = (props: Props) => {
+  return (
+    <div className='h-full flex flex-col items-center justify-center'>
+        <ArticleHeader str='SKILLS' color='#000000'/>
+    </div>
+  )
+}
+
+export default Skills

app/presentation/component/text/ArticleHeader.tsx

@@ -0,0 +1,10 @@
+import { TextProps } from '@/app/domain/entities/text.entity'
+import React from 'react'
+
+const ArticleHeader = ({ str, color = '#ffffff' }: TextProps) => {
+  return (
+    <p className='font-extrabold text-8xl whitespace-pre-wrap text-center pb-4 border-b-4 mb-8' style={{ color }}>{str}</p>
+  )
+}
+
+export default ArticleHeader

app/presentation/screen/MainScreen.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import ParallaxContainer from '../component/ParallaxContainer'
+import SimpleIntroduce from '../component/article/SimpleIntroduce'
+import AboutMe from '../component/article/AboutMe'
+import Skills from '../component/article/Skills'
+import Projects from '../component/article/Projects'
+import Career from '../component/article/Career'
+
+type Props = {}
+
+const MainScreen = (props: Props) => {
+  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>
+      <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>
+      <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>
+    </div>
+  )
+}
+
+export default MainScreen