footer dynamic rendering

This commit is contained in:
Tom Heaton
2024-06-18 12:33:53 +01:00
parent 813f628e4e
commit dc0301a86e
3 changed files with 40 additions and 73 deletions

View File

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

View File

@@ -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)

View File

@@ -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>

Before

Width:  |  Height:  |  Size: 1.5 KiB