footer dynamic rendering

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">
+                                {images.map((image, index) => (
-                                    {" "}
+                                    <a key={index} href={image}>
-                                    [1]{" "}
+                                        [{index + 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>
+                                ))}
                             </WebsiteRights>
                             <SocialIcons>
+                                {socials.map((social, index) => (
                                     <SocialIconLink
-                                    href="https://twitter.com/SimonPrinceAI"
+                                        key={index}
+                                        href={social.href}
                                         target="_blank"
-                                    aria-label="Twitter"
+                                        aria-label={social.alt}
+                                        alt={social.alt}
                                     >
-                                    <FooterImg src={twitterImg} alt="twitter" />
+                                        <social.icon />
-                                </SocialIconLink>
-                                <SocialIconLink
-                                    href="https://www.linkedin.com/in/simon-prince-615bb9165/"
-                                    target="_blank"
-                                    aria-label="LinkedIn"
-                                >
-                                    <FaLinkedin />
                                     </SocialIconLink>
+                                ))}
                             </SocialIcons>
                         </SocialMediaWrap>
                     </SocialMedia>

src/components/HeroSection/index.jsx

@@ -169,7 +169,7 @@ 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.
@@ -177,7 +177,7 @@ export default function HeroSection() {
                     </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)

src/images/square-x-twitter.svg

@@ -1,39 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   height="10"
-   width="8.75"
-   viewBox="0 0 448 512"
-   version="1.1"
-   id="svg914"
-   sodipodi:docname="square-x-twitter.svg"
-   inkscape:version="1.1.2 (b8e25be8, 2022-02-05)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs918" />
-  <sodipodi:namedview
-     id="namedview916"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="65.6"
-     inkscape:cx="3.8948171"
-     inkscape:cy="4.5426829"
-     inkscape:window-width="1296"
-     inkscape:window-height="906"
-     inkscape:window-x="0"
-     inkscape:window-y="38"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg914" />
-  <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-  <path
-     d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm297.1 84L257.3 234.6 379.4 396H283.8L209 298.1 123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5L313.6 116h47.5zM323.3 367.6L153.4 142.9H125.1L296.9 367.6h26.3z"
-     id="path912"
-     style="fill:#ffffff;fill-opacity:1" />
-</svg>