Merge pull request #128 from mineTomek/add-framer-animations-to-main-…

…page Add framer animations to main page
mineTomek · Nov 16, 2023 · 0e14e5c · 0e14e5c · vercel · Nov 16, 2023
2 parents e1999a6 + 36ae5bd
commit 0e14e5c
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 35 deletions.
diff --git a/src/app/components/PostCard.tsx b/src/app/components/PostCard.tsx
@@ -3,6 +3,7 @@ import { faQuoteRight } from '@fortawesome/free-solid-svg-icons'
 import Link from 'next/link'
 import Image from 'next/image'
 import Category from '../types/Category'
+import { motion } from 'framer-motion'
 
 export default function PostCard(props: {
   name: string
@@ -12,36 +13,48 @@ export default function PostCard(props: {
   category?: Category
 }) {
   return (
-    <Link
-      href={props.link}
-      className='flex flex-col justify-between gap-2 rounded-xl border bg-gradient-to-b from-zinc-50 to-zinc-100 p-3 transition-[transform,_box-shadow] [box-shadow:1px_-4px_3px_0_#00000012_inset] hover:-translate-y-1 hover:[box-shadow:1px_-1px_3px_0_#00000012_inset] dark:border-zinc-800 dark:from-zinc-800 dark:to-zinc-800'
-      target='_blank'
-      rel='noopener noreferrer'
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true, margin: '-10%' }}
     >
-      <div className='flex justify-between text-lg tracking-wide'>
-        {props.name}
-        <div className='flex gap-4'>
-          <span className='my-auto text-sm text-zinc-600 dark:text-zinc-300'>
-            {props.category && props.category.name}
-          </span>
-          <FontAwesomeIcon
-            icon={faQuoteRight}
-            style={{ color: '#ccc' }}
-            className='hidden h-auto w-6 sm:block'
-          />
+      <Link
+        href={props.link}
+        className='flex flex-col justify-between gap-2 rounded-xl border bg-gradient-to-b from-zinc-50 to-zinc-100 p-3 transition-[transform,_box-shadow] [box-shadow:1px_-4px_3px_0_#00000012_inset] hover:-translate-y-1 hover:[box-shadow:1px_-1px_3px_0_#00000012_inset] dark:border-zinc-800 dark:from-zinc-800 dark:to-zinc-800'
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        <div className='flex justify-between text-lg tracking-wide'>
+          {props.name}
+          <div className='flex gap-4'>
+            <span className='my-auto text-sm text-zinc-600 dark:text-zinc-300'>
+              {props.category && props.category.name}
+            </span>
+            <FontAwesomeIcon
+              icon={faQuoteRight}
+              style={{ color: '#ccc' }}
+              className='hidden h-auto w-6 sm:block'
+            />
+          </div>
         </div>
-      </div>
-      <p>
-        {props.description.split('.')[0] +
-          (props.description.split('.').length > 2 ? '...' : '.')}
-      </p>
-      <Image
-        src={props.imageSrc}
-        alt='Post image'
-        width={1920}
-        height={1080}
-        className='aspect-video rounded-xl object-cover shadow-lg'
-      />
-    </Link>
+        <p>
+          {props.description.split('.')[0] +
+            (props.description.split('.').length > 2 ? '...' : '.')}
+        </p>
+        <motion.div
+          initial={{ translateY: '3rem', opacity: 0 }}
+          whileInView={{ translateY: 0, opacity: 1 }}
+          viewport={{ once: true }}
+        >
+          <Image
+            src={props.imageSrc}
+            alt='Post image'
+            width={1920}
+            height={1080}
+            className='aspect-video rounded-xl object-cover shadow-lg'
+          />
+        </motion.div>
+      </Link>
+    </motion.div>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -12,6 +12,7 @@ import { faAnglesDown, faCheck } from '@fortawesome/free-solid-svg-icons'
 import { getTitleFont } from './fonts'
 import Logo from './components/Logo'
 import Button from './components/Button'
+import { motion } from 'framer-motion'
 
 const fetcher = (url: string) => fetch(url).then(res => res.json())
 
@@ -40,13 +41,13 @@ export default function Home() {
   }, [])
 
   return (
-    <main className='mb-6 flex min-h-[100vh] flex-col gap-y-4'>
+    <main className='mb-6 flex min-h-[100vh] flex-col gap-4'>
       <div
-        className={`text-bold grid min-h-[calc(100vh-4rem)] items-center bg-gradient-to-b from-zinc-100 to-transparent px-6 py-16 dark:from-zinc-800 md:grid-cols-2 ${
+        className={`text-bold grid min-h-[calc(100vh-4rem-1rem)] items-center bg-gradient-to-b from-zinc-100 to-transparent px-6 pb-16 dark:from-zinc-800 md:grid-cols-2 ${
           getTitleFont().className
         } text-center`}
       >
-        <div className='border-pulse col-span-1 col-start-1 mx-auto h-52 w-52 rounded-2xl border-2 bg-gradient-to-br from-white to-primary-100 p-6 shadow dark:from-zinc-700 dark:to-zinc-900 md:col-span-2'>
+        <div className='border-pulse col-span-1 col-start-1 mx-auto mt-4 h-52 w-52 rounded-2xl border-2 bg-gradient-to-br from-white to-primary-100 p-6 shadow dark:from-zinc-700 dark:to-zinc-900 md:col-span-2'>
           <Logo
             width={200}
             height={200}
@@ -62,7 +63,7 @@ export default function Home() {
             Here you can find all my work, and the newest updates
           </p>
         </div>
-        <div className='mx-auto flex flex-col items-center gap-4 pt-16 md:col-start-2 md:pt-0'>
+        <div className='.flex-col mx-auto mt-4 flex items-center gap-4 md:col-start-2'>
           <Button
             text='Check the blog'
             disabled
@@ -73,12 +74,16 @@ export default function Home() {
           />
         </div>
 
-        <div className='md:col-span-2'>
+        <motion.div
+          className='md:col-span-2'
+          initial={{ translateY: '3rem', opacity: 0 }}
+          animate={{ translateY: 0, opacity: 1 }}
+        >
           <FontAwesomeIcon
             icon={faAnglesDown}
             className='h-10 w-10 pt-8 motion-safe:animate-pulse'
           />
-        </div>
+        </motion.div>
       </div>
 
       <h2 className='text-center text-2xl'>