New fonts and UI updates

README.md

@@ -11,11 +11,12 @@ A simple portfolio starter theme built with React and TailwindCSS. This is the R
 ## Features
 
 -   [React](https://reactjs.org) with [React Router v6](https://reactrouter.com)
--   [Tailwind CSS v3](https://tailwindcss.com)
+-   [Tailwind CSS v2](https://tailwindcss.com)
 -   Context API For State Management
 -   Custom Hooks
--   Dark Mode
--   Framer Motion Transitions & Animations
+-   Framer Motion transitions & animations
+-   Reusable components
+-   Dark mode
 -   Projects filter by category
 -   Projects filter by search
 -   Smooth scroll
@@ -55,6 +56,12 @@ cd react-tailwindcss-portfolio
 yarn install
 ```
 
+4. NOTES: If you don't have yarn installed, install it globally using npm:
+
+```
+npm install --global yarn
+```
+
 5. ##### Start a local dev server at `http://localhost:3000`:
 
 ```

src/components/HireMeModal.js

@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion';
 import { FiX } from 'react-icons/fi';
+import Button from './reusable/Button';
 
 const selectOptions = [
 	'Web Application',
@@ -14,7 +15,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
 			exit={{ opacity: 0 }}
-			className="fixed inset-0 z-30 transition-all duration-500"
+			className="font-general-medium fixed inset-0 z-30 transition-all duration-500"
 		>
 			{/* Modal Background */}
 			<div className="bg-filter bg-black bg-opacity-50 fixed inset-0 w-full h-full z-20"></div>
@@ -24,7 +25,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
 				<div className="modal-wrapper flex items-center z-30">
 					<div className="modal max-w-md mx-5 xl:max-w-xl lg:max-w-xl md:max-w-xl bg-secondary-light dark:bg-primary-dark max-h-screen shadow-lg flex-row rounded-lg relative">
 						<div className="modal-header flex justify-between gap-10 p-5 border-b border-ternary-light dark:border-ternary-dark">
-							<h5 className=" text-primary-dark dark:text-primary-light text-2xl">
+							<h5 className=" text-primary-dark dark:text-primary-light text-xl">
 								What project are you looking for?
 							</h5>
 							<button
@@ -43,7 +44,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
 							>
 								<div className="">
 									<input
-										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-md text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
+										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
 										id="name"
 										name="name"
 										type="text"
@@ -54,7 +55,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
 								</div>
 								<div className="mt-6">
 									<input
-										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-md text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
+										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
 										id="email"
 										name="email"
 										type="text"
@@ -65,7 +66,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
 								</div>
 								<div className="mt-6">
 									<select
-										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-md text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
+										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
 										id="subject"
 										name="subject"
 										type="text"
@@ -85,7 +86,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
 
 								<div className="mt-6">
 									<textarea
-										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-md text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
+										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
 										id="message"
 										name="message"
 										cols="14"
@@ -96,8 +97,8 @@ const HireMeModal = ({ onClose, onRequest }) => {
 								</div>
 
 								<div className="mt-6 pb-4 sm:pb-1">
-									<button
-										onClick={onRequest}
+									<span
+										onClick={onClose}
 										type="submit"
 										className="px-4
 											sm:px-6
@@ -112,16 +113,16 @@ const HireMeModal = ({ onClose, onRequest }) => {
 											focus:ring-1 focus:ring-indigo-900"
 										aria-label="Submit Request"
 									>
-										Send Request
-									</button>
+										<Button title="Send Request" />
+									</span>
 								</div>
 							</form>
 						</div>
 						<div className="modal-footer mt-2 sm:mt-0 py-5 px-8 border0-t text-right">
-							<button
+							<span
 								onClick={onClose}
 								type="button"
-								className=" px-4
+								className="px-4
 									sm:px-6
 									py-2
 									bg-indigo-400
@@ -133,8 +134,8 @@ const HireMeModal = ({ onClose, onRequest }) => {
 									focus:ring-1 focus:ring-indigo-900"
 								aria-label="Close Modal"
 							>
-								Close
-							</button>
+								<Button title="Close" />
+							</span>
 						</div>
 					</div>
 				</div>

src/components/ScrollToTop.js

@@ -1,5 +1,5 @@
 // NOTE: This scroll to top is the default react scroll to top behavior when visiting a new route.
-// For the scroll to top behavior on a click event I have create a custom hook with the name of useScrollToTop under the hooks folder.
+// For the scroll to top behavior on a click event I have created a custom hook with the name of useScrollToTop under the hooks folder that scrolls use to the top of the page when they scroll down on the page.
 
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';

src/components/about/AboutClients.js

@@ -7,10 +7,10 @@ const AboutClients = () => {
 
 	return (
 		<div className="mt-10 sm:mt-20">
-			<p className="text-2xl sm:text-4xl text-primary-dark dark:text-primary-light font-sans font-semibold">
+			<p className="font-general-medium text-2xl sm:text-3xl  text-center text-primary-dark dark:text-primary-light">
 				{clientsHeading}
 			</p>
-			<div className="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-20 gap-2">
+			<div className="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-14 gap-2">
 				{clientsData.map((client) => (
 					<AboutClientSingle
 						title={client.title}

src/components/about/AboutCounter.js

@@ -1,39 +1,39 @@
 const AboutCounter = () => {
 	return (
 		<div className="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
-			<div className="container mx-auto py-20 block sm:flex sm:justify-between items-center">
+			<div className="font-general-medium container mx-auto py-20 block sm:flex sm:justify-between items-center">
 				<div className="mb-20 sm:mb-0">
-					<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
+					<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
 						12
 					</h2>
-					<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
+					<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
 						Years of experience
 					</span>
 				</div>
 
 				<div className="mb-20 sm:mb-0">
-					<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
+					<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
 						20k+
 					</h2>
-					<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
+					<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
 						Stars on GitHub
 					</span>
 				</div>
 
 				<div className="mb-20 sm:mb-0">
-					<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
+					<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
 						92%
 					</h2>
-					<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
+					<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
 						Positive feedback
 					</span>
 				</div>
 
 				<div className="mb-20 sm:mb-0">
-					<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
+					<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
 						77
 					</h2>
-					<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
+					<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
 						Projects completed
 					</span>
 				</div>

src/components/about/AboutMeBio.js

@@ -14,7 +14,7 @@ const AboutMeBio = () => {
 			{/* About me portfolio image end */}
 
 			{/* About me details start */}
-			<div className="w-full sm:w-3/4 text-left">
+			<div className="font-general-regular w-full sm:w-3/4 text-left">
 				{aboutMe.map((bio) => (
 					<p
 						className="mb-4 text-ternary-dark dark:text-ternary-light text-lg"

src/components/contact/ContactDetails.js

@@ -20,7 +20,7 @@ const contacts = [
 
 const ContactDetails = () => {
 	return (
-		<div className="w-full lg:w-1/2">
+		<div className="font-general-regular w-full lg:w-1/2">
 			<div className="text-left max-w-xl px-6">
 				<h2 className="text-2xl text-primary-dark dark:text-primary-light font-semibold mt-12 mb-8">
 					Contact details

src/components/contact/ContactForm.js

@@ -1,3 +1,5 @@
+import Button from '../reusable/Button';
+
 const ContactForm = () => {
 	return (
 		<div className="w-full lg:w-1/2">
@@ -6,20 +8,20 @@ const ContactForm = () => {
 					onSubmit={(e) => {
 						e.preventDefault();
 					}}
-					className="max-w-xl m-4 p-6 sm:p-10 bg-secondary-light dark:bg-secondary-dark rounded-lg shadow-xl text-left"
+					className="max-w-xl m-4 p-6 sm:p-10 bg-secondary-light dark:bg-secondary-dark rounded-xl shadow-xl text-left"
 				>
-					<p className="text-primary-dark dark:text-primary-light text-2xl font-semibold mb-8">
+					<p className="font-general-medium text-primary-dark dark:text-primary-light text-2xl mb-8">
 						Contact Form
 					</p>
-					<div className="">
+					<div className="font-general-regular">
 						<label
 							className="block text-lg text-primary-dark dark:text-primary-light mb-2"
 							htmlFor="name"
 						>
 							Full Name
 						</label>
 						<input
-							className="w-full px-5 py-2 border dark:border-secondary-dark text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
+							className="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
 							id="name"
 							name="name"
 							type="text"
@@ -36,7 +38,7 @@ const ContactForm = () => {
 							Email
 						</label>
 						<input
-							className="w-full px-5 py-2 border dark:border-secondary-dark text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
+							className="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
 							id="email"
 							name="email"
 							type="text"
@@ -53,7 +55,7 @@ const ContactForm = () => {
 							Subject
 						</label>
 						<input
-							className="w-full px-5 py-2 border dark:border-secondary-dark text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
+							className="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
 							id="subject"
 							name="subject"
 							type="text"
@@ -71,7 +73,7 @@ const ContactForm = () => {
 							Message
 						</label>
 						<textarea
-							className="w-full px-5 py-2 border dark:border-secondary-dark text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
+							className="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
 							id="message"
 							name="message"
 							cols="14"
@@ -80,14 +82,12 @@ const ContactForm = () => {
 						></textarea>
 					</div>
 
-					<div className="mt-6">
-						<button
-							className="px-4 py-2.5 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 rounded-md"
+					<div className="font-general-medium w-40 px-4 py-2.5 text-white text-center font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 rounded-lg mt-6">
+						<Button
+							title="Send Message"
 							type="submit"
 							aria-label="Send Message"
-						>
-							Send Message
-						</button>
+						/>
 					</div>
 				</form>
 			</div>

src/components/projects/ProjectHeader.js

@@ -7,19 +7,19 @@ const ProjectSingleHeader = () => {
 
 	return (
 		<div>
-			<p className="text-left text-3xl sm:text-4xl font-bold text-primary-dark dark:text-primary-light mt-7 sm:mt-20 mb-7">
+			<p className="font-general-medium text-left text-3xl sm:text-4xl font-bold text-primary-dark dark:text-primary-light mt-14 sm:mt-20 mb-7">
 				{singleProjectData.ProjectHeader.title}
 			</p>
 			<div className="flex">
 				<div className="flex items-center mr-10">
-					<FiClock className="text-xl text-ternary-dark dark:text-ternary-light" />
-					<span className="ml-2 leading-none text-primary-dark dark:text-primary-light">
+					<FiClock className="text-lg text-ternary-dark dark:text-ternary-light" />
+					<span className="font-general-regular ml-2 leading-none text-primary-dark dark:text-primary-light">
 						{singleProjectData.ProjectHeader.publishDate}
 					</span>
 				</div>
 				<div className="flex items-center">
-					<FiTag className="w-4 h-4 text-ternary-dark dark:text-ternary-light" />
-					<span className="ml-2 leading-none text-primary-dark dark:text-primary-light">
+					<FiTag className="text-lg text-ternary-dark dark:text-ternary-light" />
+					<span className="font-general-regular ml-2 leading-none text-primary-dark dark:text-primary-light">
 						{singleProjectData.ProjectHeader.tags}
 					</span>
 				</div>

src/components/projects/ProjectInfo.js

@@ -1,5 +1,4 @@
 import { useContext } from 'react';
-import { Link } from 'react-router-dom';
 import SingleProjectContext from '../../context/SingleProjectContext';
 
 const ProjectInfo = () => {
@@ -10,15 +9,15 @@ const ProjectInfo = () => {
 			<div className="w-full sm:w-1/3 text-left">
 				{/* Single project client details start */}
 				<div className="mb-7">
-					<p className="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2">
+					<p className="font-general-regular text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2">
 						{singleProjectData.ProjectInfo.ClientHeading}
 					</p>
 					<ul className="leading-loose">
 						{singleProjectData.ProjectInfo.CompanyInfo.map(
 							(info) => {
 								return (
 									<li
-										className="text-ternary-dark dark:text-ternary-light"
+										className="font-general-regular text-ternary-dark dark:text-ternary-light"
 										key={info.id}
 									>
 										<span>{info.title}: </span>
@@ -44,21 +43,21 @@ const ProjectInfo = () => {
 
 				{/* Single project objectives start */}
 				<div className="mb-7">
-					<p className="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
+					<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
 						{singleProjectData.ProjectInfo.ObjectivesHeading}
 					</p>
-					<p className="text-primary-dark dark:text-ternary-light">
+					<p className="font-general-regular text-primary-dark dark:text-ternary-light">
 						{singleProjectData.ProjectInfo.ObjectivesDetails}
 					</p>
 				</div>
 				{/* Single project objectives end */}
 
 				{/* Single project technologies start */}
 				<div className="mb-7">
-					<p className="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
+					<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
 						{singleProjectData.ProjectInfo.Technologies[0].title}
 					</p>
-					<p className="text-primary-dark dark:text-ternary-light">
+					<p className="font-general-regular text-primary-dark dark:text-ternary-light">
 						{singleProjectData.ProjectInfo.Technologies[0].techs.join(
 							', '
 						)}
@@ -68,7 +67,7 @@ const ProjectInfo = () => {
 
 				{/* Single project social sharing start */}
 				<div>
-					<p className="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
+					<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
 						{singleProjectData.ProjectInfo.SocialSharingHeading}
 					</p>
 					<div className="flex items-center gap-3 mt-5">
@@ -97,14 +96,14 @@ const ProjectInfo = () => {
 
 			{/*  Single project right section details start */}
 			<div className="w-full sm:w-2/3 text-left mt-10 sm:mt-0">
-				<p className="text-primary-dark dark:text-primary-light text-2xl font-bold mb-7">
+				<p className="font-general-regular text-primary-dark dark:text-primary-light text-2xl font-bold mb-7">
 					{singleProjectData.ProjectInfo.ProjectDetailsHeading}
 				</p>
 				{singleProjectData.ProjectInfo.ProjectDetails.map((details) => {
 					return (
 						<p
 							key={details.id}
-							className="mb-5 text-lg text-ternary-dark dark:text-ternary-light"
+							className="font-general-regular mb-5 text-lg text-ternary-dark dark:text-ternary-light"
 						>
 							{details.details}
 						</p>