end of project

constant.js

@@ -6,7 +6,13 @@ const BG_INDEX = 'img/bg.jpeg'
 
 const BG_ME = 'https://retrina.com/demo/arshia/cv/assets/img/about-03.jpg'
 
-const PAGES = ['/', '/about', '/portfolio', '/resume', '/contact']
+const MENU = [
+  { title: 'Home', path: '/', icon: 'fa-home' },
+  { title: 'About Me', path: '/about', icon: 'fa-user' },
+  { title: 'Resume', path: '/resume', icon: 'fa-file-invoice' },
+  { title: 'Portfolio', path: '/portfolio', icon: 'fa-briefcase' },
+  { title: 'Contact', path: '/contact', icon: 'fa-paper-plane' },
+]
 
 const SOCIAL_MEDIA = [
   {
@@ -171,16 +177,13 @@ module.exports = {
   BG_INDEX,
   NAME,
   PERSON,
-  PAGES,
   DOING,
   ABOUT,
   EDUCATION,
   EXPERIENCE,
   SKILLS,
   SOCIAL_MEDIA,
   PORTFOLIOS,
+  MENU,
   emailTemplate,
 }
-
-// 'https://images.pexels.com/photos/247791/pexels-photo-247791.png?auto=compress&cs=tinysrgb&h=750&w=1260'
-// 'https://image.freepik.com/free-photo/rear-view-programmer-working-all-night-long_1098-18697.jpg'

src/components/Chevrons.tsx

@@ -1,6 +1,8 @@
 import { FC, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
-import { PAGES } from '../../constant'
+import { MENU } from '../../constant'
+
+const PAGES = MENU.map(el => el.path)
 
 const infinitePage = (index: number, radix: number = 1) =>
   [0, 1, 2, 3, 4].includes(index + radix) ? index + radix : radix === -1 ? 4 : 0
@@ -21,12 +23,14 @@ const Chevrons: FC = ({}) => {
     <div className=' w-12 h-20 fixed bottom-8 right-0 space-y-3'>
       <div
         onClick={handleNextPage}
-        className='animate-pulse w-full h-1/2 bg-blue-600 rounded-l-xl grid place-items-center cursor-pointer'>
+        className='animate-pulse w-full h-1/2 bg-blue-600 rounded-l-xl grid place-items-center cursor-pointer'
+      >
         <i className='fas fa-chevron-up text-white'></i>
       </div>
       <div
         onClick={handlePreviousPage}
-        className='animate-pulse w-full h-1/2 bg-blue-600 rounded-l-xl grid place-items-center  cursor-pointer'>
+        className='animate-pulse w-full h-1/2 bg-blue-600 rounded-l-xl grid place-items-center  cursor-pointer'
+      >
         <i className='fas fa-chevron-down text-white'></i>
       </div>
     </div>

src/components/Switch.tsx

@@ -1,21 +1,31 @@
-import React from 'react'
+import React, { useContext, useEffect, useState } from 'react'
+import ThemeContext from '../context/ThemeContext'
 
 interface Props {
   onClick: (() => void | undefined) | undefined
 }
 
 const Switch: React.FC<Props> = ({ onClick }) => {
+  const { theme } = useContext(ThemeContext)
+
   return (
     <div className='flex items-center fixed right-0 m-6 p-2 rounded-md z-50'>
       <input className='hidden' id={`switch`} type='checkbox' />
       <label
         onClick={onClick}
-        className='label flex items-center justify-between transition-all duration-1000 cursor-pointer relative w-12 h-6 rounded-full bg-gray-400 dark:bg-gray-50'
-        htmlFor={`switch`}>
-        <span className='button absolute top-1 left-1 w-4 h-4 transition-all duration-200 rounded-full shadow-xl bg-gray-100 dark:bg-gray-400' />
+        className={`${
+          theme && 'label'
+        } flex items-center justify-between transition-all duration-1000 cursor-pointer relative w-12 h-6 rounded-full bg-gray-400 `}
+        htmlFor={`switch`}
+      >
+        <span
+          className={`${
+            theme && 'button'
+          } absolute top-1 left-1 w-4 h-4 transition-all duration-200 rounded-full shadow-xl bg-gray-100 dark:bg-gray-400`}
+        />
       </label>
       <style jsx>{`
-        #switch:checked + .label .button {
+        .label .button {
           left: calc(100% - 2px);
           transform: translateX(-100%);
           background: #111827;

src/components/generic/BurgerMenu.tsx

@@ -22,7 +22,7 @@ const BurgerMenu: React.FC = () => {
             show ? 'fixed' : 'hidden'
           }`}></div>
 
-        <div className={`fixed z-50 ${!show && '-left-3'}`}>
+        <div className={`fixed z-50 ${!show && '-left-7'}`}>
           <div className={`relative transition-all w-0 ${show && 'w-20'}`}>
             <Menu />
           </div>

src/components/generic/Menu.tsx

@@ -1,45 +1,27 @@
 import React from 'react'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { MENU } from '../../../constant'
 
 const Menu: React.FC<{}> = () => {
+  const { pathname } = useRouter()
+
   return (
     <>
       <div className='shadow h-screen bg-white dark:bg-gray-800 rounded-r-3xl lg:p-3'>
         <ul className='flex flex-col h-full items-center justify-center space-y-12 xl:space-y-16 text-xl text-blue-500 dark:text-blue-50'>
-          <Link href='/' passHref>
-            <li className='box flex flex-col place-items-center w-full space-y-2 hover:text-blue-400 font-bold font-muli cursor-pointer'>
-              <i className='fas fa-home'></i>
-              <span className='text-xs title'>Home</span>
-            </li>
-          </Link>
-
-          <Link href='/about' passHref>
-            <li className='box flex flex-col place-items-center w-full space-y-2 hover:text-blue-400 font-bold font-muli cursor-pointer'>
-              <i className='fas fa-user'></i>
-              <span className='text-xs title'>About Me</span>
-            </li>
-          </Link>
-
-          <Link href='/portfolio' passHref>
-            <li className='box flex flex-col place-items-center w-full space-y-2 hover:text-blue-400 font-bold font-muli cursor-pointer'>
-              <i className='fas fa-briefcase'></i>
-              <span className='text-xs title'>Portfolio</span>
-            </li>
-          </Link>
-
-          <Link href='/resume' passHref>
-            <li className='box flex flex-col place-items-center w-full space-y-2 hover:text-blue-400 font-bold font-muli cursor-pointer'>
-              <i className='far fa-id-card'></i>
-              <span className='text-xs title'>Resume</span>
-            </li>
-          </Link>
-
-          <Link href='/contact' passHref>
-            <li className='box flex flex-col place-items-center w-full space-y-2 hover:text-blue-400 font-bold font-muli cursor-pointer'>
-              <i className='fas fa-paper-plane'></i>
-              <span className='text-xs title'>Contact</span>
-            </li>
-          </Link>
+          {MENU.map(({ title, path, icon }) => (
+            <Link href={path} key={path} passHref>
+              <li className='box flex flex-col place-items-center w-full space-y-2 hover:text-blue-400 font-bold font-muli cursor-pointer'>
+                <i className={`fas ${icon}`}></i>
+                <span
+                  className={`${pathname === path && 'active'} text-xs title`}
+                >
+                  {title}
+                </span>
+              </li>
+            </Link>
+          ))}
         </ul>
 
         <style jsx>{`
@@ -62,6 +44,11 @@ const Menu: React.FC<{}> = () => {
             visibility: visible;
             opacity: 1;
           }
+
+          .active {
+            visibility: visible;
+            opacity: 1;
+          }
         `}</style>
       </div>
     </>

src/components/utils/Button.tsx

@@ -4,18 +4,20 @@ interface Props {
   title:
     | string
     | React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
-  className?: string
-  type?: 'button' | 'submit' | 'reset'
-  disabled?: boolean
-  onClick?: () => void
+  className: string
+  type: 'button' | 'submit' | 'reset'
+  disabled: boolean
+  active: boolean
+  onClick: () => void
 }
 
-const Button: React.FC<Props> = ({
+const Button: React.FC<Partial<Props>> = ({
   title,
   className,
   type,
   onClick,
   disabled = false,
+  active = false,
 }) => {
   return (
     <button
@@ -24,11 +26,13 @@ const Button: React.FC<Props> = ({
       className={`${className}  grid cursor-pointer place-items-center transition-colors p-2 text-white rounded-md ${
         disabled
           ? 'bg-gray-500 cursor-not-allowed'
+          : active
+          ? 'bg-white text-blue-500'
           : 'bg-blue-600 hover:bg-blue-500'
       } `}
-      disabled={disabled}>
+      disabled={disabled}
+    >
       {title}
-
       <style jsx>{`
         div {
           width: fit-content;

src/pages/api/mailer.ts

@@ -24,10 +24,8 @@ const mailer = async (req: NextApiRequest, res: NextApiResponse) => {
       html: emailTemplate(name, email, subject, message),
     })
 
-    console.log('EMAIL SENT', send.messageId)
     res.status(200).json({ status: 'EMAIL_SEND (:' })
   } catch (error) {
-    console.log('EROR ===> ', error)
     res.status(500).json({ status: 'EMAIL_NOT_SEND ):' })
   }
 }

src/pages/portfolio.tsx

@@ -29,12 +29,20 @@ const Portfolio: NextPage = () => {
       </header>
 
       <section className='flex flex-wrap space-x-5  justify-center w-full mt-20'>
+        <Button
+          key={'all'}
+          title={'all'}
+          className='capitalize focus:bg-white focus:text-blue-600 mt-5'
+          onClick={() => setFliter('all')}
+          active={'all' === filter}
+        />
         {keywords.map((keyword, i) => (
           <Button
             key={++i}
             title={keyword}
-            className='focus:bg-white focus:text-blue-600 mt-5'
+            className='capitalize focus:bg-white focus:text-blue-600 mt-5'
             onClick={() => setFliter(keyword)}
+            active={keyword === filter}
           />
         ))}
       </section>

tailwind.config.js

@@ -1,4 +1,3 @@
-const colors = require('tailwindcss/colors')
 const { BG_ME } = require('./constant.js')
 
 module.exports = {
@@ -12,12 +11,6 @@ module.exports = {
     extend: {
       backgroundImage: {
         me: `url(${BG_ME})`,
-        'footer-texture': "url('/img/footer-texture.png')",
-      },
-      colors: {
-        violet: colors.violet,
-        cyan: colors.cyan,
-        orange: colors.orange,
       },
       fontFamily: {
         muli: "'Mulish', sans-serif",