Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add experience section #23

Merged
merged 4 commits into from
Feb 17, 2024
Merged

add experience section #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9ec9acf
update packages
chraebsli Feb 17, 2024
af26348
add experience section
chraebsli Feb 17, 2024
6ad8b5e
fix brand link
chraebsli Feb 17, 2024
b8de757
update analytics
chraebsli Feb 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,898 changes: 1,695 additions & 1,203 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,10 @@
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.6",
"@mui/lab": "^5.0.0-alpha.165",
"@mui/material": "^5.10.6",
"@vercel/analytics": "^1.0.1",
"@vercel/analytics": "^1.1.2",
"@vercel/speed-insights": "^1.0.9",
"axios": "^0.27.2",
"bootstrap": "^5.2.1",
"i18next": "^21.9.2",
Expand Down
14 changes: 0 additions & 14 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,6 @@
<body>
<div id="root"></div>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GA_TRACKING_ID%"></script>
<script>
window.dataLayer = window.dataLayer || [];

function gtag() {
dataLayer.push(arguments);
}

gtag("js", new Date());

gtag("config", "%REACT_APP_GA_TRACKING_ID%");
</script>

<!-- Digistats.ch -->
<script data-host="https://digistats.ch" data-dnt="false" src="https://www.digistats.ch/js/script.js" id="%REACT_APP_DIGISTATS_ID%" async defer></script>
</body>
Expand Down
3 changes: 2 additions & 1 deletion src/components/common/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { Sections } from "../../type/page";
const sections = [
{key: "welcome", href: `#${Sections.Welcome}`},
{key: "about", href: `#${Sections.About}`},
{key: "experience", href: `#${Sections.Experience}`},
{key: "skills", href: `#${Sections.Skills}`},
{key: "stats", href: `#${Sections.Stats}`},
{key: "social", href: `#${Sections.Social}`},
Expand All @@ -24,7 +25,7 @@ export default function Header({toggleTheme, checked}: Props) {
<AppBar position="fixed" enableColorOnDark>
<Container>
<Navbar collapseOnSelect expand="md" bg="none" variant="dark">
<Navbar.Brand href="/">
<Navbar.Brand href="#">
<Image src="/assets/logo-white-transparent.svg" alt="logo" width={50} height={50} />
<Typography component="span" variant="h6" sx={{marginLeft: "1rem"}}>
{t("header.title")}
Expand Down
12 changes: 12 additions & 0 deletions src/components/experience/Timeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { default as MuiTimeline } from "@mui/lab/Timeline";

type Props = {
children: React.ReactNode;
}
export default function Timeline({children}: Props) {
return (
<MuiTimeline position="alternate">
{children}
</MuiTimeline>
);
}
29 changes: 29 additions & 0 deletions src/components/experience/TimelineItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { default as MuiTimelineItem } from "@mui/lab/TimelineItem";
import TimelineSeparator from "@mui/lab/TimelineSeparator";
import TimelineConnector from "@mui/lab/TimelineConnector";
import TimelineContent from "@mui/lab/TimelineContent";
import TimelineOppositeContent from "@mui/lab/TimelineOppositeContent";
import TimelineDot from "@mui/lab/TimelineDot";
import { TimelineItem as TimelineItemType } from "@type/timeline";
import { Typography } from "@mui/material";

type Props = {
item: TimelineItemType;
}
export default function TimelineItem({item}: Props) {
return (
<MuiTimelineItem>
<TimelineOppositeContent color="text.secondary">
<Typography>{item.from} — {item.to}</Typography>
</TimelineOppositeContent>
<TimelineSeparator>
<TimelineDot color="primary" />
<TimelineConnector color="primary" />
</TimelineSeparator>
<TimelineContent>
<Typography variant="h6" component="span">{item.company}</Typography>
<Typography>{item.type}</Typography>
</TimelineContent>
</MuiTimelineItem>
);
}
10 changes: 7 additions & 3 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
// styles
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles/main.sass";
import { SpeedInsights } from "@vercel/speed-insights/react";

// components
import Header from "./components/common/Header";
Expand All @@ -22,6 +23,7 @@ import Skills from "./layouts/Skills";
import Stats from "./layouts/Stats";
import Social from "./layouts/Social";
import Error404 from "./layouts/error/404";
import Experience from "./layouts/Experience";

const light = createTheme({
palette: {
Expand Down Expand Up @@ -77,9 +79,10 @@ function App() {
const sections = [
<Welcome key={1} />,
<About key={2} />,
<Skills key={3} />,
<Stats key={4} />,
<Social key={5} />,
<Experience key={3} />,
<Skills key={4} />,
<Stats key={5} />,
<Social key={6} />,
];

return (
Expand All @@ -102,6 +105,7 @@ function App() {
<Box sx={{height: "150px", marginTop: "3rem"}} />
<Footer />
<ScrollToTop />
<SpeedInsights />
</ThemeProvider>
);
}
Expand Down
50 changes: 50 additions & 0 deletions src/layouts/Experience.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { Typography } from "@mui/material";
import { SectionTitle } from "../components/common/Text";
import { useTranslation } from "react-i18next";
import Section from "../components/common/Section";
import { Sections } from "../type/page";
import WorkIcon from "@mui/icons-material/Work";
import { default as TimelineC } from "../components/experience/Timeline";
import TimelineItem from "../components/experience/TimelineItem";
import { TimelineItem as TimelineItemType } from "@type/timeline";

export default function Experience() {
const {t} = useTranslation("sections");

const timelineItems: TimelineItemType[] = [
{
from: "2020",
to: t(`${Sections.Experience}.dates.today`),
type: t(`${Sections.Experience}.types.apprenticeship`),
company: "Technische Fachschule Bern",
},
{
from: "2019",
to: "2020",
type: t(`${Sections.Experience}.types.gymnasium`),
company: "Gymnasium Oberaargau",
},
{
from: "2017",
to: "2019",
type: t(`${Sections.Experience}.types.school`),
company: "Oberstufenzentrum Wiedlisbach",
},
];

return (
<Section name={Sections.Experience}>
<SectionTitle>
<WorkIcon fontSize="inherit" /> {t(`${Sections.Experience}.title`)}
</SectionTitle>
<Typography>
{t(`${Sections.Experience}.description`)}
</Typography>
<TimelineC>
{timelineItems.map((item, i) => (
<TimelineItem key={i} item={item} />
))}
</TimelineC>
</Section>
);
}
13 changes: 13 additions & 0 deletions src/locales/de.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export default function de(): Translation {
links: {
welcome: "Willkommen",
about: "Über",
experience: "Ausbildung",
skills: "Skills",
stats: "Statistik",
social: "Socials",
Expand Down Expand Up @@ -41,6 +42,18 @@ export default function de(): Translation {
"Welche Dienstleistungen ich anbiete, findest du auf <a href='https://chraebsli.dev'>https://chraebsli.dev</a>.",
],
},
experience: {
title: "Ausbildung",
description: "Hier ist meine Ausbildung:",
dates: {
today: "heute",
},
types: {
apprenticeship: "Lehre als Informatiker EFZ",
gymnasium: "Gymnasium als 9. Klasse",
school: "7. & 8. Klasse Sekundarstufe",
},
},
skills: {
title: "Skills",
description: "Das sind meine technischen Skills:",
Expand Down
13 changes: 13 additions & 0 deletions src/locales/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export default function en(): Translation {
links: {
welcome: "Welcome",
about: "About",
experience: "Education",
skills: "Skills",
stats: "Stats",
social: "Socials",
Expand Down Expand Up @@ -41,6 +42,18 @@ export default function en(): Translation {
"You can find out which services I offer at <a href='https://chraebsli.dev'>https://chraebsli.dev</a>.",
],
},
experience: {
title: "Education",
description: "Here is my education:",
dates: {
today: "today",
},
types: {
apprenticeship: "Apprenticeship as a computer specialist EFZ",
gymnasium: "Gymnasium as 9th grade",
school: "Secondary school 7th & 8th grade",
},
},
skills: {
title: "Skills",
description: "These are my technical skills:",
Expand Down
1 change: 1 addition & 0 deletions src/type/page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export enum Sections {
Welcome = "welcome",
About = "about",
Experience = "experience",
Skills = "skills",
Stats = "stats",
Social = "social",
Expand Down
8 changes: 8 additions & 0 deletions src/type/timeline.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export class TimelineItem {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (llm): Defining TimelineItem as a class is a good approach for type safety and encapsulation. However, if this class does not utilize lifecycle methods or state, converting it to an interface or type might be more efficient and align better with the functional programming style often used in React projects.

constructor(
public readonly from: string,
public readonly to: string,
public readonly type: string,
public readonly company: string,
) {}
}
13 changes: 13 additions & 0 deletions src/type/translation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export type Translation = {
links: {
welcome: string,
about: string,
experience: string,
skills: string,
stats: string,
social: string,
Expand All @@ -30,6 +31,18 @@ export type Translation = {
title: string,
description: string[],
},
experience: {
title: string,
description: string,
dates: {
today: string,
},
types: {
apprenticeship: string,
gymnasium: string,
school: string,
},
},
skills: {
title: string,
description: string,
Expand Down
Loading