From 6e5d08b2b7854d095e24c0a76b6d478e6f399a90 Mon Sep 17 00:00:00 2001
From: steven <stevensan0606@gmail.com>
Date: Thu, 25 Apr 2024 14:37:26 -0400
Subject: [PATCH] added Contacts Footer

---
 .../sections/Contact/Contact.svelte           | 73 +++++++++++++++++++
 src/lib/components/sections/Contact/index.ts  |  1 +
 src/lib/components/sections/Contact/resume.ts |  3 +
 .../sections/Contact/socials_data.ts          | 35 +++++++++
 src/routes/+page.svelte                       |  3 +-
 5 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/sections/Contact/Contact.svelte
 create mode 100644 src/lib/components/sections/Contact/index.ts
 create mode 100644 src/lib/components/sections/Contact/resume.ts
 create mode 100644 src/lib/components/sections/Contact/socials_data.ts

diff --git a/src/lib/components/sections/Contact/Contact.svelte b/src/lib/components/sections/Contact/Contact.svelte
new file mode 100644
index 0000000..54bed33
--- /dev/null
+++ b/src/lib/components/sections/Contact/Contact.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	import Container from '$lib/components/Container.svelte';
+
+	import resume_url from './resume';
+	import socials_data, { SocialType } from './socials_data';
+
+	const socials: SocialType[] = [SocialType.INSTAGRAM,  SocialType.LINKEDIN, SocialType.GITHUB];
+</script>
+
+<footer>
+	<header id="CONTACT" />
+	<Container>
+		<div class="main-box">
+			<ul class="socials-links">
+				{#each socials.map((s) => socials_data[s]) as social}
+					<li class="link">
+						<a href={social.link.href} target="_blank" rel="noopener noreferrer">
+							<img src={social.icon_src} alt="{social.name} link" width="48px" height="48px" />
+						</a>
+					</li>
+				{/each}
+			</ul>
+			<a class="resume-link" href={resume_url.href} target="_blank" rel="noopener noreferrer"
+				>&gt; MY RESUME &lt;</a
+			>
+		</div>
+	</Container>
+</footer>
+
+<style lang="scss">
+	footer {
+		height: 227px;
+		background-color: var(--color-pf-white);
+    margin-top: 80px;
+
+		header {
+			height: 0;
+		}
+
+		div.main-box {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			justify-content: space-between;
+      align-items: center;
+
+			ul.socials-links {
+				display: flex;
+				justify-content: space-between;
+				li.link {
+					&:not(:first-child) {
+						margin-left: 39px;
+					}
+
+					a {
+						img {
+						}
+					}
+				}
+			}
+
+			a.resume-link {
+        text-decoration: underline;
+        text-transform: uppercase;
+        font-size: 40px;
+        font-weight: 700;
+        color: var(--color-pf-primary);
+        text-decoration-thickness: 2px;
+        text-underline-offset: 4px;
+			}
+		}
+	}
+</style>
diff --git a/src/lib/components/sections/Contact/index.ts b/src/lib/components/sections/Contact/index.ts
new file mode 100644
index 0000000..2ea6014
--- /dev/null
+++ b/src/lib/components/sections/Contact/index.ts
@@ -0,0 +1 @@
+export { default as default } from './Contact.svelte';
diff --git a/src/lib/components/sections/Contact/resume.ts b/src/lib/components/sections/Contact/resume.ts
new file mode 100644
index 0000000..fad0a04
--- /dev/null
+++ b/src/lib/components/sections/Contact/resume.ts
@@ -0,0 +1,3 @@
+const resume_url = new URL('https://drive.google.com/file/d/1jT1tWbB_gD2_Pj0JGZ46DmnbzlW6JJJY/view?usp=sharing');
+
+export default resume_url;
\ No newline at end of file
diff --git a/src/lib/components/sections/Contact/socials_data.ts b/src/lib/components/sections/Contact/socials_data.ts
new file mode 100644
index 0000000..7866060
--- /dev/null
+++ b/src/lib/components/sections/Contact/socials_data.ts
@@ -0,0 +1,35 @@
+import social_icon_github from '$lib/assets/icons/social/svg/Github.svg';
+import social_icon_instagram from '$lib/assets/icons/social/svg/Instagram.svg';
+import social_icon_linkedin from '$lib/assets/icons/social/svg/LinkedIn.svg';
+
+export enum SocialType {
+	GITHUB = 'github',
+	INSTAGRAM = 'instagram',
+	LINKEDIN = 'linkedin'
+}
+
+type SocialData = {
+  name: string;
+	icon_src: string;
+	link: URL;
+};
+
+const socials_data: Record<SocialType, SocialData> = {
+	github: {
+    name: 'Github',
+		icon_src: social_icon_github,
+		link: new URL('https://github.com/stothesecond')
+	},
+	instagram: {
+    name: 'Instagram',
+		icon_src: social_icon_instagram,
+		link: new URL('https://www.instagram.com/big_simba')
+	},
+	linkedin: {
+    name: 'LinkedIn',
+		icon_src: social_icon_linkedin,
+		link: new URL('https://www.linkedin.com/in/programmerstevie')
+	}
+};
+
+export default socials_data;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7652d99..c962555 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,6 +4,7 @@
 	import AboutMe from '$lib/components/sections/AboutMe';
 	import ToolingBar from '$lib/components/ToolingBar';
 	import Portfolio from '$lib/components/sections/Portfolio';
+	import Contact from '$lib/components/sections/Contact';
 </script>
 
 <Landing />
@@ -11,4 +12,4 @@
 <AboutMe />
 <ToolingBar />
 <Portfolio />
-<div id="CONTACT" />
+<Contact />
\ No newline at end of file