Skip to content

Commit 3cae2fc

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#14 from realstoman/add-counter-and-do-refactoring
Feat: Refactoring and add auto counter
2 parents 698180e + c0e936a commit 3cae2fc

File tree

15 files changed

+85
-102
lines changed

15 files changed

+85
-102
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"@testing-library/user-event": "^12.1.10",
1010
"framer-motion": "4.1.17",
1111
"react": "^17.0.2",
12+
"react-countup": "^6.1.1",
1213
"react-dom": "^17.0.2",
1314
"react-icons": "^4.3.1",
1415
"react-router-dom": "^6.0.2",

‎src/components/HireMeModal.js‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
1717
exit={{ opacity: 0 }}
1818
className="font-general-medium fixed inset-0 z-30 transition-all duration-500"
1919
>
20-
{/* Modal Background */}
20+
{/* Modal Backdrop */}
2121
<div className="bg-filter bg-black bg-opacity-50 fixed inset-0 w-full h-full z-20"></div>
2222

2323
{/* Modal Content */}
@@ -105,12 +105,10 @@ const HireMeModal = ({ onClose, onRequest }) => {
105105
py-2
106106
sm:py-2.5
107107
text-white
108-
font-normal
109-
sm:font-medium
110108
bg-indigo-500
111109
hover:bg-indigo-600
112110
rounded-md
113-
focus:ring-1 focus:ring-indigo-900"
111+
focus:ring-1 focus:ring-indigo-900 duration-500"
114112
aria-label="Submit Request"
115113
>
116114
<Button title="Send Request" />
@@ -124,14 +122,9 @@ const HireMeModal = ({ onClose, onRequest }) => {
124122
type="button"
125123
className="px-4
126124
sm:px-6
127-
py-2
128-
bg-indigo-400
129-
hover:bg-indigo-500
125+
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
130126
rounded-md
131-
font-normal
132-
sm:font-bold
133-
text-primary-light
134-
focus:ring-1 focus:ring-indigo-900"
127+
focus:ring-1 focus:ring-indigo-900 duration-500"
135128
aria-label="Close Modal"
136129
>
137130
<Button title="Close" />

‎src/components/about/AboutCounter.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1+
import { useCountUp } from 'react-countup';
2+
13
const AboutCounter = () => {
4+
useCountUp({ ref: 'experienceCounter', end: 12, duration: 2 });
5+
useCountUp({ ref: 'githubStarsCounter', end: 20, duration: 2 });
6+
useCountUp({ ref: 'feedbackCounter', end: 92, duration: 2 });
7+
useCountUp({ ref: 'projectsCounter', end: 77, duration: 2 });
8+
29
return (
310
<div className="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
411
<div className="font-general-medium container mx-auto py-20 block sm:flex sm:justify-between items-center">
512
<div className="mb-20 sm:mb-0">
613
<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
7-
12
14+
<span id="experienceCounter" />
815
</h2>
916
<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
1017
Years of experience
@@ -13,7 +20,8 @@ const AboutCounter = () => {
1320

1421
<div className="mb-20 sm:mb-0">
1522
<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
16-
20k+
23+
<span id="githubStarsCounter" />
24+
k+
1725
</h2>
1826
<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
1927
Stars on GitHub
@@ -22,7 +30,7 @@ const AboutCounter = () => {
2230

2331
<div className="mb-20 sm:mb-0">
2432
<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
25-
92%
33+
<span id="feedbackCounter" /> %
2634
</h2>
2735
<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
2836
Positive feedback
@@ -31,7 +39,7 @@ const AboutCounter = () => {
3139

3240
<div className="mb-20 sm:mb-0">
3341
<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
34-
77
42+
<span id="projectsCounter" /> %
3543
</h2>
3644
<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
3745
Projects completed

‎src/components/about/AboutMeBio.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,10 @@ const AboutMeBio = () => {
77

88
return (
99
<div className="block sm:flex sm:gap-10 mt-10 sm:mt-20">
10-
{/* About me portfolio image start */}
1110
<div className="w-full sm:w-1/4 mb-7 sm:mb-0">
1211
<img src={profileImage} className="rounded-lg w-96" alt="" />
1312
</div>
14-
{/* About me portfolio image end */}
1513

16-
{/* About me details start */}
1714
<div className="font-general-regular w-full sm:w-3/4 text-left">
1815
{aboutMe.map((bio) => (
1916
<p
@@ -24,7 +21,6 @@ const AboutMeBio = () => {
2421
</p>
2522
))}
2623
</div>
27-
{/* About me details end */}
2824
</div>
2925
);
3026
};

‎src/components/contact/ContactDetails.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ const contacts = [
2020

2121
const ContactDetails = () => {
2222
return (
23-
<div className="font-general-regular w-full lg:w-1/2">
23+
<div className="w-full lg:w-1/2">
2424
<div className="text-left max-w-xl px-6">
25-
<h2 className="text-2xl text-primary-dark dark:text-primary-light font-semibold mt-12 mb-8">
25+
<h2 className="font-general-medium text-2xl text-primary-dark dark:text-primary-light mt-12 mb-8">
2626
Contact details
2727
</h2>
28-
<ul>
28+
<ul className="font-general-regular">
2929
{contacts.map((contact) => (
3030
<li className="flex " key={contact.id}>
31-
<i className="text-2xl text-gray-500 dark:text-gray-400 mr-4 mt-1">
31+
<i className="text-2xl text-gray-500 dark:text-gray-400 mr-4">
3232
{contact.icon}
3333
</i>
3434
<span className="text-lg mb-4 text-ternary-dark dark:text-ternary-light">

‎src/components/contact/ContactForm.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const ContactForm = () => {
2121
Full Name
2222
</label>
2323
<input
24-
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"
24+
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"
2525
id="name"
2626
name="name"
2727
type="text"
@@ -38,7 +38,7 @@ const ContactForm = () => {
3838
Email
3939
</label>
4040
<input
41-
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"
41+
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"
4242
id="email"
4343
name="email"
4444
type="text"
@@ -55,7 +55,7 @@ const ContactForm = () => {
5555
Subject
5656
</label>
5757
<input
58-
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"
58+
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"
5959
id="subject"
6060
name="subject"
6161
type="text"
@@ -73,7 +73,7 @@ const ContactForm = () => {
7373
Message
7474
</label>
7575
<textarea
76-
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"
76+
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"
7777
id="message"
7878
name="message"
7979
cols="14"
@@ -82,7 +82,7 @@ const ContactForm = () => {
8282
></textarea>
8383
</div>
8484

85-
<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">
85+
<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">
8686
<Button
8787
title="Send Message"
8888
type="submit"

‎src/components/projects/ProjectInfo.js‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const ProjectInfo = () => {
77
return (
88
<div className="block sm:flex gap-0 sm:gap-10 mt-14">
99
<div className="w-full sm:w-1/3 text-left">
10-
{/* Single project client details start */}
10+
{/* Single project client details */}
1111
<div className="mb-7">
1212
<p className="font-general-regular text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2">
1313
{singleProjectData.ProjectInfo.ClientHeading}
@@ -26,7 +26,7 @@ const ProjectInfo = () => {
2626
className={
2727
info.title === 'Website' ||
2828
info.title === 'Phone'
29-
? 'hover:underline cursor-pointer'
29+
? 'hover:underline hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer duration-300'
3030
: ''
3131
}
3232
aria-label="Project Website and Phone"
@@ -39,9 +39,8 @@ const ProjectInfo = () => {
3939
)}
4040
</ul>
4141
</div>
42-
{/* Single project client details end */}
4342

44-
{/* Single project objectives start */}
43+
{/* Single project objectives */}
4544
<div className="mb-7">
4645
<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
4746
{singleProjectData.ProjectInfo.ObjectivesHeading}
@@ -50,9 +49,8 @@ const ProjectInfo = () => {
5049
{singleProjectData.ProjectInfo.ObjectivesDetails}
5150
</p>
5251
</div>
53-
{/* Single project objectives end */}
5452

55-
{/* Single project technologies start */}
53+
{/* Single project technologies */}
5654
<div className="mb-7">
5755
<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
5856
{singleProjectData.ProjectInfo.Technologies[0].title}
@@ -63,9 +61,8 @@ const ProjectInfo = () => {
6361
)}
6462
</p>
6563
</div>
66-
{/* Single project technologies end */}
6764

68-
{/* Single project social sharing start */}
65+
{/* Single project social sharing */}
6966
<div>
7067
<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
7168
{singleProjectData.ProjectInfo.SocialSharingHeading}
@@ -79,7 +76,7 @@ const ProjectInfo = () => {
7976
href={social.url}
8077
target="__blank"
8178
aria-label="Share Project"
82-
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"
79+
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"
8380
>
8481
<span className="text-lg lg:text-2xl">
8582
{social.icon}
@@ -90,11 +87,9 @@ const ProjectInfo = () => {
9087
)}
9188
</div>
9289
</div>
93-
{/* Single project social sharing end */}
9490
</div>
95-
{/* Single project left section details end */}
9691

97-
{/* Single project right section details start */}
92+
{/* Single project right section */}
9893
<div className="w-full sm:w-2/3 text-left mt-10 sm:mt-0">
9994
<p className="font-general-regular text-primary-dark dark:text-primary-light text-2xl font-bold mb-7">
10095
{singleProjectData.ProjectInfo.ProjectDetailsHeading}
@@ -110,7 +105,6 @@ const ProjectInfo = () => {
110105
);
111106
})}
112107
</div>
113-
{/* Single project right section details end */}
114108
</div>
115109
);
116110
};

‎src/components/projects/ProjectsGrid.js‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,12 @@ const ProjectsGrid = () => {
1717

1818
return (
1919
<section className="py-5 sm:py-10 mt-5 sm:mt-10">
20-
{/* Projects grid title start */}
2120
<div className="text-center">
2221
<p className="font-general-medium text-2xl sm:text-4xl mb-1 text-ternary-dark dark:text-ternary-light">
2322
Projects portfolio
2423
</p>
25-
{/* Note: This description is commented, but if you want to have it, just uncomment it */}
26-
{/* <p className="text-md sm:text-xl text-gray-500 dark:text-ternary-light">
27-
Some of my projects are listed below
28-
</p> */}
2924
</div>
30-
{/* Projects grid title end */}
3125

32-
{/* Filter and search projects start */}
3326
<div className="mt-10 sm:mt-16">
3427
<h3
3528
className="font-general-regular
@@ -95,15 +88,11 @@ const ProjectsGrid = () => {
9588
aria-label="Name"
9689
/>
9790
</div>
98-
{/* <ProjectsFilter @change="selectedProject = $event" /> */}
9991

10092
<ProjectsFilter setSelectProject={setSelectProject} />
101-
{/* <p>Filter projects</p> */}
10293
</div>
10394
</div>
104-
{/* Filter and search projects end */}
10595

106-
{/* Projects grid start */}
10796
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-10">
10897
{selectProject
10998
? selectProjectsByCategory.map((project) => (
@@ -132,7 +121,6 @@ const ProjectsGrid = () => {
132121
/>
133122
))}
134123
</div>
135-
{/* Projects grid end */}
136124
</section>
137125
);
138126
};

‎src/components/shared/AppBanner.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,13 @@ const AppBanner = () => {
5252
<a
5353
download="Stoman-Resume.pdf"
5454
href="/files/Stoman-Resume.pdf"
55-
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"
55+
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"
5656
aria-label="Download Resume"
5757
>
58-
<FiArrowDownCircle className="mr-2 sm:mr-3 h-5 w-5 sn:w-6 sm:h-6"></FiArrowDownCircle>
59-
<span className="text-sm sm:text-lg">Download CV</span>
58+
<FiArrowDownCircle className="mr-2 sm:mr-3 h-5 w-5 sn:w-6 sm:h-6 duration-100"></FiArrowDownCircle>
59+
<span className="text-sm sm:text-lg font-general-medium duration-100">
60+
Download CV
61+
</span>
6062
</a>
6163
</motion.div>
6264
</div>

‎src/components/shared/AppFooter.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const AppFooter = () => {
2828
return (
2929
<div className="container mx-auto">
3030
<div className="pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark">
31-
{/* Footer social links start */}
31+
{/* Footer social links */}
3232
<div className="font-general-regular flex flex-col justify-center items-center mb-12 sm:mb-28">
3333
<p className="text-3xl sm:text-4xl text-primary-dark dark:text-primary-light mb-5">
3434
Follow me
@@ -39,7 +39,7 @@ const AppFooter = () => {
3939
href={link.url}
4040
target="__blank"
4141
key={link.id}
42-
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"
42+
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"
4343
>
4444
<i className="text-xl sm:text-2xl md:text-3xl">
4545
{link.icon}
@@ -49,7 +49,6 @@ const AppFooter = () => {
4949
</ul>
5050
</div>
5151

52-
{/* Footer copyright */}
5352
<AppFooterCopyright />
5453
</div>
5554
</div>

0 commit comments

Comments
 (0)