footer dynamic rendering

pemorse · Jun 18, 2024 · dc0301a · dc0301a
1 parent 813f628
commit dc0301a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 73 deletions.
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
@@ -1,9 +1,8 @@
 import { FaLinkedin } from "react-icons/fa";
+import { FaSquareXTwitter } from "react-icons/fa6";
 import { animateScroll as scroll } from "react-scroll";
-import twitterImg from "../../images/square-x-twitter.svg";
 import {
     FooterContainer,
-    FooterImg,
     FooterWrap,
     SocialIconLink,
     SocialIcons,
@@ -13,6 +12,26 @@ import {
     WebsiteRights,
 } from "./FooterElements";
 
+const images = [
+    "https://freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933",
+    "https://freepik.com/free-vector/mathematics-concept-illustration_10733824.htm#query=professor&position=13&from_view=search&track=sph&uuid=5b1a188a-64c5-45af-aae2-8573bc1bed3c",
+    "https://freepik.com/free-vector/content-concept-illustration_7171429.htm#query=media&position=3&from_view=search&track=sph&uuid=c7e35cf2-d85d-4bba-91a6-1cd883dcf153",
+    "https://freepik.com/free-vector/library-concept-illustration_9148008.htm#query=library&position=40&from_view=search&track=sph&uuid=abecc792-b6b2-4ec0-b318-5e6cc73ba649",
+];
+
+const socials = [
+    {
+        href: "https://twitter.com/SimonPrinceAI",
+        icon: FaSquareXTwitter,
+        alt: "Twitter",
+    },
+    {
+        href: "https://linkedin.com/in/simon-prince-615bb9165/",
+        icon: FaLinkedin,
+        alt: "LinkedIn",
+    },
+];
+
 export default function Footer() {
     const toggleHome = () => {
         scroll.scrollToTop();
@@ -28,41 +47,28 @@ export default function Footer() {
                                 Understanding Deep Learning
                             </SocialLogo>
                             <WebsiteRights>
-                                ©{new Date().getFullYear()} Simon J.D. Prince
+                                &copy; {new Date().getFullYear()} Simon J.D. Prince
                             </WebsiteRights>
                             <WebsiteRights>
                                 Images by StorySet on FreePik:{" "}
-                                <a href="https://www.freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933">
-                                    {" "}
-                                    [1]{" "}
-                                </a>{" "}
-                                <a href="https://www.freepik.com/free-vector/mathematics-concept-illustration_10733824.htm#query=professor&position=13&from_view=search&track=sph&uuid=5b1a188a-64c5-45af-aae2-8573bc1bed3c">
-                                    [2]
-                                </a>{" "}
-                                <a href="https://www.freepik.com/free-vector/content-concept-illustration_7171429.htm#query=media&position=3&from_view=search&track=sph&uuid=c7e35cf2-d85d-4bba-91a6-1cd883dcf153">
-                                    {" "}
-                                    [3]
-                                </a>{" "}
-                                <a href="https://www.freepik.com/free-vector/library-concept-illustration_9148008.htm#query=library&position=40&from_view=search&track=sph&uuid=abecc792-b6b2-4ec0-b318-5e6cc73ba649">
-                                    {" "}
-                                    [4]
-                                </a>
+                                {images.map((image, index) => (
+                                    <a key={index} href={image}>
+                                        [{index + 1}]
+                                    </a>
+                                ))}
                             </WebsiteRights>
                             <SocialIcons>
-                                <SocialIconLink
-                                    href="https://twitter.com/SimonPrinceAI"
-                                    target="_blank"
-                                    aria-label="Twitter"
-                                >
-                                    <FooterImg src={twitterImg} alt="twitter" />
-                                </SocialIconLink>
-                                <SocialIconLink
-                                    href="https://www.linkedin.com/in/simon-prince-615bb9165/"
-                                    target="_blank"
-                                    aria-label="LinkedIn"
-                                >
-                                    <FaLinkedin />
-                                </SocialIconLink>
+                                {socials.map((social, index) => (
+                                    <SocialIconLink
+                                        key={index}
+                                        href={social.href}
+                                        target="_blank"
+                                        aria-label={social.alt}
+                                        alt={social.alt}
+                                    >
+                                        <social.icon />
+                                    </SocialIconLink>
+                                ))}
                             </SocialIcons>
                         </SocialMediaWrap>
                     </SocialMedia>

diff --git a/src/components/HeroSection/index.jsx b/src/components/HeroSection/index.jsx
@@ -169,15 +169,15 @@ export default function HeroSection() {
                         <HeroFollowBlock>
                             Follow me on{" "}
                             <UDLLink href="https://twitter.com/SimonPrinceAI">Twitter</UDLLink> or{" "}
-                            <UDLLink href="https://www.linkedin.com/in/simon-prince-615bb9165/">
+                            <UDLLink href="https://linkedin.com/in/simon-prince-615bb9165/">
                                 LinkedIn
                             </UDLLink>{" "}
                             for updates.
                         </HeroFollowBlock>
                     </HeroColumn1>
                     <HeroColumn2>
                         <HeroImgWrap>
-                            <Img src={img} alt="book cover" />
+                            <Img src={img} alt="UDL Book" />
                         </HeroImgWrap>
                         <HeroLink href="https://github.com/udlbook/udlbook/releases/download/v4.0.1/UnderstandingDeepLearning_05_27_24_C.pdf">
                             Download full pdf (27 May 2024)

diff --git a/src/images/square-x-twitter.svg b/src/images/square-x-twitter.svg