chore: update responsive styles

asbhogal · Dec 1, 2024 · 4bfaae3 · 4bfaae3
1 parent f28e318
commit 4bfaae3
Show file tree

Hide file tree

Showing 17 changed files with 113 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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;
+}
diff --git a/src/app/(frontend)/about/styles.module.scss.d.ts 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -6,4 +6,8 @@
 .image {
   object-fit: cover;
   width: 100%;
+
+  @media only screen and (width <=48rem) {
+    height: 50dvh;
+  }
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+declare module '@splidejs/react-splide';