Skip to content

Commit

Permalink
content: added cv page to the website
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronczichon
aaronczichon committed Apr 15, 2024
1 parent 4a481a1 commit 42bb51f
Show file tree
Hide file tree
Showing 15 changed files with 385 additions and 133 deletions.
243 changes: 112 additions & 131 deletions design/src/cv.html
View file
Original file line number Diff line number Diff line change
@@ -1,141 +1,122 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Aaron Czichon</title>
<link rel="stylesheet" href="./styles/index.css" />
<link
rel="preload"
href="./assets/fonts/Mona-Sans.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link rel="stylesheet" href="./styles/fonts/mona-sans.css" />
<!-- <link rel="icon" href="./favicon.ico" type="image/x-icon"> -->
</head>

<body class="container">
<div class="topnav" id="myTopnav">
<a href="index.html">
<img src="./assets/images/profile.jpg" alt="Aaron Czichon" class="img-profile" />
</a>
<a href="#contact">Canada</a>
<a href="blog.html">Blog</a>
<a href="images.html">Images</a>
<a href="map.html">Map</a>
<a href="cv.html" class="active">CV</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="toggleNav()">
<?xml version="1.0" encoding="utf-8"?>
<div class="icon-menu">
<svg
width="25px"
height="25px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 12C1 11.4477 1.44772 11 2 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H2C1.44772 13 1 12.5523 1 12Z"
fill="#0F0F0F"
/>
<path
d="M1 4C1 3.44772 1.44772 3 2 3H22C22.5523 3 23 3.44772 23 4C23 4.55228 22.5523 5 22 5H2C1.44772 5 1 4.55228 1 4Z"
fill="#0F0F0F"
/>
<path
d="M1 20C1 19.4477 1.44772 19 2 19H22C22.5523 19 23 19.4477 23 20C23 20.5523 22.5523 21 22 21H2C1.44772 21 1 20.5523 1 20Z"
fill="#0F0F0F"
/>
</svg>
</div>
</a>
</div>
<main>
<article>
<h1>My Journey</h1>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Aaron Czichon</title>
<link rel="stylesheet" href="./styles/index.css" />
<link rel="preload" href="./assets/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="./styles/fonts/mona-sans.css" />
<!-- <link rel="icon" href="./favicon.ico" type="image/x-icon"> -->
</head>

<body class="container">
<div class="topnav" id="myTopnav">
<a href="index.html">
<img src="./assets/images/profile.jpg" alt="Aaron Czichon" class="img-profile" />
</a>
<a href="#contact">Canada</a>
<a href="blog.html">Blog</a>
<a href="images.html">Images</a>
<a href="map.html">Map</a>
<a href="cv.html" class="active">CV</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="toggleNav()">
<?xml version="1.0" encoding="utf-8"?>
<div class="icon-menu">
<svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1 12C1 11.4477 1.44772 11 2 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H2C1.44772 13 1 12.5523 1 12Z"
fill="#0F0F0F" />
<path
d="M1 4C1 3.44772 1.44772 3 2 3H22C22.5523 3 23 3.44772 23 4C23 4.55228 22.5523 5 22 5H2C1.44772 5 1 4.55228 1 4Z"
fill="#0F0F0F" />
<path
d="M1 20C1 19.4477 1.44772 19 2 19H22C22.5523 19 23 19.4477 23 20C23 20.5523 22.5523 21 22 21H2C1.44772 21 1 20.5523 1 20Z"
fill="#0F0F0F" />
</svg>
</div>
</a>
</div>
<main>
<article>
<h1>My Journey</h1>
<p>
I started my career after school in 2010. I collected over 11 years of experience in
software development, building a development team, speaking at conferences, writing
articles and training people to become familiar with several web development related
topics in workshops.
</p>
<p>
It's splitted into a list of what am I doing currently and what I've done in the past. You
can also download the CV as a PDF as well.
</p>
</article>
<ol class="cv-switcher">
<li><a class="active" href="?section=current">Current</a></li>
<li><a href="?section=past">Past</a></li>
</ol>
<div class="cv-list cv-history" id="current-section">
<div class="cv-item">
<img src="https://directus.aaronczichon.de/assets/f42b2301-fca7-4d98-9d0e-e0fc145943bf.png" alt="Image 1" />
</div>
<article class="cv-item">
<h1>PlanB. GmbH</h1>
<h2>Senior Javascript Engineer, 08-2020 - Present</h2>
<h3>Hüttlingen, Germany / Remote</h3>
<p>
I started my career after school in 2010. I collected over 11 years of experience in
software development, building a development team, speaking at conferences, writing
articles and training people to become familiar with several web development related
topics in workshops.
With focus on bringing web technologies into the PlanB. Company and provide know-how and
knowledge on the Javascript topic for colleagues and customers I help them to achieve
more in their daily life. Building software products with our customers which are use
the could platform Azure from Microsoft I building applications on top of it using
modern Javascript and web technologies.
</p>
</article>
<div class="cv-item">
<img src="https://directus.aaronczichon.de/assets/f42b2301-fca7-4d98-9d0e-e0fc145943bf.png" alt="Image 1" />
</div>
<article class="cv-item">
<h1>PlanB. GmbH</h1>
<h2>Senior Javascript Engineer, 08-2020 - Present</h2>
<h3>Hüttlingen, Germany / Remote</h3>
<p>
It's splitted into a list of what am I doing currently and what I've done in the past. You
can also download the CV as a PDF as well.
With focus on bringing web technologies into the PlanB. Company and provide know-how and
knowledge on the Javascript topic for colleagues and customers I help them to achieve
more in their daily life. Building software products with our customers which are use
the could platform Azure from Microsoft I building applications on top of it using
modern Javascript and web technologies.
</p>
</article>
<ol class="cv-switcher">
<li><a class="active" href="?section=current">Current</a></li>
<li><a href="?section=past">Past</a></li>
</ol>
<div class="cv-list cv-history" id="current-section">
<div class="cv-item">
<img
src="https://directus.aaronczichon.de/assets/f42b2301-fca7-4d98-9d0e-e0fc145943bf.png"
alt="Image 1"
/>
</div>
<article class="cv-item">
<h1>PlanB. GmbH</h1>
<h2>Senior Javascript Engineer, 08-2020 - Present</h2>
<h3>Hüttlingen, Germany / Remote</h3>
<p>
With focus on bringing web technologies into the PlanB. Company and provide know-how and
knowledge on the Javascript topic for colleagues and customers I help them to achieve
more in their daily life. Building software products with our customers which are use
the could platform Azure from Microsoft I building applications on top of it using
modern Javascript and web technologies.
</p>
</article>
<div class="cv-item">
<img
src="https://directus.aaronczichon.de/assets/f42b2301-fca7-4d98-9d0e-e0fc145943bf.png"
alt="Image 1"
/>
</div>
<article class="cv-item">
<h1>PlanB. GmbH</h1>
<h2>Senior Javascript Engineer, 08-2020 - Present</h2>
<h3>Hüttlingen, Germany / Remote</h3>
<p>
With focus on bringing web technologies into the PlanB. Company and provide know-how and
knowledge on the Javascript topic for colleagues and customers I help them to achieve
more in their daily life. Building software products with our customers which are use
the could platform Azure from Microsoft I building applications on top of it using
modern Javascript and web technologies.
</p>
</article>
</div>
<div class="cv-list cv-history" id="past-section">Past</div>
</main>
</body>
<script>
// toggles between the two states of the button
const cvSwitcher = document.querySelector('.cv-switcher');
cvSwitcher.addEventListener('click', (e) => {
if (e.target.tagName === 'A') {
cvSwitcher.querySelector('.active').classList.remove('active');
e.target.classList.add('active');
}
});

//reads the query string parameter
const urlParams = new URLSearchParams(window.location.search);
const section = urlParams.get('section');
if (!section || section === 'current') {
cvSwitcher.querySelector('.active').classList.remove('active');
cvSwitcher.querySelector('a').classList.add('active');
document.getElementById('current-section').classList.add('active');
document.getElementById('past-section').classList.remove('active');
} else {
</div>
<div class="cv-list cv-history" id="past-section"></div>
</main>
</body>
<script>
// toggles between the two states of the button
const cvSwitcher = document.querySelector('.cv-switcher');
cvSwitcher.addEventListener('click', (e) => {
if (e.target.tagName === 'A') {
cvSwitcher.querySelector('.active').classList.remove('active');
cvSwitcher.querySelector('li:last-child').firstChild.classList.add('active');
document.getElementById('current-section').classList.remove('active');
document.getElementById('past-section').classList.add('active');
e.target.classList.add('active');
}
</script>
</html>
});

//reads the query string parameter
const urlParams = new URLSearchParams(window.location.search);
const section = urlParams.get('section');
if (!section || section === 'current') {
cvSwitcher.querySelector('.active').classList.remove('active');
cvSwitcher.querySelector('a').classList.add('active');
document.getElementById('current-section').classList.add('active');
document.getElementById('past-section').classList.remove('active');
} else {
cvSwitcher.querySelector('.active').classList.remove('active');
cvSwitcher.querySelector('li:last-child').firstChild.classList.add('active');
document.getElementById('current-section').classList.remove('active');
document.getElementById('past-section').classList.add('active');
}
</script>

</html>
60 changes: 60 additions & 0 deletions personal/src/components/CVList.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
import { getCollection } from "astro:content";
const allCvEntries = await getCollection("cv");
const currentEntries = allCvEntries
.filter((entry) => entry.data.type === "current")
.sort((a, b) => {
return a.data.order > b.data.order ? 1 : -1;
});
const pastEntries = allCvEntries
.filter((entry) => entry.data.type === "past")
.sort((a, b) => {
return a.data.order > b.data.order ? 1 : -1;
});
---

<div class="cv-list cv-history" id="current-section">
{
currentEntries.map((entry) => (
<>
<div class="cv-item">
<img
src={`https://directus.aaronczichon.de/assets/${entry.data.image.assetId}?w=150`}
alt="Logo"
/>
</div>
<article class="cv-item">
<h1>{entry.data.title}</h1>
<h2>
{entry.data.position}, {entry.data.timeframe}
</h2>
<h3>{entry.data.location}</h3>
{entry.body}
</article>
</>
))
}
</div>
<div class="cv-list cv-history" id="past-section">
{
pastEntries.map((entry) => (
<>
<div class="cv-item">
<img
src={`https://directus.aaronczichon.de/assets/${entry.data.image.assetId}?w=150`}
alt="Logo"
/>
</div>
<article class="cv-item">
<h1>{entry.data.title}</h1>
<h2>
{entry.data.position}, {entry.data.timeframe}
</h2>
<h3>{entry.data.location}</h3>
{entry.body}
</article>
</>
))
}
</div>
5 changes: 3 additions & 2 deletions personal/src/components/Nav.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,12 @@ import { Image } from "astro:assets";
<!-- <a href="/map" class={currentPath.indexOf("map") > -1 ? "active" : ""}
>Map</a
> -->
<a
<!-- <a
href="https://directus.aaronczichon.de/assets/073083ac-df38-4a56-b268-c1f045e9cef2"
target="_blank"
class={currentPath.indexOf("cv") > -1 ? "active" : ""}>CV</a
>
> -->
<a href="/cv/" class={currentPath.indexOf("cv") > -1 ? "active" : ""}>CV</a>
<!-- <a
href="/pengiun"
class={currentPath.indexOf("pengiun") > -1 ? "active" : ""}
Expand Down
20 changes: 20 additions & 0 deletions personal/src/content/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,28 @@ const blogCollection = defineCollection({
description: z.string(),
}),
});

const cvCollection = defineCollection({
type: 'content', // v2.5.0 and later
schema: ({ image }) =>
z.object({
title: z.string(),
position: z.string(),
timeframe: z.string(),
location: z.string(),
order: z.number(),
type: z.ZodEnum.create(['current', 'past']),
image: z
.object({
assetId: z.string(),
alt: z.string(),
})
.optional()
}),
});
// 3. Export a single `collections` object to register your collection(s)
// This key should match your collection directory name in "src/content"
export const collections = {
blog: blogCollection,
cv: cvCollection,
};
13 changes: 13 additions & 0 deletions personal/src/content/cv/cellent-developer.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
title: "cellent AG / cellent GmbH"
position: "Developer"
timeframe: "03-2016 - 09-2017"
location: "Aalen, Germany"
order: 2
type: "past"
image:
assetId: "18cc81d4-8120-4c7a-8dac-26394dabc708.svg"
alt: "cellent Logo"
---

As developer I got the main responsible for web technologies at the Cellent AG. The company was/is a mainly Microsoft focused consulting company. I switch early to the web technology track and used at customers projects web technologies and frameworks. I also taught customers and internal colleagues for the new frameworks and possibilities with Javascript. Projects includes customers like Carl Zeiss, Boehringer Ingelheim, Daimler and many more.
13 changes: 13 additions & 0 deletions personal/src/content/cv/cellent-trainee.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
title: "cellent AG / cellent GmbH"
position: "Apprenticeship"
timeframe: "09-2010 - 07-2013"
location: "Aalen, Germany"
order: 4
type: "past"
image:
assetId: "18cc81d4-8120-4c7a-8dac-26394dabc708.svg"
alt: "cellent Logo"
---

The apprenticeship included basic knowledge of multiple programming languages, software architecture, computer science and network technology. It also included trainings on informatics consulting and supporting.
Loading

0 comments on commit 42bb51f

Please sign in to comment.