Skip to content

Commit ead28bc

Browse files
sebastianbergesebastianberge
authored
Feat: Updated CV-section (#13)
* Change tab-title and added favicon * Updated README and added LICENSE * Feat: Remade to SPA (#9) * Feat: Added title, favicon & LICENSE. Updated README (#8) * Change tab-title and added favicon * Updated README and added LICENSE * Feat: Remade to SPA * Fix: Uodated packages * Fix: Disabled linting in workflow * Feat: Added sections * Feat: Updated CV-section
1 parent 8eea9d8 commit ead28bc

File tree

5 files changed

+258
-48
lines changed

5 files changed

+258
-48
lines changed

‎src/components/CV.js‎

Lines changed: 136 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,43 @@ import axios from "axios";
1818

1919
const CV = () => {
2020
const [posts, setPosts] = useState([]);
21-
const skills = ["React", "Node.js", "JavaScript", "HTML/CSS", "Git", "SQL"];
21+
const skills = [
22+
"React",
23+
"Node.js",
24+
"JavaScript",
25+
"HTML/CSS",
26+
"Git",
27+
"SQL",
28+
"React",
29+
"Node.js",
30+
"JavaScript",
31+
"HTML/CSS",
32+
"Git",
33+
"SQL",
34+
];
2235
const certifications = [
2336
{
24-
title: "AWS Certified Solutions Architect",
25-
issuedBy: "Amazon Web Services",
26-
date: "July 2021",
37+
title: "DevOps Engineer Expert",
38+
issuedBy: "Microsoft",
39+
date: "October 2022",
2740
url: "https://example.com/aws-cert",
2841
},
2942
{
30-
title: "Kubernetes Administrator",
31-
issuedBy: "The Linux Foundation",
32-
date: "March 2022",
43+
title: "Azure Administrator Associate",
44+
issuedBy: "Microsoft",
45+
date: "September 2022",
46+
url: "https://example.com/k8s-cert",
47+
},
48+
{
49+
title: "NSM grunnprinsipper for IKT-sikkerhet",
50+
issuedBy: "Nasjonal sikkerhetsmyndighet",
51+
date: "October 2022",
52+
url: "https://example.com/k8s-cert",
53+
},
54+
{
55+
title: "Azure Fundamentals",
56+
issuedBy: "Microsoft",
57+
date: "July 2022",
3358
url: "https://example.com/k8s-cert",
3459
},
3560
];
@@ -55,25 +80,112 @@ const CV = () => {
5580
>
5681
<Grid container spacing={3} sx={{ mb: 6 }}>
5782
<Grid item xs={12} md={4}>
58-
<Card sx={{ p: 3, height: "100%" }}>
83+
<Card
84+
sx={{
85+
p: 3,
86+
height: "100%",
87+
backgroundColor: "#333",
88+
color: "#fff",
89+
}}
90+
>
5991
<Typography variant="h5" gutterBottom>
60-
Skills
92+
Experience
6193
</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"
94+
<List>
95+
<ListItem>
96+
<ListItemText
97+
primary="Senior Cloud & DevOps Engineer – Devoteam M Cloud"
98+
secondary="2024 – Present | Frontend development using React and Node.js."
99+
primaryTypographyProps={{
100+
sx: { color: "#fff", fontWeight: "bold" },
101+
}}
102+
secondaryTypographyProps={{ sx: { color: "#fff" } }}
69103
/>
70-
))}
71-
</Stack>
104+
</ListItem>
105+
<ListItem>
106+
<ListItemText
107+
primary="Cloud Engineer – Tietoevry Tech Services"
108+
secondary="2022 – 2024 | Frontend development using React and Node.js."
109+
primaryTypographyProps={{
110+
sx: { color: "#fff", fontWeight: "bold" },
111+
}}
112+
secondaryTypographyProps={{ sx: { color: "#fff" } }}
113+
/>
114+
</ListItem>
115+
<ListItem>
116+
<ListItemText
117+
primary="Solution Consultant – Tietoevry Banking"
118+
secondary="2020 – 2022 | Frontend development using React and Node.js."
119+
primaryTypographyProps={{
120+
sx: { color: "#fff", fontWeight: "bold" },
121+
}}
122+
secondaryTypographyProps={{ sx: { color: "#fff" } }}
123+
/>
124+
</ListItem>
125+
</List>
72126
</Card>
73127
</Grid>
128+
<Grid item xs={12} md={4}>
129+
<Stack spacing={3}>
130+
<Card
131+
sx={{
132+
p: 3,
133+
height: "100%",
134+
backgroundColor: "#333",
135+
color: "#fff",
136+
}}
137+
>
138+
<Typography variant="h5" gutterBottom>
139+
Skills
140+
</Typography>
141+
<Stack direction="row" flexWrap="wrap" rowGap={1}>
142+
{skills.map((skill, i) => (
143+
<Chip
144+
key={i}
145+
label={skill}
146+
variant="outlined"
147+
sx={{ color: "#fff", borderColor: "#fff", mr: 1 }}
148+
/>
149+
))}
150+
</Stack>
151+
</Card>
152+
153+
<Card
154+
sx={{
155+
p: 3,
156+
height: "100%",
157+
backgroundColor: "#333",
158+
color: "#fff",
159+
}}
160+
>
161+
<Typography variant="h5" gutterBottom>
162+
Education
163+
</Typography>
164+
<List>
165+
<ListItem>
166+
<ListItemText
167+
primary="B.Sc. in Computer Engineering – Western Norway University of Applied Sciences"
168+
secondary="2017 – 2020"
169+
primaryTypographyProps={{
170+
sx: { color: "#fff", fontWeight: "bold" },
171+
}}
172+
secondaryTypographyProps={{ sx: { color: "#fff" } }}
173+
/>
174+
</ListItem>
175+
</List>
176+
</Card>
177+
</Stack>
178+
</Grid>
74179

75180
<Grid item xs={12} md={4}>
76-
<Card sx={{ p: 3, height: "100%" }}>
181+
<Card
182+
sx={{
183+
p: 3,
184+
height: "100%",
185+
backgroundColor: "#333",
186+
color: "#fff",
187+
}}
188+
>
77189
<Typography variant="h5" gutterBottom>
78190
Certifications
79191
</Typography>
@@ -87,38 +199,20 @@ const CV = () => {
87199
Issued by {cert.issuedBy}, {cert.date}
88200
<br />
89201
<Link href={cert.url} target="_blank" rel="noopener">
90-
View Certificate
202+
View →
91203
</Link>
92204
</>
93205
}
206+
primaryTypographyProps={{
207+
sx: { color: "#fff", fontWeight: "bold" },
208+
}}
209+
secondaryTypographyProps={{ sx: { color: "#ccc" } }}
94210
/>
95211
</ListItem>
96212
))}
97213
</List>
98214
</Card>
99215
</Grid>
100-
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>
122216
</Grid>
123217
</Box>
124218
<Button

‎src/components/Navbar.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@ const Navbar = () => {
2323
<Button color="inherit" href="#cv-section">
2424
CV
2525
</Button>
26-
<Button color="inherit">Blog</Button>
2726
<Button color="inherit" href="#projects-section">
2827
Projects
2928
</Button>
29+
<Button color="inherit" href="#social-section">
30+
Connect
31+
</Button>
3032
</Box>
3133
</Toolbar>
3234
</AppBar>

‎src/components/Projects.js‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,14 @@ const Projects = () => {
5757
>
5858
<Grid container spacing={3} sx={{ mb: 6 }}>
5959
<Grid item xs={12} md={4}>
60-
<Card sx={{ p: 3, height: "100%" }}>
60+
<Card
61+
sx={{
62+
p: 3,
63+
height: "100%",
64+
backgroundColor: "#fff",
65+
color: "#333",
66+
}}
67+
>
6168
<Typography variant="h5" gutterBottom>
6269
Skills
6370
</Typography>
@@ -75,7 +82,14 @@ const Projects = () => {
7582
</Grid>
7683

7784
<Grid item xs={12} md={4}>
78-
<Card sx={{ p: 3, height: "100%" }}>
85+
<Card
86+
sx={{
87+
p: 3,
88+
height: "100%",
89+
backgroundColor: "#fff",
90+
color: "#333",
91+
}}
92+
>
7993
<Typography variant="h5" gutterBottom>
8094
Certifications
8195
</Typography>
@@ -101,7 +115,14 @@ const Projects = () => {
101115
</Grid>
102116

103117
<Grid item xs={12} md={4}>
104-
<Card sx={{ p: 3, height: "100%" }}>
118+
<Card
119+
sx={{
120+
p: 3,
121+
height: "100%",
122+
backgroundColor: "#fff",
123+
color: "#333",
124+
}}
125+
>
105126
<Typography variant="h5" gutterBottom>
106127
Experience & Education
107128
</Typography>
@@ -126,7 +147,7 @@ const Projects = () => {
126147
<Button
127148
variant="contained"
128149
color="inherit"
129-
href="#projects-section"
150+
href="#social-section"
130151
sx={{
131152
position: "absolute",
132153
bottom: 40,
@@ -140,7 +161,7 @@ const Projects = () => {
140161
},
141162
}}
142163
>
143-
Button ↓
164+
Connect ↓
144165
</Button>
145166
</Box>
146167
);

‎src/components/Social.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
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 Social = () => {
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="social-section"
40+
sx={{
41+
minHeight: "100vh",
42+
backgroundColor: "#fff", // white background
43+
color: "#444", // dark gray text
44+
display: "flex",
45+
flexDirection: "column",
46+
alignItems: "center",
47+
justifyContent: "center",
48+
textAlign: "center",
49+
px: 2,
50+
}}
51+
>
52+
<Typography variant="h4" gutterBottom>
53+
Connect with Me
54+
</Typography>
55+
<Stack direction="row" spacing={2}>
56+
<Button
57+
variant="contained"
58+
href="https://github.com/sebastianberge"
59+
target="_blank"
60+
sx={{
61+
backgroundColor: "#333",
62+
color: "#fff",
63+
"&:hover": {
64+
backgroundColor: "#fff",
65+
color: "#333",
66+
},
67+
}}
68+
>
69+
GitHub
70+
</Button>
71+
<Button
72+
variant="contained"
73+
href="https://www.linkedin.com/in/sebastian-berge-05b53548/"
74+
target="_blank"
75+
sx={{
76+
backgroundColor: "#333",
77+
color: "#fff",
78+
"&:hover": {
79+
backgroundColor: "#fff",
80+
color: "#333",
81+
},
82+
}}
83+
>
84+
LinkedIn
85+
</Button>
86+
</Stack>
87+
</Box>
88+
);
89+
};
90+
91+
export default Social;

0 commit comments

Comments
 (0)