Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-08-24 15:22:20 +10:00
Code Issues Packages Projects Releases Wiki Activity

refactor: ponytail audit

Browse Source
This commit is contained in:
Amruth Pillai
2026-07-27 20:26:16 +02:00
parent bb1fb3a7d6
commit 9110e86997
157 changed files with 1082 additions and 2177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/routes/_home/-sections/templates.tsx
+5 -15
View File
@@ -1,7 +1,6 @@
import type { TemplateMetadata } from "@/dialogs/resume/template/data";
import { Trans } from "@lingui/react/macro";
import { m } from "motion/react";
import { useMemo } from "react";
import { templates } from "@/dialogs/resume/template/data";
type TemplateItemProps = {
@@ -75,21 +74,12 @@ const createMarqueeItems = (entries: Array<[string, TemplateMetadata]>, rowId: s
{ id: `${rowId}-${template}-repeat`, metadata },
]);
const templateEntries = Object.entries(templates);
const halfway = Math.ceil(templateEntries.length / 2);
const row1 = createMarqueeItems(templateEntries.slice(0, halfway), "row1");
const row2 = createMarqueeItems(templateEntries.slice(halfway), "row2");
export function Templates() {
// Split templates into two rows and duplicate for seamless infinite scroll
const { row1, row2 } = useMemo(() => {
const entries = Object.entries(templates);
const half = Math.ceil(entries.length / 2);
const firstHalf = entries.slice(0, half);
const secondHalf = entries.slice(half);
// Duplicate each row for seamless scrolling
return {
row1: createMarqueeItems(firstHalf, "row1"),
row2: createMarqueeItems(secondHalf, "row2"),
};
}, []);
return (
<section id="templates" className="overflow-hidden border-t-0! p-4 md:p-8 xl:py-16">
<m.div
apps/web/src/routes/_home/-sections/testimonials.tsx
+6 -12
View File
@@ -1,7 +1,6 @@
import { Trans } from "@lingui/react/macro";
import { QuotesIcon } from "@phosphor-icons/react";
import { m } from "motion/react";
import { useMemo } from "react";
const email = "hello@amruthpillai.com";
@@ -70,6 +69,11 @@ type TestimonialColumnData = {
testimonials: string[];
};
const testimonialColumns: TestimonialColumnData[] = [];
for (let index = 0; index < testimonials.length; index += 2) {
testimonialColumns.push({ id: `column-${index / 2}`, testimonials: testimonials.slice(index, index + 2) });
}
type MarqueeMasonryProps = {
columns: TestimonialColumnData[];
direction: "left" | "right";
@@ -97,16 +101,6 @@ function MarqueeMasonry({ columns, direction, duration = 30 }: MarqueeMasonryPro
}
export function Testimonials() {
const columns = useMemo(() => {
const columns: TestimonialColumnData[] = [];
for (let index = 0; index < testimonials.length; index += 2) {
columns.push({ id: `column-${index / 2}`, testimonials: testimonials.slice(index, index + 2) });
}
return columns;
}, []);
return (
<section id="testimonials" className="overflow-hidden py-12 md:py-16 xl:py-20">
<m.div
@@ -145,7 +139,7 @@ export function Testimonials() {
{/* Right fade */}
<div className="pointer-events-none absolute inset-e-0 top-0 bottom-0 z-10 w-16 bg-linear-to-l from-background to-transparent sm:w-24 md:w-32 lg:w-48" />
<MarqueeMasonry columns={columns} direction="left" duration={60} />
<MarqueeMasonry columns={testimonialColumns} direction="left" duration={60} />
</div>
</section>
);