docs: update

ngocnhan-tran1996 · Jul 24, 2024 · 44051d6 · 44051d6
1 parent b8a4d78
commit 44051d6
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 70 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import Section from './Section'
+import { SectionFragment } from './Fragment'
 import { informationData, workExperienceData, skillsData, certificationData, educationData } from './data'
 
 export default function App() {
@@ -16,15 +16,15 @@ export default function App() {
         </figcaption>
       </figure>
 
-      <Section title="INFORMATION" divideClassName="border border-primary border-3 opacity-50" properties={informationData} />
+      <SectionFragment title="INFORMATION" divideClassName="border border-primary border-3 opacity-50" properties={informationData} />
 
-      <Section title="WORK EXPERIENCE" divideClassName="border border-black border-3 opacity-75" properties={workExperienceData} />
+      <SectionFragment title="WORK EXPERIENCE" divideClassName="border border-black border-3 opacity-75" properties={workExperienceData} />
 
-      <Section title="SKILLS" divideClassName="border border-secondary border-3 opacity-75" properties={skillsData} />
+      <SectionFragment title="SKILLS" divideClassName="border border-secondary border-3 opacity-75" properties={skillsData} />
 
-      <Section title="CERTIFICATIONS" divideClassName="border border-info border-3 opacity-75" properties={certificationData} />
+      <SectionFragment title="CERTIFICATIONS" divideClassName="border border-info border-3 opacity-75" properties={certificationData} />
 
-      <Section title="EDUCATION" divideClassName="border border-dark-subtle border-3 opacity-50" properties={educationData} />
+      <SectionFragment title="EDUCATION" divideClassName="border border-dark-subtle border-3 opacity-50" properties={educationData} />
     </div>
   )
 

diff --git a/src/Section.tsx → src/Fragment.tsx b/src/Section.tsx → src/Fragment.tsx
@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 
-export default function Section({ title, divideClassName, properties }: { title: string, divideClassName: string, properties: SectionProperty[] }) {
+export function SectionFragment({ title, divideClassName, properties }: { title: string, divideClassName: string, properties: SectionProperty[] }) {
 
   var data = properties.map(
     property =>
@@ -19,6 +19,11 @@ export default function Section({ title, divideClassName, properties }: { title:
   )
 }
 
+export function BadgeFragment({ value }: { value: string }) {
+
+  return <span className="badge rounded-pill text-bg-secondary me-1">{value}</span>
+}
+
 export interface SectionProperty {
 
   title: string;

diff --git a/src/data.tsx b/src/data.tsx
@@ -1,4 +1,4 @@
-import { SectionProperty } from "./Section";
+import { BadgeFragment, SectionProperty } from "./Fragment";
 
 export const informationData: SectionProperty[] = [
   {
@@ -89,89 +89,42 @@ export const workExperienceData: SectionProperty[] = [
   }
 ];
 
-const badge = "badge rounded-pill text-bg-secondary fw-normal me-1";
+const languages = ["English", "Vietnamese"].map(value => <BadgeFragment value={value} />)
+const programmingLanguages = ["Java", "Javascript"].map(value => <BadgeFragment value={value} />)
+const frameworks = ["Spring Framework", "Spring Security", "Spring Boot", "Spring JPA", "Spring AMQP", "Spring Mail", "Thymeleaf", "Hibernate", "Boostrap", "ReactJS"].map(value => <BadgeFragment value={value} />)
+const databases = ["MySQL", "PostgreSQL", "Oracle"].map(value => <BadgeFragment value={value} />)
+const tools = ["Github", "Github", "Gitlab", "Eclipse", "VS Code", "IntelliJ"].map(value => <BadgeFragment value={value} />)
+const knowledge = ["OOP", "Design Pattern", "SOLID Principles", "Dependency Injection", "RestfulAPI", "Microservices", "RabbitMQ", "ActiveMQ"].map(value => <BadgeFragment value={value} />)
+const anotherTools = ["Word", "Excel"].map(value => <BadgeFragment value={value} />)
 
 export const skillsData: SectionProperty[] = [
   {
     title: "Languages",
-    children: (
-      <>
-        <span className={badge}>English</span>
-        <span className={badge}>Vietnamese</span>
-      </>
-    )
+    children: <>{languages} </>
   },
   {
     title: "Programming Languages",
-    children: (
-      <>
-        <span className={badge}>Java</span>
-        <span className={badge}>Javascript</span>
-      </>
-    )
+    children: <>{programmingLanguages}</>
   },
   {
     title: "Frameworks & Platforms",
-    children: (
-      <>
-        <span className={badge}>Spring Framework</span>
-        <span className={badge}>Spring Boot</span>
-        <span className={badge}>Spring JPA</span>
-        <span className={badge}>Thymeleaf</span>
-        <span className={badge}>Hibernate</span>
-        <span className={badge}>Boostrap</span>
-        <span className={badge}>Thymeleaf</span>
-        <span className={badge}>ReactJS</span>
-        <span className={badge}>NextJS</span>
-      </>
-    )
+    children: <>{frameworks}</>
   },
   {
     title: "Databases",
-    children: (
-      <>
-        <span className={badge}>MySQL</span>
-        <span className={badge}>PostgreSQL</span>
-        <span className={badge}>Oracle</span>
-      </>
-    )
+    children: <>{databases}</>
   },
   {
-    title: "Version Controll & IDE",
-    children: (
-      <>
-        <span className={badge}>Git</span>
-        <span className={badge}>Github</span>
-        <span className={badge}>Gitlab</span>
-        <span className={badge}>Eclipse</span>
-        <span className={badge}>VS Code</span>
-        <span className={badge}>IntelliJ</span>
-      </>
-    )
+    title: "Version Control & IDE",
+    children: <>{tools}</>
   },
   {
     title: "Knowledge",
-    children: (
-      <>
-        <span className={badge}>OOP</span>
-        <span className={badge}>Design Pattern</span>
-        <span className={badge}>SOLID Principles</span>
-        <span className={badge}>Dependency Injection</span>
-        <span className={badge}>RestfulAPI</span>
-        <span className={badge}>Microservices</span>
-        <span className={badge}>RabbitMQ</span>
-        <span className={badge}>ActiveMQ</span>
-      </>
-    )
+    children: <>{knowledge}</>
   },
   {
     title: "Computer",
-    children: (
-      <>
-        <span className={badge}>Word</span>
-        <span className={badge}>Excel</span>
-      </>
-    )
+    children: <>{anotherTools}</>
   }
 ]