Made card grids not ass
All checks were successful
Docker Deploy / build-and-push (push) Successful in 6m7s

This commit is contained in:
2025-11-23 01:51:14 -07:00
parent b159236e59
commit b87357c175
7 changed files with 71 additions and 21 deletions

View File

@@ -21,9 +21,25 @@ const sortedPosts = posts.sort(
Posts
</h1>
<div
class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto"
class:list={[
sortedPosts.length <= 2
? "flex flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto px-4"
: "columns-1 sm:columns-2 lg:columns-3 gap-4 sm:gap-6 max-w-6xl mx-auto px-4",
]}
>
{sortedPosts.map((post) => <PostCard post={post} />)}
{
sortedPosts.map((post) => (
<div
class:list={[
sortedPosts.length <= 2
? "w-full sm:w-96"
: "inline-block break-inside-avoid w-full",
]}
>
<PostCard post={post} />
</div>
))
}
</div>
{

View File

@@ -141,7 +141,7 @@ if (!data) {
data.summary &&
resumeConfig.sections.enabled.includes("summary") && (
<div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
<div class="card-body p-4 sm:p-6 break-words">
<div class="card-body p-4 sm:p-6 wrap-break-word">
<h2 class="card-title text-xl sm:text-2xl">
{resumeConfig.sections.summary?.title ||
"Summary"}
@@ -157,7 +157,7 @@ if (!data) {
data.skills.length > 0 &&
resumeConfig.sections.enabled.includes("skills") && (
<div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
<div class="card-body p-4 sm:p-6 break-words">
<div class="card-body p-4 sm:p-6 wrap-break-word">
<h2 class="card-title text-xl sm:text-2xl">
{resumeConfig.sections.skills?.title ||
"Skills"}
@@ -180,7 +180,7 @@ if (!data) {
data.experience.length > 0 &&
resumeConfig.sections.enabled.includes("experience") && (
<div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
<div class="card-body p-4 sm:p-6 break-words">
<div class="card-body p-4 sm:p-6 wrap-break-word">
<h2 class="card-title text-xl sm:text-2xl">
{resumeConfig.sections.experience?.title ||
"Experience"}
@@ -229,7 +229,7 @@ if (!data) {
data.education.length > 0 &&
resumeConfig.sections.enabled.includes("education") && (
<div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
<div class="card-body p-4 sm:p-6 break-words">
<div class="card-body p-4 sm:p-6 wrap-break-word">
<h2 class="card-title text-xl sm:text-2xl">
{resumeConfig.sections.education?.title ||
"Education"}
@@ -271,7 +271,7 @@ if (!data) {
data.volunteer.length > 0 &&
resumeConfig.sections.enabled.includes("volunteer") && (
<div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
<div class="card-body p-4 sm:p-6 break-words">
<div class="card-body p-4 sm:p-6 wrap-break-word">
<h2 class="card-title text-xl sm:text-2xl">
{resumeConfig.sections.volunteer?.title ||
"Volunteer Work"}
@@ -303,7 +303,7 @@ if (!data) {
data.awards.length > 0 &&
resumeConfig.sections.enabled.includes("awards") && (
<div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
<div class="card-body p-4 sm:p-6 break-words">
<div class="card-body p-4 sm:p-6 wrap-break-word">
<h2 class="card-title text-xl sm:text-2xl">
{resumeConfig.sections.awards?.title ||
"Awards & Recognition"}

View File

@@ -12,9 +12,25 @@ import { config } from "../config";
Talks
</h1>
<div
class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto"
class:list={[
config.talks.length <= 2
? "flex flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto px-4"
: "columns-1 sm:columns-2 lg:columns-3 gap-4 sm:gap-6 max-w-6xl mx-auto px-4",
]}
>
{config.talks.map((talk) => <TalkCard talk={talk} />)}
{
config.talks.map((talk) => (
<div
class:list={[
config.talks.length <= 2
? "w-full sm:w-96"
: "inline-block break-inside-avoid w-full",
]}
>
<TalkCard talk={talk} />
</div>
))
}
</div>
{