8000 Merge pull request #13 from realstoman/new-fonts-and-ui-updates · codeswitchstudio/react-tailwindcss-portfolio@698180e · GitHub
Skip to content

Commit 698180e

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#13 from realstoman/new-fonts-and-ui-updates
New fonts and UI updates
2 parents 93484a6 + 64b05b5 commit 698180e

File tree

81 files changed

+407
-156
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+407
-156
lines changed

‎README.md

+10-3
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,12 @@ A simple portfolio starter theme built with React and TailwindCSS. This is the R
1111
## Features
1212

1313
- [React](https://reactjs.org) with [React Router v6](https://reactrouter.com)
14-
- [Tailwind CSS v3](https://tailwindcss.com)
14+
- [Tailwind CSS v2](https://tailwindcss.com)
1515
- Context API For State Management
1616
- Custom Hooks
17-
- Dark Mode
18-
- Framer Motion Transitions & Animations
17+
- Framer Motion transitions & animations
18+
- Reusable components
19+
- Dark mode
1920
- Projects filter by category
2021
- Projects filter by search
2122
- Smooth scroll
@@ -55,6 +56,12 @@ cd react-tailwindcss-portfolio
5556
yarn install
5657
```
5758

59+
4. NOTES: If you don't have yarn installed, install it globally using npm:
60+
61+
```
62+
npm install --global yarn
63+
```
64+
5865
5. ##### Start a local dev server at `http://localhost:3000`:
5966

6067
```

‎src/components/HireMeModal.js

+15-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { motion } from 'framer-motion';
22
import { FiX } from 'react-icons/fi';
3+
import Button from './reusable/Button';
34

45
const selectOptions = [
56
'Web Application',
@@ -14,7 +15,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
1415
initial={{ opacity: 0 }}
1516
animate={{ opacity: 1 }}
1617
exit={{ opacity: 0 }}
17-
className="fixed inset-0 z-30 transition-all duration-500"
18+
className="font-general-medium fixed inset-0 z-30 transition-all duration-500"
1819
>
1920
{/* Modal Background */}
2021
<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 }) => {
2425
<div className="modal-wrapper flex items-center z-30">
2526
<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">
2627
<div className="modal-header flex justify-between gap-10 p-5 border-b border-ternary-light dark:border-ternary-dark">
27-
<h5 className=" text-primary-dark dark:text-primary-light text-2xl">
28+
<h5 className=" text-primary-dark dark:text-primary-light text-xl">
2829
What project are you looking for?
2930
</h5>
3031
<button
@@ -43,7 +44,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
4344
>
4445
<div className="">
4546
<input
46-
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"
47+
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"
4748
id="name"
4849
name="name"
4950
type="text"
@@ -54,7 +55,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
5455
</div>
5556
<div className="mt-6">
5657
<input
57-
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"
58+
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"
5859
id="email"
5960
name="email"
6061
type="text"
@@ -65,7 +66,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
6566
</div>
6667
<div className="mt-6">
6768
<select
68-
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"
69+
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"
6970
id="subject"
7071
name="subject"
7172
type="text"
@@ -85,7 +86,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
8586

8687
<div className="mt-6">
8788
<textarea
88-
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"
89+
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"
8990
id="message"
9091
name="message"
9192
cols="14"
@@ -96,8 +97,8 @@ const HireMeModal = ({ onClose, onRequest }) => {
9697
</div>
9798

9899
<div className="mt-6 pb-4 sm:pb-1">
99-
<button
100-
onClick={onRequest}
100+
<span
101+
onClick={onClose}
101102
type="submit"
102103
className="px-4
103104
sm:px-6
@@ -112,16 +113,16 @@ const HireMeModal = ({ onClose, onRequest }) => {
112113
focus:ring-1 focus:ring-indigo-900"
113114
aria-label="Submit Request"
114115
>
115-
Send Request
116-
</button>
116+
<Button title="Send Request" />
117+
</span>
117118
</div>
118119
</form>
119120
</div>
120121
<div className="modal-footer mt-2 sm:mt-0 py-5 px-8 border0-t text-right">
121-
<button
122+
<span
122123
onClick={onClose}
123124
type="button"
124-
className=" px-4
125+
className="px-4
125126
sm:px-6
126127
py-2
127128
bg-indigo-400
@@ -133,8 +134,8 @@ const HireMeModal = ({ onClose, onRequest }) => {
133134
focus:ring-1 focus:ring-indigo-900"
134135
aria-label="Close Modal"
135136
>
136-
Close
137-
</button>
137+
<Button title="Close" />
138+
</span>
138139
</div>
139140
</div>
140141
</div>

‎src/components/ScrollToTop.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// NOTE: This scroll to top is the default react scroll to top behavior when visiting a new route.
2-
// 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.
2+
// 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.
33

44
import { useEffect } from 'react';
55
import { useLocation } from 'react-router-dom';

‎src/components/about/AboutClients.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ const AboutClients = () => {
77

88
return (
99
<div className="mt-10 sm:mt-20">
10-
<p className="text-2xl sm:text-4xl text-primary-dark dark:text-primary-light font-sans font-semibold">
10+
<p className="font-general-medium text-2xl sm:text-3xl text-center text-primary-dark dark:text-primary-light">
1111
{clientsHeading}
1212
</p>
13-
<div className="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-20 gap-2">
13+
<div className="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-14 gap-2">
1414
{clientsData.map((client) => (
1515
<AboutClientSingle
1616
title={client.title}

‎src/components/about/AboutCounter.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
11
const AboutCounter = () => {
22
return (
33
<div className="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
4-
<div className="container mx-auto py-20 block sm:flex sm:justify-between items-center">
4+
<div className="font-general-medium container mx-auto py-20 block sm:flex sm:justify-between items-center">
55
<div className="mb-20 sm:mb-0">
6-
<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
6+
<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
77
12
88
</h2>
9-
<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
9+
<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
1010
Years of experience
1111
</span>
1212
</div>
1313

1414
<div className="mb-20 sm:mb-0">
15-
<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
15+
<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
1616
20k+
1717
</h2>
18-
<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
18+
<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
1919
Stars on GitHub
2020
</span>
2121
</div>
2222

2323
<div className="mb-20 sm:mb-0">
24-
<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
24+
<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
2525
92%
2626
</h2>
27-
<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
27+
<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
2828
Positive feedback
2929
</span>
3030
</div>
3131

3232
<div className="mb-20 sm:mb-0">
33-
<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
33+
<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
3434
77
3535
</h2>
36-
<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
36+
<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
3737
Projects completed
3838
</span>
3939
</div>

‎src/components/about/AboutMeBio.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const AboutMeBio = () => {
1414
{/* About me portfolio image end */}
1515

1616
{/* About me details start */}
17-
<div className="w-full sm:w-3/4 text-left">
17+
<div className="font-general-regular w-full sm:w-3/4 text-left">
1818
{aboutMe.map((bio) => (
1919
<p
2020
className="mb-4 text-ternary-dark dark:text-ternary-light text-lg"

‎src/components/contact/ContactDetails.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const contacts = [
2020

2121
const ContactDetails = () => {
2222
return (
23-
<div className="w-full lg:w-1/2">
23+
<div className="font-general-regular w-full lg:w-1/2">
2424
<div className="text-left max-w-xl px-6">
2525
<h2 className="text-2xl text-primary-dark dark:text-primary-light font-semibold mt-12 mb-8">
2626
Contact details

‎src/components/contact/ContactForm.js

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import Button from '../reusable/Button';
2+
13
const ContactForm = () => {
24
return (
35
<div className="w-full lg:w-1/2">
@@ -6,20 +8,20 @@ const ContactForm = () => {
68
onSubmit={(e) => {
79
e.preventDefault();
810
}}
9-
className="max-w-xl m-4 p-6 sm:p-10 bg-secondary-light dark:bg-secondary-dark rounded-lg shadow-xl text-left"
11+
className="max-w-xl m-4 p-6 sm:p-10 bg-secondary-light dark:bg-secondary-dark rounded-xl shadow-xl text-left"
1012
>
11-
<p className="text-primary-dark dark:text-primary-light text-2xl font-semibold mb-8">
13+
<p className="font-general-medium text-primary-dark dark:text-primary-light text-2xl mb-8">
1214
Contact Form
1315
</p>
14-
<div className="">
16+
<div className="font-general-regular">
1517
<label
1618
className="block text-lg text-primary-dark dark:text-primary-light mb-2"
1719
htmlFor="name"
1820
>
1921
Full Name
2022
</label>
2123
<input
22-
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"
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"
2325
id="name"
2426
name="name"
2527
type="text"
@@ -36,7 +38,7 @@ const ContactForm = () => {
3638
Email
3739
</label>
3840
<input
39-
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"
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"
4042
id="email"
4143
name="email"
4244
type="text"
@@ -53,7 +55,7 @@ const ContactForm = () => {
5355
Subject
5456
</label>
5557
<input
56-
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"
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"
5759
id="subject"
5860
name="subject"
5961
type="text"
@@ -71,7 +73,7 @@ const ContactForm = () => {
7173
Message
7274
</label>
7375
<textarea
74-
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"
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"
7577
id="message"
7678
name="message"
7779
cols="14"
@@ -80,14 +82,12 @@ const ContactForm = () => {
8082
></textarea>
8183
</div>
8284

83-
<div className="mt-6">
84-
<button
85-
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"
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">
86+
<Button
87+
title="Send Message"
8688
type="submit"
8789
aria-label="Send Message"
88-
>
89-
Send Message
90-
</button>
90+
/>
9191
</div>
9292
</form>
9393
</div>

‎src/components/projects/ProjectHeader.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@ const ProjectSingleHeader = () => {
77

88
return (
99
<div>
10-
<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">
10+
<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">
1111
{singleProjectData.ProjectHeader.title}
1212
</p>
1313
<div className="flex">
1414
<div className="flex items-center mr-10">
15-
<FiClock className="text-xl text-ternary-dark dark:text-ternary-light" />
16-
<span className="ml-2 leading-none text-primary-dark dark:text-primary-light">
15+
<FiClock className="text-lg text-ternary-dark dark:text-ternary-light" />
16+
<span className="font-general-regular ml-2 leading-none text-primary-dark dark:text-primary-light">
1717
{singleProjectData.ProjectHeader.publishDate}
1818
</span>
1919
</div>
2020
<div className="flex items-center">
21-
<FiTag className="w-4 h-4 text-ternary-dark dark:text-ternary-light" />
22-
<span className="ml-2 leading-none text-primary-dark dark:text-primary-light">
21+
<FiTag className="text-lg text-ternary-dark dark:text-ternary-light" />
22+
<span className="font-general-regular ml-2 leading-none text-primary-dark dark:text-primary-light">
2323
{singleProjectData.ProjectHeader.tags}
2424
</span>
2525
</div>

‎src/components/projects/ProjectInfo.js

+9-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useContext } from 'react';
2-
import { Link } from 'react-router-dom';
32
import SingleProjectContext from '../../context/SingleProjectContext';
43

54
const ProjectInfo = () => {
@@ -10,15 +9,15 @@ const ProjectInfo = () => {
109
<div className="w-full sm:w-1/3 text-left">
1110
{/* Single project client details start */}
1211
<div className="mb-7">
13-
<p className="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2">
12+
<p className="font-general-regular text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2">
1413
{singleProjectData.ProjectInfo.ClientHeading}
1514
</p>
1615
<ul className="leading-loose">
1716
{singleProjectData.ProjectInfo.CompanyInfo.map(
1817
(info) => {
1918
return (
2019
<li
21-
className="text-ternary-dark dark:text-ternary-light"
20+
className="font-general-regular text-ternary-dark dark:text-ternary-light"
2221
key={info.id}
2322
>
2423
<span>{info.title}: </span>
@@ -44,21 +43,21 @@ const ProjectInfo = () => {
4443

4544
{/* Single project objectives start */}
4645
<div className="mb-7">
47-
<p className="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
46+
<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
4847
{singleProjectData.ProjectInfo.ObjectivesHeading}
4948
</p>
50-
<p className="text-primary-dark dark:text-ternary-light">
49+
<p className="font-general-regular text-primary-dark dark:text-ternary-light">
5150
{singleProjectData.ProjectInfo.ObjectivesDetails}
5251
</p>
5352
</div>
5453
{/* Single project objectives end */}
5554

5655
{/* Single project technologies start */}
5756
<div className="mb-7">
58-
<p className="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
57+
<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
5958
{singleProjectData.ProjectInfo.Technologies[0].title}
6059
</p>
61-
<p className="text-primary-dark dark:text-ternary-light">
60+
<p className="font-general-regular text-primary-dark dark:text-ternary-light">
6261
{singleProjectData.ProjectInfo.Technologies[0].techs.join(
6362
', '
6463
)}
@@ -68,7 +67,7 @@ const ProjectInfo = () => {
6867

6968
{/* Single project social sharing start */}
7069
<div>
71-
<p className="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
70+
<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
7271
{singleProjectData.ProjectInfo.SocialSharingHeading}
7372
</p>
7473
<div className="flex items-center gap-3 mt-5">
@@ -97,14 +96,14 @@ const ProjectInfo = () => {
9796

9897
{/* Single project right section details start */}
9998
<div className="w-full sm:w-2/3 text-left mt-10 sm:mt-0">
100-
<p className="text-primary-dark dark:text-primary-light text-2xl font-bold mb-7">
99+
<p className="font-general-regular text-primary-dark dark:text-primary-light text-2xl font-bold mb-7">
101100
{singleProjectData.ProjectInfo.ProjectDetailsHeading}
102101
</p>
103102
{singleProjectData.ProjectInfo.ProjectDetails.map((details) => {
104103
return (
105104
<p
106105
key={details.id}
107-
className="mb-5 text-lg text-ternary-dark dark:text-ternary-light"
106+
className="font-general-regular mb-5 text-lg text-ternary-dark dark:text-ternary-light"
108107
>
109108
{details.details}
110109
</p>

0 commit comments

Comments
 (0)