Skip to content

Commit b9e42f8

Browse files
mathcodesmathcodes
committed
revamp
1 parent ee6e425 commit b9e42f8

File tree

12 files changed

+164
-215
lines changed

12 files changed

+164
-215
lines changed

‎.vscode/settings.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
{
2-
"dotenv.enableAutocloaking": false
2+
"dotenv.enableAutocloaking": false,
3+
"workbench.colorCustomizations": {
4+
"activityBar.background": "#182F46",
5+
"titleBar.activeBackground": "#224262",
6+
"titleBar.activeForeground": "#F8FAFC"
7+
}
38
}

‎src/.DS_Store‎

0 Bytes
Binary file not shown.

‎src/assets/svg/.DS_Store‎

0 Bytes
Binary file not shown.

‎src/components/About/About.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,10 @@ function About() {
1414
<p style={{color:theme.palette.text.main}}>{aboutData.description1}<br/><br/>{aboutData.description2}<br/><br/>{aboutData.description3}<br/><br/>{aboutData.description4}</p>
1515
</div>
1616
<div className="about-img">
17-
<img
18-
src={aboutData.image}
19-
alt=""
20-
/>
17+
2118
</div>
2219
</div>
23-
20+
2421
</div>
2522

2623
)

‎src/components/Footer/Footer.js‎

Lines changed: 56 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
import React from 'react'
1+
import React from 'react'
22
import './Footer.css'
33
import { useTheme } from '@mui/material/styles';
4-
import { Grid } from '@mui/material';
4+
import { experimentalStyled as styled } from '@mui/material/styles';
5+
import Box from '@mui/material/Box';
6+
import Paper from '@mui/material/Paper';
7+
import Grid from '@mui/material/Grid';
8+
// import { Item } from '@mui/material/Grid';
59
import {
610
FaTwitter,
711
FaLinkedinIn,
@@ -14,18 +18,25 @@ import { FiPhone, FiAtSign } from 'react-icons/fi';
1418
import { HiOutlineLocationMarker } from 'react-icons/hi';
1519
import { socialsData } from '../../data/socialsData';
1620
import { contactsData } from '../../data/contactsData';
21+
const Item = styled(Paper)(({ theme }) => ({
22+
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
23+
...theme.typography.body2,
24+
padding: theme.spacing(2),
25+
textAlign: 'center',
26+
color: theme.palette.text.secondary,
27+
}));
1728

1829
const Footer = () => {
19-
const theme = useTheme();
30+
const theme = useTheme();
2031

2132
return (
22-
<div className="footer" style={{color: theme.palette.text.main, backgroundColor: theme.palette.background.paper }}>
33+
<div className="footer" style={{ color: theme.palette.text.main, backgroundColor: theme.palette.background.paper }}>
2334
<Grid style={{ display: "block" }}>
24-
<div className='contact-icons'>
25-
<div className='contacts-details'>
26-
<ul>
27-
<li>
28-
<a
35+
<Grid container spacing={{ xs: 2, md: 3, lg:4 }} columns={{ xs: 4, sm: 8, md: 12 }}>
36+
37+
<Grid item xs={2} sm={4} md={4}>
38+
<Item>
39+
<a
2940
href={`mailto:${contactsData.email}`}
3041
className='personal-details'
3142
>
@@ -36,9 +47,11 @@ const theme = useTheme();
3647
{contactsData.email}
3748
</p>
3849
</a>
39-
</li>
40-
<li>
41-
<a
50+
</Item>
51+
</Grid>
52+
<Grid item xs={2} sm={4} md={4}>
53+
<Item>
54+
<a
4255
href={`tel:${contactsData.phone}`}
4356
className='personal-details'
4457
>
@@ -49,9 +62,11 @@ const theme = useTheme();
4962
{contactsData.phone}
5063
</p>
5164
</a>
52-
</li>
53-
<li>
54-
<a
65+
</Item>
66+
</Grid>
67+
<Grid item xs={2} sm={4} md={4}>
68+
<Item>
69+
<a
5570
href={`https://www.google.com/maps/place/${contactsData.address}`}
5671
className='personal-details'
5772
>
@@ -63,6 +78,30 @@ const theme = useTheme();
6378

6479
</p>
6580
</a>
81+
</Item>
82+
</Grid>
83+
<Grid item xs={2} sm={4} md={4}>
84+
<Item>xs=2</Item>
85+
</Grid>
86+
<Grid item xs={2} sm={4} md={4}>
87+
<Item>xs=2</Item>
88+
</Grid>
89+
<Grid item xs={2} sm={4} md={4}>
90+
<Item>xs=2</Item>
91+
</Grid>
92+
93+
</Grid>
94+
<div className='contact-icons'>
95+
<div className='contacts-details'>
96+
<ul style={{ padding: 0 }}>
97+
<li>
98+
99+
</li>
100+
<li>
101+
102+
</li>
103+
<li>
104+
66105
</li>
67106
</ul>
68107
</div>
@@ -75,7 +114,7 @@ const theme = useTheme();
75114
target='_blank'
76115
rel="noopener noreferrer"
77116
className='socialIcon'
78-
117+
79118
>
80119
<FaGithub aria-label='GitHub' className="localIcon" />
81120
</a>
@@ -134,7 +173,7 @@ const theme = useTheme();
134173

135174

136175
</Grid>
137-
176+
138177
</div>
139178
)
140179
}

‎src/components/PreContact/PreContact.css‎

Lines changed: 15 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,6 @@ ul
3838
text-align: justify;
3939
}
4040

41-
ul:after
42-
{
43-
content: '';
44-
display: inline-block;
45-
width: 100%;
46-
}
47-
48-
ul:before
49-
{
50-
content: '';
51-
display: block;
52-
}
5341

5442
li
5543
{
@@ -133,7 +121,7 @@ a:-webkit-any-link:hover
133121
{
134122
text-shadow:#fff 2px solid;
135123
color: #fca311;
136-
124+
137125
}
138126

139127
.makeStyles-socialIcon-31
@@ -152,7 +140,7 @@ a:-webkit-any-link:hover
152140

153141
.contacts-details
154142
{
155-
display: flex;
143+
display: flex;
156144
align-items: flex-start;
157145
justify-content: space-evenly;
158146
flex: none;
@@ -163,9 +151,9 @@ a:-webkit-any-link:hover
163151

164152
.personal-details p
165153
{
166-
margin-left: 1.5rem;
154+
margin: 0 1.5rem;
167155
font-size: 18px;
168-
line-height: 110%;
156+
line-height: 100%;
169157
font-weight: 500;
170158
font-family: var(--primaryFont);
171159
white-space: nowrap;
@@ -181,20 +169,18 @@ a:-webkit-any-link:hover
181169
align-items: center;
182170
justify-content: flex-start;
183171
width: 100%;
184-
margin-bottom: 2.5rem;
172+
185173
color: #eaeaea;
186174
text-decoration: wavy;
187175
font-weight: 400;
188176
background-color: #d3540000;
189177
border-radius: 10px;
190-
padding: 5px;
178+
/* padding: 5px; */
191179
transition: all .5s;
192180
}
193181

194182
.personal-details:hover
195183
{
196-
text-decoration: wavy;
197-
background-color: #232526;
198184
color: #eaeaea;
199185
font-weight: 800;
200186
}
@@ -208,7 +194,7 @@ detailsIcon
208194
{
209195
background-color: '#667';
210196
color: '#232526';
211-
border-radius: '50%';
197+
border-radius: '50%';
212198
margin-bottom: 0.3rem;
213199
width: '45px';
214200
height: '45px';
@@ -256,20 +242,20 @@ ul,
256242
display: none;
257243
}
258244

259-
245+
260246

261247

262248
.personal-details p
263249
{
264-
margin-left: 1rem;
250+
265251

266252
flex-direction: row;
267253
}
268254
}
269255

270256
@media screen and (max-width: 800px)
271257
{
272-
258+
273259
.personal-details
274260
{
275261
display: flex;
@@ -329,7 +315,7 @@ ul,
329315

330316
.personal-details p
331317
{
332-
margin-left: 1.2rem;
318+
333319
width: 95%;
334320
}
335321
}
@@ -344,7 +330,7 @@ ul,
344330
align-items: center;
345331
justify-content: flex-start;
346332
width: 100%;
347-
margin-bottom: 2.5rem;
333+
348334
color: #232526;
349335
text-decoration: wavy;
350336
font-weight: 400;
@@ -360,18 +346,17 @@ ul,
360346
}
361347
}
362348

363-
/*
349+
/*
364350
.localIcon
365351
{
366352
font-size: 2rem;
367353
} */
368-
354+
369355
.contactHeader2{
370356
padding: 3rem 0 1rem 0;
371357
}
372-
358+
373359
.css-pjjdvz {
374-
margin-left: 8px;
375360
margin-right: 8px;
376361
display: -webkit-box;
377362
display: -webkit-flex;

0 commit comments

Comments
 (0)