feat: Make project dynamic with its content

Aditya-Jyoti · May 24, 2024 · 94f6869 · 94f6869
1 parent 8c7702a
commit 94f6869
Show file tree

Hide file tree

Showing 27 changed files with 188 additions and 280 deletions.
diff --git a/settings.json b/settings.json
@@ -0,0 +1,74 @@
+{
+	"club": {
+		"name": "Club Name",
+		"logo": "logo.png",
+		"about": "loreum ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris",
+		"principles": [
+			{
+				"name": "principle one",
+				"description": "loreum ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris"
+			},
+			{
+				"name": "principle two",
+				"description": "loreum ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris"
+			},
+			{
+				"name": "principle three",
+				"description": "loreum ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris"
+			}
+		],
+		"departments": [
+			{
+				"name": "Design",
+				"head": "Lead",
+				"linkedlin": "https://www.linkedin.com/",
+				"description": "loreum ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris",
+				"icon": "design.svg"
+			},
+			{
+				"name": "Technical",
+				"head": "Lead",
+				"linkedlin": "https://www.linkedin.com/",
+				"description": "loreum ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris",
+				"icon": "technical.svg"
+			},
+			{
+				"name": "HR and Management",
+				"head": "Lead",
+				"linkedlin": "https://www.linkedin.com/",
+				"description": "loreum ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris",
+				"icon": "management.svg"
+			},
+			{
+				"name": "UI/UX",
+				"head": "Lead",
+				"linkedlin": "https://www.linkedin.com/",
+				"description": "loreum ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris",
+				"icon": "ui-ux.svg"
+			},
+			{
+				"name": "Social Media",
+				"head": "Lead",
+				"linkedlin": "https://www.linkedin.com/",
+				"description": "loreum ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris",
+				"icon": "social-media.svg"
+			}
+		],
+		"mediaPresence": {
+			"instagram": "https://www.instagram.com/",
+			"linkedin": "https://www.linkedin.com/",
+			"discord": "https://discord.com/invite/"
+		}
+	},
+	"styling": {
+		"colours": {
+			"background": "#1b1b1b",
+			"text": "#ffffff",
+			"primary": "#31cf9f",
+			"accent": "#fdf6e4"
+		},
+		"fonts": {
+			"main": ["Lato", "sans-serif"]
+		}
+	}
+}
diff --git a/src/app.css b/src/app.css
@@ -4,36 +4,4 @@
 
 html {
 	scroll-behavior: smooth;
-}
-
-.hover-1 {
-	--c: #358b9b; /* the color */
-	--s: 0.15em;
-
-	line-height: 1.1em;
-	padding-bottom: calc(2.1 * var(--s));
-	background:
-		conic-gradient(from 135deg at top, var(--c) 90deg, #0000 0) left 0 bottom var(--s) /
-			calc(2 * var(--s)) var(--s) repeat-x,
-		conic-gradient(from -45deg at bottom, var(--c) 90deg, #0000 0) left var(--s) bottom 0 /
-			calc(2 * var(--s)) var(--s) repeat-x;
-	-webkit-mask:
-		linear-gradient(#000 0 0) content-box,
-		linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box no-repeat;
-	transition: 0.5s;
-}
-.hover-1:hover {
-	--_p: 100%;
-	color: var(--c);
-}
-
-.btn-1 {
-	transition: all;
-	transition-duration: 0.5s;
-	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-}
-
-.btn-1:hover {
-	background: #31cf9f;
-	color: #1b1b1b;
-}
+}
diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="/assets/logo.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
 		<link
@@ -12,11 +12,17 @@
 
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+		<!-- START -->
+		<!-- ADD YOUR GOOGLE FONT OR WHATEVER LINKS HERE -->
+
 		<link
-			href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
+			href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
 			rel="stylesheet"
 		/>
 
+		<!-- END -->
+
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

diff --git a/src/lib/components/AboutUs.svelte b/src/lib/components/AboutUs.svelte
diff --git a/src/lib/components/BoardMembers.svelte b/src/lib/components/BoardMembers.svelte
diff --git a/src/lib/components/Departments.svelte b/src/lib/components/Departments.svelte
@@ -1,52 +1,40 @@
 <script lang="ts">
-	import { base } from '$app/paths';
-
-	const topRow = [
-		['Technical', 'technical.svg'],
-		['UI/UX', 'ui-ux.svg']
-	];
+	import settings from '$lib/settings';
 
-	const bottomRow = [
-		['Design', 'design.svg'],
-		['HR/Management', 'management.svg'],
-		['Social Media', 'social-media.svg']
-	];
+	import { base } from '$app/paths';
 </script>
 
 <section class="w-full flex flex-col items-center mt-10" id="departments">
 	<div
 		class="text-2xl font-semibold tracking-wide bg-gray w-[18rem] h-[3rem] flex items-center justify-center mb-10"
 	>
-		DEPARTMENTS
+		Departments
 	</div>
 
 	<div class="flex flex-col items-center justify-center">
-		<div class="flex md:flex-row flex-col md:gap-64 gap-4">
-			{#each topRow as element}
+		<div class="flex flex-col gap-4 items-center">
+			{#each settings.club.departments as element}
 				<div
-					class="flex flex-col items-center gap-4 bg-white text-black h-[10rem] w-[15rem] rounded-[2rem]"
+					class="flex flex-col items-center gap-4 border-2 border-primary text-text rounded-3xl p-4 w-[80%]"
 				>
-					<div class="flex flex-col gap-4 translate-y-2 items-center justify-center">
+					<div class="flex md:flex-row flex-col gap-4 translate-y-2 items-center justify-center">
 						<img
-							src="{base}/{element[1]}"
-							alt={element[0]}
-							class="w-[6rem] h-[6rem] translate-y-3"
+							src="{base}/assets/departments/{element.icon}"
+							alt={element.name}
+							class="w-[6rem] h-[6rem]"
 						/>
-						<div class="text-xl font-semibold tracking-wide">{element[0]}</div>
-					</div>
-				</div>
-			{/each}
-		</div>
-		<div
-			class="flex md:flex-row flex-col md:gap-64 gap-4 md:-translate-y-10 md:mt-0 mt-[2rem]"
-		>
-			{#each bottomRow as element}
-				<div
-					class="flex flex-col items-center gap-4 bg-white text-black h-[10rem] w-[15rem] rounded-[2rem]"
-				>
-					<div class="flex flex-col gap-4 translate-y-2 items-center justify-center">
-						<img src="{base}/{element[1]}" alt={element[0]} class="w-[6rem] h-[6rem] translate-y-3" />
-						<div class="text-xl font-semibold tracking-wide">{element[0]}</div>
+						<div class="flex flex-col gap-2 w-full">
+							<div class="text-2xl font-semibold tracking-wide">{element.name}</div>
+							<div>{element.description}</div>
+							<div class="flex justify-end items-center gap-4 text-lg">
+								<strong>{element.head}</strong>
+								<a href={element.linkedlin}>
+									<i
+										class="fa-brands fa-linkedin-in bg-primary bg-opacity-25 rounded-lg border-2 border-primary text-text p-2"
+									></i>
+								</a>
+							</div>
+						</div>
 					</div>
 				</div>
 			{/each}