updated build to deploy

Author: adamm13

animations.ts

@@ -20,21 +20,21 @@ export const stagger = {
 };
 
 export const routeFade = {
-    hidden: {
-       opacity: 0,
-    },
-    visible: {
-       opacity: 1,
-       transition: {
-          delay: 0.3,
-          duration: 0.1,
-       },
+  hidden: {
+    opacity: 0,
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      delay: 0.1,
+      duration: 0.1,
     },
-    exit: {
-       opacity: 0,
-       transition: {
-          delay: 0.3,
-          ease: 'easeInOut',
-       },
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      delay: 0.1,
+      ease: "easeInOut",
     },
- }
+  },
+};

components/Bar.tsx

@@ -1,9 +1,9 @@
 import { FunctionComponent } from "react"
-import { languages, iSkill } from "../type"
+import { iSkill } from "../type"
 import { motion } from "framer-motion"
 
 
-const Bar: FunctionComponent<{ value: iSkill }> = ({
+const Bar: FunctionComponent<{ data: iSkill }> = ({
   data: { Icon, level, name },
 }) => {
   const bar_width = `${level}%`;

components/Navbar.tsx

@@ -1,9 +1,11 @@
 import { useState, useEffect } from 'react'
+import { FunctionComponent } from 'react'
 
 import Link from 'next/link';
 import {useRouter} from 'next/router'
 
 
+
 const NavItem: FunctionComponent<{
   activeItem:string,
   setActiveItem:Function,
@@ -34,8 +36,9 @@ export default function Navbar() {
 
   return (
     <div className="flex justify-between px-5 py-3 my-3">
-      <span className="text-xl font-bold text-purple border-b-4 border-grey md:text-2xl">{activeItem}</span>
+      <span className="text-xl font-bold border-b-4 text-purple border-grey md:text-2xl">{activeItem}</span>
       <div className='flex space-x-5 text-lg'>
+        
       <NavItem activeItem={activeItem} setActiveItem={setActiveItem} name="About" route='/'/>
       <NavItem activeItem={activeItem} setActiveItem={setActiveItem} name="Projects" route='/projects'/>
       <NavItem activeItem={activeItem} setActiveItem={setActiveItem} name="Resume" route='/resume'/>

components/ProjectCard.tsx

@@ -46,8 +46,7 @@ const ProjectCard: FunctionComponent<{
 
     {showDetail === id && (
 
-    <div className="absolute top-0 left-0 z-10 grid w-full h-auto p-2 md:p-10 text-black bg-gray-100 
-    md:grid-cols-2 gap-x-12 dark:text-white dark:bg-dark-100 rounded-lg"
+    <div className="absolute top-0 left-0 z-10 grid w-full h-auto p-2 text-black bg-gray-100 rounded-lg md:p-10 md:grid-cols-2 gap-x-12 dark:text-white dark:bg-dark-100"
     >
     <motion.div variants={stagger} initial="initial" animate="animate">
        {/* <img src={image_path} alt={name} /> */}
@@ -64,9 +63,6 @@ const ProjectCard: FunctionComponent<{
          <a href={github_url} className="flex items-center px-4 py-2 space-x-3 text-lg bg-gray-300 dark:bg-dark-800">
            <AiFillGithub /> <span>Github</span>
          </a>
-         <a href={deployed_url} className="flex items-center px-4 py-2 space-x-3 text-lg bg-gray-300 dark:bg-dark-800">
-           <AiFillProject /> <span>Project</span>
-         </a>
        </motion.div>
       </motion.div>
 
@@ -77,7 +73,7 @@ const ProjectCard: FunctionComponent<{
         {key_techs.map((tech) => (
           <span
           key={tech}
-          className="px-2 py-1 my-1 bg-gray-300 dark:bg-dark-800 rounded-sm"
+          className="px-2 py-1 my-1 bg-gray-300 rounded-sm dark:bg-dark-800"
           >
           {tech}
           </span>
@@ -87,7 +83,7 @@ const ProjectCard: FunctionComponent<{
 
     <button onClick={()=>setShowDetail(null)}
 
-    className="absolute top-3 right-3 rounded-full p-1 focus:outline-none bg-gray-200 dark:bg-dark-200">
+    className="absolute p-1 bg-gray-300 rounded-full top-3 right-3 focus:outline-none dark:bg-gray-700">
       <MdClose size={30}/>
     </button>
     </div>

components/ProjectsNavbar.tsx

@@ -1,4 +1,4 @@
-import { Category } from "../types"
+import { Category } from "../type"
 import { FunctionComponent} from "react"
 
 export const NavItem:FunctionComponent<{
@@ -22,7 +22,7 @@ export const NavItem:FunctionComponent<{
 
 const ProjectsNavbar: FunctionComponent<{handlerFilterCategory:Function, active:string}> = (props) => {
   return (
-    <div className="flex px-3 py-2 space-x-3 overflow-x-auto list-none font-bold">
+    <div className="flex px-3 py-2 space-x-3 overflow-x-auto font-bold list-none">
       <NavItem value = "all" {...props}/>
       <NavItem value = "React" {...props}/>
       <NavItem value = "jQuery" {...props}/>

components/Resume.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {AiFillGithub, AiFillLinkedin, AiFillYoutube} from 'react-icons/ai'
 import {GoLocation} from 'react-icons/go'
-import {RiDownloadFill} from 'react-icons/Ri'
+import { GiTie } from "react-icons/gi";
 import { useTheme} from 'next-themes'
 
 import Image from 'next/image'
@@ -19,7 +19,7 @@ export default function Sidebar() {
       <Image
         src="https://avatars.githubusercontent.com/u/43428818?v=4" 
         alt="user avatar"
-        className="w-32 h-32 mx-auto rounded-full"
+        className="mx-auto border rounded-full "
         height='128px'
         width="128px"
         layout="intrinsic"
@@ -29,23 +29,20 @@ export default function Sidebar() {
           <span className="text-purple">Adam </span>
            Mohammed
         </h3>
-        <p className="px-2 py-1 my-3 bg-gray-200 rounded-full dark:bg-dark-700 dark:bg-black-500">
+        <p className="px-2 py-2 my-3 bg-gray-200 rounded-full dark:bg-dark-700 dark:bg-black-500">
           Full Stack Developer
           </p>
           <a
-          className="flex items-center justify-center px-2 py-1 my-3 bg-gray-200 rounded-full cursor-pointer dark:bg-dark-700 dark:bg-black-500" 
+          className="flex items-center justify-center px-2 py-2 my-3 bg-gray-200 rounded-full cursor-pointer dark:bg-dark-700 dark:bg-black-500" 
           href="https://www.canva.com/design/DAEaJQFqN9Q/3SN6eAmM0wpp-S4-WxUCyw/view?utm_content=DAEaJQFqN9Q&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink" 
           download="Adam Resume">
-          <RiDownloadFill className="w-6 h-6 mr-2"/>Resume
+          <GiTie className="w-6 h-6 mr-2"/>Resume
         </a>
-        <div className="flex justify-around w-9/12 mx-auto my-5 text-blue-500 md:w-full">
-          <a href="">
-            <AiFillYoutube className="w-8 h-8 cursor-pointer"/>
-          </a>
-          <a href="">
+        <div className="flex justify-around w-6/12 mx-auto my-5 text-blue-500 md:w-full">
+          <a href="https://github.com/adamm13">
             <AiFillGithub className="w-8 h-8 cursor-pointer"/>
           </a>
-          <a href="">
+          <a href="https://www.linkedin.com/in/adamm13/">
             <AiFillLinkedin className="w-8 h-8 cursor-pointer"/>
           </a>
         </div>

components/Sidebar.tsx

@@ -33,13 +33,13 @@ export const services: iService[] = [
     Icon: AiOutlineAntDesign,
     title: "UI/UX designer",
     about:
-      "Builds robust user interfaces using <b>Figma</b>  and  <b>Framer</b> ",
+      "Builds robust user interfaces using <b>Figma</b> ",
   },
   {
     Icon: RiComputerLine,
     title: "Software Expert",
     about:
-      "Proficient in both Office and Adobe suite of products.",
+      "Proficient in both <b>Office</b> and <b>Adobe</b> suite of products.",
   },
 ];
 
@@ -185,7 +185,7 @@ export const projects: iProject[] = [
   {
     id: 7,
     name: "Weather App",
-    image_path: "/images/logo.png",
+    image_path: "/images/cold-bg.jpeg",
     deployed_url: "https://www.google.ca/",
     github_url: "https://github.com/adamm13/weather-app",
     category: ["React"],

data.ts

@@ -9,7 +9,7 @@ function MyApp({ Component, pageProps, router }) {
   return ( 
     <ThemeProvider attribute="class">
     <div className="grid grid-cols-12 gap-6 px-5 lg:px-48 my-14 sm:px-20 md:pc-32">
-      <div className="col-span-12 p-4 text-center bg-white dark:bg-dark-500 lg:col-span-3 rounded-2xl shadow-custom-light dark:shadow-custom-dark">
+      <div className="col-span-12 p-5 text-center bg-white dark:bg-dark-500 lg:col-span-3 rounded-2xl shadow-custom-light dark:shadow-custom-dark">
         <Sidebar/>
       </div>
       <div className="flex flex-col col-span-12 overflow-hidden bg-white lg:col-span-9 rounded-2xl dark:bg-dark-500 dark:text-white shadow-custom-light dark:shadow-custom-dark">

pages/_app.tsx

@@ -4,7 +4,7 @@ import { services }  from '../data'
 import { fadeInUp, stagger, routeFade } from "../animations";
 import { motion } from "framer-motion";
 
-const index = () => {
+const About = () => {
   // console.log('CLIENT:', services) <-----client dom side rendering
 
   return (
@@ -32,7 +32,7 @@ const index = () => {
             >
             {services.map(service => (
              <motion.div
-              className="bg-gray-200 rounded-lg dark:bg-dark-200 lg:col-span-1 "
+              className="py-2 bg-gray-200 rounded-lg dark:bg-gray-900 lg:col-span-1 "
               key={service.title}
               variants={fadeInUp}
               >
@@ -45,22 +45,22 @@ const index = () => {
   )
 }
 
-export default index;
+export default About;
 
-// export const getServerSideProps = async (
-//   context:GetServerSidePropsContext
-//   ) => {
-//   // calculation 
-
-//   const res = await fetch('http://localhost:3000/api/services')
-//   const data = await res.json()
+export const getServerSideProps = async (
+  context:GetServerSidePropsContext
+  ) => {
+  // calculation 
 
-//   return {
-//     props:{
-//       services: data.services,
-//     }
-//   }
-// }
+  const res = await fetch(`${process.env.VERCEL_URL}/api/services`)
+  const data = await res.json()
+    console.log(services)
+  return {
+    props:{
+      services: data.services,
+    }
+  }
+}
 
 // export const getStaticProps = async (
 //   context:GetStaticPropsContext