c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Initial astro commit

Browse Source
This commit is contained in:
Daniel Kluge
2023-12-11 23:41:48 +01:00
commit 4671378238
81 changed files with 18248 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
src/pages/404.astro Normal file
View File

@ -0,0 +1,241 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="Not found">
<div id="wrapper">
<div id="box">
<svg viewBox="30 -20 450 280" x="0" y="0">
<!-- Box -->
<polygon
points="100,70 170,0 370,50 370,180"
style="fill:#b58747;"></polygon>
<defs>
<linearGradient
id="shadow_grad1"
x1="50%"
y1="0%"
x2="0%"
y2="50%"
>
<stop
offset="0%"
style="stop-color:#876029;stop-opacity:1"></stop>
<stop
offset="100%"
style="stop-color:#000000;stop-opacity:1"></stop>
</linearGradient>
</defs>
<defs>
<linearGradient
id="shadow_grad2"
x1="0%"
y1="0%"
x2="50%"
y2="100%"
>
<stop
offset="0%"
style="stop-color:#876029;stop-opacity:1"></stop>
<stop
offset="100%"
style="stop-color:#000000;stop-opacity:1"></stop>
</linearGradient>
</defs>
<polygon
points="100,70 170,0 330,100 300,120"
style="fill:#876029;fill:url(#shadow_grad1)"></polygon>
<polygon
points="100,70 170,0 170,130 100,200, 100,70"
style="fill:#876029;fill:url(#shadow_grad2)"></polygon>
<line
x1="170"
y1="0"
x2="370"
y2="50"
style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"
></line>
<line
x1="170"
y1="0"
x2="170"
y2="130"
style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"
></line>
<!-- Katzenschweif -->
<path
id="schweif"
d="M 280,120 C 250 100, 310 70, 320 20"
style="fill:transparent;stroke:black;stroke-width:10;stroke-linecap:round"
></path>
<!-- Box-linien -->
<polygon
points="100,70 300,120 370,50 370,180 300,250 100,200"
style="fill:#d19b4f;"></polygon>
<g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
<line x1="100" y1="70" x2="100" y2="200"></line>
<line x1="100" y1="200" x2="300" y2="250"></line>
<line x1="300" y1="250" x2="300" y2="120"></line>
<line x1="100" y1="70" x2="300" y2="120"></line>
<line x1="300" y1="120" x2="370" y2="50"></line>
<line x1="300" y1="250" x2="370" y2="180"></line>
<line x1="370" y1="50" x2="370" y2="180"></line>
</g>
<!-- Lappen-rechts -->
<polygon
points="300,120 350,150 420,80 370,50"
style="fill:#b58747;"></polygon>
<g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
<line x1="300" y1="120" x2="370" y2="50"></line>
<line x1="300" y1="120" x2="350" y2="150"></line>
<line x1="350" y1="150" x2="420" y2="80"></line>
<line x1="370" y1="50" x2="420" y2="80"></line>
</g>
<!-- Lappen-links -->
<polygon
points="100,70 50,100 120,30 170,0"
style="fill:#b58747;"></polygon>
<g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
<line x1="100" y1="70" x2="170" y2="0"></line>
<line x1="100" y1="70" x2="50" y2="100"></line>
<line x1="50" y1="100" x2="120" y2="30"></line>
<line x1="170" y1="0" x2="120" y2="30"></line>
</g>
<!-- Text -->
<text
x="120"
y="120"
style="font-size:4em;font-weight:bold;fill:#000000;transform:rotateX(40deg) rotateY(21deg);"
>404</text
>
<!-- Killeraugen -->
<ellipse
cx="275"
cy="150"
rx="32"
ry="20"
style="fill:#291e0f;transform:rotateZ(12deg)"></ellipse>
<ellipse
cx="266"
cy="153"
rx="7"
ry="5"
style="fill:#4a6b2a;transform:rotateZ(12deg)"></ellipse>
<ellipse
cx="266"
cy="153"
rx="2"
ry="5"
style="fill:#000000;transform:rotateZ(12deg)"></ellipse>
<ellipse
cx="285"
cy="153"
rx="7"
ry="5"
style="fill:#4a6b2a;transform:rotateZ(12deg)"></ellipse>
<ellipse
cx="285"
cy="153"
rx="2"
ry="5"
style="fill:#000000;transform:rotateZ(12deg)"></ellipse>
<rect
id="blinzeln"
width="40"
height="22"
x="255"
y="139"
style="fill:#291e0f;transform:rotateZ(12deg);"></rect>
</svg>
</div>
<div id="errorText">
The site you requested could not be found.<br />
<a href="/">&gt; Back to the main page &lt;</a>
</div>
</div>
</Layout>
<style>
/*.container {
background: #222222;
width: 100vw;
height: 100vh;
}*/
#errorText {
margin-top: 2vh;
color: #fff;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 150%;
}
#wrapper a:link,
#wrapper a:visited,
#wrapper a:hover,
#wrapper a:active {
color: #fff;
font-weight: bold;
text-decoration: none;
}
#wrapper {
margin: auto;
position: relative;
}
#box {
max-width: 800px;
margin: auto;
}
@keyframes schweif {
0% {
d: path("M 280,120 C 250 100, 310 70, 320 20");
}
12.5% {
d: path("M 280,120 C 260 100, 280 70, 310 20");
}
25% {
d: path("M 280,120 C 280 100, 260 70, 290 20");
}
37.5% {
d: path("M 280,120 C 280 100, 240 70, 270 20");
}
50% {
d: path("M 280,120 C 280 100, 240 70, 230 20");
}
62.5% {
d: path("M 280,120 C 270 100, 260 70, 250 20");
}
75% {
d: path("M 280,120 C 270 100, 280 70, 270 20");
}
87.5% {
d: path("M 280,120 C 250 100, 310 70, 290 20");
}
100% {
d: path("M 280,120 C 250 100, 310 70, 320 20");
}
}
#schweif {
animation-name: schweif;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#box svg:hover > #schweif {
animation-duration: 1s;
}
#blinzeln {
fill-opacity: 1;
transition: fill-opacity 0.5s;
}
#box svg:hover > #blinzeln {
fill-opacity: 0;
}
</style>

36
src/pages/blog/[diary].astro Normal file
View File

@ -0,0 +1,36 @@
---
import MarkdownLayout from "../../layouts/MarkdownLayout.astro";
import { getCollection, getEntry } from "astro:content";
import type { CollectionEntry } from "astro:content";
import DiaryNavBar from "../../components/DiaryNav/DiaryNavBar.astro";
export async function getStaticPaths() {
const collectionData = await getCollection("diaryMainPages");
return collectionData.map((entry) => ({
params: { diary: entry.slug },
}));
}
interface Props {
diary: CollectionEntry<"diaryMainPages">["slug"];
}
const { diary} = Astro.params;
const diaryMain = await getEntry("diaryMainPages", diary);
const collectionBasePath = `/blog/${diary}`;
const diaryPages = (await getCollection(diary)).sort((a, b) => a.data.sorting - b.data.sorting);
const { Content } = await diaryMain.render();
---
<MarkdownLayout title={diaryMain.data.title}>
<Content />
<h2>Pages</h2>
<ol>
{ diaryPages.map((page) => <li><a href={collectionBasePath + "/" + page.slug}>{page.data.title}</a></li>) }
</ol>
<DiaryNavBar collectionName={diary} slot="footer-nav" />
</MarkdownLayout>

33
src/pages/blog/[diary]/[entry].astro Normal file
View File

@ -0,0 +1,33 @@
---
import { getCollection } from "astro:content";
import MarkdownLayout from "../../../layouts/MarkdownLayout.astro";
import DiaryNavTop from "../../../components/DiaryNav/DiaryNavTop.astro";
import DiaryNavBar from "../../../components/DiaryNav/DiaryNavBar.astro";
export async function getStaticPaths() {
const pathsAvailable = [];
const availableCollections = await getCollection("diaryMainPages");
for (const collection of availableCollections) {
const collectionData = await getCollection(collection.slug);
for (const entry of collectionData) {
pathsAvailable.push({
params: { diary: collection.slug, entry: entry.slug },
props: { entry },
});
}
}
return pathsAvailable;
}
const { entry } = Astro.props;
const { Content } = await entry.render();
---
<MarkdownLayout title={entry.data.title}>
<DiaryNavTop collectionName="rust" slot="main-nav" />
<Content />
<DiaryNavBar collectionName="rust" slot="footer-nav" />
</MarkdownLayout>

25
src/pages/blog/[entry].astro Normal file
View File

@ -0,0 +1,25 @@
---
import { getCollection } from "astro:content";
import MarkdownLayout from "../../layouts/MarkdownLayout.astro";
export async function getStaticPaths() {
const pathsAvailable = [];
const collectionData = await getCollection("projects");
for (const entry of collectionData) {
pathsAvailable.push({
params: { entry: entry.slug },
props: { entry },
});
}
return pathsAvailable;
}
const { entry } = Astro.props;
const { Content } = await entry.render();
---
<MarkdownLayout title={entry.data.title}>
<Content />
</MarkdownLayout>

12
src/pages/copyright.astro Normal file
View File

@ -0,0 +1,12 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="Copyright">
<h1>Copyright</h1>
<p>Unless otherwise stated, all content on this website is licensed under the <a class="nocolor" rel="noreferrer" target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> license.</p>
<p>The logo (the &quot;eye&quot;) and images of my person are not licensed, all rights are reserved.</p>
<p>The <a class="nocolor" rel="noreferrer" target="_blank" href="https://materialdesignicons.com/">Material Design Icons</a> used on this website are licensed under the <a class="nocolor" rel="noreferrer" target="_blank" href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.</p>
<p>The <a class="nocolor" rel="noreferrer" target="_blank" href="">Simple Icons</a> used on this website are licensed under the <a class="nocolor" rel="noreferrer" target="_blank" href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 1.0 Universal</a> license.</p>
<p>The <a class="nocolor" rel="noreferrer" target="_blank" href="https://sass-lang.com/">SASS Logo</a> used on this website is licensed under the <a class="nocolor" rel="noreferrer" target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA 3.0</a> license.</p>
</Layout>

47
src/pages/index.astro Normal file
View File

@ -0,0 +1,47 @@
---
import ContentCard from "../components/ContentCard.astro";
import Layout from "../layouts/Layout.astro";
import { getCollection } from "astro:content";
const projects = (await getCollection("projects")).sort((a, b) => a.data.published.getTime() - b.data.published.getTime());
const diaries = (await getCollection("diaryMainPages")).sort((a, b) => a.data.lastUpdated.getTime() - b.data.lastUpdated.getTime());;
---
<Layout title="c0ntroller.de">
<h1>Hello there!</h1>
<p class="frontText">
Welcome to my website!<br />
You can find here blog entries about some projects I did and some
diaries where I document progress.<br />
Interested in me? Visit the <a href="/me" class="nocolor"
>About Me page</a
>, and you will find out more about me.<br />
On the right of the navigation, you will find what used to be my
website - a CLI you can play around with.<br /><br />
Have fun!
</p>
<h2>Projects</h2>
<div class="contentList">
{ projects.map(p => <ContentCard title={p.data.title} description={p.data.description} path={`/blog/${p.slug}`} />) }
</div>
<h2>Diaries</h2>
<div class="contentList">
{ diaries.map(p => <ContentCard title={p.data.title} description={p.data.description} path={`/blog/${p.slug}`} />) }
</div>
</Layout>
<style>
.contentList {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-evenly;
padding: 0;
}
.frontText {
font-size: 1.1em;
line-height: 1.5;
}
</style>

158
src/pages/me.astro Normal file
View File

@ -0,0 +1,158 @@
---
import { Image } from "astro:assets";
import { Icon } from "astro-icon";
import Layout from "../layouts/Layout.astro";
import SkillCard from "../components/SkillCard.astro";
import pic from "../data/me.png";
import socials from "../data/socials.json";
import skills from "../data/skills.json";
import achievements from "../data/achievements.json";
const age = new Date().getFullYear() - 1998 - (new Date().getMonth() <= 10 ? 1 : 0);
---
<Layout title="About me">
<h1>This is me.</h1>
<div class="photo">
<Image src={pic} alt="Me" />
</div>
<div class="personal">
<p class="preText">
My name is <strong>Daniel</strong> and I&apos;m a prospective <strong>automation engineer</strong>, <strong>hardware enthusiast</strong>, and <strong>software developer</strong> from Germany.<br />
I&apos;m {age} years old and studying <strong>Information Systems Engineering</strong> at <strong>TU Dresden</strong>.
</p>
<p>
To be honest, I don&apos;t really know what to write here. What could
you - some visitor of my website - possibly want to know about me?
</p><p>
Maybe you are an employer and want to know what I can do for you? Then
see below - I tried to list all my skills and achievements. If your
company is doing anything related to software development (even
low-level ones like embedded controllers), I&apos;m probably suited for
it.
</p><p>
But maybe you are just another guy on the internet browsing through my
website? Well then have fun! I hope you find what you are looking for.
If you haven&apos;t seen it already, you should check out the <a class="nocolor" href="/terminal">command line</a>
I made. Otherwise, have fun poking around in my <a class="nocolor" href="/">projects</a>.
</p><p>
Do you want to know more about my personal life? Well, I like to play
video games, and watch anime, I love cats and <a
href="https://www.reddit.com/r/blahaj"
target="_blank"
rel="noreferrer"
class="nocolor">sharks</a
>. So just your ordinary nerdy student.<br />
If you want to be even more invested in my personal life, check out my
socials below.
</p><p>
Any questions I did not cover, but you are interested in? Just contact
me <a
class="nocolor"
href="mailto:admin-website@c0ntroller.de"
rel="noreferrer"
target="_blank">via email</a
> or any of the socials below!
</p>
</div>
<h2>Social Media</h2>
<div class="socials">
{
socials
.filter((social) => social.name !== "PGP Key")
.map((social) => (
<a
href={social.url}
target="_blank"
rel="noreferrer"
class="nocolor"
style={{ width: "2em" }}
>
<Icon name={social.icon} />
</a>
))
}
</div>
<h2>Achievements</h2>
{achievements.map((achievement) => <div class="achievement">
<Icon name={achievement.icon} /><span>{achievement.description}</span>
</div>)}
<h2>Skills</h2>
{skills.cards.map((card) => <SkillCard card={card} />)}
<style lang="scss">
.personal {
p {
line-height: 1.5;
}
p:first-of-type {
font-size: 1.2em;
}
}
.achievement {
display: grid;
grid-template-columns: 2em auto;
column-gap: 10px;
padding: 5px;
padding-left: 0;
&:first-child {
height: 2em;
}
}
@keyframes barFill {
0% {
width: 1em;
}
100% {
width: var(--barPct);
}
}
.socials {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
& > * {
margin-right: 30px;
}
& > *:last-of-type {
margin-right: 0;
}
}
.photo {
float: right;
position: relative;
height: max-content;
width: 100%;
max-width: 250px;
border-radius: 1em;
margin-left: 20px;
margin-bottom: 20px;
& * {
border-radius: 1em;
width: 100%;
height: auto;
}
@media screen and (max-width: 500px) {
& {
float: none;
margin: 0 auto;
max-width: 100%;
border-radius: 1em;
margin-left: 0;
}
}
}
</style>