From 5e68eebef5093be05631d9f8eac403cbed959e9a Mon Sep 17 00:00:00 2001
From: s1lva <s1lvax@proton.me>
Date: Thu, 17 Oct 2024 17:16:43 +0200
Subject: [PATCH] Mini code refactoring

---
 .../components/{ => Index}/Features.svelte    |   2 +-
 .../{ => Index}/Introduction.svelte           |   4 +-
 .../{ => MyProfile}/LinkForm.svelte           |   0
 .../{ => MyProfile}/SkillsForm.svelte         |   0
 .../{ => MyProfile}/UserLinks.svelte          |   0
 .../{ => MyProfile}/UserSkills.svelte         |   0
 .../{ => MyProfile}/UserStats.svelte          |   0
 src/lib/components/PublicProfile.svelte       | 196 ------------------
 .../components/PublicProfile/BasicInfo.svelte |  60 ++++++
 .../PublicProfile/GithubStats.svelte          |  50 +++++
 src/lib/components/PublicProfile/Links.svelte |  37 ++++
 .../PublicProfile/ProfileFooter.svelte        |   8 +
 .../PublicProfile/PublicProfile.svelte        |  33 +++
 .../components/PublicProfile/TechStack.svelte |  46 ++++
 .../UserNotFoundError.svelte                  |   0
 .../{ => Shared}/LightDarkMode.svelte         |   0
 src/lib/components/{ => Shared}/Navbar.svelte |   2 +-
 .../components/{ => Shared}/NewSection.svelte |   0
 src/routes/+page.svelte                       |   6 +-
 src/routes/[username]/+error.svelte           |   2 +-
 src/routes/[username]/+page.svelte            |   2 +-
 src/routes/profile/+layout.svelte             |   2 +-
 src/routes/profile/+page.svelte               |  10 +-
 23 files changed, 249 insertions(+), 211 deletions(-)
 rename src/lib/components/{ => Index}/Features.svelte (89%)
 rename src/lib/components/{ => Index}/Introduction.svelte (92%)
 rename src/lib/components/{ => MyProfile}/LinkForm.svelte (100%)
 rename src/lib/components/{ => MyProfile}/SkillsForm.svelte (100%)
 rename src/lib/components/{ => MyProfile}/UserLinks.svelte (100%)
 rename src/lib/components/{ => MyProfile}/UserSkills.svelte (100%)
 rename src/lib/components/{ => MyProfile}/UserStats.svelte (100%)
 delete mode 100644 src/lib/components/PublicProfile.svelte
 create mode 100644 src/lib/components/PublicProfile/BasicInfo.svelte
 create mode 100644 src/lib/components/PublicProfile/GithubStats.svelte
 create mode 100644 src/lib/components/PublicProfile/Links.svelte
 create mode 100644 src/lib/components/PublicProfile/ProfileFooter.svelte
 create mode 100644 src/lib/components/PublicProfile/PublicProfile.svelte
 create mode 100644 src/lib/components/PublicProfile/TechStack.svelte
 rename src/lib/components/{ => PublicProfile}/UserNotFoundError.svelte (100%)
 rename src/lib/components/{ => Shared}/LightDarkMode.svelte (100%)
 rename src/lib/components/{ => Shared}/Navbar.svelte (94%)
 rename src/lib/components/{ => Shared}/NewSection.svelte (100%)

diff --git a/src/lib/components/Features.svelte b/src/lib/components/Index/Features.svelte
similarity index 89%
rename from src/lib/components/Features.svelte
rename to src/lib/components/Index/Features.svelte
index f2499a6..e5d0cc2 100644
--- a/src/lib/components/Features.svelte
+++ b/src/lib/components/Index/Features.svelte
@@ -1,5 +1,5 @@
 <script>
-	import NewSection from '$lib/components/NewSection.svelte';
+	import NewSection from '$lib/components/Shared/NewSection.svelte';
 	import { features } from '$lib/constants/features';
 	import * as Card from '$lib/components/ui/card';
 </script>
diff --git a/src/lib/components/Introduction.svelte b/src/lib/components/Index/Introduction.svelte
similarity index 92%
rename from src/lib/components/Introduction.svelte
rename to src/lib/components/Index/Introduction.svelte
index b33616d..b621c08 100644
--- a/src/lib/components/Introduction.svelte
+++ b/src/lib/components/Index/Introduction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import NewSection from '$lib/components/NewSection.svelte';
+	import NewSection from '$lib/components/Shared/NewSection.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { GitPullRequestCreate, UserPen, Github, LogOut } from 'lucide-svelte';
 
@@ -30,7 +30,7 @@
 		{/if}
 
 		<Button
-			href="https://github.com/s1lvax/connekt"
+			href="https://github.com/s1lvax/route"
 			target="_blank"
 			variant="outline"
 			class="flex items-center space-x-2"><GitPullRequestCreate /> <span>Contribute</span></Button
diff --git a/src/lib/components/LinkForm.svelte b/src/lib/components/MyProfile/LinkForm.svelte
similarity index 100%
rename from src/lib/components/LinkForm.svelte
rename to src/lib/components/MyProfile/LinkForm.svelte
diff --git a/src/lib/components/SkillsForm.svelte b/src/lib/components/MyProfile/SkillsForm.svelte
similarity index 100%
rename from src/lib/components/SkillsForm.svelte
rename to src/lib/components/MyProfile/SkillsForm.svelte
diff --git a/src/lib/components/UserLinks.svelte b/src/lib/components/MyProfile/UserLinks.svelte
similarity index 100%
rename from src/lib/components/UserLinks.svelte
rename to src/lib/components/MyProfile/UserLinks.svelte
diff --git a/src/lib/components/UserSkills.svelte b/src/lib/components/MyProfile/UserSkills.svelte
similarity index 100%
rename from src/lib/components/UserSkills.svelte
rename to src/lib/components/MyProfile/UserSkills.svelte
diff --git a/src/lib/components/UserStats.svelte b/src/lib/components/MyProfile/UserStats.svelte
similarity index 100%
rename from src/lib/components/UserStats.svelte
rename to src/lib/components/MyProfile/UserStats.svelte
diff --git a/src/lib/components/PublicProfile.svelte b/src/lib/components/PublicProfile.svelte
deleted file mode 100644
index 93cfc0e..0000000
--- a/src/lib/components/PublicProfile.svelte
+++ /dev/null
@@ -1,196 +0,0 @@
-<script lang="ts">
-	import * as Card from '$lib/components/ui/card';
-	import * as Avatar from '$lib/components/ui/avatar';
-	import GitHub from 'lucide-svelte/icons/github';
-	import { IdCard, Folder, Github } from 'lucide-svelte';
-	import { Progress } from '$lib/components/ui/progress';
-	import { Button } from '$lib/components/ui/button';
-	import type { PublicProfile } from '$lib/types/PublicProfile';
-	import { getProgressValue } from '$lib/utils/getProgressValue';
-	import * as Table from '$lib/components/ui/table';
-	import { onMount } from 'svelte';
-	import type { GithubData } from '$lib/types/GithubData';
-	import LightDarkMode from './LightDarkMode.svelte';
-
-	// Accept userData as a prop
-	export let userData: PublicProfile;
-
-	//Accept githubData as a prop
-	export let githubData: GithubData;
-
-	console.log(githubData);
-
-	let progressValues: { [key: string]: number } = {};
-
-	onMount(() => {
-		userData.skills.forEach((skill) => {
-			progressValues[skill.title] = 0;
-			setTimeout(() => {
-				progressValues[skill.title] = getProgressValue(skill.level);
-			}, 100);
-		});
-	});
-</script>
-
-<!-- Main Profile Content -->
-
-<div class="flex min-h-screen w-full flex-col items-center">
-	<main class="flex w-full max-w-6xl flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
-		<!-- User Avatar and Basic Info -->
-		<div class="flex items-center justify-center space-x-4">
-			<Avatar.Root class="h-24 w-24 rounded-full">
-				<Avatar.Image src={githubData.avatarUrl} alt="User Avatar" />
-				<Avatar.Fallback>?</Avatar.Fallback>
-			</Avatar.Root>
-			<div class="flex flex-col space-y-4 text-center">
-				{#if githubData.name}
-					<p class="text-2xl font-bold">{githubData.name}</p>
-				{:else}
-					<p class="text-xl font-bold">{userData.username}</p>
-				{/if}
-
-				{#if githubData.bio}
-					<p class="text-muted-foreground">{githubData.bio}</p>
-				{:else}
-					<p class="text-muted-foreground">Public Developer Profile</p>
-				{/if}
-
-				{#if githubData.company}
-					<p class="text-muted-foreground">Currently at {githubData.company}</p>
-				{/if}
-				<div class="flex flex-row items-center justify-center gap-4">
-					<div>
-						<Button
-							href={githubData.url}
-							target="_blank"
-							class="mt-2 flex justify-center rounded-full"
-							variant="outline"
-						>
-							<GitHub />
-						</Button>
-					</div>
-					{#if githubData.blog}
-						<div>
-							<Button
-								href={githubData.blog}
-								target="_blank"
-								class="mt-2 flex justify-center rounded-full"
-								variant="outline"
-							>
-								<IdCard />
-							</Button>
-						</div>
-					{/if}
-				</div>
-			</div>
-		</div>
-
-		<!-- GitHub Stats Cards -->
-		<div class="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-			<!-- Total Projects (Repo Count) Card -->
-			<Card.Root>
-				<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-					<div class="flex items-center space-x-2">
-						<Folder class="h-4 w-4 text-muted-foreground" />
-						<Card.Title class="text-sm font-medium">Projects on GitHub</Card.Title>
-					</div>
-				</Card.Header>
-				<Card.Content>
-					<div class="text-2xl font-bold">{githubData.repoCount}</div>
-				</Card.Content>
-			</Card.Root>
-
-			<!-- GitHub Contributions Card -->
-			<Card.Root>
-				<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-					<div class="flex items-center space-x-2">
-						<GitHub class="h-4 w-4 text-muted-foreground" />
-						<Card.Title class="text-sm font-medium">GitHub Contributions (Past 30 Days)</Card.Title>
-					</div>
-				</Card.Header>
-				<Card.Content>
-					<div class="text-2xl font-bold">{githubData.contributionsCount}</div>
-				</Card.Content>
-			</Card.Root>
-
-			<!-- Praise Received Card -->
-			<Card.Root>
-				<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-					<div class="flex items-center space-x-2">
-						<GitHub class="h-4 w-4 text-muted-foreground" />
-						<Card.Title class="text-sm font-medium">Github Followers</Card.Title>
-					</div>
-				</Card.Header>
-				<Card.Content>
-					<div class="text-2xl font-bold">{githubData.followers}</div>
-				</Card.Content>
-			</Card.Root>
-		</div>
-
-		<!-- Links and Tech Stack Side by Side -->
-		<div class="mt-8 grid gap-4 md:grid-cols-2">
-			<!-- Links Section -->
-			<Card.Root>
-				<Card.Header>
-					<Card.Title>Links</Card.Title>
-					<Card.Description>
-						Discover the developer's projects and favorite resources
-					</Card.Description>
-				</Card.Header>
-				<Card.Content class="grid gap-4">
-					{#if userData.links.length > 0}
-						<Table.Root>
-							<Table.Header>
-								<Table.Row>
-									<Table.Head>Title</Table.Head>
-								</Table.Row>
-							</Table.Header>
-							<Table.Body>
-								{#each userData.links as link}
-									<a href={link.url} target="_blank">
-										<Table.Row class="flex flex-row space-x-4 hover:cursor-pointer">
-											<Table.Cell class="font-medium">{link.title}</Table.Cell>
-										</Table.Row>
-									</a>
-								{/each}
-							</Table.Body>
-						</Table.Root>
-					{:else}
-						<p class="text-muted-foreground">No links available</p>
-					{/if}
-				</Card.Content>
-			</Card.Root>
-
-			<!-- Tech Stack Section -->
-			<Card.Root>
-				<Card.Header>
-					<Card.Title>Tech Stack</Card.Title>
-					<Card.Description>Explore the developer's skills and expertise</Card.Description>
-				</Card.Header>
-				<Card.Content class="grid gap-4">
-					{#if userData.skills.length > 0}
-						{#each userData.skills as skill}
-							<div class="flex items-center justify-between">
-								<span>{skill.title}</span>
-								<Progress
-									value={progressValues[skill.title]}
-									max={100}
-									class="w-[60%] transition-all ease-in-out"
-									style="transition-duration: 3000ms;"
-								/>
-							</div>
-						{/each}
-					{:else}
-						<p class="text-muted-foreground">No skills available</p>
-					{/if}
-				</Card.Content>
-			</Card.Root>
-		</div>
-		<div class="flex flex-col items-center justify-center gap-4">
-			<p class="text-sm text-muted-foreground">
-				Do you want one? <a href="/" class="text-blue-600 underline">Create yours here.</a>
-			</p>
-			<LightDarkMode />
-		</div>
-	</main>
-</div>
diff --git a/src/lib/components/PublicProfile/BasicInfo.svelte b/src/lib/components/PublicProfile/BasicInfo.svelte
new file mode 100644
index 0000000..c77379a
--- /dev/null
+++ b/src/lib/components/PublicProfile/BasicInfo.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import * as Avatar from '$lib/components/ui/avatar';
+	import { Button } from '$lib/components/ui/button';
+	import { IdCard } from 'lucide-svelte';
+	import GitHub from 'lucide-svelte/icons/github';
+
+	import type { GithubData } from '$lib/types/GithubData';
+	import type { PublicProfile } from '$lib/types/PublicProfile';
+	export let githubData: GithubData;
+	export let userData: PublicProfile;
+</script>
+
+<!-- User Avatar and Basic Info -->
+<div class="flex items-center justify-center space-x-4">
+	<Avatar.Root class="h-24 w-24 rounded-full">
+		<Avatar.Image src={githubData.avatarUrl} alt="User Avatar" />
+		<Avatar.Fallback>?</Avatar.Fallback>
+	</Avatar.Root>
+	<div class="flex flex-col space-y-4 text-center">
+		{#if githubData.name}
+			<p class="text-2xl font-bold">{githubData.name}</p>
+		{:else}
+			<p class="text-xl font-bold">{userData.username}</p>
+		{/if}
+
+		{#if githubData.bio}
+			<p class="text-muted-foreground">{githubData.bio}</p>
+		{:else}
+			<p class="text-muted-foreground">Public Developer Profile</p>
+		{/if}
+
+		{#if githubData.company}
+			<p class="text-muted-foreground">Currently at {githubData.company}</p>
+		{/if}
+		<div class="flex flex-row items-center justify-center gap-4">
+			<div>
+				<Button
+					href={githubData.url}
+					target="_blank"
+					class="mt-2 flex justify-center rounded-full"
+					variant="outline"
+				>
+					<GitHub />
+				</Button>
+			</div>
+			{#if githubData.blog}
+				<div>
+					<Button
+						href={githubData.blog}
+						target="_blank"
+						class="mt-2 flex justify-center rounded-full"
+						variant="outline"
+					>
+						<IdCard />
+					</Button>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
diff --git a/src/lib/components/PublicProfile/GithubStats.svelte b/src/lib/components/PublicProfile/GithubStats.svelte
new file mode 100644
index 0000000..548206a
--- /dev/null
+++ b/src/lib/components/PublicProfile/GithubStats.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import type { GithubData } from '$lib/types/GithubData';
+	import { Folder } from 'lucide-svelte';
+	import GitHub from 'lucide-svelte/icons/github';
+
+	export let githubData: GithubData;
+</script>
+
+<!-- GitHub Stats Cards -->
+<div class="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+	<!-- Total Projects (Repo Count) Card -->
+	<Card.Root>
+		<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+			<div class="flex items-center space-x-2">
+				<Folder class="h-4 w-4 text-muted-foreground" />
+				<Card.Title class="text-sm font-medium">Projects on GitHub</Card.Title>
+			</div>
+		</Card.Header>
+		<Card.Content>
+			<div class="text-2xl font-bold">{githubData.repoCount}</div>
+		</Card.Content>
+	</Card.Root>
+
+	<!-- GitHub Contributions Card -->
+	<Card.Root>
+		<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+			<div class="flex items-center space-x-2">
+				<GitHub class="h-4 w-4 text-muted-foreground" />
+				<Card.Title class="text-sm font-medium">GitHub Contributions (Past 30 Days)</Card.Title>
+			</div>
+		</Card.Header>
+		<Card.Content>
+			<div class="text-2xl font-bold">{githubData.contributionsCount}</div>
+		</Card.Content>
+	</Card.Root>
+
+	<!-- Praise Received Card -->
+	<Card.Root>
+		<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+			<div class="flex items-center space-x-2">
+				<GitHub class="h-4 w-4 text-muted-foreground" />
+				<Card.Title class="text-sm font-medium">Github Followers</Card.Title>
+			</div>
+		</Card.Header>
+		<Card.Content>
+			<div class="text-2xl font-bold">{githubData.followers}</div>
+		</Card.Content>
+	</Card.Root>
+</div>
diff --git a/src/lib/components/PublicProfile/Links.svelte b/src/lib/components/PublicProfile/Links.svelte
new file mode 100644
index 0000000..89c0dce
--- /dev/null
+++ b/src/lib/components/PublicProfile/Links.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import * as Table from '$lib/components/ui/table';
+	import * as Card from '$lib/components/ui/card';
+	import type { PublicProfile } from '$lib/types/PublicProfile';
+
+	export let userData: PublicProfile;
+</script>
+
+<!-- Links Section -->
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Links</Card.Title>
+		<Card.Description>Discover the developer's projects and favorite resources</Card.Description>
+	</Card.Header>
+	<Card.Content class="grid gap-4">
+		{#if userData.links.length > 0}
+			<Table.Root>
+				<Table.Header>
+					<Table.Row>
+						<Table.Head>Title</Table.Head>
+					</Table.Row>
+				</Table.Header>
+				<Table.Body>
+					{#each userData.links as link}
+						<a href={link.url} target="_blank">
+							<Table.Row class="flex flex-row space-x-4 hover:cursor-pointer">
+								<Table.Cell class="font-medium">{link.title}</Table.Cell>
+							</Table.Row>
+						</a>
+					{/each}
+				</Table.Body>
+			</Table.Root>
+		{:else}
+			<p class="text-muted-foreground">No links available</p>
+		{/if}
+	</Card.Content>
+</Card.Root>
diff --git a/src/lib/components/PublicProfile/ProfileFooter.svelte b/src/lib/components/PublicProfile/ProfileFooter.svelte
new file mode 100644
index 0000000..8c3c772
--- /dev/null
+++ b/src/lib/components/PublicProfile/ProfileFooter.svelte
@@ -0,0 +1,8 @@
+<script>
+	import LightDarkMode from '$lib/components/Shared/LightDarkMode.svelte';
+</script>
+
+<p class="text-sm text-muted-foreground">
+	Do you want one? <a href="/" class="text-blue-600 underline">Create yours here.</a>
+</p>
+<LightDarkMode />
diff --git a/src/lib/components/PublicProfile/PublicProfile.svelte b/src/lib/components/PublicProfile/PublicProfile.svelte
new file mode 100644
index 0000000..3e25386
--- /dev/null
+++ b/src/lib/components/PublicProfile/PublicProfile.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { PublicProfile } from '$lib/types/PublicProfile';
+	import type { GithubData } from '$lib/types/GithubData';
+
+	import BasicInfo from '$lib/components/PublicProfile/BasicInfo.svelte';
+	import GithubStats from '$lib/components/PublicProfile/GithubStats.svelte';
+	import Links from '$lib/components/PublicProfile/Links.svelte';
+	import TechStack from '$lib/components/PublicProfile/TechStack.svelte';
+	import ProfileFooter from '$lib/components/PublicProfile/ProfileFooter.svelte';
+
+	// Accept userData as a prop
+	export let userData: PublicProfile;
+
+	//Accept githubData as a prop
+	export let githubData: GithubData;
+</script>
+
+<!-- Main Profile Content -->
+<div class="flex min-h-screen w-full flex-col items-center">
+	<main class="flex w-full max-w-6xl flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
+		<BasicInfo {githubData} {userData} />
+		<GithubStats {githubData} />
+
+		<!-- Links and Tech Stack Side by Side -->
+		<div class="mt-8 grid gap-4 md:grid-cols-2">
+			<Links {userData} />
+			<TechStack {userData} />
+		</div>
+		<div class="flex flex-col items-center justify-center gap-4">
+			<ProfileFooter />
+		</div>
+	</main>
+</div>
diff --git a/src/lib/components/PublicProfile/TechStack.svelte b/src/lib/components/PublicProfile/TechStack.svelte
new file mode 100644
index 0000000..51823d7
--- /dev/null
+++ b/src/lib/components/PublicProfile/TechStack.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Progress } from '$lib/components/ui/progress';
+	import type { PublicProfile } from '$lib/types/PublicProfile';
+	import { getProgressValue } from '$lib/utils/getProgressValue';
+	import { onMount } from 'svelte';
+
+	let progressValues: { [key: string]: number } = {};
+
+	export let userData: PublicProfile;
+
+	//for the progress bar animation
+	onMount(() => {
+		userData.skills.forEach((skill) => {
+			progressValues[skill.title] = 0;
+			setTimeout(() => {
+				progressValues[skill.title] = getProgressValue(skill.level);
+			}, 100);
+		});
+	});
+</script>
+
+<!-- Tech Stack Section -->
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Tech Stack</Card.Title>
+		<Card.Description>Explore the developer's skills and expertise</Card.Description>
+	</Card.Header>
+	<Card.Content class="grid gap-4">
+		{#if userData.skills.length > 0}
+			{#each userData.skills as skill}
+				<div class="flex items-center justify-between">
+					<span>{skill.title}</span>
+					<Progress
+						value={progressValues[skill.title]}
+						max={100}
+						class="w-[60%] transition-all ease-in-out"
+						style="transition-duration: 3000ms;"
+					/>
+				</div>
+			{/each}
+		{:else}
+			<p class="text-muted-foreground">No skills available</p>
+		{/if}
+	</Card.Content>
+</Card.Root>
diff --git a/src/lib/components/UserNotFoundError.svelte b/src/lib/components/PublicProfile/UserNotFoundError.svelte
similarity index 100%
rename from src/lib/components/UserNotFoundError.svelte
rename to src/lib/components/PublicProfile/UserNotFoundError.svelte
diff --git a/src/lib/components/LightDarkMode.svelte b/src/lib/components/Shared/LightDarkMode.svelte
similarity index 100%
rename from src/lib/components/LightDarkMode.svelte
rename to src/lib/components/Shared/LightDarkMode.svelte
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Shared/Navbar.svelte
similarity index 94%
rename from src/lib/components/Navbar.svelte
rename to src/lib/components/Shared/Navbar.svelte
index 898f965..9277b9e 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Shared/Navbar.svelte
@@ -7,7 +7,7 @@
 	import { page } from '$app/stores';
 
 	import * as Avatar from '$lib/components/ui/avatar';
-	import LightDarkMode from './LightDarkMode.svelte';
+	import LightDarkMode from '$lib/components/Shared/LightDarkMode.svelte';
 </script>
 
 <header class="sticky top-0 z-10 items-center border-b bg-background">
diff --git a/src/lib/components/NewSection.svelte b/src/lib/components/Shared/NewSection.svelte
similarity index 100%
rename from src/lib/components/NewSection.svelte
rename to src/lib/components/Shared/NewSection.svelte
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e15f068..36fff3d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script>
-	import Features from '$lib/components/Features.svelte';
-	import Introduction from '$lib/components/Introduction.svelte';
-	import Navbar from '$lib/components/Navbar.svelte';
+	import Features from '$lib/components/Index/Features.svelte';
+	import Introduction from '$lib/components/Index/Introduction.svelte';
+	import Navbar from '$lib/components/Shared/Navbar.svelte';
 </script>
 
 <Navbar />
diff --git a/src/routes/[username]/+error.svelte b/src/routes/[username]/+error.svelte
index 0b2b739..76e5881 100644
--- a/src/routes/[username]/+error.svelte
+++ b/src/routes/[username]/+error.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import UserNotFoundError from '$lib/components/UserNotFoundError.svelte';
+	import UserNotFoundError from '$lib/components/PublicProfile/UserNotFoundError.svelte';
 </script>
 
 <UserNotFoundError />
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index 09a0588..c63eaa3 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import PublicProfile from '$lib/components/PublicProfile.svelte';
+	import PublicProfile from '$lib/components/PublicProfile/PublicProfile.svelte';
 	import type { GithubData } from '$lib/types/GithubData';
 	import { getGithubData } from '$lib/utils/getGithubData';
 	import type { PageData } from './$types';
diff --git a/src/routes/profile/+layout.svelte b/src/routes/profile/+layout.svelte
index b01a41d..6af0253 100644
--- a/src/routes/profile/+layout.svelte
+++ b/src/routes/profile/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Navbar from '$lib/components/Navbar.svelte';
+	import Navbar from '$lib/components/Shared/Navbar.svelte';
 </script>
 
 <Navbar />
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index fae60c4..d5111ee 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -3,11 +3,11 @@
 	import { Button } from '$lib/components/ui/button';
 	import type { PageData } from './$types';
 
-	import LinkForm from '$lib/components/LinkForm.svelte';
-	import UserStats from '$lib/components/UserStats.svelte';
-	import UserLinks from '$lib/components/UserLinks.svelte';
-	import SkillsForm from '$lib/components/SkillsForm.svelte';
-	import UserSkills from '$lib/components/UserSkills.svelte';
+	import LinkForm from '$lib/components/MyProfile/LinkForm.svelte';
+	import UserStats from '$lib/components/MyProfile/UserStats.svelte';
+	import UserLinks from '$lib/components/MyProfile/UserLinks.svelte';
+	import SkillsForm from '$lib/components/MyProfile/SkillsForm.svelte';
+	import UserSkills from '$lib/components/MyProfile/UserSkills.svelte';
 	import { ArrowUpRight, Trash2 } from 'lucide-svelte';
 	import { enhance } from '$app/forms';
 	import { confirmDelete } from '$lib/utils/confirmDelete';