troy/troylusty.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: only show hero and carousel on index

Browse source
This commit is contained in:
Troy 2025-02-13 16:55:09 +00:00
parent 0edd672a70
commit 81538a6fdf
Signed by: troy
GPG key ID: DFC06C02ED3B4711
18 changed files with 104 additions and 225 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/pages/cv.astro
View file

@ -164,9 +164,11 @@ import icon from "public/assets/icon.png";
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
Task:
</p>
<p class="w-full lg:inline-block lg:w-8/12">
CMS Migration and Rebrand
</p>
<div class="w-full lg:inline-block lg:w-8/12">
<Link href="/projects/camouflage-store"
>CMS Migration and Rebrand
</Link>
</div>
</section>
<section class="mb-6">
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
@ -215,9 +217,8 @@ import icon from "public/assets/icon.png";
Personal blog:
</p>
<p class="w-full lg:inline-block lg:w-8/12">
My blog is the center of my online presence. Here, I share
posts about what I've learnt, tutorials and my thoughts on
web development in general.
My personal portfolio website made using Astro. A place for
me to share my work and anything else I've learnt.
</p>
</section>
<section class="mb-6">

74
src/pages/index.astro
View file

@ -2,89 +2,23 @@
import Layout from "@layouts/Layout.astro";
import { HOME } from "@consts";
import { getCollection } from "astro:content";
import ShowcasePost from "@components/ShowcasePost.astro";
import Hero from "@components/Hero.astro";
import Button from "@components/Button.astro";
import { Icon } from "astro-icon/components";
import Carousel from "@components/Carousel.astro";
const allPosts = await getCollection("posts");
const posts = allPosts
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
.slice(0, HOME.HOMESETTINGS?.NUM_POSTS_ON_HOMEPAGE);
const allProjects = await getCollection("projects");
const projects = allProjects
.filter((project) => !project.data.draft && project.data.featured)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
.slice(0, HOME.HOMESETTINGS?.NUM_PROJECTS_ON_HOMEPAGE);
const projectsJSON = JSON.stringify(projects);
---
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
<Hero />
<section aria-labelledby="featured-projects" class="animate-reveal opacity-0 [animation-delay:0.1s]">
<div
class="mx-auto flex flex-col items-start justify-between sm:flex-row sm:items-center"
>
<h2
class=" text-2xl font-semibold break-words capitalize "
id="featured-projects"
>
Featured projects
</h2>
{
allProjects.length > HOME.HOMESETTINGS!.NUM_PROJECTS_ON_HOMEPAGE ? (
<div class="group">
<a
href="/projects"
class="group text-tertiary group-hover:text-secondary flex items-center justify-center gap-1 transition-colors duration-300"
>
View all
<Icon
name="mdi:chevron-right"
class="group-hover:text-secondary transition-all duration-300 group-hover:translate-x-2"
/>
</a>
</div>
) : null
}
</div>
<section
id="featured-projects"
class="animate-reveal opacity-0 [animation-delay:0.1s]"
>
<Carousel data={projectsJSON} />
</section>
<section aria-labelledby="recent-posts" class="mt-24 animate-reveal opacity-0 [animation-delay:0.2s]">
<div class="group flex w-fit flex-row items-center">
<h2
class="text-2xl font-semibold break-words capitalize"
>
Recent posts
</h2>
</div>
<ol
class="mt-8 grid grid-cols-1 gap-6"
>
{posts.map((post) => <ShowcasePost collection={post} />)}
</ol>
{
allPosts.length > HOME.HOMESETTINGS!.NUM_POSTS_ON_HOMEPAGE ? (
<div class="group">
<a
href="/posts"
class="group text-tertiary group-hover:text-secondary flex items-center justify-center gap-1 transition-colors duration-300"
>
View all
<Icon
name="mdi:chevron-right"
class="group-hover:text-secondary transition-all duration-300 group-hover:translate-x-2"
/>
</a>
</div>
) : null
}
</section>
</Layout>

2
src/pages/projects/index.astro
View file

@ -15,7 +15,7 @@ const projects = (await getCollection("projects"))
{PROJECTS.TITLE}
</h1>
<ol
class="animate-reveal mt-8 grid grid-cols-2 gap-2 opacity-0 [animation-delay:0.1s] md:grid-cols-3"
class="animate-reveal mt-8 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
>
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
</ol>