Redesign projects

Nolankicks · Dec 19, 2024 · fad3629 · fad3629
1 parent 7f3a137
commit fad3629
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 51 deletions.
diff --git a/src/lib/components/Blog.svelte b/src/lib/components/Blog.svelte
@@ -2,7 +2,7 @@
     export let blogPost;
 </script>
 
-<a href={`${blogPost.IsNews ? "sboxnews/" : "blog/"}${blogPost.slug}`} class="block p-4 bg-secondary rounded-md shadow-2xl mb-4 hover:scale-[1.01] active:scale-[0.99] transition-all w-full max-w-xl font-poppins">
+<a href={`${blogPost.IsNews ? "sboxnews/" : "blog/"}${blogPost.slug}`} class="block p-4 bg-secondary rounded-md mb-4 hover:scale-[1.01] active:scale-[0.99] transition-all w-full max-w-xl font-poppins">
     <h2 class="text-2xl font-bold text-white">{blogPost.title}</h2>
 
     {#if blogPost.description}

diff --git a/src/lib/components/Project.svelte b/src/lib/components/Project.svelte
@@ -1,24 +1,25 @@
 <script lang="ts">
-    export let project;
+	export let project;
+
+	let slug = project.redirect ? project.redirect : `projects/${project.slug}`;
+
+	let isHovered: boolean;
 </script>
 
 <a
-    href={project.redirect ? project.redirect : `projects/${project.slug}`}
-    class="flex flex-row {project.image ? 'h-auto' : 'h-40'} p-4 bg-secondary rounded-md shadow-2xl font-poppins mb-4 lg:h-40 w-full max-w-xl items-center hover:scale-[1.01] active:scale-[0.99] transition-all"
+	class="flex flex-shrink-0 flex-row text-white min-h-24 font-poppins relative gap-2"
+	href={slug}
+    onmouseenter={() => (isHovered = true)}
+	onmouseleave={() => (isHovered = false)}
 >
-    {#if project.image}
-        <img
-            src={project.image}
-            alt={project.title}
-            class="bg-cover rounded-md h-32 w-32 flex-shrink-0 mr-4 transition-all"
-        />
-    {/if}
-    <div class="flex flex-col w-full items-start">
-        <h2 class="font-bold text-white text-3xl">{project.title}</h2>
-        <p class="text-white font-semibold {project.image ? 'text-sm lg:text-base' : 'text-xl'}">{project.description}</p>
-        {#if project.lang}
-            <p class="text-white {project.image ? 'text-xs lg:text-sm' : 'text-lg md:text-xl'}">{project.lang}</p>
-        {/if}
-        <p class="text-white {project.image ? 'text-xs lg:text-sm' : 'text-xl'}">{project.date}</p>
-    </div>
-</a>
+	{#if project.image}
+		<img src={project.image} class="h-32 w-32 rounded-md flex-shrink-0 flex" alt={project.title} />
+	{/if}
+
+	<div class="flex flex-shrink items-start justify-center flex-col w-full">
+		<p class="text-xl font-bold">{project.title}</p>
+		<p>{project.description}</p>
+	</div>
+
+    <p class="absolute -bottom-2 w-full bg-white h-1 flex {isHovered ? "opacity-100" : "opacity-0"} transition-all"></p>
+</a>
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
@@ -18,21 +18,26 @@ export const load: PageServerLoad = async ({ fetch }) => {
         })
     );
 
-    const allNewsPostsFetch = await fetch("https://services.facepunch.com/sbox/news/organization/nolankicks");
-
-    if (allNewsPostsFetch.ok) {
-        let newsPosts: NewsPost[] = await allNewsPostsFetch.json();
-
-        if (newsPosts) {
-            newsPosts = newsPosts.filter((post: NewsPost) => post.Sections[0].Contents !== "");
-
-            let newsAsBlog = newsPosts.map((post: NewsPost) => {
-                return NewsAsBlog(post);
-            });
-
-            unsortedPosts = unsortedPosts.concat(newsAsBlog);
+    try
+    {
+        const allNewsPostsFetch = await fetch("https://services.facepunch.com/sbox/news/organization/nolankicks");
+
+        if (allNewsPostsFetch.ok) {
+            let newsPosts: NewsPost[] = await allNewsPostsFetch.json();
+
+            if (newsPosts) {
+                newsPosts = newsPosts.filter((post: NewsPost) => post.Sections[0].Contents !== "");
+
+                let newsAsBlog = newsPosts.map((post: NewsPost) => {
+                    return NewsAsBlog(post);
+                });
+
+                unsortedPosts = unsortedPosts.concat(newsAsBlog);
+            }
         }
     }
+    catch
+    {}
 
     unsortedPosts = unsortedPosts.filter((post: App.BlogPost) => post.published ?? true);
 

diff --git a/src/routes/blog/+page.server.ts b/src/routes/blog/+page.server.ts
@@ -18,21 +18,26 @@ export const load: PageServerLoad = async ({ fetch }) => {
         })
     );
 
-    const allNewsPostsFetch = await fetch("https://services.facepunch.com/sbox/news/organization/nolankicks");
-
-    if (allNewsPostsFetch.ok) {
-        let newsPosts: NewsPost[] = await allNewsPostsFetch.json();
-
-        if (newsPosts) {
-            newsPosts = newsPosts.filter((post: NewsPost) => post.Sections[0].Contents !== "");
-
-            let newsAsBlog = newsPosts.map((post: NewsPost) => {
-                return NewsAsBlog(post);
-            });
-
-            unsortedPosts = unsortedPosts.concat(newsAsBlog);
+    try
+    {
+        const allNewsPostsFetch = await fetch("https://services.facepunch.com/sbox/news/organization/nolankicks");
+
+        if (allNewsPostsFetch.ok) {
+            let newsPosts: NewsPost[] = await allNewsPostsFetch.json();
+
+            if (newsPosts) {
+                newsPosts = newsPosts.filter((post: NewsPost) => post.Sections[0].Contents !== "");
+
+                let newsAsBlog = newsPosts.map((post: NewsPost) => {
+                    return NewsAsBlog(post);
+                });
+
+                unsortedPosts = unsortedPosts.concat(newsAsBlog);
+            }
         }
     }
+    catch
+    {}
 
     unsortedPosts = unsortedPosts.filter((post: App.BlogPost) => post.published ?? true);
 

diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
@@ -10,15 +10,17 @@
 </svelte:head>
 
 <div class="w-full flex items-center justify-center animate-fadein">
-    <div class="max-w-xl w-full my-5 mx-auto flex flex-col gap-4 pt-6 font-poppins px-5 text-white sm:px-0">
+    <div class="max-w-xl w-full my-5 mx-auto flex flex-col gap-4 pt-6 font-poppins px-5 text-white">
         <Header title="Projects" HyperLink={false} />
     </div>
 </div>
 
-<div class="w-full flex items-center flex-col px-5 animate-fadein">
-    {#each data.posts as project}
-        <Project project={project} />
-    {/each}
+<div class="w-full flex items-center flex-col px-5 animate-fadein mb-5">
+    <div class="grid w-full max-w-xl grid-cols-1 sm:grid-cols-2 grid-flow-row gap-5 px-5">
+        {#each data.posts as project}
+            <Project project={project} />
+        {/each}
+    </div>
 </div>
 
 <DiscordEmbed title="kicks" description="Some of the projects I've worked on" />