Merge pull request realstoman#14 from realstoman/add-counter-and-do-refactoring

Feat: Refactoring and add auto counter

Author: realstoman

package.json

@@ -9,6 +9,7 @@
 		"@testing-library/user-event": "^12.1.10",
 		"framer-motion": "4.1.17",
 		"react": "^17.0.2",
+		"react-countup": "^6.1.1",
 		"react-dom": "^17.0.2",
 		"react-icons": "^4.3.1",
 		"react-router-dom": "^6.0.2",

src/components/HireMeModal.js

@@ -17,7 +17,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
 			exit={{ opacity: 0 }}
 			className="font-general-medium fixed inset-0 z-30 transition-all duration-500"
 		>
-			{/* Modal Background */}
+			{/* Modal Backdrop */}
 			<div className="bg-filter bg-black bg-opacity-50 fixed inset-0 w-full h-full z-20"></div>
 
 			{/* Modal Content */}
@@ -105,12 +105,10 @@ const HireMeModal = ({ onClose, onRequest }) => {
 											py-2
 											sm:py-2.5
 											text-white
-											font-normal
-											sm:font-medium
 											bg-indigo-500
 											hover:bg-indigo-600
 											rounded-md
-											focus:ring-1 focus:ring-indigo-900"
+											focus:ring-1 focus:ring-indigo-900 duration-500"
 										aria-label="Submit Request"
 									>
 										<Button title="Send Request" />
@@ -124,14 +122,9 @@ const HireMeModal = ({ onClose, onRequest }) => {
 								type="button"
 								className="px-4
 									sm:px-6
-									py-2
-									bg-indigo-400
-									hover:bg-indigo-500
+									py-2 bg-gray-600 text-primary-light hover:bg-ternary-dark dark:bg-gray-200 dark:text-secondary-dark dark:hover:bg-primary-light
 									rounded-md
-									font-normal
-									sm:font-bold
-									text-primary-light
-									focus:ring-1 focus:ring-indigo-900"
+									focus:ring-1 focus:ring-indigo-900 duration-500"
 								aria-label="Close Modal"
 							>
 								<Button title="Close" />

src/components/about/AboutCounter.js

@@ -1,10 +1,17 @@
+import { useCountUp } from 'react-countup';
+
 const AboutCounter = () => {
+	useCountUp({ ref: 'experienceCounter', end: 12, duration: 2 });
+	useCountUp({ ref: 'githubStarsCounter', end: 20, duration: 2 });
+	useCountUp({ ref: 'feedbackCounter', end: 92, duration: 2 });
+	useCountUp({ ref: 'projectsCounter', end: 77, duration: 2 });
+
 	return (
 		<div className="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
 			<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 text-secondary-dark dark:text-secondary-light mb-2">
-						12
+						<span id="experienceCounter" />
 					</h2>
 					<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
 						Years of experience
@@ -13,7 +20,8 @@ const AboutCounter = () => {
 
 				<div className="mb-20 sm:mb-0">
 					<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
-						20k+
+						<span id="githubStarsCounter" />
+						k+
 					</h2>
 					<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
 						Stars on GitHub
@@ -22,7 +30,7 @@ const AboutCounter = () => {
 
 				<div className="mb-20 sm:mb-0">
 					<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
-						92%
+						<span id="feedbackCounter" /> %
 					</h2>
 					<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
 						Positive feedback
@@ -31,7 +39,7 @@ const AboutCounter = () => {
 
 				<div className="mb-20 sm:mb-0">
 					<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
-						77
+						<span id="projectsCounter" /> %
 					</h2>
 					<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
 						Projects completed

src/components/about/AboutMeBio.js

@@ -7,13 +7,10 @@ const AboutMeBio = () => {
 
 	return (
 		<div className="block sm:flex sm:gap-10 mt-10 sm:mt-20">
-			{/* About me portfolio image start */}
 			<div className="w-full sm:w-1/4 mb-7 sm:mb-0">
 				<img src={profileImage} className="rounded-lg w-96" alt="" />
 			</div>
-			{/* About me portfolio image end */}
 
-			{/* About me details start */}
 			<div className="font-general-regular w-full sm:w-3/4 text-left">
 				{aboutMe.map((bio) => (
 					<p
@@ -24,7 +21,6 @@ const AboutMeBio = () => {
 					</p>
 				))}
 			</div>
-			{/* About me details end */}
 		</div>
 	);
 };

src/components/contact/ContactDetails.js

@@ -20,15 +20,15 @@ const contacts = [
 
 const ContactDetails = () => {
 	return (
-		<div className="font-general-regular w-full lg:w-1/2">
+		<div className="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">
+				<h2 className="font-general-medium text-2xl text-primary-dark dark:text-primary-light mt-12 mb-8">
 					Contact details
 				</h2>
-				<ul>
+				<ul className="font-general-regular">
 					{contacts.map((contact) => (
 						<li className="flex " key={contact.id}>
-							<i className="text-2xl text-gray-500 dark:text-gray-400 mr-4 mt-1">
+							<i className="text-2xl text-gray-500 dark:text-gray-400 mr-4">
 								{contact.icon}
 							</i>
 							<span className="text-lg mb-4 text-ternary-dark dark:text-ternary-light">

src/components/contact/ContactForm.js

@@ -21,7 +21,7 @@ const ContactForm = () => {
 							Full Name
 						</label>
 						<input
-							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"
+							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"
 							id="name"
 							name="name"
 							type="text"
@@ -38,7 +38,7 @@ const ContactForm = () => {
 							Email
 						</label>
 						<input
-							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"
+							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"
 							id="email"
 							name="email"
 							type="text"
@@ -55,7 +55,7 @@ const ContactForm = () => {
 							Subject
 						</label>
 						<input
-							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"
+							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"
 							id="subject"
 							name="subject"
 							type="text"
@@ -73,7 +73,7 @@ const ContactForm = () => {
 							Message
 						</label>
 						<textarea
-							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"
+							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"
 							id="message"
 							name="message"
 							cols="14"
@@ -82,7 +82,7 @@ const ContactForm = () => {
 						></textarea>
 					</div>
 
-					<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">
+					<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 duration-500">
 						<Button
 							title="Send Message"
 							type="submit"

src/components/projects/ProjectInfo.js

@@ -7,7 +7,7 @@ const ProjectInfo = () => {
 	return (
 		<div className="block sm:flex gap-0 sm:gap-10 mt-14">
 			<div className="w-full sm:w-1/3 text-left">
-				{/* Single project client details start */}
+				{/* Single project client details */}
 				<div className="mb-7">
 					<p className="font-general-regular text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2">
 						{singleProjectData.ProjectInfo.ClientHeading}
@@ -26,7 +26,7 @@ const ProjectInfo = () => {
 											className={
 												info.title === 'Website' ||
 												info.title === 'Phone'
-													? 'hover:underline cursor-pointer'
+													? 'hover:underline hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer duration-300'
 													: ''
 											}
 											aria-label="Project Website and Phone"
@@ -39,9 +39,8 @@ const ProjectInfo = () => {
 						)}
 					</ul>
 				</div>
-				{/* Single project client details end */}
 
-				{/* Single project objectives start */}
+				{/* Single project objectives */}
 				<div className="mb-7">
 					<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
 						{singleProjectData.ProjectInfo.ObjectivesHeading}
@@ -50,9 +49,8 @@ const ProjectInfo = () => {
 						{singleProjectData.ProjectInfo.ObjectivesDetails}
 					</p>
 				</div>
-				{/* Single project objectives end */}
 
-				{/* Single project technologies start */}
+				{/* Single project technologies */}
 				<div className="mb-7">
 					<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
 						{singleProjectData.ProjectInfo.Technologies[0].title}
@@ -63,9 +61,8 @@ const ProjectInfo = () => {
 						)}
 					</p>
 				</div>
-				{/* Single project technologies end */}
 
-				{/* Single project social sharing start */}
+				{/* Single project social sharing */}
 				<div>
 					<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
 						{singleProjectData.ProjectInfo.SocialSharingHeading}
@@ -79,7 +76,7 @@ const ProjectInfo = () => {
 										href={social.url}
 										target="__blank"
 										aria-label="Share Project"
-										className="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
+										className="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm duration-500"
 									>
 										<span className="text-lg lg:text-2xl">
 											{social.icon}
@@ -90,11 +87,9 @@ const ProjectInfo = () => {
 						)}
 					</div>
 				</div>
-				{/* Single project social sharing end */}
 			</div>
-			{/*  Single project left section details end */}
 
-			{/*  Single project right section details start */}
+			{/*  Single project right section */}
 			<div className="w-full sm:w-2/3 text-left mt-10 sm:mt-0">
 				<p className="font-general-regular text-primary-dark dark:text-primary-light text-2xl font-bold mb-7">
 					{singleProjectData.ProjectInfo.ProjectDetailsHeading}
@@ -110,7 +105,6 @@ const ProjectInfo = () => {
 					);
 				})}
 			</div>
-			{/* Single project right section details end  */}
 		</div>
 	);
 };

src/components/projects/ProjectsGrid.js

@@ -17,19 +17,12 @@ const ProjectsGrid = () => {
 
 	return (
 		<section className="py-5 sm:py-10 mt-5 sm:mt-10">
-			{/* Projects grid title start */}
 			<div className="text-center">
 				<p className="font-general-medium text-2xl sm:text-4xl mb-1 text-ternary-dark dark:text-ternary-light">
 					Projects portfolio
 				</p>
-				{/* Note: This description is commented, but if you want to have it, just uncomment it */}
-				{/* <p className="text-md sm:text-xl text-gray-500 dark:text-ternary-light">
-					Some of my projects are listed below
-				</p> */}
 			</div>
-			{/* Projects grid title end */}
 
-			{/* Filter and search projects start */}
 			<div className="mt-10 sm:mt-16">
 				<h3
 					className="font-general-regular 
@@ -95,15 +88,11 @@ const ProjectsGrid = () => {
 							aria-label="Name"
 						/>
 					</div>
-					{/* <ProjectsFilter @change="selectedProject = $event" /> */}
 
 					<ProjectsFilter setSelectProject={setSelectProject} />
-					{/* <p>Filter projects</p> */}
 				</div>
 			</div>
-			{/* Filter and search projects end */}
 
-			{/* Projects grid start */}
 			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-10">
 				{selectProject
 					? selectProjectsByCategory.map((project) => (
@@ -132,7 +121,6 @@ const ProjectsGrid = () => {
 							/>
 					  ))}
 			</div>
-			{/* Projects grid end */}
 		</section>
 	);
 };

src/components/shared/AppBanner.js

@@ -52,11 +52,13 @@ const AppBanner = () => {
 					<a
 						download="Stoman-Resume.pdf"
 						href="/files/Stoman-Resume.pdf"
-						className="font-general-medium flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-lg bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white"
+						className="font-general-medium flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-lg bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white duration-500"
 						aria-label="Download Resume"
 					>
-						<FiArrowDownCircle className="mr-2 sm:mr-3 h-5 w-5 sn:w-6 sm:h-6"></FiArrowDownCircle>
-						<span className="text-sm sm:text-lg">Download CV</span>
+						<FiArrowDownCircle className="mr-2 sm:mr-3 h-5 w-5 sn:w-6 sm:h-6 duration-100"></FiArrowDownCircle>
+						<span className="text-sm sm:text-lg font-general-medium duration-100">
+							Download CV
+						</span>
 					</a>
 				</motion.div>
 			</div>

src/components/shared/AppFooter.js

@@ -28,7 +28,7 @@ const AppFooter = () => {
 	return (
 		<div className="container mx-auto">
 			<div className="pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark">
-				{/* Footer social links start */}
+				{/* Footer social links */}
 				<div className="font-general-regular flex flex-col justify-center items-center mb-12 sm:mb-28">
 					<p className="text-3xl sm:text-4xl text-primary-dark dark:text-primary-light mb-5">
 						Follow me
@@ -39,7 +39,7 @@ const AppFooter = () => {
 								href={link.url}
 								target="__blank"
 								key={link.id}
-								className="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4"
+								className="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4 duration-300"
 							>
 								<i className="text-xl sm:text-2xl md:text-3xl">
 									{link.icon}
@@ -49,7 +49,6 @@ const AppFooter = () => {
 					</ul>
 				</div>
 
-				{/* Footer copyright */}
 				<AppFooterCopyright />
 			</div>
 		</div>

src/components/shared/AppFooterCopyright.js

@@ -1,24 +1,23 @@
-import { Link } from 'react-router-dom';
-
 function AppFooterCopyright() {
 	return (
 		<div className="font-general-regular flex justify-center items-center text-center">
 			<div className="text-lg text-ternary-dark dark:text-ternary-light">
 				&copy; {new Date().getFullYear()}
-				<Link
-					to="https://github.com/realstoman/react-tailwindcss-portfolio"
-					className="hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1"
+				<a
+					href="https://github.com/realstoman/react-tailwindcss-portfolio"
+					target="__blank"
+					className="hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1 duration-500"
 				>
 					React & TailwindCSS Portfolio
-				</Link>
+				</a>
 				.
-				<Link
-					to="https://stoman.me"
+				<a
+					href="https://stoman.me"
 					target="__blank"
-					className="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1"
+					className="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1 duration-500"
 				>
 					Stoman
-				</Link>
+				</a>
 			</div>
 		</div>
 	);