Skip to content

Commit d6cd3bc

Browse files
nitrotapnitrotap
committed
updating styles and pic
1 parent 6b00b53 commit d6cd3bc

File tree

10 files changed

+312
-121
lines changed

10 files changed

+312
-121
lines changed

‎src/App.css

Lines changed: 72 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,51 @@
1313
}
1414
}
1515

16+
/* Style all font awesome icons */
17+
.fa {
18+
padding: 20px;
19+
font-size: 30px;
20+
width: 50px;
21+
text-align: center;
22+
text-decoration: none;
23+
}
24+
25+
/* Add a hover effect if you want */
26+
.fa:hover {
27+
opacity: 0.7;
28+
}
29+
30+
.v6_24 {
31+
text-align: center;
32+
background-color: #14213d;
33+
padding: 3rem;
34+
}
35+
.v6_26 {
36+
width: 236px;
37+
height: 221px;
38+
background: rgba(217,217,217,1);
39+
opacity: 1;
40+
border-radius: 50%;
41+
margin-top: 2rem;
42+
43+
}
44+
.v6_27 {
45+
width: 367px;
46+
height: 77px;
47+
position: relative;
48+
overflow: hidden;
49+
}
50+
.v6_28 {
51+
width: 899px;
52+
height: 293px;
53+
background: rgba(217,217,217,1);
54+
opacity: 1;
55+
position: absolute;
56+
top: 473px;
57+
left: 49px;
58+
overflow: hidden;
59+
}
60+
1661
.App-header {
1762
background-color: #282c34;
1863
min-height: 100vh;
@@ -24,6 +69,8 @@
2469
color: white;
2570
}
2671

72+
73+
2774
.App-link {
2875
color: #61dafb;
2976
}
@@ -106,6 +153,7 @@ header {
106153
display: flex;
107154
align-items: center;
108155
margin: 10px;
156+
margin-bottom: 1rem;
109157
background-color: rgb(1, 1, 1, 0);
110158
}
111159

@@ -164,14 +212,10 @@ header h1 a:hover {
164212

165213
/* END header styles */
166214

167-
/* START MEDIA QUERIES */
168-
@media screen and (max-width: 1280px) {
169-
.card-title {
170-
font-size: calc(24px + 2vw);
171-
}
172-
215+
.footer {
216+
display: flex;
217+
justify-content: space-between;
173218
}
174-
175219
.active {
176220

177221
background: var(--primary-color);
@@ -181,6 +225,22 @@ header h1 a:hover {
181225
border: var(--primary-color) solid 3px;
182226
transition: all .5s ease;
183227

228+
}
229+
/* START MEDIA QUERIES */
230+
@media screen and (max-width: 1280px) {
231+
.card-title {
232+
font-size: calc(24px + 2vw);
233+
}
234+
235+
.footer {
236+
display: flex;
237+
flex-direction: column;
238+
}
239+
240+
footer div div {
241+
margin-top: 10px;
242+
}
243+
184244
}
185245

186246
@media screen and (max-width: 980px) {
@@ -208,13 +268,17 @@ header h1 a:hover {
208268
footer h4,
209269
footer div {
210270
text-align: center;
211-
width: 100%;
212271
}
272+
213273
}
214274

215275
@media screen and (max-width: 640px) {
216276
.nav-link {
217277
display: inline-block;
218278
}
219279

280+
header {
281+
position: relative;
282+
}
283+
220284
}

‎src/App.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,16 +58,14 @@ function App() {
5858

5959
return (
6060
<>
61-
<main className=''>
61+
<main style={{ height: '90vh' }}>
6262
<Header handlePageChange={handlePageChange} currentLink={currentLink} setCurrentLink={setCurrentLink} >
6363
</Header>
64-
<div className="container" style={{ backgroundColor: '#14213d' }}>
64+
<div className="container">
6565
{renderPage()}
66+
<Footer></Footer>
6667
</div>
6768
</main>
68-
<div class="divider"></div>
69-
70-
<Footer></Footer>
7169
</>
7270
);
7371
}

‎src/assets/images/kj-thumbnail.jpg

57.7 KB
Loading

‎src/assets/images/kj.jpg

1.29 MB
Loading

‎src/components/About/index.js

Lines changed: 30 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,41 @@
11
import React from 'react';
2-
import kjImg from '../../assets/images/kj-img.jpg'
2+
import kjImg from '../../assets/images/kj-thumbnail.jpg'
33

44
function About() {
55
return (
6-
<div style={{ marginTop: 15, padding: 10, marginBottom: 15 }}>
7-
<section id="about" className="row valign-wrapper">
8-
<div className='card' style={{ backgroundColor: '#14213d' }}>
9-
<div className="col s12 m4">
10-
<h3 className="center-align card-title" style={{ fontSize: '30pt', fontWeight: 'bold' }}>About Me</h3>
11-
<div className="center-align">
12-
<img
13-
src={kjImg}
14-
className="card-image"
15-
alt="kartik" width='100%' />
16-
</div>
17-
</div>
6+
<div class="v6_24">
7+
<img src={kjImg} class="v6_26"></img>
8+
<div>
9+
<h1>Kartik Jevaji</h1>
10+
</div>
11+
<div>
12+
<h4 style={{ padding: '3rem' }}>Full Stack Web Developer</h4>
13+
<h5 style={{ padding: '2rem' }}>Full-stack web developer with strong analytical skills and educated at the University of Minnesota Coding Bootcamp.
14+
</h5>
15+
<div className='divider'></div>
16+
<h5 style={{ padding: '2rem' }}>
17+
Strong skills within MERN stack with emphasis on JavaScript and Progressive Web Applications.
18+
</h5>
19+
<div className='divider'></div>
20+
<h5 style={{ padding: '2rem' }}>
21+
Experienced with non-profits, CRMs, and databases.
22+
</h5>
23+
<div className='divider'></div>
24+
25+
<h5 style={{ padding: '2rem' }}>
26+
Excited to apply learned skills to develop cutting-edge applications and open-source software.
27+
</h5>
28+
<div className='divider'></div>
29+
30+
<h5 style={{ padding: '2rem' }}>A self-described Tekno-junkie that loves learning new languages and is driven to build and perfect.</h5>
31+
32+
33+
</div>
1834

19-
<div className="left-align col s12 m8">
20-
<h5 className='card-content'>
21-
Full-stack web developer with strong analytical skills and educated at the University of Minnesota Coding Bootcamp.
22-
</h5>
23-
<div className='divider'></div>
24-
<h5 className='card-content'>
25-
Strong skills within MERN stack with emphasis on JavaScript and Progressive Web Applications.
26-
</h5>
27-
<div className='divider'></div>
2835

29-
<h5 className='card-content'>
30-
Experienced with non-profits, CRMs, and databases.
31-
</h5>
32-
<div className='divider'></div>
33-
34-
<h5 className='card-content'>
35-
Excited to apply learned skills to develop cutting-edge applications and open-source software.
36-
</h5>
37-
<div className='divider'></div>
38-
39-
<h5 className='card-content'>A self-described Tekno-junkie that loves learning new languages and is driven to build and perfect.</h5>
40-
</div>
41-
</div>
42-
43-
44-
45-
46-
47-
48-
</section>
4936
</div>
5037

38+
5139
);
5240
}
5341

‎src/components/About/styles.css

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.v6_24 {
2+
width: 993px;
3+
height: 819px;
4+
background: rgba(255,255,255,1);
5+
opacity: 1;
6+
position: relative;
7+
top: 0px;
8+
left: 0px;
9+
overflow: hidden;
10+
}
11+
.v6_25 {
12+
width: 993px;
13+
height: 78px;
14+
background: rgba(217,217,217,1);
15+
opacity: 1;
16+
position: relative;
17+
top: 0px;
18+
left: 0px;
19+
overflow: hidden;
20+
}
21+
.v6_26 {
22+
width: 236px;
23+
height: 221px;
24+
background: rgba(217,217,217,1);
25+
opacity: 1;
26+
position: absolute;
27+
top: 103px;
28+
left: 379px;
29+
border-radius: 50%;
30+
}
31+
.v6_27 {
32+
width: 367px;
33+
height: 77px;
34+
background: rgba(217,217,217,1);
35+
opacity: 1;
36+
position: absolute;
37+
top: 371px;
38+
left: 313px;
39+
overflow: hidden;
40+
}
41+
.v6_28 {
42+
width: 899px;
43+
height: 293px;
44+
background: rgba(217,217,217,1);
45+
opacity: 1;
46+
position: absolute;
47+
top: 473px;
48+
left: 49px;
49+
overflow: hidden;
50+
}
51+

‎src/components/Contact/index.js

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22

33
import gitHubLogo from '../../assets/images/GitHub_Logo.png'
4-
import lILogo from '../../assets/images/LI-Logo.png'
54

65
function Contact() {
76

@@ -12,36 +11,37 @@ function Contact() {
1211
<div className="col s12 center-align">
1312
<div className='card blue-grey'>
1413
<p className='card-title '>Email me at [email protected]</p>
15-
<button type="button">
14+
<div className='card-content'>
1615
<a href="mailto:[email protected]" target="_blank" rel="noreferrer">
17-
<i className='medium material-icons'>email</i>
16+
<i className='medium material-icons' style={{ backgroundColor: 'white', padding: '5px', borderRadius: '0', }}>email</i>
1817
</a>
19-
</button>
18+
</div>
2019
</div>
2120
</div>
2221
<div className="col s12 center-align">
2322
<div className='card blue-grey'>
2423
<p className='card-title '>Find me on GitHub</p>
25-
<button type="button">
24+
<div className='card-content'>
2625
<a href="https://github.com/nitrotap" target="_blank" rel="noreferrer">
27-
<img src={gitHubLogo} width="150px" className='white' alt="Find me on Github" />
26+
<img src={gitHubLogo} width="150px" className='white' style={{ borderRadius: '0', }} alt="Find me on Github" />
2827
</a>
29-
</button>
28+
</div>
3029
</div>
3130
</div>
3231
<div className="col s12 center-align">
3332
<div className='card blue-grey'>
34-
<p className='card-title '>Message me on LinkedIn</p>
35-
<button type="button">
36-
<a href="https://www.linkedin.com/in/kjevaji/" target="_blank" style={{ padding: 20 }} rel="noreferrer">
37-
<img src={lILogo} width="150px" className='white' alt="Find me on Github" />
33+
<p className='card-title'>Message me on LinkedIn</p>
34+
<div class='card-content'>
35+
<a href="https://www.linkedin.com/in/kjevaji/" target="_blank" rel="noreferrer">
36+
<i class="fab fa-linkedin fa-4x" style={{ backgroundColor: 'white', borderRadius: '0', padding: '5px' }}>
37+
</i>
3838
</a>
39-
</button>
39+
</div>
4040
</div>
4141
</div>
4242

4343
</div>
44-
</section>
44+
</section >
4545
);
4646
}
4747

‎src/components/Footer/index.js

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,24 @@
11
import React from 'react';
2-
import gitHubLogo from '../../assets/images/GitHub-Mark-120px-plus.png'
3-
import linkedInLogo from '../../assets/images/LI-In-Bug.png'
42

53
function Footer() {
64
return (
7-
<footer className="center-align container" style={{ marginTop: '20px' }}>
8-
<section className='center-align row'>
9-
<h4 className='col s12 m2'>Made with <span>&#x2764;</span> in CO.</h4>
10-
<div className="col s12 m2">
11-
<p>GitHub</p>
12-
<button type='button'>
13-
<a href="https://github.com/nitrotap" target="_blank" rel="noreferrer">
14-
<img src={gitHubLogo} width="50px" className='white' alt="Find me on Github" />
15-
</a>
16-
</button>
5+
<footer>
6+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"></link>
7+
<div className='footer'>
8+
<h4 style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', }}>Made with <span style={{ color: 'peachpuff' }}>&nbsp;&#x2764;&nbsp;</span> in CO.</h4>
9+
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', }}>
10+
<a id="profile-link" href="https://github.com/freecodecamp" rel="noreferrer" target="_blank" class="btn contact-details"><i class="fab fa-github"></i> GitHub</a>
11+
<a href="https://www.linkedin.com/in/kjevaji/" target="_blank" rel="noreferrer" class="btn contact-details"><i class="fab fa-linkedin"></i> LinkedIn</a>
12+
<a href="mailto:[email protected]" class="btn contact-details"><i class="fas fa-at"></i> Email</a>
1713
</div>
18-
<div className="col s12 m2">
19-
<p>LinkedIn</p>
20-
<button type="button">
21-
<a href="https://www.linkedin.com/in/kjevaji/" target="_blank" rel="noreferrer">
22-
<img src={linkedInLogo} width="60px" alt="Find me on LinkedIn" />
23-
</a>
24-
</button>
14+
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
15+
<h6>
16+
&copy; 2022 Kartik Jevaji
17+
</h6>
2518
</div>
26-
<div className="col s12 m2">
27-
<p>Email</p>
28-
<button type="button">
29-
<a href="mailto:[email protected]" target="_blank" rel="noreferrer">
30-
<i className='medium material-icons'>email</i>
31-
</a>
32-
</button>
33-
</div>
34-
<div className='col s12 m2'>&copy; 2022 Kartik Jevaji</div>
3519

36-
</section>
20+
</div>
21+
3722

3823
</footer>
3924
)

0 commit comments

Comments
 (0)