Skip to content

Commit 1f70eee

Browse files
sebastianbergesebastianberge
committed
Feat: Added sections
1 parent a536bad commit 1f70eee

File tree

5 files changed

+271
-63
lines changed

5 files changed

+271
-63
lines changed

‎src/components/AboutMe.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const AboutMe = () => {
3636

3737
return (
3838
<Box
39+
id="aboutme-section"
3940
sx={{
4041
height: "100vh",
4142
backgroundImage: "url('/images/bergen.jpeg')",
@@ -76,15 +77,15 @@ const AboutMe = () => {
7677
<Button
7778
variant="contained"
7879
color="inherit"
79-
href="#next-section"
80+
href="#cv-section"
8081
sx={{
8182
position: "absolute",
8283
bottom: 40,
83-
backgroundColor: "#333",
84-
color: "#fff",
84+
backgroundColor: "#fff",
85+
color: "#333",
8586
"&:hover": {
86-
backgroundColor: "#fff",
87-
color: "#333",
87+
backgroundColor: "#333",
88+
color: "#fff",
8889
},
8990
}}
9091
>

‎src/components/CV.js‎

Lines changed: 103 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
22
import {
33
Box,
44
Typography,
5+
Button,
56
Grid,
67
Card,
78
CardContent,
@@ -34,64 +35,111 @@ const CV = () => {
3435
];
3536

3637
return (
37-
<Box sx={{ p: 4, maxWidth: "900px", mx: "auto" }}>
38-
{/* Skills */}
39-
<Box mb={5}>
40-
<Typography variant="h5" gutterBottom>
41-
Skills
42-
</Typography>
43-
<Stack direction="row" spacing={1} flexWrap="wrap">
44-
{skills.map((skill, i) => (
45-
<Chip key={i} label={skill} color="primary" variant="outlined" />
46-
))}
47-
</Stack>
48-
</Box>
38+
<Box
39+
id="cv-section"
40+
sx={{
41+
minHeight: "100vh",
42+
position: "relative",
43+
display: "flex",
44+
alignItems: "center",
45+
justifyContent: "center",
46+
px: 2,
47+
}}
48+
>
49+
<Box
50+
sx={{
51+
maxWidth: "1200px",
52+
width: "100%",
53+
mx: "auto",
54+
}}
55+
>
56+
<Grid container spacing={3} sx={{ mb: 6 }}>
57+
<Grid item xs={12} md={4}>
58+
<Card sx={{ p: 3, height: "100%" }}>
59+
<Typography variant="h5" gutterBottom>
60+
Skills
61+
</Typography>
62+
<Stack direction="row" spacing={1} flexWrap="wrap">
63+
{skills.map((skill, i) => (
64+
<Chip
65+
key={i}
66+
label={skill}
67+
color="primary"
68+
variant="outlined"
69+
/>
70+
))}
71+
</Stack>
72+
</Card>
73+
</Grid>
4974

50-
{/* Certifications */}
51-
<Box mb={5}>
52-
<Typography variant="h5" gutterBottom>
53-
Certifications
54-
</Typography>
55-
<List>
56-
{certifications.map((cert, i) => (
57-
<ListItem key={i}>
58-
<ListItemText
59-
primary={cert.title}
60-
secondary={
61-
<>
62-
Issued by {cert.issuedBy}, {cert.date}
63-
<br />
64-
<Link href={cert.url} target="_blank" rel="noopener">
65-
View Certificate
66-
</Link>
67-
</>
68-
}
69-
/>
70-
</ListItem>
71-
))}
72-
</List>
73-
</Box>
75+
<Grid item xs={12} md={4}>
76+
<Card sx={{ p: 3, height: "100%" }}>
77+
<Typography variant="h5" gutterBottom>
78+
Certifications
79+
</Typography>
80+
<List>
81+
{certifications.map((cert, i) => (
82+
<ListItem key={i}>
83+
<ListItemText
84+
primary={cert.title}
85+
secondary={
86+
<>
87+
Issued by {cert.issuedBy}, {cert.date}
88+
<br />
89+
<Link href={cert.url} target="_blank" rel="noopener">
90+
View Certificate
91+
</Link>
92+
</>
93+
}
94+
/>
95+
</ListItem>
96+
))}
97+
</List>
98+
</Card>
99+
</Grid>
74100

75-
{/* CV Summary */}
76-
<Box mb={5}>
77-
<Typography variant="h5" gutterBottom>
78-
Experience & Education
79-
</Typography>
80-
<List>
81-
<ListItem>
82-
<ListItemText
83-
primary="Software Developer – Tech Solutions Inc."
84-
secondary="2020 – Present | Frontend development using React and Node.js."
85-
/>
86-
</ListItem>
87-
<ListItem>
88-
<ListItemText
89-
primary="B.Sc. in Computer Science – University of Tech"
90-
secondary="2014 – 2018"
91-
/>
92-
</ListItem>
93-
</List>
101+
<Grid item xs={12} md={4}>
102+
<Card sx={{ p: 3, height: "100%" }}>
103+
<Typography variant="h5" gutterBottom>
104+
Experience & Education
105+
</Typography>
106+
<List>
107+
<ListItem>
108+
<ListItemText
109+
primary="Software Developer – Tech Solutions Inc."
110+
secondary="2020 – Present | Frontend development using React and Node.js."
111+
/>
112+
</ListItem>
113+
<ListItem>
114+
<ListItemText
115+
primary="B.Sc. in Computer Science – University of Tech"
116+
secondary="2014 – 2018"
117+
/>
118+
</ListItem>
119+
</List>
120+
</Card>
121+
</Grid>
122+
</Grid>
94123
</Box>
124+
<Button
125+
variant="contained"
126+
color="inherit"
127+
href="#projects-section"
128+
sx={{
129+
position: "absolute",
130+
bottom: 40,
131+
left: "50%",
132+
transform: "translateX(-50%)",
133+
backgroundColor: "#333",
134+
color: "#fff",
135+
"&:hover": {
136+
backgroundColor: "#fff",
137+
color: "#333",
138+
},
139+
}}
140+
>
141+
Projects ↓
142+
</Button>
95143
</Box>
96144
);
97145
};

‎src/components/Navbar.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,16 @@ const Navbar = () => {
1717
Sebastian Berge
1818
</Typography>
1919
<Box>
20-
<Button color="inherit">About Me</Button>
20+
<Button color="inherit" href="#aboutme-section">
21+
About Me
22+
</Button>
23+
<Button color="inherit" href="#cv-section">
24+
CV
25+
</Button>
2126
<Button color="inherit">Blog</Button>
22-
<Button color="inherit">CV</Button>
23-
<Button color="inherit">Projects</Button>
27+
<Button color="inherit" href="#projects-section">
28+
Projects
29+
</Button>
2430
</Box>
2531
</Toolbar>
2632
</AppBar>

‎src/components/Projects.js‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import React, { useEffect, useState } from "react";
2+
import {
3+
Box,
4+
Typography,
5+
Button,
6+
Grid,
7+
Card,
8+
CardContent,
9+
Avatar,
10+
Chip,
11+
Stack,
12+
List,
13+
ListItem,
14+
ListItemText,
15+
Link,
16+
} from "@mui/material";
17+
import axios from "axios";
18+
19+
const Projects = () => {
20+
const [posts, setPosts] = useState([]);
21+
const skills = ["React", "Node.js", "JavaScript", "HTML/CSS", "Git", "SQL"];
22+
const certifications = [
23+
{
24+
title: "AWS Certified Solutions Architect",
25+
issuedBy: "Amazon Web Services",
26+
date: "July 2021",
27+
url: "https://example.com/aws-cert",
28+
},
29+
{
30+
title: "Kubernetes Administrator",
31+
issuedBy: "The Linux Foundation",
32+
date: "March 2022",
33+
url: "https://example.com/k8s-cert",
34+
},
35+
];
36+
37+
return (
38+
<Box
39+
id="projects-section"
40+
sx={{
41+
minHeight: "100vh",
42+
position: "relative",
43+
display: "flex",
44+
alignItems: "center",
45+
justifyContent: "center",
46+
px: 2,
47+
backgroundColor: "#333",
48+
color: "#fff",
49+
}}
50+
>
51+
<Box
52+
sx={{
53+
maxWidth: "1200px",
54+
width: "100%",
55+
mx: "auto",
56+
}}
57+
>
58+
<Grid container spacing={3} sx={{ mb: 6 }}>
59+
<Grid item xs={12} md={4}>
60+
<Card sx={{ p: 3, height: "100%" }}>
61+
<Typography variant="h5" gutterBottom>
62+
Skills
63+
</Typography>
64+
<Stack direction="row" spacing={1} flexWrap="wrap">
65+
{skills.map((skill, i) => (
66+
<Chip
67+
key={i}
68+
label={skill}
69+
color="primary"
70+
variant="outlined"
71+
/>
72+
))}
73+
</Stack>
74+
</Card>
75+
</Grid>
76+
77+
<Grid item xs={12} md={4}>
78+
<Card sx={{ p: 3, height: "100%" }}>
79+
<Typography variant="h5" gutterBottom>
80+
Certifications
81+
</Typography>
82+
<List>
83+
{certifications.map((cert, i) => (
84+
<ListItem key={i}>
85+
<ListItemText
86+
primary={cert.title}
87+
secondary={
88+
<>
89+
Issued by {cert.issuedBy}, {cert.date}
90+
<br />
91+
<Link href={cert.url} target="_blank" rel="noopener">
92+
View Certificate
93+
</Link>
94+
</>
95+
}
96+
/>
97+
</ListItem>
98+
))}
99+
</List>
100+
</Card>
101+
</Grid>
102+
103+
<Grid item xs={12} md={4}>
104+
<Card sx={{ p: 3, height: "100%" }}>
105+
<Typography variant="h5" gutterBottom>
106+
Experience & Education
107+
</Typography>
108+
<List>
109+
<ListItem>
110+
<ListItemText
111+
primary="Software Developer – Tech Solutions Inc."
112+
secondary="2020 – Present | Frontend development using React and Node.js."
113+
/>
114+
</ListItem>
115+
<ListItem>
116+
<ListItemText
117+
primary="B.Sc. in Computer Science – University of Tech"
118+
secondary="2014 – 2018"
119+
/>
120+
</ListItem>
121+
</List>
122+
</Card>
123+
</Grid>
124+
</Grid>
125+
</Box>
126+
<Button
127+
variant="contained"
128+
color="inherit"
129+
href="#projects-section"
130+
sx={{
131+
position: "absolute",
132+
bottom: 40,
133+
left: "50%",
134+
transform: "translateX(-50%)",
135+
backgroundColor: "#fff",
136+
color: "#333",
137+
"&:hover": {
138+
backgroundColor: "#333",
139+
color: "#fff",
140+
},
141+
}}
142+
>
143+
Button ↓
144+
</Button>
145+
</Box>
146+
);
147+
};
148+
149+
export default Projects;

‎src/pages/Home.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import {
1414
Link,
1515
} from "@mui/material";
1616
import AboutMe from "../components/AboutMe";
17+
import CV from "../components/CV";
18+
import Projects from "../components/Projects";
1719
import axios from "axios";
1820

1921
const Home = () => {
@@ -45,6 +47,8 @@ const Home = () => {
4547
return (
4648
<React.Fragment>
4749
<AboutMe />
50+
<CV />
51+
<Projects />
4852
</React.Fragment>
4953
);
5054
};

0 commit comments

Comments
 (0)