added portfolio section

programmerstevie · Apr 23, 2024 · 80623b7 · 80623b7
1 parent ec94f33
commit 80623b7
Show file tree

Hide file tree

Showing 10 changed files with 713 additions and 15 deletions.
diff --git a/src/lib/components/sections/Portfolio/Portfolio.svelte b/src/lib/components/sections/Portfolio/Portfolio.svelte
@@ -2,18 +2,47 @@
 	import Container from '$lib/components/Container.svelte';
 
 	import sparkle from '$lib/assets/icons/general/svg/sparkle.svg';
+	import ProjectPreview from './ProjectPreview.svelte';
+
+	import projectData from './Projects';
+	import type { PortfolioProjectData, ProjectName } from './Projects/resources/types';
+	import ReelModal from './ReelModal.svelte';
+
+	const projectOrder: ProjectName[] = ['ARCHIVS', 'HALite', 'DiligentlyAI', 'Tasque'];
+
+	let reelModalOpen = false;
+	let reelModalProjectData: PortfolioProjectData | null = null;
+
+	function openReelModal(proj: PortfolioProjectData) {
+		reelModalOpen = true;
+		reelModalProjectData = proj;
+	}
+  function closeReelModal() {
+    reelModalOpen = false;
+    reelModalProjectData = null;
+  }
 </script>
 
-<Container>
-	<header>
-		<h2 id="PORTFOLIO" class="pf-header">My Portfolio <img src={sparkle} alt="" /></h2>
-	</header>
-	<section class="entries">
-		<div></div>
-	</section>
-</Container>
+<div class="main-box">
+	<Container>
+		<header>
+			<h2 id="PORTFOLIO" class="pf-header">My Portfolio <img src={sparkle} alt="" /></h2>
+		</header>
+		<section class="entries">
+			<ul>
+				{#each projectOrder.map((x) => projectData[x]) as project}
+					<li><ProjectPreview projectData={project} onView={openReelModal} /></li>
+				{/each}
+			</ul>
+		</section>
+	</Container>
+</div>
+<ReelModal isOpen={reelModalOpen} projectData={reelModalProjectData} onClose={closeReelModal} />
 
 <style lang="scss">
+	.main-box {
+		background-color: var(--color-pf-white);
+	}
 	header {
 		padding-top: 99px;
 	}
@@ -35,13 +64,10 @@
 	.entries {
 		margin-top: 95px;
 
-		div {
-			width: 1296px;
-			height: 625px;
-      border-radius: 24px;
-
-      background-color: var(--var-pf-white);
-      box-shadow: rgba(0, 0, 0, 0.25) 0 0 25px -3px;
+		ul {
+			li {
+				margin-bottom: 64px;
+			}
 		}
 	}
 </style>
diff --git a/src/lib/components/sections/Portfolio/ProjectPreview.svelte b/src/lib/components/sections/Portfolio/ProjectPreview.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+	import type { PortfolioProjectData } from './Projects/resources/types';
+	export let projectData: PortfolioProjectData;
+	import { color_logo } from '$lib/components/TechLogos';
+
+	export let onView: (project: PortfolioProjectData) => void = () => {
+		/* do nothing */
+	};
+
+	function viewButtonAction() {
+		onView(projectData);
+	}
+
+	$: project_coming_soon = projectData.status === 'coming_soon';
+</script>
+
+<div class="main-box">
+	<div class="box" style="opacity: {project_coming_soon ? '50%' : '100%'};">
+		<img class="image" src={projectData.preview.img_src} alt="" />
+		<section class="description-section">
+			<header>
+				{projectData.title}
+			</header>
+			<p>
+				{projectData.preview.description}
+			</p>
+			<footer>
+				<button
+					class="view-button"
+					on:click={project_coming_soon
+						? () => {
+								/** DO NOTHING */
+							}
+						: viewButtonAction}>VIEW</button
+				>
+				<div class="tech-stack">
+					<ul>
+						{#each projectData.tech_stack as stackElem}
+							<li>
+								<img src={color_logo[stackElem]} alt={stackElem} />
+							</li>
+						{/each}
+					</ul>
+				</div>
+			</footer>
+		</section>
+	</div>
+
+	<div class="overlay" style="visibility: {project_coming_soon ? 'visible' : 'hidden'};">
+		COMING SOON!
+	</div>
+</div>
+
+<style lang="scss">
+	.main-box {
+		position: relative;
+		border-radius: 24px;
+
+		.box {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: inherit;
+
+			width: 1296px;
+			height: 625px;
+
+			background-color: var(--color-pf-white);
+			box-shadow: rgba(0, 0, 0, 0.25) 0 0 25px -3px;
+		}
+
+		.image {
+			object-fit: cover;
+			object-position: 0px;
+			width: 735px;
+			height: 569px;
+			border-radius: 26px;
+			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+			background-color: #e6f0fd;
+		}
+
+		.description-section {
+			display: flex;
+			flex-direction: column;
+
+			text-align: center;
+			margin-left: 32px;
+			height: 567px;
+			width: 473px;
+
+			header {
+				font-weight: 700;
+				color: #000;
+				font-size: 32px;
+			}
+
+			p {
+				font-weight: 500;
+				color: var(--color-pf-gray);
+				font-size: 32px;
+				line-height: 141%;
+				margin-top: 38px;
+				flex-grow: 1;
+			}
+
+			footer {
+				display: flex;
+				padding-left: 12px;
+				padding-right: 12px;
+				justify-content: space-between;
+				.view-button {
+					width: 209px;
+					height: 83px;
+					border-radius: 3px;
+					background-color: var(--color-pf-primary);
+					box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-size: 32px;
+					color: var(--color-pf-white);
+					font-weight: 700;
+				}
+
+				.tech-stack {
+					width: 209px;
+					height: 83px;
+					border-radius: 3px;
+					background-color: var(--color-pf-light-gray);
+					box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+
+					ul {
+						height: 100%;
+						display: flex;
+						align-items: center;
+						justify-content: space-evenly;
+					}
+				}
+			}
+		}
+
+		.overlay {
+			position: absolute;
+			top: 0%;
+			left: 0%;
+			width: 100%;
+			height: 100%;
+			border-radius: inherit;
+			background-color: #d9d9d980;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			color: var(--color-pf-primary-2);
+			font-size: 96px;
+			font-weight: 500;
+			line-height: 141%;
+		}
+	}
+</style>
diff --git a/src/lib/components/sections/Portfolio/Projects/ARCHIVS.ts b/src/lib/components/sections/Portfolio/Projects/ARCHIVS.ts
@@ -0,0 +1,44 @@
+import preview_image from '$lib/assets/projects/ARCHIVS/main.png';
+
+import reel_image_add_link from '$lib/assets/projects/ARCHIVS/reel/image_add_link.png';
+import reel_image_profile from '$lib/assets/projects/ARCHIVS/reel/image_profile.png';
+
+import reel_image_animated_edit_link_color from '$lib/assets/projects/ARCHIVS/reel/image_animated_edit_link_color.gif';
+import reel_image_animated_reorder_links from '$lib/assets/projects/ARCHIVS/reel/image_animated_reorder_links.gif';
+
+import type { PortfolioProjectData } from './resources/types';
+import { projectDescriptions } from './resources/descriptions';
+import { TechName } from '$lib/components/TechLogos';
+
+const projectData: PortfolioProjectData = {
+	title: 'ARCHIVS',
+	tech_stack: [TechName.NEXTJS, TechName.TAILWIND],
+	status: 'available',
+	preview: {
+		description: projectDescriptions.ARCHIVS.preview,
+		img_src: preview_image
+	},
+	reel: {
+		description: projectDescriptions.ARCHIVS.reel,
+		elements: [
+			{
+				type: 'image',
+				src: reel_image_add_link
+			},
+			{
+				type: 'image',
+				src: reel_image_profile
+			},
+			{
+				type: 'gif',
+				src: reel_image_animated_edit_link_color
+			},
+			{
+				type: 'gif',
+				src: reel_image_animated_reorder_links
+			}
+		]
+	}
+};
+
+export default projectData;
diff --git a/src/lib/components/sections/Portfolio/Projects/DiligentlyAI.ts b/src/lib/components/sections/Portfolio/Projects/DiligentlyAI.ts
@@ -0,0 +1,43 @@
+import preview_image from '$lib/assets/projects/DiligentlyAI/main.png';
+
+import reel_image_landing_design from '$lib/assets/projects/DiligentlyAI/reel/image_landing_design.png';
+import reel_image_prompt_evaluations_charts from '$lib/assets/projects/DiligentlyAI/reel/image_prompt_evaluations_charts.png';
+import reel_image_prompt_evaluations_table from '$lib/assets/projects/DiligentlyAI/reel/image_prompt_evaluations_table.png';
+import reel_image_score_data_over_time from '$lib/assets/projects/DiligentlyAI/reel/image_score_data_over_time.png';
+
+import type { PortfolioProjectData } from './resources/types';
+import { projectDescriptions } from './resources/descriptions';
+import { TechName } from '$lib/components/TechLogos';
+
+const projectData: PortfolioProjectData = {
+	title: 'DiligentlyAI',
+	tech_stack: [TechName.SVELTE, TechName.TAILWIND],
+	status: 'available',
+	preview: {
+		description: projectDescriptions.DiligentlyAI.preview,
+		img_src: preview_image
+	},
+	reel: {
+		description: projectDescriptions.DiligentlyAI.reel,
+		elements: [
+			{
+				type: 'image',
+				src: reel_image_landing_design
+			},
+			{
+				type: 'image',
+				src: reel_image_prompt_evaluations_charts
+			},
+			{
+				type: 'image',
+				src: reel_image_prompt_evaluations_table
+			},
+			{
+				type: 'image',
+				src: reel_image_score_data_over_time
+			}
+		]
+	}
+};
+
+export default projectData;
diff --git a/src/lib/components/sections/Portfolio/Projects/HALite.ts b/src/lib/components/sections/Portfolio/Projects/HALite.ts
@@ -0,0 +1,43 @@
+import previewImage from '$lib/assets/projects/HALite/main.png';
+
+import reel_image_data_plot from '$lib/assets/projects/HALite/reel/image_data_plot.png';
+import reel_image_file_selector from '$lib/assets/projects/HALite/reel/image_file_selector.png';
+import reel_image_animated_data_plot_interaction from '$lib/assets/projects/HALite/reel/image_animated_data_plot_interaction.gif';
+import reel_image_animated_import_files from '$lib/assets/projects/HALite/reel/image_animated_import_files.gif';
+
+import type { PortfolioProjectData } from './resources/types';
+import { projectDescriptions } from './resources/descriptions';
+import { TechName } from '$lib/components/TechLogos';
+
+const projectData: PortfolioProjectData = {
+	title: 'HALite',
+	tech_stack: [TechName.REACT, TechName.TAILWIND, TechName.SASS],
+	status: 'available',
+	preview: {
+		description: projectDescriptions.HALite.preview,
+		img_src: previewImage
+	},
+	reel: {
+		description: projectDescriptions.HALite.reel,
+		elements: [
+			{
+				type: 'image',
+				src: reel_image_data_plot
+			},
+			{
+				type: 'image',
+				src: reel_image_file_selector
+			},
+			{
+				type: 'gif',
+				src: reel_image_animated_data_plot_interaction
+			},
+			{
+				type: 'gif',
+				src: reel_image_animated_import_files
+			}
+		]
+	}
+};
+
+export default projectData;