Skip to content

Commit 726ddc6

Browse files
mathcodesmathcodes
committed
contacts section
1 parent c9e6391 commit 726ddc6

File tree

6 files changed

+69
-35
lines changed

6 files changed

+69
-35
lines changed

‎src/components/Background/Background.css‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,16 @@ body{
3333

3434

3535
.area{
36-
width: 100%;
36+
width: 90%;
3737
}
3838

3939
.circles, .circles2 {
4040
position: absolute;
4141
top: 0;
42-
left: 0;
43-
width: 90%;
42+
left: 20;
43+
right: 20;
44+
margin:25px;
45+
width: 80%;
4446
height: 100%;
4547
overflow: revert;
4648
}

‎src/components/Contacts/Contacts.css‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
width: 80%;
2828
height: 100%;
2929
margin-top: 2rem;
30+
color: #4faeba;
3031
}
3132

3233
.contacts--container>h1 {
@@ -65,16 +66,24 @@ a:-webkit-any-link {
6566
color: rgb(79, 224, 229);
6667
cursor: pointer;
6768
text-decoration: none;
69+
transition: all 0s;
6870
}
6971
a:-webkit-any-link:hover {
70-
text-decoration:wavy;
7172
background-color: rgb(79, 224, 229);
7273
color: #212121;
73-
font-weight: 800;
74+
font-weight: 400;
7475
}
7576

77+
p.contactLoc{
78+
color: yellow;
79+
transition: all 0;
80+
}
81+
82+
p.contactLoc:hover{
83+
color: yellow;}
84+
7685
.makeStyles-socialIcon-31 {
77-
color: #212121;
86+
/* color: #4faeba; */
7887
width: 45px;
7988
height: 45px;
8089
display: flex;

‎src/components/Contacts/Contacts.js‎

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -62,25 +62,26 @@ function Contacts() {
6262
input: {
6363
border: `4px solid ${theme.primary80}`,
6464
backgroundColor: `${theme.secondary}`,
65-
color: `${theme.tertiary}`,
66-
fontFamily: 'var(--primaryFont)',
67-
fontWeight: 500,
68-
transition: 'border 0.2s ease-in-out',
69-
'&:focus': {
70-
border: `4px solid ${theme.primary600}`,
71-
},
72-
},
73-
message: {
74-
border: `4px solid ${theme.primary80}`,
75-
backgroundColor: `${theme.secondary}`,
76-
color: `${theme.tertiary}`,
65+
color: `purple`,
7766
fontFamily: 'var(--primaryFont)',
7867
fontWeight: 500,
7968
transition: 'border 0.2s ease-in-out',
8069
'&:focus': {
8170
border: `4px solid ${theme.primary600}`,
71+
color: 'black',
8272
},
8373
},
74+
// message: {
75+
// border: `4px solid ${theme.primary80}`,
76+
// backgroundColor: `${theme.secondary}`,
77+
// color: `${theme.tertiary}`,
78+
// fontFamily: 'var(--primaryFont)',
79+
// fontWeight: 500,
80+
// transition: 'border 0.2s ease-in-out',
81+
// '&:focus': {
82+
// border: `4px solid ${theme.primary600}`,
83+
// },
84+
// },
8485
label: {
8586
backgroundColor: `${theme.secondary}`,
8687
color: `${theme.primary}`,
@@ -90,6 +91,11 @@ function Contacts() {
9091
padding: '0 5px',
9192
transform: 'translate(25px,50%)',
9293
display: 'inline-flex',
94+
'&:hover': {
95+
transform: 'scale(1.1)',
96+
color: '#000',
97+
backgroundColor: theme.tertiary,
98+
},
9399
},
94100
socialIcon: {
95101
width: '45px',
@@ -104,14 +110,15 @@ function Contacts() {
104110
transition: '250ms ease-in-out',
105111
'&:hover': {
106112
transform: 'scale(1.1)',
107-
color: theme.secondary,
113+
color: '#000',
108114
backgroundColor: theme.tertiary,
109115
},
110116
},
111117
detailsIcon: {
112-
backgroundColor: theme.primary,
113-
color: theme.secondary,
118+
backgroundColor: '#667',
119+
color: '#4faeba',
114120
borderRadius: '50%',
121+
border: '2px solid #4faeba',
115122
width: '45px',
116123
height: '45px',
117124
display: 'flex',
@@ -122,8 +129,8 @@ function Contacts() {
122129
flexShrink: 0,
123130
'&:hover': {
124131
transform: 'scale(1.1)',
125-
color: theme.secondary,
126-
backgroundColor: theme.tertiary,
132+
color: '#667',
133+
backgroundColor: '#4faeba',
127134
},
128135
typoImpo: {
129136
color: theme.secondary,
@@ -141,7 +148,7 @@ function Contacts() {
141148
style={{ backgroundColor: theme.secondary }}
142149
>
143150
<div className='contacts--container'>
144-
<h1 style={{ color: theme.primary }}>Contacts</h1>
151+
<h1>Contacts</h1>
145152
<div className='contacts-body'>
146153

147154
<div className='contacts-details'>
@@ -153,9 +160,10 @@ function Contacts() {
153160
<FiAtSign />
154161
</div>
155162
<p>
156-
{contactsData.email}
163+
{contactsData.email}
157164
</p>
158165
</a>
166+
159167
<a
160168
href={`tel:${contactsData.phone}`}
161169
className='personal-details'
@@ -164,18 +172,27 @@ function Contacts() {
164172
<FiPhone />
165173
</div>
166174
<p>
167-
<a href={`tel:${contactsData.phone}`}>{contactsData.phone}</a>
175+
{contactsData.phone}
168176
</p>
169177
</a>
170-
<div className='personal-details'>
178+
179+
<a
180+
href={`https://www.google.com/maps/place/${contactsData.address}`}
181+
className='personal-details'
182+
>
171183
<div className={classes.detailsIcon}>
172184
<HiOutlineLocationMarker />
173185
</div>
174186
<p>
175-
<a href={`https://www.google.com/maps/place/${contactsData.address}`}>Carrboro, NC</a>
187+
{contactsData.address}
188+
176189
</p>
177-
</div>
190+
</a>
191+
192+
193+
178194

195+
{/* NEXT SECTION */}
179196
<div className='socialmedia-icons'>
180197
{socialsData.github && (
181198
<a
@@ -252,13 +269,13 @@ function Contacts() {
252269
</div>
253270
</div>
254271
</div>
255-
{/* <div style={{color: theme.primary}} variant="body2" align="center">
272+
<footer style={{color: theme.primary}} variant="body2" align="center">
256273

257274
<a style={{color: theme.primary}} href="https://jonchristie.net/">
258275
jonchristie.net
259276
</a>{' ©'}{new Date().getFullYear()}
260277

261-
</div> */}
278+
</footer>
262279
</div>
263280

264281
</div>

‎src/components/Projects/SingleProject/SingleProject.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
justify-content: space-between;
2121
width: 100%;
2222
height: 100%;
23+
margin: 2em;
2324
}
2425

2526
.projectContent>h2 {
@@ -32,13 +33,13 @@
3233
}
3334

3435
.projectContent>img {
35-
width: 100%;
36+
width: 80%;
3637
height: 60%;
3738
transition: opacity 0.7s 0.3s;
3839
}
3940

4041
.singleProject:hover img {
41-
opacity: 0;
42+
opacity: 20;
4243
}
4344

4445
.project--showcaseBtn {
@@ -77,6 +78,7 @@
7778
align-items: center;
7879
justify-content: center;
7980
font-family: var(--primaryFont);
81+
overflow:auto;;
8082
}
8183

8284
.singleProject:hover .project--desc {

‎src/components/Testimonials/Testimonials.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
align-items: center;
77
justify-content: center;
88
overflow: hidden;
9+
background: linear-gradient(#333 0%, #777 100%);
10+
color: #4faeba;
911
}
1012

1113
.slick-slider {
@@ -33,6 +35,7 @@
3335
}
3436

3537
.testimonials--header h1 {
38+
background: none;
3639
font-style: normal;
3740
font-weight: bold;
3841
font-size: 3.5rem;
@@ -90,6 +93,7 @@
9093
align-items: center;
9194
text-align: center;
9295
width: 70%;
96+
border-radius: 20px;
9397
}
9498

9599
.single--testimony {
@@ -140,6 +144,7 @@
140144
display: flex;
141145
flex-direction: column;
142146
align-items: center;
147+
border-radius: 20px;
143148
justify-content: center;
144149
}
145150

‎src/components/Testimonials/Testimonials.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,9 @@ function Testimonials() {
3939
{testimonialsData.length > 0 && (
4040
<div
4141
className='testimonials'
42-
style={{ backgroundColor: theme.primary }}
4342
>
4443
<div className='testimonials--header'>
45-
<h1 style={{ color: theme.secondary }}>Testimonials</h1>
44+
<h1 >Testimonials</h1>
4645
</div>
4746
<div className='testimonials--body'>
4847

0 commit comments

Comments
 (0)