Compare commits
3 Commits
dafbda9509
...
c2d70f0988
Author | SHA1 | Date | |
---|---|---|---|
c2d70f0988 | |||
e339b21f66 | |||
c40af33d1d |
4136
package-lock.json
generated
4136
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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} />)}
|
||||
|
@ -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">$ </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">$ </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">$ </pre><pre class="user-cmd"></pre></pre>
|
||||
</template>
|
||||
|
||||
<div slot="after-main" class="more">
|
||||
Read more about the development of this terminal <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>
|
Loading…
Reference in New Issue
Block a user