style(#24): rename about with lower camel case

src/components/about/AboutText.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import SubHeader from './SubHeader';
+import MarkdownRenderer from '../MarkdownRenderer';
+
+import { abouts } from '../../config/about';
+
+const { subHeader, introductions, pronouns } = abouts;
+
+const AboutText: React.FC = () => {
+
+  const renderIntroduction = () =>
+    introductions.map((item, index) => (
+      <MarkdownRenderer key={`${item}-${index}`} content={item} />
+    ));
+
+  return (
+    <section className="about-text">
+      <SubHeader text={`${subHeader} (${pronouns})`} />
+      <br />
+      {renderIntroduction()}
+    </section>
+  );
+};
+
+export default AboutText;

src/components/about/Clients.tsx

@@ -0,0 +1,43 @@
+import chaewonImage from "../../Assets/images/idols/chaewon_01.png";
+import chaewonImage3 from "../../Assets/images/idols/chaewon_03.png";
+import yoonaImage from "../../Assets/images/idols/yoona_01.png";
+import yoonaImage2 from "../../Assets/images/idols/yoona_02.png";
+import yujinImage from "../../Assets/images/idols/yujin.png";
+
+interface Client {
+  image: string;
+  alt: string;
+}
+
+const clients: Client[] = [
+  { image: chaewonImage, alt: "ChaeWon Image" },
+  { image: yoonaImage, alt: "Yoona Image" },
+  { image: yoonaImage2, alt: "Yoona Image" },
+  { image: yujinImage, alt: "YuJin Image" },
+  { image: chaewonImage3, alt: "ChaeWon Image" }
+];
+
+
+
+const Clients: React.FC = () => {
+  return (
+
+    <section className="clients">
+
+      <p>
+        <h3><code> $ ls -al Idols</code></h3>
+      </p>
+
+      <ul className="clients-list has-scrollbar">
+        {clients.map((client, index) => (
+          <li key={index} className="clients-item">
+            <img src={client.image} alt={client.alt} loading="lazy" />
+          </li>
+        ))}
+      </ul>
+
+    </section>
+  );
+}
+
+export default Clients;

src/components/about/GitHubStats.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState, FC } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import GitHubCalendar from 'react-github-calendar';
+import { ThemeInput } from 'react-activity-calendar';
+
+import SubHeader from './SubHeader';
+import { abouts } from '../../config/about';
+
+/* 
+* goto https://grubersjoe.github.io/react-activity-calendar/
+* to see more themes
+*/
+const yellowTheme: ThemeInput = {
+  light: ['hsl(0, 0%, 92%)', '#FFDA6B'],
+  dark: ['hsl(0, 0%, 22%)', '#FFDA6B'],
+};
+
+const { githubUsername } = abouts;
+const subHeaderText = '$ ls -al GitHub Stats';
+const MOBILE_CALENDAR_SIZE = 12;
+const LAPTOP_CALENDAR_SIZE = 12;
+const MOBILE_BREAKPOINT = 768;
+
+const GitHubStats: FC = () => {
+  const [searchParams] = useSearchParams();
+  const initialUsername = searchParams.get('user') ?? githubUsername;
+
+  const [username, setUsername] = useState(initialUsername);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    setUsername(initialUsername);
+  }, [initialUsername]);
+
+  const isMobile = windowWidth <= MOBILE_BREAKPOINT;
+
+  return (
+    <section className="about-text">
+      <SubHeader text={subHeaderText} />
+      <br />
+      <GitHubCalendar
+        username={username}
+        blockSize={isMobile ? MOBILE_CALENDAR_SIZE : LAPTOP_CALENDAR_SIZE}
+        blockMargin={4}
+        colorScheme="dark"
+        blockRadius={2}
+        fontSize={14}
+        style={{ fontWeight: 'bold' }}
+        theme={yellowTheme}
+      />
+    </section>
+  );
+};
+
+export default GitHubStats;

src/components/about/LifeStyles.tsx

@@ -0,0 +1,35 @@
+import { abouts } from '../../config/about';
+import { ILifeStyle } from '../../interface/IAbout';
+import SubHeader from './SubHeader';
+
+
+const subHeader = "$ ls -al Life Style";
+
+
+const LifeStyles: React.FC = () => {
+  const { lifestyle: lifestyles } = abouts;
+
+  // TODO: update inheritance of p.h3
+  return (
+    <section className="service">
+      <SubHeader text={subHeader} />
+
+      <ul className="service-list">
+        {lifestyles.map((lifestyle: ILifeStyle, index: number) => (    // TODO: Do not use Array index in keys
+          <li className="service-item" key={index}>
+            <div className="service-icon-box">
+              <img src={lifestyle.icon} alt={lifestyle.title} width="30" />
+            </div>
+            <div className="service-content-box">
+              <h4 className="h4 service-item-title">{lifestyle.title}</h4>
+              <p className="service-item-text">{lifestyle.text}</p>
+            </div>
+          </li>
+        ))}
+      </ul>
+
+    </section>
+  );
+}
+
+export default LifeStyles;

src/components/about/SubHeader.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface SubHeaderProps {
+  text: string;
+}
+
+const SubHeader: React.FC<SubHeaderProps> = ({ text }) => {
+  return (
+    <h3>
+      <code>{text}</code>
+    </h3>
+  );
+};
+
+export default SubHeader;

src/components/about/TechStack.tsx

@@ -0,0 +1,32 @@
+import { abouts } from '../../config/about';
+import { ITechStack } from '../../interface/IAbout';
+import SubHeader from './SubHeader';
+
+
+const subHeader = "$ ls -al Tech Stack";
+const TechStack: React.FC = () => {
+  const { programmingLanguage, devOps } = abouts;
+
+  const renderTechStackList = (techStack: ITechStack[]) => {
+    return (
+      <ul className="techstack-list has-scrollbar">
+        {techStack.map((item: ITechStack) => (
+          <li key={item.name} className="techstack-item">
+            <img src={item.iconUrl} alt={item.name} />
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  return (
+    <section className="about-text">
+      <SubHeader text={subHeader} />
+
+      {renderTechStackList(programmingLanguage)}
+      {renderTechStackList(devOps)}
+    </section>
+  );
+}
+
+export default TechStack;

src/page/About/index.tsx

@@ -5,10 +5,10 @@ import { abouts } from "../../config/about";
 
 import NavBar from "../../components/Navbar";
 import Sidebar from "../../components/sideBar/SideBar";
-import AboutText from "../../components/About/AboutText";
-import LifeStyles from "../../components/About/LifeStyles";
-import GitHubStats from "../../components/About/GitHubStats";
-import TechStack from "../../components/About/TechStack";
+import AboutText from "../../components/about/AboutText";
+import LifeStyles from "../../components/about/LifeStyles";
+import GitHubStats from "../../components/about/GitHubStats";
+import TechStack from "../../components/about/TechStack";
 import Header from "../../components/Header";