Compare commits

...

3 Commits

Author SHA1 Message Date
c2d70f0988
Astro audit
Some checks failed
Deploy Astro / Build and Deploy (push) Has been cancelled
2024-03-03 16:06:35 +01:00
e339b21f66
Uniform icon size class 2024-03-03 15:58:24 +01:00
c40af33d1d
Upgrade astro 2024-03-03 15:49:13 +01:00
9 changed files with 2516 additions and 1695 deletions

4136
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -10,10 +10,10 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.3.1",
"@astrojs/mdx": "^1.1.5",
"@astrojs/check": "^0.5.6",
"@astrojs/mdx": "^2.1.1",
"@c0ntroller/wasm-terminal": ">=0.1.0",
"astro": "^3.6.0",
"astro": "^4.4.9",
"astro-icon": "^1.1.0",
"sass": "^1.69.5",
"typescript": "^5.3.2"

View File

@ -3,15 +3,11 @@ import { Image } from "astro:assets";
import { Icon } from "astro-icon/components";
import ThemeSwitch from "./ThemeSwitch.astro";
import logo from "./logo.png";
const defaultFontSize = 16;
// 120%, 2em
const svgSize = defaultFontSize * 1.2 * 2;
---
<nav class="navigation">
<a href="/" class="nostyle imgContainer">
<Image src={logo} alt="Logo" class="logoImg" />
<Image src={logo} alt="Logo" class="logoImg" loading="eager" />
</a>
<div class="navLink">
<a href="/" class="nostyle">
@ -19,9 +15,9 @@ const svgSize = defaultFontSize * 1.2 * 2;
<span class="linkIcon"
><Icon
name="mdi:home"
size={svgSize}
title="Home and Projects"
id="mdi_nav_home"
class="icon-2em"
/></span
>
</a>
@ -32,7 +28,7 @@ const svgSize = defaultFontSize * 1.2 * 2;
<span class="linkIcon"
><Icon
name="mdi:account"
size={svgSize}
class="icon-2em"
title="About Me"
id="mdi_nav_aboutme"
/></span
@ -44,7 +40,7 @@ const svgSize = defaultFontSize * 1.2 * 2;
<a href="/terminal" class="nostyle">
<Icon
name="mdi:console"
size={svgSize}
class="icon-2em"
title="Terminal"
id="mdi_nav_terminal"
/>

View File

@ -3,9 +3,9 @@ import { Icon } from "astro-icon/components";
---
<div class="switch" transition:persist="theme-switch">
<Icon name="mdi:language-javascript" title="Theme switching needs JS to be enabled." data-theme-ph />
<Icon name="mdi:white-balance-sunny" title="Switch to dark theme" data-theme-sun />
<Icon name="mdi:weather-night" title="Switch to light theme" data-theme-moon />
<Icon name="mdi:language-javascript" title="Theme switching needs JS to be enabled." data-theme-ph class="icon-15em" />
<Icon name="mdi:white-balance-sunny" title="Switch to dark theme" data-theme-sun class="icon-15em" />
<Icon name="mdi:weather-night" title="Switch to light theme" data-theme-moon class="icon-15em" />
</div>
<script>

View File

@ -40,7 +40,7 @@ const cardStyle = {
.map((skill) => (
<div class="skillBar">
<div class="barName">
<Icon name={skill.icon} />
<Icon name={skill.icon} class="icon-2em" />
</div>
<div
class="percentBar"
@ -61,7 +61,7 @@ const cardStyle = {
<>
<div class="badge">
<span>
<Icon name={additional.icon} />
<Icon name={additional.icon} class="icon-1em" />
</span>
<span>{additional.name}</span>
</div>
@ -202,7 +202,6 @@ const cardStyle = {
}
& > div:first-of-type {
height: 2em;
grid-row: 1/3;
}

View File

@ -137,8 +137,8 @@ const { title, showAfterMain, mainTransitionName } = Astro.props;
<span class="divider">|</span>
{socials.flatMap((social, i) => (
i !== 0 ?
[<span class="divider">|</span>, <a href={social.url} target="_blank" rel="noreferrer" class="socialIcon"><Icon name={social.icon} title={social.name} /></a>] :
[<a href={social.url} target="_blank" rel="noreferrer" class="socialIcon"><Icon name={social.icon} title={social.name} /></a>]
[<span class="divider">|</span>, <a href={social.url} target="_blank" rel="noreferrer" class="socialIcon"><Icon name={social.icon} title={social.name} class="socialIcon" /></a>] :
[<a href={social.url} target="_blank" rel="noreferrer" class="socialIcon"><Icon name={social.icon} title={social.name} class="socialIcon" /></a>]
))}
<span class="divider">|</span>
<a class="nocolor" target="_blank" href="mailto:admin-website@c0ntroller.de" rel="noreferrer">Contact</a>
@ -304,4 +304,20 @@ const { title, showAfterMain, mainTransitionName } = Astro.props;
h6 {
color: var(--blog_color-accent-dark);
}
.icon-1em {
height: 1em;
width: 1em;
}
.icon-15em {
height: 1.5em;
width: 1.5em;
}
.icon-2em {
height: 2em;
width: 2em;
}
</style>

View File

@ -24,7 +24,7 @@ const gitUrl = `https://git.c0ntroller.de/c0ntroller/frontpage/src/branch/dev/sr
{ moreLinks && moreLinks.length !== 0 ?
<div class="more">
{ moreLinks.map(l => <a href={l.href} referrerpolicy="no-referrer" class="nostyle" style={{ display: "inline-block", width: "2em" }}><Icon name={l.icon} /></a>) }
{ moreLinks.map(l => <a href={l.href} referrerpolicy="no-referrer" class="nostyle"><Icon name={l.icon} class="icon-2em" /></a>) }
</div>
: null}
<h1 transition:name={`markdown-title-${slug}`}>{title}</h1>

View File

@ -15,7 +15,7 @@ const age = new Date().getFullYear() - 1998 - (new Date().getMonth() <= 10 ? 1 :
<Layout title="About me">
<h1>This is me.</h1>
<div class="photo">
<Image src={pic} alt="Me" />
<Image src={pic} alt="Me" loading="eager" />
</div>
<div class="personal">
<p class="preText">
@ -67,16 +67,16 @@ const age = new Date().getFullYear() - 1998 - (new Date().getMonth() <= 10 ? 1 :
target="_blank"
rel="noreferrer"
class="nocolor"
style={{ width: "2em" }}
aria-label={`Link to my ${social.name} profile`}
>
<Icon name={social.icon} />
<Icon name={social.icon} class="icon-2em" />
</a>
))
}
</div>
<h2>Achievements</h2>
{achievements.map((achievement) => <div class="achievement">
<Icon name={achievement.icon} /><span>{achievement.description}</span>
<Icon name={achievement.icon} class="icon-2em" /><span>{achievement.description}</span>
</div>)}
<h2>Skills</h2>
{skills.cards.map((card) => <SkillCard card={card} />)}

View File

@ -7,7 +7,7 @@ const screenVersion = `${date.getFullYear()}${date.getMonth()+1}${date.getDate()
const wasmVersion = wasmData.version;
---
<Layout title="Terminal">
<Layout title="Terminal" showAfterMain>
<div class="screen" data-terminal-screen>
<div data-terminal-output>
<noscript><pre>You need to enable JavaScript to use this terminal.</pre></noscript>
@ -29,12 +29,16 @@ const wasmVersion = wasmData.version;
@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</pre>
</div>
<div class="input"><pre class="user">user@cer0</pre><pre>:</pre><pre class="pwd">/</pre><pre class="dollar">$&nbsp;</pre><input type="text" data-terminal-input autofocus /></div>
<div class="input"><pre class="user">user@cer0</pre><pre>:</pre><pre class="pwd">/</pre><pre class="dollar">$&nbsp;</pre><input type="text" data-terminal-input /></div>
</div>
<template data-terminal-user-cmd>
<pre><pre class="user">user@cer0</pre><pre>:</pre><pre class="pwd"></pre><pre class="dollar">$&nbsp;</pre><pre class="user-cmd"></pre></pre>
</template>
<div slot="after-main" class="more">
Read more about the development of this terminal&nbsp;<a href="/blog/wasm-terminal" class="nocolor">here</a>.
</div>
</Layout>
<script>
@ -184,4 +188,12 @@ const wasmVersion = wasmData.version;
}
}
.more {
display: flex;
justify-content: center;
align-items: center;
font-style: italic;
padding: 5px;
}
</style>