Skip to content

Commit f58dd7f

Browse files
jebarpgjebarpg
committed
Contact finished
1 parent cef4ca5 commit f58dd7f

File tree

3 files changed

+68
-52
lines changed

3 files changed

+68
-52
lines changed

‎src/components/Contact.tsx‎

Lines changed: 59 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { faGithub, faMedium } from "@fortawesome/free-brands-svg-icons";
22
import { faLinkedin } from "@fortawesome/free-brands-svg-icons/faLinkedin";
3+
import {
4+
faEnvelope,
5+
faMapMarker,
6+
faPhone,
7+
} from "@fortawesome/free-solid-svg-icons";
38
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
49

510
interface ContactProps {
@@ -15,80 +20,83 @@ interface ContactProps {
1520

1621
const Contact = (props: ContactProps) => {
1722
return (
18-
<div>
19-
<div id="contact">
20-
<div className="container">
21-
<div className="col-md-3 col-md-offset-1 contact-info">
23+
<div
24+
style={{
25+
display: "flex",
26+
justifyContent: "center",
27+
alignItems: "center",
28+
height: "100vh",
29+
}}
30+
>
31+
<div id="contact" style={{ width: "80%" }}>
32+
{" "}
33+
{/* controls overall width */}
34+
<div className="container" style={{ textAlign: "center" }}>
35+
<div
36+
className="contact-info"
37+
style={{
38+
margin: "0 auto",
39+
maxWidth: "600px", // wider column
40+
}}
41+
>
2242
<div className="contact-item">
2343
<h3>Contact Info</h3>
2444
<p>
2545
<span>
26-
<i className="fa fa-map-marker"></i> Address
46+
<FontAwesomeIcon icon={faMapMarker} size="1x" color="red" />{" "}
47+
Address
2748
</span>
2849
{props.data ? props.data.address : "loading"}
2950
</p>
3051
</div>
3152
<div className="contact-item">
3253
<p>
3354
<span>
34-
<i className="fa fa-phone"></i> Phone
55+
<FontAwesomeIcon icon={faPhone} size="1x" color="black" />{" "}
56+
Phone
3557
</span>{" "}
3658
{props.data ? props.data.phone : "loading"}
3759
</p>
3860
</div>
3961
<div className="contact-item">
4062
<p>
4163
<span>
42-
<i className="fa fa-envelope-o"></i> Email
64+
<FontAwesomeIcon icon={faEnvelope} size="1x" color="black" />{" "}
65+
Email
4366
</span>{" "}
4467
{props.data ? props.data.email : "loading"}
4568
</p>
4669
</div>
4770
</div>
48-
<div className="col-md-12">
49-
<div className="row">
50-
<div className="social">
51-
<ul
52-
style={{
53-
display: "flex",
54-
justifyContent: "center", // centers icons horizontally
55-
alignItems: "center",
56-
listStyleType: "none", // removes bullets
57-
gap: "20px", // spacing between icons
58-
padding: 0,
59-
margin: 0,
60-
}}
61-
>
62-
<li>
63-
<a href={props.data ? props.data.linkedin : "/"}>
64-
<FontAwesomeIcon
65-
icon={faLinkedin}
66-
size="5x"
67-
color="blue"
68-
/>
69-
</a>
70-
</li>
71-
<li>
72-
<a href={props.data ? props.data.github : "/"}>
73-
<FontAwesomeIcon
74-
icon={faGithub}
75-
size="5x"
76-
color="black"
77-
/>
78-
</a>
79-
</li>
80-
<li>
81-
<a href={props.data ? props.data.medium : "/"}>
82-
<FontAwesomeIcon
83-
icon={faMedium}
84-
size="5x"
85-
color="black"
86-
/>
87-
</a>
88-
</li>
89-
</ul>
90-
</div>
91-
</div>
71+
72+
<div className="social" style={{ marginTop: "40px" }}>
73+
<ul
74+
style={{
75+
display: "flex",
76+
justifyContent: "center",
77+
alignItems: "center",
78+
listStyleType: "none",
79+
gap: "40px", // more space between icons
80+
padding: 0,
81+
margin: 0,
82+
}}
83+
>
84+
<li>
85+
<a href={props.data ? props.data.linkedin : "/"}>
86+
<FontAwesomeIcon icon={faLinkedin} size="5x" color="blue" />
87+
</a>
88+
</li>
89+
<li>
90+
<a href={props.data ? props.data.github : "/"}>
91+
<FontAwesomeIcon icon={faGithub} size="5x" color="black" />
92+
</a>
93+
</li>
94+
<li>
95+
<a href={props.data ? props.data.medium : "/"}>
96+
<FontAwesomeIcon icon={faMedium} size="5x" color="black" />
97+
</a>
98+
</li>
99+
</ul>
92100
</div>
93101
</div>
94102
</div>

‎src/components/Skills.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
faNodeJs,
99
faReact,
1010
} from "@fortawesome/free-brands-svg-icons";
11+
import { faWind } from "@fortawesome/free-solid-svg-icons";
1112
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
1213
import type { IconDefinition } from "@fortawesome/free-brands-svg-icons";
1314

@@ -20,6 +21,7 @@ const iconMap: Record<string, IconDefinition> = {
2021
faNodeJs: faNodeJs,
2122
faGit: faGit,
2223
faGithub: faGithub,
24+
faWind: faWind,
2325
};
2426

2527
interface SkillsProps {

‎src/data/data.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,10 +113,16 @@
113113
"name": "GitHub",
114114
"text": "Collaborative development. I host, review, and manage projects using GitHub’s ecosystem.",
115115
"color": "black"
116+
},
117+
{
118+
"icon": "faWind",
119+
"name": "Windsurf",
120+
"text": "My go-to AI-powered editor built on VS Code, enhancing productivity with smart autocomplete, chat, and seamless integration.",
121+
"color": "black"
116122
}
117123
],
118124
"Contact": {
119-
"address": "P.O. Box 1693, Kingston, Washington 98364",
125+
"address": " P.O. Box 1693, Kingston, Washington 98346",
120126
"phone": "+1 360 524 2745",
121127
"email": "jebarpg@gmail.com",
122128
"linkedin": "https://linkedin.com/in/jebradwell",

0 commit comments

Comments
 (0)