Skip to content

Commit

Permalink
CV Update
Browse files Browse the repository at this point in the history 
- update spacing, css a bit
- improve html structure
  • Loading branch information
@fschoenfeldt
fschoenfeldt committed Dec 2, 2024
1 parent d6ae921 commit 78a9039
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 86 deletions.
41 changes: 21 additions & 20 deletions assets/css/components/cv.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
#cv {
@apply flex flex-wrap bg-gray-700 shadow-xl
print:block print:gap-0 print:space-y-0 print:bg-transparent print:!p-0
print:shadow-none md:gap-10 md:p-10;
@apply flex flex-wrap bg-gray-700 shadow-xl md:gap-10 md:p-10 print:block print:gap-0 print:space-y-0 print:bg-transparent print:!p-0 print:shadow-none;
* {
-webkit-print-color-adjust: exact;
color-adjust: exact;
Expand All @@ -11,7 +9,7 @@
@apply text-xl font-bold;
}
h3 {
@apply text-lg;
@apply text-lg leading-6;
}
.a4 {
@screen canDisplayA4 {
Expand All @@ -37,7 +35,7 @@
}
&__side {
/* HACK: print height */
@apply flex flex-col gap-y-4 bg-gray-900 p-6 print:h-[104%] print:p-4 md:p-4;
@apply flex flex-col gap-y-8 bg-gray-900 p-6 md:p-4 print:h-[104%] print:p-4;
* {
@apply text-white;
}
Expand Down Expand Up @@ -66,28 +64,31 @@
}
}
&__text {
@apply h-full p-6 print:p-4 md:p-4 md:pb-0;
@apply h-full p-6 md:p-4 md:pb-0 print:p-4;
* {
@apply text-gray-800;
}
}
}
.projects {
@apply grid;
grid-template-rows: auto 1fr 1fr 1fr auto;
.project {
@apply h-full space-y-4 px-4 py-2;
p,
h2,
ul,
li {
@apply !text-gray-800;
}
&__header {
@apply space-y-1;
}
&__info {
@apply space-x-6 space-y-6 print:flex print:space-y-0 md:flex md:space-y-0;
grid-template-rows: auto 1fr auto;
&__list {
@apply flex h-full flex-col gap-y-8 p-4;
&__item {
@apply space-y-4;
p,
h2,
ul,
li {
@apply !text-gray-800;
}
.header {
@apply space-y-1;
}
.info {
@apply space-x-6 space-y-6 md:flex md:space-y-0 print:flex print:space-y-0;
}
}
}
}
Expand Down
133 changes: 67 additions & 66 deletions src/_includes/cv/page02_projects.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,89 +2,90 @@
<div class="bg-gray-900 p-4 print:-mt-px">
<h2 class="text-white">Portfolio Webentwicklung</h2>
</div>
<div class="project">
<div class="project__header">
<h2>Webapp „Fotohäcker“
<ul class="projects__list">
<li class="projects__list__item">
<div class="header">
<h2>Webapp „Fotohäcker“
<span class="text-base">
<a href="https://fschoenfeldt.de/fotohaecker/">Info</a> •
<a href="https://fschoenfeldt.de/fotohaecker/">Info</a> •
<a href="https://fschoenf.uber.space/fh/de_DE">Demo</a>
</span>
</h2>
<p>
</span>
</h2>
<p>
Eine auf NodeJS &amp; Express basierende Webanwendung zum Hochladen lizenzfreier Fotos. Im Rahmen des Fachs
„WWW-Programmierung“ während des Studiums entstanden. Anschließend neu aufgesetzt mit dem Elixir Phoenix Stack.
</p>
</div>
<div class="project__info">
<img class="block self-start rounded shadow-sm" src="{% getUrl project_fotohaecker | resize({ width: 300, height: 150, fit: 'contain' }) | webp %}" alt="Projekt Fotohäcker"/>
<div>
<h2>Verwendete Techniken</h2>
<ul class="list-disc list-inside">
<li>Elixir (Phoenix Framework &amp; Phoenix LiveView)</li>
<li>TailwindCSS &amp; AlpineJS (<a href="https://thinkingelixir.com/petal-stack-in-elixir/">PETAL Stack</a>)</li>
<li>SQLite</li>
<li>Phoenix </li>
<li>Jest/Playwright (End-to-End Testing inkl. a11y)</li>
<li>Deployment & Server (u.a. supervisord)</li>
</ul>
</p>
</div>
</div>
</div>
<div class="project">
<div class="project__header">
<h2>Website „Rundgang Filmanalyse“
<div class="info">
<img class="block self-start rounded shadow-sm" src="{% getUrl project_fotohaecker | resize({ width: 300, height: 150, fit: 'contain' }) | webp %}" alt="Projekt Fotohäcker"/>
<div>
<h3>Verwendete Techniken:</h3>
<ul class="list-disc list-inside text-sm">
<li>Elixir (Phoenix Framework &amp; Phoenix LiveView)</li>
<li>TailwindCSS &amp; AlpineJS (<a href="https://thinkingelixir.com/petal-stack-in-elixir/">PETAL Stack</a>)</li>
<li>SQLite</li>
<li>Jest/Playwright (End-to-End Testing inkl. a11y)</li>
<li>Deployment & Server (u.a. supervisord)</li>
</ul>
</div>
</div>
</li>
<li class="projects__list__item">
<div class="header">
<h2>Website „Rundgang Filmanalyse“
<span class="text-base">
<a href="https://fschoenfeldt.de/html/rundgang_hsfl/">(Demo)</a>
</span>
</h2>
<p>
<a href="https://fschoenfeldt.de/html/rundgang_hsfl/">Demo</a>
</span>
</h2>
<p>
Statische Website zur Darstellung verschiedener Projektergebnisse. Im Rahmen des Fachs „Filmanalyse“ während des
Studiums entstanden. Das Projekt war dazu gedacht, die Ergebnisse der Studierenden für einen digitalen Rundgang
auszustellen.
</p>
</div>
<div class="project__info">
<img class="block self-start rounded shadow-sm" src="{% getUrl project_rundgang_hsfl | resize({ width: 300, height: 150, fit: 'cover' }) | webp %}" alt="Projekt Rundgang HSFL"/>
<div>
<h2>Verwendete Techniken</h2>
<ul class="list-disc list-inside">
<li>Nodejs</li>
<li>Eleventy SSG</li>
<li>Markdown</li>
<li>Twig/Nunjucks</li>
<li>HTML+CSS</li>
</ul>
</p>
</div>
</div>
</div>
<div class="project">
<div class="project__header">
<h2>Barrierefreie Komponenten
<div class="info">
<img class="block self-start rounded shadow-sm" src="{% getUrl project_rundgang_hsfl | resize({ width: 300, height: 150, fit: 'cover' }) | webp %}" alt="Projekt Rundgang HSFL"/>
<div>
<h3>Verwendete Techniken:</h3>
<ul class="list-disc list-inside text-sm">
<li>Nodejs</li>
<li>Eleventy SSG</li>
<li>Markdown</li>
<li>Twig/Nunjucks</li>
<li>HTML+CSS</li>
</ul>
</div>
</div>
</li>
<li class="projects__list__item">
<div class="header">
<h2>Barrierefreie Komponenten
<span class="text-base">
<a href="https://github.com/fschoenfeldt/accessible_components">(Source)</a>
</span>
</h2>
<p>
<a href="https://github.com/fschoenfeldt/accessible_components">Info</a>
</span>
</h2>
<p>
Die Barrierefreien Komponenten sind ein Ergebnis meiner Bachelorthesis „Barrierefreie Webkomponenten im Bezug auf
digital-anamnestische Anwendungen“. Inhaltlich handelt es sich um verschiedene Formularelemente, die barrierefrei
dargestellt und getestet sind. Die Gestaltung der Komponenten wurde nur soweit vorgenommen, wie sie für die
Barrierefreiheit notwendig ist.
</p>
</div>
<div class="project__info">
<img class="block self-start rounded shadow-sm" src="{% getUrl project_accessible_components | resize({ width: 300, height: 150, fit: 'cover' }) | webp %}" alt="Projekt Rundgang HSFL"/>
<div>
<h2>Verwendete Techniken</h2>
<ul class="list-disc list-inside">
<li>Elixir</li>
<li>Phoenix</li>
<li>HTML+CSS</li>
<li>Axe CLI (A11Y)</li>
</ul>
</div>
</div>
</div>
<div class="border-t p-4 text-center text-gray-800">
<div class="info">
<img class="block self-start rounded shadow-sm" src="{% getUrl project_accessible_components | resize({ width: 300, height: 150, fit: 'cover' }) | webp %}" alt="Projekt Rundgang HSFL"/>
<div>
<h3>Verwendete Techniken:</h3>
<ul class="list-disc list-inside text-sm">
<li>Elixir</li>
<li>Phoenix</li>
<li>HTML+CSS</li>
<li>Axe CLI (A11Y)</li>
</ul>
</div>
</div>
</li>
</ul>
<div class="border-t p-4 py-6 text-center text-gray-800">
Mehr Projekte unter <a target="_blank" href="https://fschoenfeldt.de/">fschoenfeldt.de</a>
</div>
</section>

0 comments on commit 78a9039

Please sign in to comment.