Skip to content

Commit 1cabc6a

Browse files
aaronczichonaaronczichon
authored
Merge pull request #15 from aaronczichon/styles/cv-page
Styles/cv page
2 parents 6ab6035 + 8adbe94 commit 1cabc6a

28 files changed

+642
-156
lines changed

‎design/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "personal_website_design",
33
"version": "1.0.0",
44
"description": "HTML and CSS Elements for new personal website. Design only.",
5-
"source": "src/index-aaron.html",
5+
"source": "src/index.html",
66
"scripts": {
77
"start": "parcel",
88
"build": "parcel build",

‎design/src/cv.html

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8+
<title>Aaron Czichon</title>
9+
<link rel="stylesheet" href="./styles/index.css" />
10+
<link rel="preload" href="./assets/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin />
11+
<link rel="stylesheet" href="./styles/fonts/mona-sans.css" />
12+
<!-- <link rel="icon" href="./favicon.ico" type="image/x-icon"> -->
13+
</head>
14+
15+
<body class="container">
16+
<div class="topnav" id="myTopnav">
17+
<a href="index.html">
18+
<img src="./assets/images/profile.jpg" alt="Aaron Czichon" class="img-profile" />
19+
</a>
20+
<a href="#contact">Canada</a>
21+
<a href="blog.html">Blog</a>
22+
<a href="images.html">Images</a>
23+
<a href="map.html">Map</a>
24+
<a href="cv.html" class="active">CV</a>
25+
<a href="#about">About</a>
26+
<a href="javascript:void(0);" class="icon" onclick="toggleNav()">
27+
<?xml version="1.0" encoding="utf-8"?>
28+
<div class="icon-menu">
29+
<svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
30+
<path
31+
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"
32+
fill="#0F0F0F" />
33+
<path
34+
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"
35+
fill="#0F0F0F" />
36+
<path
37+
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"
38+
fill="#0F0F0F" />
39+
</svg>
40+
</div>
41+
</a>
42+
</div>
43+
<main>
44+
<article>
45+
<h1>My Journey</h1>
46+
<p>
47+
I started my career after school in 2010. I collected over 11 years of experience in
48+
software development, building a development team, speaking at conferences, writing
49+
articles and training people to become familiar with several web development related
50+
topics in workshops.
51+
</p>
52+
<p>
53+
It's splitted into a list of what am I doing currently and what I've done in the past. You
54+
can also download the CV as a PDF as well.
55+
</p>
56+
</article>
57+
<ol class="cv-switcher">
58+
<li><a class="active" href="?section=current">Current</a></li>
59+
<li><a href="?section=past">Past</a></li>
60+
</ol>
61+
<div class="cv-list cv-history" id="current-section">
62+
<div class="cv-item">
63+
<img src="https://directus.aaronczichon.de/assets/f42b2301-fca7-4d98-9d0e-e0fc145943bf.png" alt="Image 1" />
64+
</div>
65+
<article class="cv-item">
66+
<h1>PlanB. GmbH</h1>
67+
<h2>Senior Javascript Engineer, 08-2020 - Present</h2>
68+
<h3>Hüttlingen, Germany / Remote</h3>
69+
<p>
70+
With focus on bringing web technologies into the PlanB. Company and provide know-how and
71+
knowledge on the Javascript topic for colleagues and customers I help them to achieve
72+
more in their daily life. Building software products with our customers which are use
73+
the could platform Azure from Microsoft I building applications on top of it using
74+
modern Javascript and web technologies.
75+
</p>
76+
</article>
77+
<div class="cv-item">
78+
<img src="https://directus.aaronczichon.de/assets/f42b2301-fca7-4d98-9d0e-e0fc145943bf.png" alt="Image 1" />
79+
</div>
80+
<article class="cv-item">
81+
<h1>PlanB. GmbH</h1>
82+
<h2>Senior Javascript Engineer, 08-2020 - Present</h2>
83+
<h3>Hüttlingen, Germany / Remote</h3>
84+
<p>
85+
With focus on bringing web technologies into the PlanB. Company and provide know-how and
86+
knowledge on the Javascript topic for colleagues and customers I help them to achieve
87+
more in their daily life. Building software products with our customers which are use
88+
the could platform Azure from Microsoft I building applications on top of it using
89+
modern Javascript and web technologies.
90+
</p>
91+
</article>
92+
</div>
93+
<div class="cv-list cv-history" id="past-section"></div>
94+
</main>
95+
</body>
96+
<script>
97+
// toggles between the two states of the button
98+
const cvSwitcher = document.querySelector('.cv-switcher');
99+
cvSwitcher.addEventListener('click', (e) => {
100+
if (e.target.tagName === 'A') {
101+
cvSwitcher.querySelector('.active').classList.remove('active');
102+
e.target.classList.add('active');
103+
}
104+
});
105+
106+
//reads the query string parameter
107+
const urlParams = new URLSearchParams(window.location.search);
108+
const section = urlParams.get('section');
109+
if (!section || section === 'current') {
110+
cvSwitcher.querySelector('.active').classList.remove('active');
111+
cvSwitcher.querySelector('a').classList.add('active');
112+
document.getElementById('current-section').classList.add('active');
113+
document.getElementById('past-section').classList.remove('active');
114+
} else {
115+
cvSwitcher.querySelector('.active').classList.remove('active');
116+
cvSwitcher.querySelector('li:last-child').firstChild.classList.add('active');
117+
document.getElementById('current-section').classList.remove('active');
118+
document.getElementById('past-section').classList.add('active');
119+
}
120+
</script>
121+
122+
</html>

‎design/src/index.html

Lines changed: 123 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,129 @@
11
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Aaron Czichon</title>
8+
<link rel="stylesheet" href="./styles/index.css" />
9+
<link
10+
rel="preload"
11+
href="./assets/fonts/Mona-Sans.woff2"
12+
as="font"
13+
type="font/woff2"
14+
crossorigin
15+
/>
16+
<link rel="stylesheet" href="./styles/fonts/mona-sans.css" />
17+
<!-- <link rel="icon" href="./favicon.ico" type="image/x-icon"> -->
18+
</head>
319

4-
<head>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8-
<title>Aaron Czichon</title>
9-
<link rel="stylesheet" href="./styles/index.css" />
10-
<link rel="preload" href="./assets/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin />
11-
<link rel="stylesheet" href="./styles/fonts/mona-sans.css" />
12-
<!-- <link rel="icon" href="./favicon.ico" type="image/x-icon"> -->
13-
</head>
14-
15-
<body>
16-
<div class="container-center">
17-
<div class="topnav" id="myTopnav">
18-
<a href="index.html" class="active">
19-
<img src="./assets/images/profile.jpg" alt="Aaron Czichon" class="img-profile" />
20-
</a>
21-
<a href="#contact">Canada</a>
22-
<a href="blog.html">Blog</a>
23-
<a href="map.html">Map</a>
24-
<a href="images.html">Images</a>
25-
<a href="#about">About</a>
26-
<a href="javascript:void(0);" class="icon" onclick="toggleNav()">
27-
<?xml version="1.0" encoding="utf-8"?>
28-
<div class="icon-menu">
29-
<svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
30-
<path
31-
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"
32-
fill="#0F0F0F" />
33-
<path
34-
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"
35-
fill="#0F0F0F" />
36-
<path
37-
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"
38-
fill="#0F0F0F" />
39-
</svg>
40-
</div>
41-
</a>
20+
<body>
21+
<div class="container-center">
22+
<div class="topnav" id="myTopnav">
23+
<a href="index.html" class="active">
24+
<img src="./assets/images/profile.jpg" alt="Aaron Czichon" class="img-profile" />
25+
</a>
26+
<a href="#contact">Canada</a>
27+
<a href="blog.html">Blog</a>
28+
<a href="map.html">Map</a>
29+
<a href="images.html">Images</a>
30+
<a href="cv.html">CV</a>
31+
<a href="#about">About</a>
32+
<a href="javascript:void(0);" class="icon" onclick="toggleNav()">
33+
<?xml version="1.0" encoding="utf-8"?>
34+
<div class="icon-menu">
35+
<svg
36+
width="25px"
37+
height="25px"
38+
viewBox="0 0 24 24"
39+
fill="none"
40+
xmlns="http://www.w3.org/2000/svg"
41+
>
42+
<path
43+
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"
44+
fill="#0F0F0F"
45+
/>
46+
<path
47+
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"
48+
fill="#0F0F0F"
49+
/>
50+
<path
51+
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"
52+
fill="#0F0F0F"
53+
/>
54+
</svg>
55+
</div>
56+
</a>
57+
</div>
4258
</div>
43-
</div>
44-
<div class="hero">
45-
<img src="./assets/images/example.jpeg" />
46-
</div>
47-
<main class="container">
48-
<article>
49-
<h1>Hi I'm Aaron,</h1>
50-
I work at PlanB. GmbH since September 2020 as an Solution Expert with focus on web
51-
technologies. In previous years I worked at cellent AG as a developer and at a startup as
52-
Head of Software Development.
53-
<br /><br />
54-
Over the past few years of software development I wrote several apps, articles and talked at
55-
conferences. Since August 2022 I'm listed as an official Ionic Developer Expert (IDE).
56-
<br /><br />
57-
You can also take a look at my public Github profile or let me hear something from you on
58-
Twitter.
59-
<br /><br />
60-
Need a conversation starter? I like motorcycling, volleyball and Formula 1.
61-
<br /><br />
62-
If you have questions don't hesitate to contact me.
63-
<br /><br />
64-
Want to talk to me? Book a slot if you like. I would love to chat :)
65-
</article>
66-
<h2>Newest entries</h2>
67-
<div class="entry-grid">
68-
<a href="blog-entry.html" class="entry">
69-
<img src="./assets/images/example.jpeg" alt="Winter Days" />
70-
<h3>January 24 Winter Days<span class="entry--date">21. January 2024</span></h3>
71-
<p>Images from January took with the iPhone 15 Pro Max.</p>
72-
</a>
73-
<a href="blog-entry.html" class="entry">
74-
<img src="./assets/images/example.jpeg" alt="Winter Days" />
75-
<h3>Year Review 2023<span class="entry--date">21. January 2024</span></h3>
76-
<p>
77-
My year 2023 in review. Mostly for myself bug also I wanted to share it with the world.
78-
Maybe it's helpful.
79-
</p>
80-
</a>
81-
<a href="blog-entry.html" class="entry">
82-
<img src="./assets/images/example.jpeg" alt="Winter Days" />
83-
<h3>More than 3 years at PlanB.<span class="entry--date">21. January 2024</span></h3>
84-
<p>
85-
I work now for more than 3 years at the same company. And I hope there will be a lot to
86-
come!
87-
</p>
88-
</a>
89-
<a href="blog-entry.html" class="entry">
90-
<img src="./assets/images/example.jpeg" alt="Winter Days" />
91-
<h3>
92-
Getting started with Trapeze and Github (Part 1)<span class="entry--date">21. January 2024</span>
93-
</h3>
94-
<p>
95-
Technical blog post on how you could use Trapeze and Github to automate your release
96-
pipeline with Github Actions.
97-
</p>
98-
</a>
59+
<div class="hero">
60+
<img src="./assets/images/example.jpeg" />
9961
</div>
100-
</main>
101-
<script>
102-
function toggleNav() {
103-
var x = document.getElementById('myTopnav');
104-
if (x.className === 'topnav') {
105-
x.className += ' responsive';
106-
} else {
107-
x.className = 'topnav';
62+
<main class="container">
63+
<article>
64+
<h1>Hi I'm Aaron,</h1>
65+
I work at PlanB. GmbH since September 2020 as an Solution Expert with focus on web
66+
technologies. In previous years I worked at cellent AG as a developer and at a startup as
67+
Head of Software Development.
68+
<br /><br />
69+
Over the past few years of software development I wrote several apps, articles and talked at
70+
conferences. Since August 2022 I'm listed as an official Ionic Developer Expert (IDE).
71+
<br /><br />
72+
You can also take a look at my public Github profile or let me hear something from you on
73+
Twitter.
74+
<br /><br />
75+
Need a conversation starter? I like motorcycling, volleyball and Formula 1.
76+
<br /><br />
77+
If you have questions don't hesitate to contact me.
78+
<br /><br />
79+
Want to talk to me? Book a slot if you like. I would love to chat :)
80+
</article>
81+
<h2>Newest entries</h2>
82+
<div class="entry-grid">
83+
<a href="blog-entry.html" class="entry">
84+
<img src="./assets/images/example.jpeg" alt="Winter Days" />
85+
<h3>January 24 Winter Days<span class="entry--date">21. January 2024</span></h3>
86+
<p>Images from January took with the iPhone 15 Pro Max.</p>
87+
</a>
88+
<a href="blog-entry.html" class="entry">
89+
<img src="./assets/images/example.jpeg" alt="Winter Days" />
90+
<h3>Year Review 2023<span class="entry--date">21. January 2024</span></h3>
91+
<p>
92+
My year 2023 in review. Mostly for myself bug also I wanted to share it with the world.
93+
Maybe it's helpful.
94+
</p>
95+
</a>
96+
<a href="blog-entry.html" class="entry">
97+
<img src="./assets/images/example.jpeg" alt="Winter Days" />
98+
<h3>More than 3 years at PlanB.<span class="entry--date">21. January 2024</span></h3>
99+
<p>
100+
I work now for more than 3 years at the same company. And I hope there will be a lot to
101+
come!
102+
</p>
103+
</a>
104+
<a href="blog-entry.html" class="entry">
105+
<img src="./assets/images/example.jpeg" alt="Winter Days" />
106+
<h3>
107+
Getting started with Trapeze and Github (Part 1)<span class="entry--date"
108+
>21. January 2024</span
109+
>
110+
</h3>
111+
<p>
112+
Technical blog post on how you could use Trapeze and Github to automate your release
113+
pipeline with Github Actions.
114+
</p>
115+
</a>
116+
</div>
117+
</main>
118+
<script>
119+
function toggleNav() {
120+
var x = document.getElementById('myTopnav');
121+
if (x.className === 'topnav') {
122+
x.className += ' responsive';
123+
} else {
124+
x.className = 'topnav';
125+
}
108126
}
109-
}
110-
</script>
111-
</body>
112-
113-
</html>
127+
</script>
128+
</body>
129+
</html>

‎design/src/styles/common/code.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
pre.astro-code {
2-
line-height: 1.3em;
3-
padding-top: 8px;
4-
padding-bottom: 8px;
2+
line-height: 1.3em;
3+
padding-top: 8px;
4+
padding-bottom: 8px;
55
}
66

77
code > span {
8-
padding-left: 8px;
8+
padding-left: 8px;
99
}
1010

1111
p > code {
12-
background-color: var(--bg-color-simple-code);
13-
}
12+
background-color: var(--bg-color-simple-code);
13+
}

0 commit comments

Comments
 (0)