Add socials to footer, link github

mdyeates · Aug 18, 2023 · 77caf92 · 77caf92
1 parent bd5db93
commit 77caf92
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,7 @@
  <meta name="theme-color" content="#000000" />
  <meta
  name="description"
- content="Software Engineer crafting exceptional digital experiences. Contact for powerful and engaging software solutions."
+ content="Discover my portfolio showcasing my tech ventures and creative coding endeavors."
  />
  <link
  rel="stylesheet"
@@ -25,7 +25,7 @@
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
  />
- <title>Michael Yeates | Software Engineer | Crafting Innovative Digital Solutions</title>
+ <title>Michael Yeates | Software Engineer | Portfolio</title>
  </head>
  <body>
  <div id="root"></div>

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { AiOutlineStar } from "react-icons/ai";
 import { BiGitRepoForked } from "react-icons/bi";
+import SocialIcons from "../components/SocialIcons";
 const Footer = () => {
  const date = new Date();
  const currentYear = date.getFullYear();
@@ -25,12 +26,17 @@ const Footer = () => {
 
  return (
  <footer>
- <span>
- <AiOutlineStar /> {gitHubInfo.stars} <BiGitRepoForked /> {gitHubInfo.forks}
- </span>
- <p>
- <span>▷</span> Designed and built by Michael Yeates &copy; {currentYear}
- </p>
+ <SocialIcons />
+ <a className="footer-link" href="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/mdyeates/my-portfolio">
+ <span>
+ <AiOutlineStar /> {gitHubInfo.stars} <BiGitRepoForked />
+ {gitHubInfo.forks} - Show your support by giving this project a star!
+ </span>
+ <p>
+ <span>▷</span> Designed and built by Michael Yeates &copy; {currentYear}
+ </p>
+ <p>All views and work are my own</p>
+ </a>
  </footer>
  );
 };

diff --git a/src/index.css b/src/index.css
@@ -159,19 +159,33 @@ header {
 }
 
 footer {
- color: var(--hl-color);
- font-size: 12px;
+ font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
- padding: var(--sm-spacing);
+ padding: var(--spacing);
+ text-align: center;
+ color: var(--text-color);
 }
 
 footer p span {
  color: var(--text-color);
 }
 
+footer .footer-link {
+ text-decoration: none;
+ color: var(--hl-color);
+ padding-top: 10px;
+}
+footer .footer-link:hover {
+ color: var(--hl2-color);
+}
+
+footer .socialIcons {
+ padding-top: 10px;
+}
+
 /* --- MEDIA QUERIES --- */
 @media (min-width: 750px) {
  .links {