Skip to content

Commit 927c99d

Browse files
jebarpgjebarpg
committed
Work in progress about and skills are finished next will be projects and contact sections
1 parent ca368b4 commit 927c99d

File tree

12 files changed

+257
-94
lines changed

12 files changed

+257
-94
lines changed

‎package-lock.json‎

Lines changed: 63 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@fortawesome/fontawesome-svg-core": "^7.1.0",
14+
"@fortawesome/free-brands-svg-icons": "^7.1.0",
15+
"@fortawesome/free-solid-svg-icons": "^7.1.0",
16+
"@fortawesome/react-fontawesome": "^3.1.0",
1317
"bootstrap": "^5.3.8",
1418
"react": "^19.1.1",
1519
"react-bootstrap": "^2.10.10",

‎public/imgs/about.jpg‎

30.8 KB
Loading

‎public/imgs/nordwood-themes-nDd3dIkkOLo-unsplash.jpg‎

1.02 MB
Loading

‎src/App.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import Navigation from "./components/Navigation";
66
import JsonData from "./data/data.json";
77

88
import SmoothScroll from "smooth-scroll";
9+
import About from "./components/About";
10+
import Skills from "./components/Skills";
11+
import Projects from "./components/Projects";
12+
import Contact from "./components/Contact";
913

1014
// eslint-disable-next-line react-refresh/only-export-components
1115
export const scroll = new SmoothScroll('a[href*="#"]', {
@@ -27,6 +31,7 @@ interface LandingPageData {
2731
icon: string;
2832
name: string;
2933
text: string;
34+
color: string;
3035
}[];
3136
Projects: {
3237
title: string;
@@ -71,6 +76,10 @@ function App() {
7176
<>
7277
<Navigation />
7378
<Header data={landingPageData.Header} />
79+
<About data={landingPageData.About} />
80+
<Skills data={landingPageData.Skills} />
81+
<Projects data={landingPageData.Projects} />
82+
<Contact data={landingPageData.Contact} />
7483
<Footer />
7584
</>
7685
);

‎src/components/About.tsx‎

Lines changed: 46 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
interface AboutProps {
32
data: {
43
paragraph: string;
@@ -10,43 +9,60 @@ interface AboutProps {
109
const About = (props: AboutProps) => {
1110
return (
1211
<div id="about">
13-
<div className="container">
14-
<div className="row">
15-
<div className="col-xs-12 col-md-6">
16-
{" "}
17-
<img src="img/about.jpg" className="img-responsive" alt="" />{" "}
12+
<div
13+
className="container"
14+
style={{
15+
width: "100%",
16+
minHeight: "700px", // optional, keeps minimum height
17+
background: "linear-gradient(to right, #0047AB 20%, white 20%)",
18+
padding: "40px 0", // some vertical spacing
19+
}}
20+
>
21+
<div className="row align-items-center">
22+
<div className="col-12 col-md-6 d-flex justify-content-center">
23+
<img
24+
src="imgs/about.jpg"
25+
className="img-fluid"
26+
alt="Jeb Bradwell"
27+
style={{ width: "80%", height: "auto" }}
28+
/>
1829
</div>
19-
<div className="col-xs-12 col-md-6">
20-
<div className="about-text">
21-
<h2>About Us</h2>
30+
<div className="col-12 col-md-6">
31+
<div
32+
className="about-text"
33+
style={{ color: "black", padding: "40px" }}
34+
>
35+
<h2>About Me</h2>
2236
<p>{props.data ? props.data.paragraph : "loading..."}</p>
23-
<h3>Why Choose Us?</h3>
37+
<h3>Why Choose Me?</h3>
2438
<div className="list-style">
25-
<div className="col-lg-6 col-sm-6 col-xs-12">
26-
<ul>
27-
{props.data
28-
? props.data.Why.map((d, i) => (
29-
<li key={`${d}-${i}`}>{d}</li>
30-
))
31-
: "loading"}
32-
</ul>
33-
</div>
34-
<div className="col-lg-6 col-sm-6 col-xs-12">
35-
<ul>
36-
{props.data
37-
? props.data.Why2.map((d, i) => (
38-
<li key={`${d}-${i}`}> {d}</li>
39-
))
40-
: "loading"}
41-
</ul>
39+
<div className="row">
40+
<div className="col-12 col-sm-6">
41+
<ul>
42+
{props.data
43+
? props.data.Why.map((d, i) => (
44+
<li key={`${d}-${i}`}>{d}</li>
45+
))
46+
: "loading"}
47+
</ul>
48+
</div>
49+
<div className="col-12 col-sm-6">
50+
<ul>
51+
{props.data
52+
? props.data.Why2.map((d, i) => (
53+
<li key={`${d}-${i}`}>{d}</li>
54+
))
55+
: "loading"}
56+
</ul>
57+
</div>
4258
</div>
4359
</div>
4460
</div>
4561
</div>
4662
</div>
4763
</div>
4864
</div>
49-
)
50-
}
65+
);
66+
};
5167

52-
export default About
68+
export default About;

‎src/components/Contact.tsx‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1+
import { faGithub, faMedium } from "@fortawesome/free-brands-svg-icons";
2+
import { faLinkedin } from "@fortawesome/free-brands-svg-icons/faLinkedin";
3+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4+
15
interface ContactProps {
26
data: {
37
address: string;
48
phone: string;
59
email: string;
6-
facebook: string;
7-
twitter: string;
8-
youtube: string;
10+
linkedin: string;
11+
github: string;
12+
medium: string;
913
};
1014
}
1115

@@ -44,20 +48,42 @@ const Contact = (props: ContactProps) => {
4448
<div className="col-md-12">
4549
<div className="row">
4650
<div className="social">
47-
<ul>
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+
>
4862
<li>
49-
<a href={props.data ? props.data.facebook : "/"}>
50-
<i className="fa fa-facebook"></i>
63+
<a href={props.data ? props.data.linkedin : "/"}>
64+
<FontAwesomeIcon
65+
icon={faLinkedin}
66+
size="5x"
67+
color="blue"
68+
/>
5169
</a>
5270
</li>
5371
<li>
54-
<a href={props.data ? props.data.twitter : "/"}>
55-
<i className="fa fa-twitter"></i>
72+
<a href={props.data ? props.data.github : "/"}>
73+
<FontAwesomeIcon
74+
icon={faGithub}
75+
size="5x"
76+
color="black"
77+
/>
5678
</a>
5779
</li>
5880
<li>
59-
<a href={props.data ? props.data.youtube : "/"}>
60-
<i className="fa fa-youtube"></i>
81+
<a href={props.data ? props.data.medium : "/"}>
82+
<FontAwesomeIcon
83+
icon={faMedium}
84+
size="5x"
85+
color="black"
86+
/>
6187
</a>
6288
</li>
6389
</ul>
@@ -67,7 +93,7 @@ const Contact = (props: ContactProps) => {
6793
</div>
6894
</div>
6995
</div>
70-
)
71-
}
96+
);
97+
};
7298

73-
export default Contact
99+
export default Contact;

‎src/components/Header.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ const Header = (props: HeaderProps) => {
2121
<div className="p-5 text-center bg-image" style={divStyle}>
2222
<div className="mask" style={maskStyle}>
2323
<div className="d-flex justify-content-center align-items-center h-100">
24-
<div className="text-info">
24+
<div className="text-black">
25+
<div style={{ padding: "40px" }}></div>
2526
<h1 className="mb-3">{props.data.title}</h1>
2627
<h4 className="mb-3">{props.data.paragraph}</h4>
2728
<a

‎src/components/Projects.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,11 @@ interface ProjectsProps {
1010

1111
const Projects = (props: ProjectsProps) => {
1212
return (
13-
<div id="portfolio" className="text-center">
13+
<div id="projects" className="text-center">
1414
<div className="container">
1515
<div className="section-title">
16-
<h2>Gallery</h2>
17-
<p>
18-
Lorem ipsum dolor sit amet, consectetur adipiscing elit duis sed
19-
dapibus leonec.
20-
</p>
16+
<h2>Projects</h2>
17+
<p>Here are some of the projects I have worked on.</p>
2118
</div>
2219
<div className="row">
2320
<div className="portfolio-items">

‎src/components/Skills.tsx‎

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,53 @@
1+
import {
2+
faBootstrap,
3+
faCss3,
4+
faGit,
5+
faGithub,
6+
faHtml5,
7+
faJs,
8+
faNodeJs,
9+
faReact,
10+
} from "@fortawesome/free-brands-svg-icons";
11+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
12+
import type { IconDefinition } from "@fortawesome/free-brands-svg-icons";
13+
14+
const iconMap: Record<string, IconDefinition> = {
15+
faHtml5: faHtml5,
16+
faCss3: faCss3,
17+
faJs: faJs,
18+
faReact: faReact,
19+
faBootstrap: faBootstrap,
20+
faNodeJs: faNodeJs,
21+
faGit: faGit,
22+
faGithub: faGithub,
23+
};
124

225
interface SkillsProps {
326
data: {
427
icon: string;
528
name: string;
629
text: string;
30+
color: string;
731
}[];
832
}
933
const Skills = (props: SkillsProps) => {
1034
return (
11-
<div id="services" className="text-center">
35+
<div id="skills" className="text-center">
1236
<div className="container">
1337
<div className="section-title">
14-
<h2>Our Services</h2>
15-
<p>
16-
Lorem ipsum dolor sit amet, consectetur adipiscing elit duis sed
17-
dapibus leonec.
18-
</p>
38+
<h2>My Skills</h2>
39+
<p>Here are some of the skills used for this site.</p>
1940
</div>
2041
<div className="row">
2142
{props.data
2243
? props.data.map((d, i) => (
23-
<div key={`${d.name}-${i}`} className="col-md-4">
44+
<div key={`${d.name}-${i}`} className="col-md-3">
2445
{" "}
25-
<i className={d.icon}></i>
46+
<FontAwesomeIcon
47+
icon={iconMap[d.icon]}
48+
size="5x"
49+
color={d.color}
50+
/>
2651
<div className="service-desc">
2752
<h3>{d.name}</h3>
2853
<p>{d.text}</p>
@@ -33,7 +58,7 @@ const Skills = (props: SkillsProps) => {
3358
</div>
3459
</div>
3560
</div>
36-
)
37-
}
61+
);
62+
};
3863

39-
export default Skills
64+
export default Skills;

0 commit comments

Comments
 (0)