diff --git a/payload-types.ts b/payload-types.ts index dda100d..2992106 100644 --- a/payload-types.ts +++ b/payload-types.ts @@ -117,6 +117,7 @@ export interface Page { about?: | { date?: string | null; + endDate?: string | null; position?: string | null; company?: string | null; stacks?: @@ -448,6 +449,7 @@ export interface PagesSelect<T extends boolean = true> { | T | { date?: T; + endDate?: T; position?: T; company?: T; stacks?: diff --git a/src/app/(frontend)/about/page.tsx b/src/app/(frontend)/about/page.tsx index bec6d13..e1175e9 100644 --- a/src/app/(frontend)/about/page.tsx +++ b/src/app/(frontend)/about/page.tsx @@ -4,6 +4,8 @@ import { getPayload } from 'payload'; import { RichText } from '@/src/components/typography'; import configPromise from '@payload-config'; import { AboutBlock } from '@/src/components/blocks'; +import { ArrowDown } from '@/src/components/graphics'; +import styles from './styles.module.scss'; export const metadata: Metadata = { description: 'About Aman Singh Bhogal', @@ -27,10 +29,11 @@ export default async function Page() { const { docs } = data; return ( - <div> - <h1>{docs[0].title}</h1> + <div className={styles.container}> + <h1 className={styles.title}>{docs[0].title}</h1> {/* @ts-expect-error resolve type mismatch */} <RichText content={docs[0]?.layout?.[0].Content || []} /> + <ArrowDown className={styles.arrowDown} /> {/* @ts-expect-error resolve type mismatch */} <AboutBlock history={docs[0]?.layout?.[1].about} /> </div> diff --git a/src/app/(frontend)/about/styles.module.scss b/src/app/(frontend)/about/styles.module.scss new file mode 100644 index 0000000..acb1aea --- /dev/null +++ b/src/app/(frontend)/about/styles.module.scss @@ -0,0 +1,16 @@ +.arrowDown { + margin-bottom: 14.375rem; + margin-left: calc(100dvw / 7); + + @media only screen and (width <=48rem) { + margin: 0 auto; + } +} + +.container { + position: relative; +} + +.title { + margin-bottom: 2.8125rem; +} \ No newline at end of file diff --git a/src/app/(frontend)/about/styles.module.scss.d.ts b/src/app/(frontend)/about/styles.module.scss.d.ts new file mode 100644 index 0000000..94e7ee6 --- /dev/null +++ b/src/app/(frontend)/about/styles.module.scss.d.ts @@ -0,0 +1,3 @@ +export declare const arrowDown: string; +export declare const container: string; +export declare const title: string; diff --git a/src/app/(frontend)/page.tsx b/src/app/(frontend)/page.tsx index fe67672..784b368 100644 --- a/src/app/(frontend)/page.tsx +++ b/src/app/(frontend)/page.tsx @@ -54,7 +54,7 @@ export default async function Page() { } /> <ArrowDown className={styles.arrow} /> - <Spacer height={300} /> + <Spacer height={10} /> <div className={styles.containerInner}> <Subheading subheading={docs[0]?.layout?.[1].subheading} /> <AccoladesBlock accolades={docs[0]?.layout?.[2].accolade} /> diff --git a/src/app/(frontend)/styles.module.scss b/src/app/(frontend)/styles.module.scss index c83532d..2132cf1 100644 --- a/src/app/(frontend)/styles.module.scss +++ b/src/app/(frontend)/styles.module.scss @@ -10,8 +10,12 @@ } .arrow { - left: calc(100dvw / 8); - position: absolute; + margin-bottom: 14.375rem; + margin-left: calc(100dvw / 7); + + @media only screen and (width <=48rem) { + margin: 0 auto; + } } .container { diff --git a/src/components/blocks/AboutBlock/index.tsx b/src/components/blocks/AboutBlock/index.tsx index e95c4be..70d0bfa 100644 --- a/src/components/blocks/AboutBlock/index.tsx +++ b/src/components/blocks/AboutBlock/index.tsx @@ -16,7 +16,13 @@ export const AboutBlock = ({ history }: Props) => ( key={event.id} > <div className={styles.containerInner}> - <p className={styles.date}>{dayjs(event.date).format('MMM YYYY')}</p> + <div className={styles.containerInnerHeader}> + <p className={styles.date}>{dayjs(event.date).format('MMM YYYY')}</p> + <span>-</span> + <p className={styles.date}> + {event.endDate ? (dayjs(event.endDate).format('MMM YYYY')) : 'Present'} + </p> + </div> <p className={styles.position}> {event.position} </p> diff --git a/src/components/blocks/AboutBlock/styles.module.scss b/src/components/blocks/AboutBlock/styles.module.scss index 1633472..7a248ef 100644 --- a/src/components/blocks/AboutBlock/styles.module.scss +++ b/src/components/blocks/AboutBlock/styles.module.scss @@ -10,6 +10,15 @@ &:not(:last-child) { margin-bottom: 3.75rem; } + + @media only screen and (width <=48rem) { + flex-direction: column; + gap: 1.25rem; + + &:not(:last-child) { + margin-bottom: 1.25rem; + } + } } .containerInner { @@ -19,9 +28,16 @@ gap: .9375rem; } +.containerInnerHeader { + align-items: center; + display: flex; + flex-direction: row; + gap: .625rem; +} + .containerOuter { margin: 0 auto; - max-width: 71rem; + max-width: 75rem; width: 100%; } @@ -52,6 +68,7 @@ flex-direction: column; list-style: disc; margin-left: 1.25rem; + text-align: justify; } .stack, diff --git a/src/components/blocks/AboutBlock/styles.module.scss.d.ts b/src/components/blocks/AboutBlock/styles.module.scss.d.ts index 1ff3913..28578d6 100644 --- a/src/components/blocks/AboutBlock/styles.module.scss.d.ts +++ b/src/components/blocks/AboutBlock/styles.module.scss.d.ts @@ -1,6 +1,7 @@ export declare const company: string; export declare const container: string; export declare const containerInner: string; +export declare const containerInnerHeader: string; export declare const containerOuter: string; export declare const date: string; export declare const position: string; diff --git a/src/components/blocks/ProjectShowcaseBlock/index.tsx b/src/components/blocks/ProjectShowcaseBlock/index.tsx index a6f3aa2..304fe1c 100644 --- a/src/components/blocks/ProjectShowcaseBlock/index.tsx +++ b/src/components/blocks/ProjectShowcaseBlock/index.tsx @@ -1,6 +1,5 @@ 'use client'; -/* @ts-expect-error missing declaration files */ import { Splide, SplideSlide } from '@splidejs/react-splide'; import { Media } from '@/payload-types'; import Image from 'next/image'; diff --git a/src/components/blocks/SliderBlock/index.tsx b/src/components/blocks/SliderBlock/index.tsx index cf286bc..a8b2825 100644 --- a/src/components/blocks/SliderBlock/index.tsx +++ b/src/components/blocks/SliderBlock/index.tsx @@ -1,6 +1,5 @@ 'use client'; -/* @ts-expect-error missing declaration files */ import { Splide, SplideSlide } from '@splidejs/react-splide'; import { Page } from '@/payload-types'; import Image from 'next/image'; @@ -14,12 +13,15 @@ interface Props { } export const SliderBlock = ({ items }: Props) => ( - <Splide options={{ - autoplay: true, - }} + <Splide + tag="div" + options={{ + autoplay: true, + }} > {items.cards?.map((item) => ( <SplideSlide + tag="div" className={styles.splideSlide} key={item.id} > diff --git a/src/components/blocks/SliderBlock/styles.module.scss b/src/components/blocks/SliderBlock/styles.module.scss index 3f3696e..7443414 100644 --- a/src/components/blocks/SliderBlock/styles.module.scss +++ b/src/components/blocks/SliderBlock/styles.module.scss @@ -6,4 +6,8 @@ .image { object-fit: cover; width: 100%; + + @media only screen and (width <=48rem) { + height: 50dvh; + } } \ No newline at end of file diff --git a/src/components/globals/Footer/index.tsx b/src/components/globals/Footer/index.tsx index f423ef6..fd272cc 100644 --- a/src/components/globals/Footer/index.tsx +++ b/src/components/globals/Footer/index.tsx @@ -28,27 +28,29 @@ export const Footer = async () => { height={500} alt="The letter 'A' in elegant notation" /> - {/* <WebsiteCarbonBadge url="www.amansinghbhogal.com" /> - */} - {' '} <div className={styles.footerLinks}> - <ul className={styles.footerUl}> - {footerMenu?.map((footerItem) => (footerItem.footerMenuItem?.footerMenuItemText === 'Primary' - ? footerItem?.footerMenuItem?.footerLinks?.map((primary) => ( - <li - className={styles.footerLi} - key={primary.id} - > - <Link - className={styles.footerLink} - href={primary.footerLinkUrl || ''} + {footerMenu?.map((footerItem) => (footerItem.footerMenuItem?.footerMenuItemText === 'Primary' && ( + <ul + className={styles.footerUl} + key={footerItem.id} + > + {footerMenu?.map((primaryFooterItem) => (primaryFooterItem.footerMenuItem?.footerMenuItemText === 'Primary' + ? primaryFooterItem?.footerMenuItem?.footerLinks?.map((primary) => ( + <li + className={styles.footerLi} + key={primary.id} > - {primary.footerLink} - </Link> - </li> - )) - : null))} - </ul> + <Link + className={styles.footerLink} + href={primary.footerLinkUrl || ''} + > + {primary.footerLink} + </Link> + </li> + )) + : null))} + </ul> + )))} <ul className={styles.footerUl}> {footerMenu?.map((footerItem) => (footerItem.footerMenuItem?.footerMenuItemText === 'Secondary' ? footerItem?.footerMenuItem?.footerLinks?.map((secondary) => ( diff --git a/src/components/globals/Footer/styles.module.scss b/src/components/globals/Footer/styles.module.scss index 4f67097..9de7c6b 100644 --- a/src/components/globals/Footer/styles.module.scss +++ b/src/components/globals/Footer/styles.module.scss @@ -12,6 +12,10 @@ padding: 27.1875rem .625rem; position: relative; width: 100%; + + @media only screen and (width <=48rem) { + align-items: center; + } } .copyright { @@ -25,6 +29,14 @@ .footerUl { flex: 1; list-style-type: none; + + @media only screen and (width <=48rem) { + display: flex; + flex-direction: column; + gap: .625rem; + justify-content: center; + text-align: center; + } } .footerLi { diff --git a/src/components/globals/Header/index.tsx b/src/components/globals/Header/index.tsx index 40d257e..b0e5b0d 100644 --- a/src/components/globals/Header/index.tsx +++ b/src/components/globals/Header/index.tsx @@ -17,7 +17,12 @@ export const Header = async () => { return ( <header className={styles.header}> - <Logo width={40} /> + <Link + aria-label="Home" + href="/" + > + <Logo width={40} /> + </Link> <nav> <ul className={styles.headerUl}> {headerMenu?.map((headerItem) => ( diff --git a/src/payload/blocks/about.ts b/src/payload/blocks/about.ts index 446bd69..ac30c0b 100644 --- a/src/payload/blocks/about.ts +++ b/src/payload/blocks/about.ts @@ -8,6 +8,10 @@ export const AboutBlock: Block = { name: 'date', type: 'date', }, + { + name: 'endDate', + type: 'date', + }, { name: 'position', type: 'text', diff --git a/types.d.ts b/types.d.ts new file mode 100644 index 0000000..26a96c7 --- /dev/null +++ b/types.d.ts @@ -0,0 +1 @@ +declare module '@splidejs/react-splide';