Skip to content

Commit ca368b4

Browse files
jebarpgjebarpg
committed
Work In Progress Getting main page layout completed
1 parent 27d0fa9 commit ca368b4

File tree

15 files changed

+809
-18
lines changed

15 files changed

+809
-18
lines changed

‎package-lock.json‎

Lines changed: 294 additions & 4 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 & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,16 @@
1212
"dependencies": {
1313
"bootstrap": "^5.3.8",
1414
"react": "^19.1.1",
15-
"react-dom": "^19.1.1"
15+
"react-bootstrap": "^2.10.10",
16+
"react-dom": "^19.1.1",
17+
"smooth-scroll": "^16.1.3"
1618
},
1719
"devDependencies": {
1820
"@eslint/js": "^9.36.0",
1921
"@types/node": "^24.6.0",
2022
"@types/react": "^19.1.16",
2123
"@types/react-dom": "^19.1.9",
24+
"@types/smooth-scroll": "^16.1.4",
2225
"@vitejs/plugin-react": "^5.0.4",
2326
"eslint": "^9.36.0",
2427
"eslint-plugin-react-hooks": "^5.2.0",

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

1.11 MB
Loading

‎src/App.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+

‎src/App.tsx‎

Lines changed: 72 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,79 @@
1-
import './App.css'
1+
import "./App.css";
2+
import { useState, useEffect } from "react";
3+
import Header from "./components/Header";
4+
import Footer from "./components/Footer";
5+
import Navigation from "./components/Navigation";
6+
import JsonData from "./data/data.json";
27

8+
import SmoothScroll from "smooth-scroll";
9+
10+
// eslint-disable-next-line react-refresh/only-export-components
11+
export const scroll = new SmoothScroll('a[href*="#"]', {
12+
speed: 1000,
13+
speedAsDuration: true,
14+
});
15+
16+
interface LandingPageData {
17+
Header: {
18+
title: string;
19+
paragraph: string;
20+
};
21+
About: {
22+
paragraph: string;
23+
Why: string[];
24+
Why2: string[];
25+
};
26+
Skills: {
27+
icon: string;
28+
name: string;
29+
text: string;
30+
}[];
31+
Projects: {
32+
title: string;
33+
largeImage: string;
34+
smallImage: string;
35+
}[];
36+
Contact: {
37+
address: string;
38+
phone: string;
39+
email: string;
40+
facebook: string;
41+
twitter: string;
42+
youtube: string;
43+
};
44+
}
345
function App() {
4-
46+
const [landingPageData, setLandingPageData] = useState<LandingPageData>({
47+
Header: {
48+
title: "",
49+
paragraph: "",
50+
},
51+
About: {
52+
paragraph: "",
53+
Why: [],
54+
Why2: [],
55+
},
56+
Skills: [],
57+
Projects: [],
58+
Contact: {
59+
address: "",
60+
phone: "",
61+
email: "",
62+
facebook: "",
63+
twitter: "",
64+
youtube: "",
65+
},
66+
});
67+
useEffect(() => {
68+
return setLandingPageData(JsonData);
69+
}, []);
570
return (
671
<>
7-
<h1>Hello World!</h1>
8-
<a href="enemyGenerator/" target="_blank" rel="noopener noreferrer">Enemy Generator</a>
72+
<Navigation />
73+
<Header data={landingPageData.Header} />
74+
<Footer />
975
</>
10-
)
76+
);
1177
}
1278

13-
export default App
79+
export default App;

‎src/components/About.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
2+
interface AboutProps {
3+
data: {
4+
paragraph: string;
5+
Why: string[];
6+
Why2: string[];
7+
};
8+
}
9+
10+
const About = (props: AboutProps) => {
11+
return (
12+
<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="" />{" "}
18+
</div>
19+
<div className="col-xs-12 col-md-6">
20+
<div className="about-text">
21+
<h2>About Us</h2>
22+
<p>{props.data ? props.data.paragraph : "loading..."}</p>
23+
<h3>Why Choose Us?</h3>
24+
<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>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
)
50+
}
51+
52+
export default About

‎src/components/Contact.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
interface ContactProps {
2+
data: {
3+
address: string;
4+
phone: string;
5+
email: string;
6+
facebook: string;
7+
twitter: string;
8+
youtube: string;
9+
};
10+
}
11+
12+
const Contact = (props: ContactProps) => {
13+
return (
14+
<div>
15+
<div id="contact">
16+
<div className="container">
17+
<div className="col-md-3 col-md-offset-1 contact-info">
18+
<div className="contact-item">
19+
<h3>Contact Info</h3>
20+
<p>
21+
<span>
22+
<i className="fa fa-map-marker"></i> Address
23+
</span>
24+
{props.data ? props.data.address : "loading"}
25+
</p>
26+
</div>
27+
<div className="contact-item">
28+
<p>
29+
<span>
30+
<i className="fa fa-phone"></i> Phone
31+
</span>{" "}
32+
{props.data ? props.data.phone : "loading"}
33+
</p>
34+
</div>
35+
<div className="contact-item">
36+
<p>
37+
<span>
38+
<i className="fa fa-envelope-o"></i> Email
39+
</span>{" "}
40+
{props.data ? props.data.email : "loading"}
41+
</p>
42+
</div>
43+
</div>
44+
<div className="col-md-12">
45+
<div className="row">
46+
<div className="social">
47+
<ul>
48+
<li>
49+
<a href={props.data ? props.data.facebook : "/"}>
50+
<i className="fa fa-facebook"></i>
51+
</a>
52+
</li>
53+
<li>
54+
<a href={props.data ? props.data.twitter : "/"}>
55+
<i className="fa fa-twitter"></i>
56+
</a>
57+
</li>
58+
<li>
59+
<a href={props.data ? props.data.youtube : "/"}>
60+
<i className="fa fa-youtube"></i>
61+
</a>
62+
</li>
63+
</ul>
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
)
71+
}
72+
73+
export default Contact

‎src/components/Footer.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const Footer = () => {
2+
return (
3+
<footer className="text-center mt-5">
4+
<p style={{ fontSize: "12px", color: "#888" }}>
5+
Photo by{" "}
6+
<a href="https://unsplash.com/@nordwood?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
7+
NordWood Themes
8+
</a>{" "}
9+
on{" "}
10+
<a href="https://unsplash.com/photos/person-wearing-watch-near-laptop-kRNZiGKtz48?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
11+
Unsplash
12+
</a>
13+
</p>
14+
<div className="container text-center">
15+
<p>&copy; 2025. Design by {"Jeb Bradwell"}</p>
16+
</div>
17+
</footer>
18+
);
19+
};
20+
21+
export default Footer;

‎src/components/Header.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
interface HeaderProps {
2+
data: {
3+
title: string;
4+
paragraph: string;
5+
};
6+
}
7+
const Header = (props: HeaderProps) => {
8+
const divStyle: React.CSSProperties = {
9+
backgroundImage: "url('imgs/nordwood-themes-kRNZiGKtz48-unsplash.jpg')",
10+
height: "400px",
11+
backgroundSize: "cover",
12+
backgroundPosition: "center",
13+
backgroundRepeat: "no-repeat",
14+
};
15+
16+
const maskStyle: React.CSSProperties = {
17+
backgroundColor: "rgba(0, 0, 0, 0)",
18+
};
19+
20+
return (
21+
<div className="p-5 text-center bg-image" style={divStyle}>
22+
<div className="mask" style={maskStyle}>
23+
<div className="d-flex justify-content-center align-items-center h-100">
24+
<div className="text-info">
25+
<h1 className="mb-3">{props.data.title}</h1>
26+
<h4 className="mb-3">{props.data.paragraph}</h4>
27+
<a
28+
data-mdb-ripple-init
29+
className="btn btn-outline-dark btn-lg"
30+
href="#projects"
31+
role="button"
32+
>
33+
Projects
34+
</a>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
);
40+
};
41+
42+
export default Header;

‎src/components/Image.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
interface ImageProps {
2+
title: string;
3+
largeImage: string;
4+
smallImage: string;
5+
}
6+
export const Image = ({ title, largeImage, smallImage }: ImageProps) => {
7+
return (
8+
<div className="portfolio-item">
9+
<div className="hover-bg">
10+
{" "}
11+
<a href={largeImage} title={title} data-lightbox-gallery="gallery1">
12+
<div className="hover-text">
13+
<h4>{title}</h4>
14+
</div>
15+
<img src={smallImage} className="img-responsive" alt={title} />{" "}
16+
</a>{" "}
17+
</div>
18+
</div>
19+
);
20+
};

0 commit comments

Comments
 (0)