Merge pull request #125 from TienNHM/UI

UI
TienNHM · Jan 21, 2024 · 451dfa1 · 451dfa1
2 parents d41f369 + 8bb8d01
commit 451dfa1
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 45 deletions.
diff --git a/i18n/en/code.json b/i18n/en/code.json
@@ -78,11 +78,11 @@
     "message": "List of websites people are building with Docusaurus"
   },
   "showcase.header.button": {
-    "message": "🙏 Please add your site"
+    "message": "Visit my Github 👨‍💻"
   },
   "showcase.filters.resultCount": {
-    "message": "1 site|{sitesCount} sites",
-    "description": "Pluralized label for the number of sites found on the showcase. Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+    "message": "{sitesCount} sites",
+    "description": "The number of sites displayed in the showcase"
   },
   "showcase.filters.title": {
     "message": "Filters"

diff --git a/src/components/ContactItem/index.tsx b/src/components/ContactItem/index.tsx
@@ -0,0 +1,18 @@
+import Link from "@docusaurus/Link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import clsx from "clsx";
+import React from "react";
+import styles from "./styles.module.css";
+
+export default function ContactItem({icon, contact, title} : {icon: any, contact: any, title: string}) {
+    const Svg = contact.icon;
+    return (
+      <div className={styles.buttons}>
+        <Link className={clsx('button button--lg', styles.cardInfoButton)}
+          title={title} to={contact.link}>
+            {contact.icon && <Svg role="img" />}
+            {!contact.icon && <FontAwesomeIcon icon={icon} size='xl'/>}
+        </Link>
+      </div>
+    );
+  }
diff --git a/src/components/ContactItem/styles.module.css b/src/components/ContactItem/styles.module.css
@@ -0,0 +1,14 @@
+.cardInfoButton {
+    padding: 0.4rem;
+    border-radius: 50%;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+    background-color: rgba(34, 34, 34, 0.1);
+    width: 3rem;
+    height: 3rem;
+    border: none;
+}
+
+.cardInfoButton:hover {
+    background-color: rgba(34, 34, 34, 0.5);
+    color: white;
+}
diff --git a/src/data/contacts.tsx b/src/data/contacts.tsx
@@ -1,43 +1,66 @@
 import { translate } from "@docusaurus/Translate";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { faFacebook, faGithub, faLinkedin, faYoutube, faSkype } from '@fortawesome/free-brands-svg-icons'
+import { faEnvelope, faPhone } from '@fortawesome/free-solid-svg-icons'
 
-type Contact = {
+export type Contact = {
+  title: string;
   link: string;
   icon: React.ComponentType<React.ComponentProps<'svg'>>;
+  faIcon: IconDefinition;
 };
 
-export const CONTACTS = {
+export type ContactDict = {
+  [key: string]: Contact;
+};
+
+export const CONTACTS: ContactDict = {
   Facebook: {
+    title: translate({ message: 'Facebook' }),
     link: 'https://www.facebook.com/tiennhm.it/',
     icon: require('@site/static/img/logo/facebook.svg').default,
+    faIcon: faFacebook,
   } as Contact,
   Github: {
+    title: translate({ message: 'Github' }),
     link: 'https://github.com/TienNHM',
     icon: require('@site/static/img/logo/github.svg').default,
+    faIcon: faGithub,
   } as Contact,
   Linkedin: {
+    title: translate({ message: 'Linkedin' }),
     link: 'https://www.linkedin.com/in/tien-nhm/',
     icon: require('@site/static/img/logo/linkedin.svg').default,
+    faIcon: faLinkedin,
   } as Contact,
   Email: {
+    title: translate({ message: 'Email' }),
     link: 'mailto:tiennhm.it@gmail.com',
     icon: require('@site/static/img/logo/email.svg').default,
+    faIcon: faEnvelope,
   } as Contact,
   Phone: {
+    title: translate({ message: 'Phone' }),
     link: 'tel:+84388963345',
     icon: require('@site/static/img/logo/phone.svg').default,
+    faIcon: faPhone,
   } as Contact,
   Skype: {
+    title: translate({ message: 'Skype' }),
     link: 'https://join.skype.com/invite/ybhXQOv30y5F',
     icon: require('@site/static/img/logo/skype.svg').default,
+    faIcon: faSkype,
   } as Contact,
   Youtube: {
+    title: translate({ message: 'Youtube' }),
     link: 'https://www.youtube.com/TienNguyen09',
     icon: require('@site/static/img/logo/youtube.svg').default,
+    faIcon: faYoutube,
   } as Contact,
 }
 
 export const SHOWCASE = {
-  TITLE: translate({message: 'TienNHM Site Showcase'}),
-  DESCRIPTION: translate({message: 'List of sites and projects built by TienNHM'}),
+  TITLE: translate({ message: 'TienNHM Site Showcase' }),
+  DESCRIPTION: translate({ message: 'List of sites and projects built by TienNHM' }),
   SUBMIT_URL: 'https://github.com/TienNHM?tab=repositories',
 }
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -61,20 +61,6 @@
   color: var(--ifm-color-primary-darker);
 }
 
-.cardInfoButton {
-  padding: 0.4rem;
-  border-radius: 50%;
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
-  background-color: rgba(34, 34, 34, 0.1);
-  width: 3rem;
-  height: 3rem;
-  border: none;
-}
-.cardInfoButton:hover {
-  background-color: rgba(34, 34, 34, 0.5);
-  color: white;
-}
-
 .cardInfoImage {
   border-radius: 50%;
 }

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -9,26 +9,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faFacebook, faGithub, faLinkedin,faYoutube, faSkype } from '@fortawesome/free-brands-svg-icons'
 import { faEnvelope, faPhone } from '@fortawesome/free-solid-svg-icons'
 import styles from './index.module.css';
-import { CONTACTS } from '@site/src/data/contacts';
+import { CONTACTS, Contact } from '@site/src/data/contacts';
+import ContactItem from '../components/ContactItem';
 // import avatar from '@site/static/img/tiennhm_picrew.webp';
 
 const avatar = 'https://github.com/TienNHM.png';
 
-function ContactItem({icon, contact, title}) {
-  const Svg = contact.icon;
-  return (
-    <div className={styles.buttons}>
-      <Link className={clsx('button button--lg', styles.cardInfoButton)}
-        title={title} to={contact.link}>
-          {contact.icon && <Svg role="img" />}
-          {!contact.icon && <FontAwesomeIcon icon={icon} size='xl'/>}
-      </Link>
-    </div>
-  );
-}
-
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
+  const contacts = CONTACTS;
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner, styles.backgroundImage)}>
       <div className={clsx('container', styles.cardContainer)}>
@@ -39,20 +28,22 @@ function HomepageHeader() {
           <h1 className="hero__title">{siteConfig.title}</h1>
           <h2 className="hero__subtitle">{siteConfig.tagline}</h2>
 
-          <div style={{margin: '1rem'}}>
+          {/* <div style={{margin: '1rem'}}>
             <Link className={clsx('button button--primary')} title='CV' to='/my-cv'>
                 View my CV
             </Link>
-          </div>
+          </div> */}
 
           <div className={clsx(styles.buttonsGroup)}>
-            <ContactItem icon={faEnvelope} contact={CONTACTS.Email} title={'Email'}/>
-            <ContactItem icon={faPhone} contact={CONTACTS.Phone} title={'Phone'}/>
-            <ContactItem icon={faFacebook} contact={CONTACTS.Facebook} title={'Facebook'}/>
-            <ContactItem icon={faGithub} contact={CONTACTS.Github} title={'Github'}/>
-            <ContactItem icon={faLinkedin} contact={CONTACTS.Linkedin} title={'Linkedin'}/>
-            <ContactItem icon={faYoutube} contact={CONTACTS.Youtube} title={'Youtube'}/>
-            <ContactItem icon={faSkype} contact={CONTACTS.Skype} title={'Skype'}/>
+            {
+              Object.keys(contacts).map((key: string) => {
+                const contact = contacts[key] as Contact;
+                const Svg = contact.icon;
+                return (
+                  <ContactItem key={key} icon={contact.faIcon} contact={contact} title={contact.title}/>
+                );
+              })
+            }
           </div>
         </div>
       </div>
@@ -65,7 +56,7 @@ export default function Home(): JSX.Element {
   return (
     <Layout
       title={`${siteConfig.title}`}
-      description="Middle Fullstack Web Developer from Viet Nam">
+      description="Fullstack Web Developer from Viet Nam">
       <HomepageHeader />
       <main>
         {/* <HomepageFeatures /> */}