Skip to content

Commit

Permalink
Refactor image handling and styling in project gallery page
Browse files Browse the repository at this point in the history
  • Loading branch information
@hasanshahriar32
hasanshahriar32 committed Oct 13, 2024
1 parent 79bcaa2 commit de283b4
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 28 deletions.
2 changes: 1 addition & 1 deletion components/pages/home/TimelineShowcase.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { EncodeDataAttributeCallback } from '@sanity/react-loader'
import Image from 'next/image'
import React, { Suspense } from 'react'

import { Timeline } from '@/components/ui/timeline'
import { LadderPayload } from '@/types'
import { EncodeDataAttributeCallback } from '@sanity/react-loader'

export function TimelineShowcase({data1, encodeDataAttribute1}: {data1:LadderPayload | null, encodeDataAttribute1?: EncodeDataAttributeCallback
}) {
Expand Down
2 changes: 1 addition & 1 deletion components/ui/card-hover-effect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const HoverEffect = ({
return (
<div
suppressHydrationWarning
className="mt-5 rounded-xl border border-slate-300 p-3 "
className="mt-5 z-10 rounded-xl border border-slate-300 p-3 "
>
<div
className={cn(
Expand Down
97 changes: 71 additions & 26 deletions components/ui/timeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
useScroll,
useTransform,
} from 'framer-motion'
import Image from 'next/image'
import Link from 'next/link'
import { PortableTextBlock } from 'next-sanity'
import React, { useEffect, useRef, useState } from 'react'
Expand All @@ -29,7 +30,7 @@ export const Timeline = ({
data1: LadderPayload | null
encodeDataAttribute1?: EncodeDataAttributeCallback
}) => {
const { overview = [], showcaseProjects = [], title = '' } = data1 ?? {}
const { showcaseProjects = [], title = '' } = data1 ?? {}

const ref = useRef<HTMLDivElement>(null)
const containerRef = useRef<HTMLDivElement>(null)
Expand All @@ -49,19 +50,18 @@ export const Timeline = ({

const heightTransform = useTransform(scrollYProgress, [0, 1], [0, height])
const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1])

return (
<div
className="w-full bg-white dark:bg-neutral-950 font-sans md:px-10"
ref={containerRef}
>
{title && (
<div className="max-w-7xl mx-auto py-20 px-4 md:px-8 lg:px-10">
<h2 className="text-lg md:text-4xl mb-4 text-black dark:text-white max-w-4xl">
<h2 className="text-2xl lg:text-6xl font-bold md:text-4xl mb-4 text-black dark:text-white max-w-4xl">
{data1?.title}
</h2>

<div className="text-neutral-700 font-serif dark:text-neutral-300 text-sm md:text-base max-w-sm">
<div className="text-neutral-700 font-serif dark:text-neutral-300 text-lg md:text-xl lg:text-2xl text-gray-500 max-w-sm">
<CustomPortableText
value={data1?.overview as PortableTextBlock[]}
/>
Expand All @@ -71,44 +71,89 @@ export const Timeline = ({

<div ref={ref} className="relative max-w-7xl mx-auto pb-20">
{showcaseProjects && showcaseProjects.length > 0 && (
<div className="mx-auto max-w-[100rem] rounded-md border">
<div className="">
{showcaseProjects.map((project, key) => {
const href = resolveHref(project?._type, project?.slug)
const item = project
if (!href) {
return null
}
return (
<Link
<div
key={key}
href={href}
// href={href}
data-sanity={encodeDataAttribute1?.([
'showcaseProjects',
key,
'slug',
])}
>
{/* <ProjectListItem project={project} odd={key % 2} /> */}
<div
className="flex justify-start pt-10 md:pt-40 md:gap-10"
>
<div className="sticky flex flex-col md:flex-row z-40 items-center top-40 self-start max-w-xs lg:max-w-sm md:w-full">
<div className="h-10 absolute left-3 md:left-3 w-10 rounded-full bg-white dark:bg-black flex items-center justify-center">
<div className="h-4 w-4 rounded-full bg-neutral-200 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 p-2" />
</div>
<h3 className="hidden md:block text-xl md:pl-20 md:text-5xl font-bold text-neutral-500 dark:text-neutral-500 ">
{item.title}
</h3>
</div>
<div className="flex justify-start pt-10 md:pt-40 md:gap-10">
<div className="sticky flex flex-col md:flex-row z-40 items-center top-40 self-start max-w-xs lg:max-w-sm md:w-full">
<div className="h-10 absolute left-3 md:left-3 w-10 rounded-full bg-white dark:bg-black flex items-center justify-center">
<div className="h-4 w-4 rounded-full bg-neutral-200 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 p-2" />
</div>
<h3 className="hidden md:block text-xl md:pl-20 md:text-5xl font-bold text-neutral-500 dark:text-neutral-500 ">
{new Date(
item?.duration?.start ?? new Date(),
).toLocaleDateString('en-CA', {
year: 'numeric',
month: '2-digit',
})}
-{' '}
{new Date(
item?.duration?.end ?? new Date(),
).toLocaleDateString('en-CA', {
year: 'numeric',
month: '2-digit',
})}
</h3>
</div>

<div className="relative pl-20 pr-4 md:pl-4 w-full">
<h3 className="md:hidden block text-2xl mb-4 text-left font-bold text-neutral-500 dark:text-neutral-500">
{item.slug}
</h3>
{/* {item?.content}{' '} */}
</div>
</div>
</Link>
<Link href={href} className="relative pl-20 pr-4 md:pl-4 w-full">
<h3 className="md:hidden block text-2xl mb-4 text-left font-bold text-neutral-500 dark:text-neutral-500">
{new Date(
item?.duration?.start ?? new Date(),
).toLocaleDateString('en-CA', {
year: 'numeric',
month: '2-digit',
})}
-{' '}
{new Date(
item?.duration?.end ?? new Date(),
).toLocaleDateString('en-CA', {
year: 'numeric',
month: '2-digit',
})}
</h3>
{/* {item?.content}{' '} */}

<p className="text-neutral-800 dark:text-neutral-200 text-base font-semibold md:text-sm font-normal mb-8">
{item.title}
</p>
<div className="text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-4">
<CustomPortableText
value={item?.overview as PortableTextBlock[]}
/>
</div>
<div className="grid grid-cols-2 gap-4">
{item?.cloudinaryList
?.slice(0, 4)
?.map((image, index) => (
<Image
key={index}
src={image.url}
alt={image.alt || `Image ${index + 1}`}
width={500}
height={500}
className="rounded-lg object-cover h-20 md:h-44 lg:h-60 w-full shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]"
/>
))}
</div>
</Link>
</div>
</div>
)
})}
</div>
Expand Down
3 changes: 3 additions & 0 deletions sanity/lib/queries.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ export const ladderQuery = groq`
"slug": slug.current,
tags,
title,
cloudinaryList,
duration
},
title,
}
Expand Down
5 changes: 5 additions & 0 deletions types/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@ export interface ShowcaseProject {
slug?: string
tags?: string[]
title?: string
duration?: {
start?: string
end?: string
}
cloudinaryList?: any
}

// Page payloads
Expand Down

0 comments on commit de283b4

Please sign in to comment.