Initial website
This commit is contained in:
Moritz Hölting
commit
26a33f29ef
|
|
@ -0,0 +1,21 @@
|
|||
# build output
|
||||
dist/
|
||||
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"recommendations": ["astro-build.astro-vscode", "unifiedjs.vscode-mdx"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "./node_modules/.bin/astro dev",
|
||||
"name": "Development server",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"[astro]": {
|
||||
"editor.defaultFormatter": "astro-build.astro-vscode"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { defineConfig } from "astro/config";
|
||||
import mdx from "@astrojs/mdx";
|
||||
import sitemap from "@astrojs/sitemap";
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import solidJs from "@astrojs/solid-js";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://hoelting.dev",
|
||||
trailingSlash: "always",
|
||||
integrations: [
|
||||
mdx(),
|
||||
sitemap(),
|
||||
solidJs(),
|
||||
tailwind({ applyBaseStyles: false }),
|
||||
],
|
||||
});
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"name": "portfolio",
|
||||
"type": "module",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"dev:network": "astro dev --host",
|
||||
"start": "astro dev",
|
||||
"build": "astro check && astro build",
|
||||
"preview": "astro preview",
|
||||
"preview:network": "astro preview --host",
|
||||
"astro": "astro",
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint . --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.5.10",
|
||||
"@astrojs/mdx": "^2.2.4",
|
||||
"@astrojs/rss": "^4.0.5",
|
||||
"@astrojs/sitemap": "^3.1.2",
|
||||
"@astrojs/solid-js": "^4.0.1",
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"@tailwindcss/typography": "^0.5.12",
|
||||
"astro": "^4.5.16",
|
||||
"clsx": "^2.1.0",
|
||||
"fuse.js": "^7.0.0",
|
||||
"sharp": "^0.33.3",
|
||||
"solid-js": "^1.8.16",
|
||||
"tailwind-merge": "^2.2.2",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"typescript": "^5.4.4"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,12 @@
|
|||
function animate() {
|
||||
const animateElements = document.querySelectorAll('.animate')
|
||||
|
||||
animateElements.forEach((element, index) => {
|
||||
setTimeout(() => {
|
||||
element.classList.add('show')
|
||||
}, index * 150)
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", animate)
|
||||
document.addEventListener("astro:after-swap", animate)
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
|
||||
function generateParticles(n) {
|
||||
let value = `${getRandom(2560)}px ${getRandom(2560)}px #000`;
|
||||
for (let i = 2; i <= n; i++) {
|
||||
value += `, ${getRandom(2560)}px ${getRandom(2560)}px #000`;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function generateStars(n) {
|
||||
let value = `${getRandom(2560)}px ${getRandom(2560)}px #fff`;
|
||||
for (let i = 2; i <= n; i++) {
|
||||
value += `, ${getRandom(2560)}px ${getRandom(2560)}px #fff`;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function getRandom(max) {
|
||||
return Math.floor(Math.random() * max);
|
||||
}
|
||||
|
||||
function initBG() {
|
||||
const particlesSmall = generateParticles(1000);
|
||||
const particlesMedium = generateParticles(500);
|
||||
const particlesLarge = generateParticles(250);
|
||||
const particles1 = document.getElementById('particles1');
|
||||
const particles2 = document.getElementById('particles2');
|
||||
const particles3 = document.getElementById('particles3');
|
||||
|
||||
if (particles1) {
|
||||
particles1.style.cssText = `
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${particlesSmall};
|
||||
animation: animStar 50s linear infinite;
|
||||
`;
|
||||
}
|
||||
|
||||
if (particles2) {
|
||||
particles2.style.cssText = `
|
||||
width: 1.5px;
|
||||
height: 1.5px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${particlesMedium};
|
||||
animation: animateParticle 100s linear infinite;
|
||||
`;
|
||||
}
|
||||
|
||||
if (particles3) {
|
||||
particles3.style.cssText = `
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${particlesLarge};
|
||||
animation: animateParticle 150s linear infinite;
|
||||
`;
|
||||
}
|
||||
|
||||
const starsSmall = generateStars(1000);
|
||||
const starsMedium = generateStars(500);
|
||||
const starsLarge = generateStars(250);
|
||||
const stars1 = document.getElementById('stars1');
|
||||
const stars2 = document.getElementById('stars2');
|
||||
const stars3 = document.getElementById('stars3');
|
||||
|
||||
if (stars1) {
|
||||
stars1.style.cssText = `
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${starsSmall};
|
||||
`;
|
||||
}
|
||||
|
||||
if (stars2) {
|
||||
stars2.style.cssText = `
|
||||
width: 1.5px;
|
||||
height: 1.5px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${starsMedium};
|
||||
`;
|
||||
}
|
||||
|
||||
if (stars3) {
|
||||
stars3.style.cssText = `
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${starsLarge};
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('astro:after-swap', initBG);
|
||||
initBG();
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
function onScroll() {
|
||||
const header = document.getElementById("header")
|
||||
if (window.scrollY > 0) {
|
||||
header.classList.add("scrolled")
|
||||
} else {
|
||||
header.classList.remove("scrolled")
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("scroll", onScroll)
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
function changeTheme() {
|
||||
const element = document.documentElement
|
||||
const theme = element.classList.contains("dark") ? "light" : "dark"
|
||||
|
||||
const css = document.createElement("style")
|
||||
|
||||
css.appendChild(
|
||||
document.createTextNode(
|
||||
`* {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
-ms-transition: none !important;
|
||||
transition: none !important;
|
||||
}`,
|
||||
),
|
||||
)
|
||||
document.head.appendChild(css)
|
||||
|
||||
if (theme === "dark") {
|
||||
element.classList.add("dark")
|
||||
} else {
|
||||
element.classList.remove("dark")
|
||||
}
|
||||
|
||||
window.getComputedStyle(css).opacity
|
||||
document.head.removeChild(css)
|
||||
localStorage.theme = theme
|
||||
}
|
||||
|
||||
function preloadTheme() {
|
||||
const theme = (() => {
|
||||
const userTheme = localStorage.theme
|
||||
|
||||
if (userTheme === "light" || userTheme === "dark") {
|
||||
return userTheme
|
||||
} else {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
|
||||
}
|
||||
})()
|
||||
|
||||
const element = document.documentElement
|
||||
|
||||
if (theme === "dark") {
|
||||
element.classList.add("dark")
|
||||
} else {
|
||||
element.classList.remove("dark")
|
||||
}
|
||||
|
||||
localStorage.theme = theme
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
function initializeThemeButtons() {
|
||||
const headerThemeButton = document.getElementById("header-theme-button")
|
||||
const drawerThemeButton = document.getElementById("drawer-theme-button")
|
||||
headerThemeButton?.addEventListener("click", changeTheme)
|
||||
drawerThemeButton?.addEventListener("click", changeTheme)
|
||||
}
|
||||
|
||||
document.addEventListener("astro:after-swap", initializeThemeButtons)
|
||||
initializeThemeButtons()
|
||||
}
|
||||
|
||||
document.addEventListener("astro:after-swap", preloadTheme)
|
||||
|
||||
preloadTheme()
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<symbol id="email" viewBox="0 0 512 512">
|
||||
<path d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"/>
|
||||
</symbol>
|
||||
<symbol id="github" viewBox="0 0 496 512">
|
||||
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
|
||||
</symbol>
|
||||
<symbol id="linkedin" viewBox="0 0 448 512">
|
||||
<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
|
||||
</symbol>
|
||||
<symbol id="twitter-x" viewBox="0 0 512 512">
|
||||
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -0,0 +1,27 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- astro icon -->
|
||||
<symbol id="astro" viewBox="0 0 85 107">
|
||||
<path d="M27.5894 91.1365C22.7555 86.7178 21.3444 77.4335 23.3583 70.7072C26.8503 74.948 31.6888 76.2914 36.7005 77.0497C44.4375 78.2199 52.0359 77.7822 59.2232 74.2459C60.0454 73.841 60.8052 73.3027 61.7036 72.7574C62.378 74.714 62.5535 76.6892 62.318 78.6996C61.7452 83.5957 59.3086 87.3778 55.4332 90.2448C53.8835 91.3916 52.2437 92.4167 50.6432 93.4979C45.7262 96.8213 44.3959 100.718 46.2435 106.386C46.2874 106.525 46.3267 106.663 46.426 107C43.9155 105.876 42.0817 104.24 40.6845 102.089C39.2087 99.8193 38.5066 97.3081 38.4696 94.5909C38.4511 93.2686 38.4511 91.9345 38.2733 90.6309C37.8391 87.4527 36.3471 86.0297 33.5364 85.9478C30.6518 85.8636 28.37 87.6469 27.7649 90.4554C27.7187 90.6707 27.6517 90.8837 27.5847 91.1341L27.5894 91.1365Z" fill="#F041FF"/>
|
||||
<path d="M0 69.5866C0 69.5866 14.3139 62.6137 28.6678 62.6137L39.4901 29.1204C39.8953 27.5007 41.0783 26.3999 42.4139 26.3999C43.7495 26.3999 44.9325 27.5007 45.3377 29.1204L56.1601 62.6137C73.1601 62.6137 84.8278 69.5866 84.8278 69.5866C84.8278 69.5866 60.5145 3.35233 60.467 3.21944C59.7692 1.2612 58.5911 0 57.0029 0H27.8274C26.2392 0 25.1087 1.2612 24.3634 3.21944C24.3108 3.34983 0 69.5866 0 69.5866Z" fill="currentColor"/>
|
||||
</symbol>
|
||||
|
||||
<!-- javascript icon -->
|
||||
<symbol id="javascript" viewBox="0 0 630 630">
|
||||
<rect width="630" height="630" fill="#f7df1e"/>
|
||||
<path fill="black" d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/>
|
||||
</symbol>
|
||||
|
||||
<!-- typescript icon -->
|
||||
<symbol id="typescript" fill="none" viewBox="0 0 512 512">
|
||||
<rect fill="#3178c6" height="512" rx="50" width="512"/>
|
||||
<rect fill="#3178c6" height="512" rx="50" width="512"/>
|
||||
<path clip-rule="evenodd" fill="#fff" fill-rule="evenodd" d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z"/>
|
||||
</symbol>
|
||||
|
||||
<!-- tailwind icon -->
|
||||
<symbol id="tailwind" viewBox="0 0 47 40" fill="none">
|
||||
<path fill="#6366f1" d="M23.5 6.5C17.5 6.5 13.75 9.5 12.25 15.5C14.5 12.5 17.125 11.375 20.125 12.125C21.8367 12.5529 23.0601 13.7947 24.4142 15.1692C26.6202 17.4084 29.1734 20 34.75 20C40.75 20 44.5 17 46 11C43.75 14 41.125 15.125 38.125 14.375C36.4133 13.9471 35.1899 12.7053 33.8357 11.3308C31.6297 9.09158 29.0766 6.5 23.5 6.5ZM12.25 20C6.25 20 2.5 23 1 29C3.25 26 5.875 24.875 8.875 25.625C10.5867 26.0529 11.8101 27.2947 13.1642 28.6693C15.3702 30.9084 17.9234 33.5 23.5 33.5C29.5 33.5 33.25 30.5 34.75 24.5C32.5 27.5 29.875 28.625 26.875 27.875C25.1633 27.4471 23.9399 26.2053 22.5858 24.8307C20.3798 22.5916 17.8266 20 12.25 20Z"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
|
|
@ -0,0 +1,87 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- menu -->
|
||||
<symbol id="menu" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
|
||||
<path d="M3 12h18"/>
|
||||
<path d="M3 6h18"/>
|
||||
<path d="M3 18h18"/>
|
||||
</symbol>
|
||||
|
||||
<!-- x -->
|
||||
<symbol id="x" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
|
||||
<path d="M18 6L6 18"/>
|
||||
<path d="M6 6l12 12"/>
|
||||
</symbol>
|
||||
|
||||
<!-- search -->
|
||||
<symbol id="search" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
|
||||
<path d="M11 17.25a6.25 6.25 0 110-12.5 6.25 6.25 0 010 12.5z"/>
|
||||
<path d="M16 16l4.5 4.5"/>
|
||||
</symbol>
|
||||
|
||||
<!-- rss -->
|
||||
<symbol id="rss" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
|
||||
<path d="M4 11a9 9 0 019 9"/>
|
||||
<path d="M4 4a16 16 0 0116 16"/>
|
||||
<circle cx="5" cy="19" r="1"/>
|
||||
</symbol>
|
||||
|
||||
<!-- sun -->
|
||||
<symbol id="sun" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
|
||||
<circle cx="12" cy="12" r="5"/>
|
||||
<path d="M12 1v2"/>
|
||||
<path d="M12 21v2"/>
|
||||
<path d="M4.22 4.22l1.42 1.42"/>
|
||||
<path d="M18.36 18.36l1.42 1.42"/>
|
||||
<path d="M1 12h2"/>
|
||||
<path d="M21 12h2"/>
|
||||
<path d="M4.22 19.78l1.42-1.42"/>
|
||||
<path d="M18.36 5.64l1.42-1.42"/>
|
||||
</symbol>
|
||||
|
||||
<!-- moon -->
|
||||
<symbol id="moon" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
|
||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
|
||||
</symbol>
|
||||
|
||||
<!-- square -->
|
||||
<symbol id="square" viewBox="0 0 448 512">
|
||||
<path d="M384 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H384zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/>
|
||||
</symbol>
|
||||
|
||||
<!-- square-check -->
|
||||
<symbol id="square-check" viewBox="0 0 448 512">
|
||||
<path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/>
|
||||
</symbol>
|
||||
|
||||
<!-- calendar -->
|
||||
<symbol id="calendar" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
||||
<path d="M16 2v4"/>
|
||||
<path d="M8 2v4"/>
|
||||
<path d="M3 10h18"/>
|
||||
</symbol>
|
||||
|
||||
<!-- book-open -->
|
||||
<symbol id="book-open" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/>
|
||||
<path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/>
|
||||
</symbol>
|
||||
|
||||
<!-- arrow-right -->
|
||||
<symbol id="arrow-right" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14"/>
|
||||
<path d="M12 5l7 7-7 7"/>
|
||||
</symbol>
|
||||
|
||||
<!-- globe -->
|
||||
<symbol id="globe" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.268 14.0934C11.9051 13.4838 13.2303 12.2333 13.9384 10.6469C13.1192 10.7941 12.2138 10.9111 11.2469 10.9925C11.0336 12.2005 10.695 13.2621 10.268 14.0934ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8.48347 14.4823C8.32384 14.494 8.16262 14.5 8 14.5C7.83738 14.5 7.67616 14.494 7.51654 14.4823C7.5132 14.4791 7.50984 14.4759 7.50647 14.4726C7.2415 14.2165 6.94578 13.7854 6.67032 13.1558C6.41594 12.5744 6.19979 11.8714 6.04101 11.0778C6.67605 11.1088 7.33104 11.125 8 11.125C8.66896 11.125 9.32395 11.1088 9.95899 11.0778C9.80021 11.8714 9.58406 12.5744 9.32968 13.1558C9.05422 13.7854 8.7585 14.2165 8.49353 14.4726C8.49016 14.4759 8.4868 14.4791 8.48347 14.4823ZM11.4187 9.72246C12.5137 9.62096 13.5116 9.47245 14.3724 9.28806C14.4561 8.87172 14.5 8.44099 14.5 8C14.5 7.55901 14.4561 7.12828 14.3724 6.71194C13.5116 6.52755 12.5137 6.37904 11.4187 6.27753C11.4719 6.83232 11.5 7.40867 11.5 8C11.5 8.59133 11.4719 9.16768 11.4187 9.72246ZM10.1525 6.18401C10.2157 6.75982 10.25 7.36805 10.25 8C10.25 8.63195 10.2157 9.24018 10.1525 9.81598C9.46123 9.85455 8.7409 9.875 8 9.875C7.25909 9.875 6.53877 9.85455 5.84749 9.81598C5.7843 9.24018 5.75 8.63195 5.75 8C5.75 7.36805 5.7843 6.75982 5.84749 6.18401C6.53877 6.14545 7.25909 6.125 8 6.125C8.74091 6.125 9.46123 6.14545 10.1525 6.18401ZM11.2469 5.00748C12.2138 5.08891 13.1191 5.20593 13.9384 5.35306C13.2303 3.7667 11.9051 2.51622 10.268 1.90662C10.695 2.73788 11.0336 3.79953 11.2469 5.00748ZM8.48347 1.51771C8.4868 1.52089 8.49016 1.52411 8.49353 1.52737C8.7585 1.78353 9.05422 2.21456 9.32968 2.84417C9.58406 3.42562 9.80021 4.12856 9.95899 4.92219C9.32395 4.89118 8.66896 4.875 8 4.875C7.33104 4.875 6.67605 4.89118 6.04101 4.92219C6.19978 4.12856 6.41594 3.42562 6.67032 2.84417C6.94578 2.21456 7.2415 1.78353 7.50647 1.52737C7.50984 1.52411 7.51319 1.52089 7.51653 1.51771C7.67615 1.50597 7.83738 1.5 8 1.5C8.16262 1.5 8.32384 1.50597 8.48347 1.51771ZM5.73202 1.90663C4.0949 2.51622 2.76975 3.7667 2.06159 5.35306C2.88085 5.20593 3.78617 5.08891 4.75309 5.00748C4.96639 3.79953 5.30497 2.73788 5.73202 1.90663ZM4.58133 6.27753C3.48633 6.37904 2.48837 6.52755 1.62761 6.71194C1.54392 7.12828 1.5 7.55901 1.5 8C1.5 8.44099 1.54392 8.87172 1.62761 9.28806C2.48837 9.47245 3.48633 9.62096 4.58133 9.72246C4.52807 9.16768 4.5 8.59133 4.5 8C4.5 7.40867 4.52807 6.83232 4.58133 6.27753ZM4.75309 10.9925C3.78617 10.9111 2.88085 10.7941 2.06159 10.6469C2.76975 12.2333 4.0949 13.4838 5.73202 14.0934C5.30497 13.2621 4.96639 12.2005 4.75309 10.9925Z"/>
|
||||
</symbol>
|
||||
|
||||
<!-- link -->
|
||||
<symbol id="link" viewBox="0 0 16 16">
|
||||
<path d="M8.46968 1.46968C10.1433 -0.203925 12.8567 -0.203923 14.5303 1.46968C16.2039 3.14329 16.2039 5.85674 14.5303 7.53034L12.0303 10.0303L10.9697 8.96968L13.4697 6.46968C14.5575 5.38186 14.5575 3.61816 13.4697 2.53034C12.3819 1.44252 10.6182 1.44252 9.53034 2.53034L7.03034 5.03034L5.96968 3.96968L8.46968 1.46968ZM11.5303 5.53034L5.53034 11.5303L4.46968 10.4697L10.4697 4.46968L11.5303 5.53034ZM1.46968 14.5303C3.14329 16.2039 5.85673 16.204 7.53034 14.5303L10.0303 12.0303L8.96968 10.9697L6.46968 13.4697C5.38186 14.5575 3.61816 14.5575 2.53034 13.4697C1.44252 12.3819 1.44252 10.6182 2.53034 9.53034L5.03034 7.03034L3.96968 5.96968L1.46968 8.46968C-0.203923 10.1433 -0.203925 12.8567 1.46968 14.5303Z"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
|
|
@ -0,0 +1,68 @@
|
|||
import { formatDate } from "@lib/utils";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
|
||||
type Props = {
|
||||
entry: CollectionEntry<"blog"> | CollectionEntry<"projects">;
|
||||
pill?: boolean;
|
||||
};
|
||||
|
||||
export default function ArrowCard({ entry, pill }: Props) {
|
||||
return (
|
||||
<a
|
||||
href={`/${entry.collection}/${entry.slug}/`}
|
||||
class="group p-4 gap-3 flex items-center border rounded-lg hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out"
|
||||
>
|
||||
<div class="w-full group-hover:text-black group-hover:dark:text-white blend">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
{pill && (
|
||||
<div class="text-sm capitalize px-2 py-0.5 rounded-full border border-black/15 dark:border-white/25">
|
||||
{entry.collection === "blog" ? "post" : "project"}
|
||||
</div>
|
||||
)}
|
||||
<div class="text-sm uppercase">
|
||||
{formatDate(entry.data.date)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-semibold mt-3 text-black dark:text-white">
|
||||
{entry.data.title}
|
||||
</div>
|
||||
|
||||
<div class="text-sm line-clamp-2">{entry.data.summary}</div>
|
||||
<ul class="flex flex-wrap mt-2 gap-1">
|
||||
{entry.data.tags.map(
|
||||
(
|
||||
tag: string // this line has an error; Parameter 'tag' implicitly has an 'any' type.ts(7006)
|
||||
) => (
|
||||
<li class="text-xs uppercase py-0.5 px-1 rounded bg-black/5 dark:bg-white/20 text-black/75 dark:text-white/75">
|
||||
{tag}
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="stroke-current group-hover:stroke-black group-hover:dark:stroke-white"
|
||||
>
|
||||
<line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12"
|
||||
class="scale-x-0 group-hover:scale-x-100 translate-x-4 group-hover:translate-x-1 transition-all duration-300 ease-in-out"
|
||||
/>
|
||||
<polyline
|
||||
points="12 5 19 12 12 19"
|
||||
class="translate-x-0 group-hover:translate-x-1 transition-all duration-300 ease-in-out"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
---
|
||||
import { ViewTransitions } from "astro:transitions";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
|
||||
const { title, description, image = "/open-graph.jpg" } = Astro.props;
|
||||
---
|
||||
|
||||
<!-- Global Metadata -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="icon" type="image/ico" href="/favicon.ico" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<link
|
||||
rel="preload"
|
||||
href="/fonts/atkinson-regular.woff"
|
||||
as="font"
|
||||
type="font/woff"
|
||||
crossorigin
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="/fonts/atkinson-bold.woff"
|
||||
as="font"
|
||||
type="font/woff"
|
||||
crossorigin
|
||||
/>
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href={canonicalURL} />
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="title" content={title} />
|
||||
<meta name="description" content={description} />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={Astro.url} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={new URL(image, Astro.site)} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={Astro.url} />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content={new URL(image, Astro.site)} />
|
||||
|
||||
<!-- Sitemap -->
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
|
||||
<!-- RSS Feed -->
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/rss+xml"
|
||||
title={title}
|
||||
href={`${Astro.site}rss.xml`}
|
||||
/>
|
||||
|
||||
<!-- Global Scripts -->
|
||||
<script is:inline src="/js/theme.js"></script>
|
||||
<script is:inline src="/js/scroll.js"></script>
|
||||
<script is:inline src="/js/animate.js"></script>
|
||||
|
||||
<ViewTransitions />
|
||||
|
||||
<script>
|
||||
import type { TransitionBeforeSwapEvent } from "astro:transitions/client";
|
||||
document.addEventListener("astro:before-swap", (e) =>
|
||||
[
|
||||
...(
|
||||
e as TransitionBeforeSwapEvent
|
||||
).newDocument.head.querySelectorAll('link[as="font"]'),
|
||||
].forEach((link) => link.remove())
|
||||
);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
import type { CollectionEntry } from "astro:content";
|
||||
import { createEffect, createSignal, For, Show } from "solid-js";
|
||||
import ArrowCard from "@components/ArrowCard";
|
||||
import { cn } from "@lib/utils";
|
||||
|
||||
type Props = {
|
||||
tags: string[];
|
||||
data: CollectionEntry<"blog">[];
|
||||
};
|
||||
|
||||
export default function Blog({ data, tags }: Props) {
|
||||
const [filter, setFilter] = createSignal(new Set<string>());
|
||||
const [posts, setPosts] = createSignal<CollectionEntry<"blog">[]>([]);
|
||||
|
||||
createEffect(() => {
|
||||
setPosts(
|
||||
data.filter((entry) =>
|
||||
Array.from(filter()).every((value) =>
|
||||
entry.data.tags.some(
|
||||
(tag: string) =>
|
||||
tag.toLowerCase() === String(value).toLowerCase()
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
function toggleTag(tag: string) {
|
||||
setFilter(
|
||||
(prev) =>
|
||||
new Set(
|
||||
prev.has(tag)
|
||||
? [...prev].filter((t) => t !== tag)
|
||||
: [...prev, tag]
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-1">
|
||||
<div class="sticky top-24">
|
||||
<div class="text-sm font-semibold uppercase mb-2 text-black dark:text-white">
|
||||
Filter
|
||||
</div>
|
||||
<ul class="flex flex-wrap sm:flex-col gap-1.5">
|
||||
<For each={tags}>
|
||||
{(tag) => (
|
||||
<li>
|
||||
<button
|
||||
onClick={() => toggleTag(tag)}
|
||||
class={cn(
|
||||
"w-full px-2 py-1 rounded",
|
||||
"whitespace-nowrap overflow-hidden overflow-ellipsis",
|
||||
"flex gap-2 items-center",
|
||||
"bg-black/5 dark:bg-white/10",
|
||||
"hover:bg-black/10 hover:dark:bg-white/15",
|
||||
"transition-colors duration-300 ease-in-out",
|
||||
filter().has(tag) &&
|
||||
"text-black dark:text-white"
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
class={cn(
|
||||
"size-5 fill-black/50 dark:fill-white/50",
|
||||
"transition-colors duration-300 ease-in-out",
|
||||
filter().has(tag) &&
|
||||
"fill-black dark:fill-white"
|
||||
)}
|
||||
>
|
||||
<use
|
||||
href={`/ui.svg#square`}
|
||||
class={cn(
|
||||
!filter().has(tag)
|
||||
? "block"
|
||||
: "hidden"
|
||||
)}
|
||||
/>
|
||||
<use
|
||||
href={`/ui.svg#square-check`}
|
||||
class={cn(
|
||||
filter().has(tag)
|
||||
? "block"
|
||||
: "hidden"
|
||||
)}
|
||||
/>
|
||||
</svg>
|
||||
{tag}
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-sm uppercase mb-2">
|
||||
SHOWING {posts().length} OF {data.length} POSTS
|
||||
</div>
|
||||
<ul class="flex flex-col gap-3">
|
||||
{posts().map((post) => (
|
||||
<li>
|
||||
<ArrowCard entry={post} />
|
||||
</li>
|
||||
))}
|
||||
|
||||
<Show when={posts().length == 0}>
|
||||
<h3 class="mt-5 text-2xl">
|
||||
There seem to be no blogs matching the filters
|
||||
yet...
|
||||
</h3>
|
||||
</Show>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
import { cn } from "@lib/utils"
|
||||
|
||||
type Props = {
|
||||
size: "sm" | "md" | "lg" | "xl" | "2xl"
|
||||
}
|
||||
|
||||
const { size } = Astro.props;
|
||||
---
|
||||
|
||||
<div class={cn(
|
||||
"w-full h-full mx-auto px-5",
|
||||
size === "sm" && "max-w-screen-sm",
|
||||
size === "md" && "max-w-screen-md",
|
||||
size === "lg" && "max-w-screen-lg",
|
||||
size === "xl" && "max-w-screen-xl",
|
||||
size === "2xl" && "max-w-screen-2xl",
|
||||
)}>
|
||||
<slot/>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
---
|
||||
import { SITE, LINKS } from "@consts";
|
||||
import { cn } from "@lib/utils";
|
||||
const { pathname } = Astro.url;
|
||||
const subpath = pathname.match(/[^/]+/g);
|
||||
---
|
||||
|
||||
<div
|
||||
id="drawer"
|
||||
class="fixed inset-0 h-0 z-40 overflow-hidden flex flex-col items-center justify-center md:hidden bg-neutral-100 dark:bg-neutral-900 transition-[height] duration-300 ease-in-out"
|
||||
>
|
||||
<nav class="flex flex-col items-center space-y-2">
|
||||
{
|
||||
LINKS.map((LINK) => (
|
||||
<a
|
||||
href={LINK.HREF}
|
||||
class={cn(
|
||||
"flex items-center justify-center px-3 py-1 rounded-full",
|
||||
"text-current hover:text-black dark:hover:text-white",
|
||||
"hover:bg-black/5 dark:hover:bg-white/20",
|
||||
"transition-colors duration-300 ease-in-out",
|
||||
pathname === LINK.HREF ||
|
||||
"/" + subpath?.[0] === LINK.HREF
|
||||
? "pointer-events-none bg-black dark:bg-white text-white dark:text-black"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
{LINK.TEXT}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
|
||||
<div class="flex gap-1 mt-5">
|
||||
<a
|
||||
href="/search/"
|
||||
aria-label={`Search blog posts and projects on ${SITE.TITLE}`}
|
||||
class={cn(
|
||||
"size-9 rounded-full p-2 items-center justify-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out",
|
||||
pathname === "/search" || "/" + subpath?.[0] === "search"
|
||||
? "pointer-events-none bg-black dark:bg-white text-white dark:text-black"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<svg class="size-full">
|
||||
<use href="/ui.svg#search"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/rss.xml"
|
||||
target="_blank"
|
||||
aria-label={`Rss feed for ${SITE.TITLE}`}
|
||||
class="size-9 rounded-full p-2 items-center justify-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out"
|
||||
>
|
||||
<svg class="size-full">
|
||||
<use href="/ui.svg#rss"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<button
|
||||
id="drawer-theme-button"
|
||||
aria-label={`Toggle light and dark theme`}
|
||||
class="size-9 rounded-full p-2 items-center justify-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out"
|
||||
>
|
||||
<svg class="block dark:hidden size-full">
|
||||
<use href="/ui.svg#sun"></use>
|
||||
</svg>
|
||||
<svg class="hidden dark:block size-full">
|
||||
<use href="/ui.svg#moon"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#drawer.open {
|
||||
@apply h-full;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import { SITE, SOCIALS } from "@consts";
|
||||
import Container from "@components/Container.astro";
|
||||
|
||||
import pictureOfMe from "@images/me.jpg";
|
||||
---
|
||||
|
||||
<footer class="relative bg-white dark:bg-black">
|
||||
<div class="animate">
|
||||
<section class="py-5">
|
||||
<Container size="md">
|
||||
<div class="flex items-center justify-center sm:justify-end">
|
||||
<button
|
||||
id="back-to-top"
|
||||
aria-label="Back to top of page"
|
||||
class="group flex w-fit p-1.5 gap-1.5 text-sm items-center border rounded hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="stroke-current group-hover:stroke-black group-hover:dark:stroke-white rotate-90"
|
||||
>
|
||||
<line
|
||||
x1="19"
|
||||
y1="12"
|
||||
x2="5"
|
||||
y2="12"
|
||||
class="scale-x-0 group-hover:scale-x-100 translate-x-3 group-hover:translate-x-0 transition-all duration-300 ease-in-out"
|
||||
></line>
|
||||
<polyline
|
||||
points="12 19 5 12 12 5"
|
||||
class="translate-x-1 group-hover:translate-x-0 transition-all duration-300 ease-in-out"
|
||||
></polyline>
|
||||
</svg>
|
||||
<div
|
||||
class="w-full group-hover:text-black group-hover:dark:text-white transition-colors duration-300 ease-in-out"
|
||||
>
|
||||
Back to top
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="py-5 overflow-hidden whitespace-nowrap border-t border-black/10 dark:border-white/25"
|
||||
>
|
||||
<Container size="md">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div class="flex flex-col items-center sm:items-start">
|
||||
<a
|
||||
href="/"
|
||||
class="flex gap-1 w-fit font-semibold text-current hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out"
|
||||
>
|
||||
<Image
|
||||
src={pictureOfMe}
|
||||
loading="lazy"
|
||||
alt="Me"
|
||||
class="size-6 fill-current rounded-full"
|
||||
/>
|
||||
{SITE.TITLE}
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="flex gap-2 justify-center sm:justify-end items-center"
|
||||
>
|
||||
<span class="relative flex h-3 w-3">
|
||||
<span
|
||||
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-300"
|
||||
></span>
|
||||
<span
|
||||
class="relative inline-flex rounded-full h-3 w-3 bg-green-500"
|
||||
></span>
|
||||
</span>
|
||||
All systems normal
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="py-5 overflow-hidden whitespace-nowrap border-t border-black/10 dark:border-white/25"
|
||||
>
|
||||
<Container size="md">
|
||||
<div class="h-full grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div
|
||||
class="order-2 sm:order-1 flex flex-col items-center justify-center sm:items-start"
|
||||
>
|
||||
<div class="text-sm mt-2">
|
||||
© 2024 | All rights reserved
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="order-1 sm:order-2 flex justify-center sm:justify-end"
|
||||
>
|
||||
<div
|
||||
class="flex flex-wrap gap-1 items-center justify-center"
|
||||
>
|
||||
{
|
||||
SOCIALS.map((SOCIAL) => (
|
||||
<a
|
||||
href={SOCIAL.HREF}
|
||||
target="_blank"
|
||||
aria-label={`${SITE.TITLE} on ${SOCIAL.NAME}`}
|
||||
class="group size-10 rounded-full p-2 items-center justify-center hover:bg-black/5 dark:hover:bg-white/20 blend"
|
||||
>
|
||||
<svg class="size-full fill-current group-hover:fill-black group-hover:dark:fill-white blend">
|
||||
<use
|
||||
href={`/social.svg#${SOCIAL.ICON}`}
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script is:inline>
|
||||
function goBackToTop(event) {
|
||||
event.preventDefault();
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
function inintializeBackToTop() {
|
||||
const backToTop = document.getElementById("back-to-top");
|
||||
backToTop?.addEventListener("click", goBackToTop);
|
||||
}
|
||||
|
||||
document.addEventListener("astro:after-swap", inintializeBackToTop);
|
||||
inintializeBackToTop();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import { SITE, LINKS } from "@consts";
|
||||
import { cn } from "@lib/utils";
|
||||
import Container from "@components/Container.astro";
|
||||
|
||||
import pictureOfMe from "@images/me.jpg";
|
||||
|
||||
const { pathname } = Astro.url;
|
||||
const subpath = pathname.match(/[^/]+/g);
|
||||
---
|
||||
|
||||
<header id="header" class="fixed top-0 w-full h-16 z-50">
|
||||
<Container size="md">
|
||||
<div class="relative h-full w-full">
|
||||
<div
|
||||
class="absolute left-0 top-1/2 -translate-y-1/2 flex gap-1 font-semibold"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
class="flex gap-1 text-current hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out"
|
||||
>
|
||||
<Image
|
||||
src={pictureOfMe}
|
||||
loading="eager"
|
||||
alt="Me"
|
||||
class="size-6 fill-current rounded-full"
|
||||
/>
|
||||
<div>
|
||||
{SITE.TITLE}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
|
||||
>
|
||||
<nav
|
||||
class="hidden md:flex items-center justify-center text-sm gap-1"
|
||||
>
|
||||
{
|
||||
LINKS.map((LINK) => (
|
||||
<a
|
||||
href={LINK.HREF}
|
||||
class={cn(
|
||||
"h-8 rounded-full px-3 text-current",
|
||||
"flex items-center justify-center",
|
||||
"transition-colors duration-300 ease-in-out",
|
||||
pathname === LINK.HREF ||
|
||||
"/" + subpath?.[0] === LINK.HREF
|
||||
? "bg-black dark:bg-white text-white dark:text-black"
|
||||
: "hover:bg-black/5 dark:hover:bg-white/20 hover:text-black dark:hover:text-white"
|
||||
)}
|
||||
>
|
||||
{LINK.TEXT}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="buttons absolute right-0 top-1/2 -translate-y-1/2 flex gap-1"
|
||||
>
|
||||
<a
|
||||
href="/search"
|
||||
aria-label={`Search blog posts and projects on ${SITE.TITLE}`}
|
||||
class={cn(
|
||||
"hidden md:flex",
|
||||
"size-9 rounded-full p-2 items-center justify-center",
|
||||
"bg-transparent hover:bg-black/5 dark:hover:bg-white/20",
|
||||
"stroke-current hover:stroke-black hover:dark:stroke-white",
|
||||
"border border-black/10 dark:border-white/25",
|
||||
"transition-colors duration-300 ease-in-out",
|
||||
pathname === "/search" ||
|
||||
"/" + subpath?.[0] === "/search"
|
||||
? "pointer-events-none bg-black dark:bg-white text-white dark:text-black"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<svg class="size-full">
|
||||
<use href="/ui.svg#search"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/rss.xml"
|
||||
target="_blank"
|
||||
aria-label={`Rss feed for ${SITE.TITLE}`}
|
||||
class={cn(
|
||||
"hidden md:flex",
|
||||
"size-9 rounded-full p-2 items-center justify-center",
|
||||
"bg-transparent hover:bg-black/5 dark:hover:bg-white/20",
|
||||
"stroke-current hover:stroke-black hover:dark:stroke-white",
|
||||
"border border-black/10 dark:border-white/25",
|
||||
"transition-colors duration-300 ease-in-out"
|
||||
)}
|
||||
>
|
||||
<svg class="size-full">
|
||||
<use href="/ui.svg#rss"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<button
|
||||
id="header-theme-button"
|
||||
aria-label={`Toggle light and dark theme`}
|
||||
class={cn(
|
||||
"hidden md:flex",
|
||||
"size-9 rounded-full p-2 items-center justify-center",
|
||||
"bg-transparent hover:bg-black/5 dark:hover:bg-white/20",
|
||||
"stroke-current hover:stroke-black hover:dark:stroke-white",
|
||||
"border border-black/10 dark:border-white/25",
|
||||
"transition-colors duration-300 ease-in-out"
|
||||
)}
|
||||
>
|
||||
<svg class="size-full block dark:hidden">
|
||||
<use href="/ui.svg#sun"></use>
|
||||
</svg>
|
||||
<svg class="size-full hidden dark:block">
|
||||
<use href="/ui.svg#moon"></use>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="header-drawer-button"
|
||||
aria-label={`Toggle drawer open and closed`}
|
||||
class={cn(
|
||||
"flex md:hidden",
|
||||
"size-9 rounded-full p-2 items-center justify-center",
|
||||
"bg-transparent hover:bg-black/5 dark:hover:bg-white/20",
|
||||
"stroke-current hover:stroke-black hover:dark:stroke-white",
|
||||
"border border-black/10 dark:border-white/25",
|
||||
"transition-colors duration-300 ease-in-out"
|
||||
)}
|
||||
>
|
||||
<svg id="drawer-open" class="size-full">
|
||||
<use href="/ui.svg#menu"></use>
|
||||
</svg>
|
||||
<svg id="drawer-close" class="size-full">
|
||||
<use href="/ui.svg#x"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
#header-drawer-button > #drawer-open {
|
||||
@apply block;
|
||||
}
|
||||
|
||||
#header-drawer-button > #drawer-close {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
#header-drawer-button.open > #drawer-open {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
#header-drawer-button.open > #drawer-close {
|
||||
@apply block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
function toggleDrawer() {
|
||||
const drawer = document.getElementById("drawer");
|
||||
const drawerButton = document.getElementById("header-drawer-button");
|
||||
drawer?.classList.toggle("open");
|
||||
drawerButton?.classList.toggle("open");
|
||||
}
|
||||
|
||||
function initializeDrawerButton() {
|
||||
const drawerButton = document.getElementById("header-drawer-button");
|
||||
drawerButton?.addEventListener("click", toggleDrawer);
|
||||
}
|
||||
|
||||
document.addEventListener("astro:after-swap", initializeDrawerButton);
|
||||
initializeDrawerButton();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
/**
|
||||
* Meteors.astro
|
||||
* This component creates meteors that are appended to the galaxy on interval.
|
||||
* Meteors are removed from the document after the animation is completed.
|
||||
* There are four (4) meteor shower containers, one for each diagonal direction.
|
||||
*/
|
||||
---
|
||||
|
||||
<div id="meteors">
|
||||
<!-- rotations defined in base.css & tailwind.config.mjs -->
|
||||
<div class="shower ur" />
|
||||
<div class="shower dr" />
|
||||
<div class="shower dl" />
|
||||
<div class="shower ul" />
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function createMeteor () {
|
||||
// create a meteor
|
||||
let meteor = document.createElement("div");
|
||||
meteor.setAttribute("class", "meteor");
|
||||
meteor.style.left = Math.round(Math.random() * window.innerWidth) + "px";
|
||||
meteor.style.top = Math.round(Math.random() * window.innerHeight) + "px";
|
||||
|
||||
// append the meteor to a random meteor shower (direction)
|
||||
const showers = document.querySelectorAll(".shower");
|
||||
const random = Math.floor(Math.random() * showers.length);
|
||||
const shower = showers[random];
|
||||
shower.append(meteor);
|
||||
|
||||
// remove the meteor after the animation duration
|
||||
setTimeout(() => {
|
||||
meteor.remove();
|
||||
}, 3500);
|
||||
}
|
||||
|
||||
// Create meteors on interval on two (2) seconds
|
||||
setInterval(createMeteor, 1500);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
import type { CollectionEntry } from "astro:content";
|
||||
import { createEffect, createSignal, For, Show } from "solid-js";
|
||||
import ArrowCard from "@components/ArrowCard";
|
||||
import { cn } from "@lib/utils";
|
||||
|
||||
type Props = {
|
||||
tags: string[];
|
||||
data: CollectionEntry<"projects">[];
|
||||
};
|
||||
|
||||
export default function Projects({ data, tags }: Props) {
|
||||
const [filter, setFilter] = createSignal(new Set<string>());
|
||||
const [projects, setProjects] = createSignal<CollectionEntry<"projects">[]>(
|
||||
[]
|
||||
);
|
||||
|
||||
createEffect(() => {
|
||||
setProjects(
|
||||
data.filter((entry) =>
|
||||
Array.from(filter()).every((value) =>
|
||||
entry.data.tags.some(
|
||||
(tag: string) =>
|
||||
tag.toLowerCase() === String(value).toLowerCase()
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
function toggleTag(tag: string) {
|
||||
setFilter(
|
||||
(prev) =>
|
||||
new Set(
|
||||
prev.has(tag)
|
||||
? [...prev].filter((t) => t !== tag)
|
||||
: [...prev, tag]
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-1">
|
||||
<div class="sticky top-24">
|
||||
<div class="text-sm font-semibold uppercase mb-2 text-black dark:text-white">
|
||||
Filter
|
||||
</div>
|
||||
<ul class="flex flex-wrap sm:flex-col gap-1.5">
|
||||
<For each={tags}>
|
||||
{(tag) => (
|
||||
<li>
|
||||
<button
|
||||
onClick={() => toggleTag(tag)}
|
||||
class={cn(
|
||||
"w-full px-2 py-1 rounded",
|
||||
"whitespace-nowrap overflow-hidden overflow-ellipsis",
|
||||
"flex gap-2 items-center",
|
||||
"bg-black/5 dark:bg-white/10",
|
||||
"hover:bg-black/10 hover:dark:bg-white/15",
|
||||
"transition-colors duration-300 ease-in-out",
|
||||
filter().has(tag) &&
|
||||
"text-black dark:text-white"
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
class={cn(
|
||||
"size-5 fill-black/50 dark:fill-white/50",
|
||||
"transition-colors duration-300 ease-in-out",
|
||||
filter().has(tag) &&
|
||||
"fill-black dark:fill-white"
|
||||
)}
|
||||
>
|
||||
<use
|
||||
href={`/ui.svg#square`}
|
||||
class={cn(
|
||||
!filter().has(tag)
|
||||
? "block"
|
||||
: "hidden"
|
||||
)}
|
||||
/>
|
||||
<use
|
||||
href={`/ui.svg#square-check`}
|
||||
class={cn(
|
||||
filter().has(tag)
|
||||
? "block"
|
||||
: "hidden"
|
||||
)}
|
||||
/>
|
||||
</svg>
|
||||
{tag}
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-sm uppercase mb-2">
|
||||
SHOWING {projects().length} OF {data.length} PROJECTS
|
||||
</div>
|
||||
<ul class="flex flex-col gap-3">
|
||||
{projects().map((project) => (
|
||||
<li>
|
||||
<ArrowCard entry={project} />
|
||||
</li>
|
||||
))}
|
||||
<Show when={projects().length == 0}>
|
||||
<h3 class="mt-5 text-2xl">
|
||||
There seem to be no projects matching the
|
||||
filters yet...
|
||||
</h3>
|
||||
</Show>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import type { CollectionEntry } from "astro:content"
|
||||
import { createEffect, createSignal } from "solid-js"
|
||||
import Fuse from "fuse.js"
|
||||
import ArrowCard from "@components/ArrowCard"
|
||||
|
||||
type Props = {
|
||||
data: CollectionEntry<"blog">[]
|
||||
}
|
||||
|
||||
export default function Search({data}: Props) {
|
||||
const [query, setQuery] = createSignal("")
|
||||
const [results, setResults] = createSignal<CollectionEntry<"blog">[]>([])
|
||||
|
||||
const fuse = new Fuse(data, {
|
||||
keys: ["slug", "data.title", "data.summary", "data.tags"],
|
||||
includeMatches: true,
|
||||
minMatchCharLength: 2,
|
||||
threshold: 0.4,
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
if (query().length < 2) {
|
||||
setResults([])
|
||||
} else {
|
||||
setResults(fuse.search(query()).map((result) => result.item))
|
||||
}
|
||||
})
|
||||
|
||||
const onInput = (e: Event) => {
|
||||
const target = e.target as HTMLInputElement
|
||||
setQuery(target.value)
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="flex flex-col">
|
||||
<div class="relative">
|
||||
<input name="search" type="text" value={query()} onInput={onInput} autocomplete="off" spellcheck={false} placeholder="What are you looking for?" class="w-full px-2.5 py-1.5 pl-10 rounded outline-none text-black dark:text-white bg-black/5 dark:bg-white/15 border border-black/10 dark:border-white/20 focus:border-black focus:dark:border-white"/>
|
||||
<svg class="absolute size-6 left-1.5 top-1/2 -translate-y-1/2 stroke-current">
|
||||
<use href={`/ui.svg#search`}/>
|
||||
</svg>
|
||||
</div>
|
||||
{(query().length >= 2 && results().length >= 1) && (
|
||||
<div class="mt-12">
|
||||
<div class="text-sm uppercase mb-2">
|
||||
Found {results().length} results for {`'${query()}'`}
|
||||
</div>
|
||||
<ul class="flex flex-col gap-3">
|
||||
{results().map(result => (
|
||||
<li>
|
||||
<ArrowCard entry={result} pill={true} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
type Props = {
|
||||
text: string
|
||||
icon: string
|
||||
href: string
|
||||
}
|
||||
|
||||
const { text, icon, href } = Astro.props
|
||||
---
|
||||
|
||||
<a href={href} target="_blank" class="w-fit px-3 py-2 group rounded border flex gap-2 items-center border-neutral-200 dark:border-neutral-700 hover:bg-neutral-100 hover:dark:bg-neutral-800 blend">
|
||||
<svg height={20} width={20}>
|
||||
<use href={`/stack.svg#${icon}`}></use>
|
||||
</svg>
|
||||
<span class="text-sm capitalize text-neutral-500 dark:text-neutral-400 group-hover:text-black group-hover:dark:text-white blend">
|
||||
{text}
|
||||
</span>
|
||||
</a>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
/**
|
||||
* TwinkleStars.astro
|
||||
* This component creates twinkling stars that are appended to the galaxy on interval.
|
||||
* Twinkle stars are removed from the document after the animation is completed.
|
||||
* The svg below is just a template for the script to clone and append to the galaxy.
|
||||
*/
|
||||
---
|
||||
|
||||
<svg
|
||||
id="twinkle-star"
|
||||
class="template"
|
||||
width="149"
|
||||
height="149"
|
||||
viewBox="0 0 149 149"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="absolute left-full animate-twinkle"
|
||||
>
|
||||
<circle cx="74" cy="74" r="11" fill="white"/>
|
||||
<rect y="141.421" width="200" height="10" transform="rotate(-45 0 141.421)" fill="url(#paint0_linear_4_2)"/>
|
||||
<rect x="7.07107" width="200" height="10" transform="rotate(45 7.07107 0)" fill="url(#paint1_linear_4_2)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_4_2" x1="0" y1="146.421" x2="200" y2="146.421" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1E1E1E"/>
|
||||
<stop offset="0.445" stop-color="white"/>
|
||||
<stop offset="0.58721" stop-color="white"/>
|
||||
<stop offset="1" stop-color="#1E1E1E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_4_2" x1="7.07107" y1="5" x2="207.071" y2="5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1E1E1E"/>
|
||||
<stop offset="0.42" stop-color="white"/>
|
||||
<stop offset="0.555" stop-color="white"/>
|
||||
<stop offset="1" stop-color="#1E1E1E"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<script is:inline>
|
||||
// Generate a twinkle star and append it to the galaxy, remove it after animation.
|
||||
function generateTwinkleStar() {
|
||||
// Clone the twinkle star template and set its attributes.
|
||||
const twinkleStar = document.getElementById("twinkle-star").cloneNode(true);
|
||||
twinkleStar.style.position = "absolute";
|
||||
twinkleStar.style.left = Math.floor(Math.random() * window.innerWidth) + "px";
|
||||
twinkleStar.style.top = Math.floor(Math.random() * (window.innerHeight/3)) + "px";
|
||||
twinkleStar.style.width = window.innerWidth < 768 ? Math.floor(Math.random() * (15 - 7.5 + 1) + 7.5) : Math.floor(Math.random() * (30 - 15 + 1) + 15) + "px";
|
||||
twinkleStar.style.height = twinkleStar.style.width;
|
||||
twinkleStar.classList.add("twinkle");
|
||||
document.getElementById("galaxy").appendChild(twinkleStar);
|
||||
|
||||
// Remove the twinkle star after the animation is completed.
|
||||
setTimeout(() => {
|
||||
twinkleStar.remove();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
setInterval(generateTwinkleStar, 5000);
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
import type { Site, Page, Links, Socials } from "@types";
|
||||
|
||||
// Global
|
||||
export const SITE: Site = {
|
||||
TITLE: "Portfolio Moritz Hölting",
|
||||
DESCRIPTION: "Welcome to my portfolio website.",
|
||||
AUTHOR: "Moritz Hölting",
|
||||
};
|
||||
|
||||
// Work Page
|
||||
export const WORK: Page = {
|
||||
TITLE: "Work",
|
||||
DESCRIPTION: "Places I have worked.",
|
||||
};
|
||||
|
||||
// Blog Page
|
||||
export const BLOG: Page = {
|
||||
TITLE: "Blog",
|
||||
DESCRIPTION: "Writing on topics I am passionate about.",
|
||||
};
|
||||
|
||||
// Projects Page
|
||||
export const PROJECTS: Page = {
|
||||
TITLE: "Projects",
|
||||
DESCRIPTION: "Recent projects I have worked on.",
|
||||
};
|
||||
|
||||
// Search Page
|
||||
export const SEARCH: Page = {
|
||||
TITLE: "Search",
|
||||
DESCRIPTION: "Search all posts and projects by keyword.",
|
||||
};
|
||||
|
||||
// Links
|
||||
export const LINKS: Links = [
|
||||
{
|
||||
TEXT: "Home",
|
||||
HREF: "/",
|
||||
},
|
||||
{
|
||||
TEXT: "Work",
|
||||
HREF: "/work/",
|
||||
},
|
||||
{
|
||||
TEXT: "Blog",
|
||||
HREF: "/blog/",
|
||||
},
|
||||
{
|
||||
TEXT: "Projects",
|
||||
HREF: "/projects/",
|
||||
},
|
||||
];
|
||||
|
||||
// Socials
|
||||
export const SOCIALS: Socials = [
|
||||
{
|
||||
NAME: "Email",
|
||||
ICON: "email",
|
||||
TEXT: "moritz@hoelting.dev",
|
||||
HREF: "mailto:moritz@hoelting.dev",
|
||||
},
|
||||
{
|
||||
NAME: "Github",
|
||||
ICON: "github",
|
||||
TEXT: "moritz-hoelting",
|
||||
HREF: "https://github.com/moritz-hoelting",
|
||||
},
|
||||
{
|
||||
NAME: "LinkedIn",
|
||||
ICON: "linkedin",
|
||||
TEXT: "moritz-hölting",
|
||||
HREF: "https://www.linkedin.com/in/moritz-h%C3%B6lting/",
|
||||
},
|
||||
{
|
||||
NAME: "Twitter",
|
||||
ICON: "twitter-x",
|
||||
TEXT: "moritz_hoelting",
|
||||
HREF: "https://twitter.com/moritz_hoelting",
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: "Template Blog"
|
||||
summary: "Blog post summary"
|
||||
date: 2024-04-04
|
||||
draft: true
|
||||
tags:
|
||||
- Template
|
||||
- Astro
|
||||
---
|
||||
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. At maiores earum architecto, tempora, libero voluptas nostrum, aspernatur tenetur ea quas voluptatibus. Fuga dolores aperiam itaque fugiat nobis molestiae optio, dicta tenetur alias. Temporibus veritatis incidunt aspernatur maiores corporis ea fugiat eveniet veniam, nihil tenetur doloribus explicabo, illum itaque laborum hic.
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import { defineCollection, z } from "astro:content";
|
||||
|
||||
const work = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
company: z.string(),
|
||||
role: z.string(),
|
||||
dateStart: z.date(),
|
||||
dateEnd: z.union([z.date(), z.string()]),
|
||||
}),
|
||||
});
|
||||
|
||||
const blog = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
summary: z.string(),
|
||||
date: z.date(),
|
||||
tags: z.array(z.string()),
|
||||
draft: z.boolean().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
const projects = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
summary: z.string(),
|
||||
date: z.date(),
|
||||
tags: z.array(z.string()),
|
||||
draft: z.boolean().optional(),
|
||||
demoUrl: z.string().optional(),
|
||||
repoUrl: z.string().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = { work, blog, projects };
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
title: "Webpage - Löffelweise Glück"
|
||||
summary: "Foodblog by my sister and mother"
|
||||
date: 2020-11-15
|
||||
draft: false
|
||||
tags:
|
||||
- Astro
|
||||
- Typescript
|
||||
- Next.js
|
||||
- React
|
||||
- HTML
|
||||
- CSS
|
||||
- Javascript
|
||||
repoUrl: https://github.com/studio-nicolehoelting/loeffelweise-glueck
|
||||
demoUrl: https://loeffelweise-glueck.de
|
||||
---
|
||||
|
||||
This project was the first website I created, that had a sort of database behind it, the recipes and stories. I started not long after my [first project](../studio-nicolehoelting/) and made the same mistakes. I copied a prepared HTML file for each recipe which loaded `.txt` files for the ingredients and preparation. For the recipe list I used a JSON file that was requested, parsed and rendered as elements on the page.
|
||||
|
||||
Again, I tried to solve the problem with Next.js, but I never finished it and switched to Astro which allows defining the recipes as a scheme and easy adding of them as a Markdown file.
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
title: "Mensa UPB Command-line tool"
|
||||
summary: "CLI tool for viewing which meals are offered at the mensa of my university"
|
||||
date: 2023-10-17
|
||||
draft: false
|
||||
tags:
|
||||
- Rust
|
||||
repoUrl: https://github.com/moritz-hoelting/mensa-upb-cli
|
||||
---
|
||||
|
||||
A small tool I wrote in Rust for checking which meals I can eat at university.
|
||||
|
||||
|
||||
|
||||
Allows choosing the day, the locations and which prices to show.
|
||||
|
||||
It works by parsing the command-line arguments with [clap](https://crates.io/crates/clap) and [asynchronously](https://crates.io/crates/tokio) [requesting](https://crates.io/crates/reqwest) and [scraping](https://crates.io/crates/scraper) the webpage. The gathered data is filtered and displayed as a [table](https://crates.io/crates/comfy-table).
|
||||
|
||||
## Usage
|
||||
|
||||
- Show the menu for today
|
||||
|
||||
```bash
|
||||
mensa-upb-cli
|
||||
```
|
||||
|
||||
- Show the help screen
|
||||
|
||||
```bash
|
||||
mensa-upb-cli --help
|
||||
```
|
||||
|
||||
- Show the menu of the third next day
|
||||
|
||||
```bash
|
||||
mensa-upb-cli -d 3
|
||||
```
|
||||
|
||||
- Show the menu of a different mensa
|
||||
|
||||
```bash
|
||||
mensa-upb-cli -m grill-cafe
|
||||
```
|
||||
|
||||
- Show the only the prices for students
|
||||
```bash
|
||||
mensa-upb-cli -p student
|
||||
```
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
title: "Webpage - Studio Nicole Hölting"
|
||||
summary: "The first website I ever created"
|
||||
date: 2019-04-26
|
||||
draft: false
|
||||
tags:
|
||||
- Astro
|
||||
- Typescript
|
||||
- Next.js
|
||||
- React
|
||||
- HTML
|
||||
- CSS
|
||||
- Javascript
|
||||
repoUrl: https://github.com/studio-nicolehoelting/studio-nicolehoelting
|
||||
demoUrl: https://nicolehoelting.de
|
||||
---
|
||||
|
||||
This project was the first website I created for the small business of my mother.
|
||||
|
||||
It started out as me learning HTML and CSS, but soon I was forced to learn Javascript for more intricate animations and buttons.
|
||||
|
||||
After some years of programming and only coming back to this project only for small changes, I found it tedious to work with
|
||||
the source code of this website. There were many mistakes from me being new to website creation that I wanted to fix and I was annoyed of changing the same thing in multiple places. Because of this I decided to rewrite everything from scratch in a framework. I choose Next.js for the task and learned React.
|
||||
|
||||
But I was not happy with this, as I thought it was overkill for a static site and only resulted in slower load times. Therefore I decided to migrate to Astro which exactly fit my use case.
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
title: "Project One"
|
||||
summary: "Lorem ipsum dolor sit amet"
|
||||
date: 2022-03-18
|
||||
draft: true
|
||||
tags:
|
||||
- Astro
|
||||
- Javascript
|
||||
- Typescript
|
||||
- Tailwind
|
||||
- SolidJs
|
||||
demoUrl: https://demo.vercel.app
|
||||
repoUrl: https://github.com/moritz-hoelting/mensa-upb-cli
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
company: "Diebold Nixdorf"
|
||||
role: "Working Student - Infrastructure & Operations"
|
||||
dateStart: 2024-05-01
|
||||
dateEnd: 2025-04-30
|
||||
---
|
||||
|
||||
At at Diebold Nixdorf, I am responsible for conducting "experiments" with new
|
||||
technology to decide whether they are suitable to be used in the company and fullfilling
|
||||
other small coding tasks required by the team.
|
||||
|
||||
- Support the on-site department in software development for Project Software Development in international projects.
|
||||
- Develop a range of tools and software components utilizing Java, Python, and Rust.
|
||||
- Include data analysis and report creation in responsibilities.
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
|
|
@ -0,0 +1,102 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection } from "astro:content";
|
||||
|
||||
type Props = {
|
||||
entry: CollectionEntry<"blog"> | CollectionEntry<"projects">;
|
||||
};
|
||||
|
||||
// Get the requested entry
|
||||
const { entry } = Astro.props;
|
||||
const { collection } = entry;
|
||||
const { Content } = await entry.render();
|
||||
|
||||
// Get the next and prev entries (modulo to wrap index)
|
||||
const items = (await getCollection(collection))
|
||||
.filter((post) => !post.data.draft)
|
||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
|
||||
const index = items.findIndex((x) => x.slug === entry.slug);
|
||||
const prev = items[(index + 1) % items.length];
|
||||
const next = items[(index - 1 + items.length) % items.length];
|
||||
---
|
||||
|
||||
<div>
|
||||
<article>
|
||||
<Content />
|
||||
</article>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<a
|
||||
href={`/${prev.collection}/${prev.slug}/`}
|
||||
class="group p-4 gap-3 flex items-center border rounded-lg hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 blend"
|
||||
>
|
||||
<div
|
||||
class="order-2 w-full h-full group-hover:text-black group-hover:dark:text-white blend"
|
||||
>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div class="text-sm uppercase">Prev</div>
|
||||
</div>
|
||||
<div class="font-semibold mt-3 text-black dark:text-white">
|
||||
{prev.data.title}
|
||||
</div>
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="order-1 stroke-current group-hover:stroke-black group-hover:dark:stroke-white rotate-180"
|
||||
>
|
||||
<line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12"
|
||||
class="scale-x-0 group-hover:scale-x-100 translate-x-4 group-hover:translate-x-1 transition-all duration-300 ease-in-out"
|
||||
></line>
|
||||
<polyline
|
||||
points="12 5 19 12 12 19"
|
||||
class="translate-x-0 group-hover:translate-x-1 transition-all duration-300 ease-in-out"
|
||||
></polyline>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href={`/${next.collection}/${next.slug}/`}
|
||||
class="group p-4 gap-3 flex items-center border rounded-lg hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out"
|
||||
>
|
||||
<div
|
||||
class="w-full h-full text-right group-hover:text-black group-hover:dark:text-white blend"
|
||||
>
|
||||
<div class="text-sm uppercase">Next</div>
|
||||
<div class="font-semibold mt-3 text-black dark:text-white">
|
||||
{next.data.title}
|
||||
</div>
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="stroke-current group-hover:stroke-black group-hover:dark:stroke-white"
|
||||
>
|
||||
<line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12"
|
||||
class="scale-x-0 group-hover:scale-x-100 translate-x-4 group-hover:translate-x-1 transition-all duration-300 ease-in-out"
|
||||
></line>
|
||||
<polyline
|
||||
points="12 5 19 12 12 19"
|
||||
class="translate-x-0 group-hover:translate-x-1 transition-all duration-300 ease-in-out"
|
||||
></polyline>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
---
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import { formatDate, readingTime } from "@lib/utils";
|
||||
|
||||
type Props = {
|
||||
entry: CollectionEntry<"projects"> | CollectionEntry<"blog">;
|
||||
};
|
||||
|
||||
const { entry } = Astro.props;
|
||||
const { collection, data, body } = entry;
|
||||
const { title, summary, date } = data;
|
||||
|
||||
const demoUrl = collection === "projects" ? data.demoUrl : null;
|
||||
const repoUrl = collection === "projects" ? data.repoUrl : null;
|
||||
---
|
||||
|
||||
<div>
|
||||
<a
|
||||
href={`/${collection}/`}
|
||||
class="group w-fit p-1.5 gap-1.5 text-sm flex items-center border rounded hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="stroke-current group-hover:stroke-black group-hover:dark:stroke-white"
|
||||
>
|
||||
<line
|
||||
x1="19"
|
||||
y1="12"
|
||||
x2="5"
|
||||
y2="12"
|
||||
class="scale-x-0 group-hover:scale-x-100 translate-x-3 group-hover:translate-x-0 transition-all duration-300 ease-in-out"
|
||||
></line>
|
||||
<polyline
|
||||
points="12 19 5 12 12 5"
|
||||
class="translate-x-1 group-hover:translate-x-0 transition-all duration-300 ease-in-out"
|
||||
></polyline>
|
||||
</svg>
|
||||
<div
|
||||
class="w-full group-hover:text-black group-hover:dark:text-white transition-colors duration-300 ease-in-out"
|
||||
>
|
||||
Back to {collection}
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex flex-wrap text-sm uppercase mt-12 gap-3 opacity-75">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="size-5 stroke-current">
|
||||
<use href="/ui.svg#calendar"></use>
|
||||
</svg>
|
||||
{formatDate(date)}
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="size-5 stroke-current">
|
||||
<use href="/ui.svg#book-open"></use>
|
||||
</svg>
|
||||
{readingTime(body)}
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-3xl font-semibold text-black dark:text-white mt-2">
|
||||
{title}
|
||||
</h1>
|
||||
<div class="mt-1">
|
||||
{summary}
|
||||
</div>
|
||||
{
|
||||
(demoUrl || repoUrl) && (
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
{demoUrl && (
|
||||
<a
|
||||
href={demoUrl}
|
||||
target="_blank"
|
||||
class="group flex gap-2 items-center px-3 py-1.5 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend"
|
||||
>
|
||||
<svg class="size-4">
|
||||
<use
|
||||
href="/ui.svg#globe"
|
||||
class="fill-current group-hover:fill-black group-hover:dark:fill-white blend"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-current group-hover:text-black group-hover:dark:text-white blend">
|
||||
See Demo
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
{repoUrl && (
|
||||
<a
|
||||
href={repoUrl}
|
||||
target="_blank"
|
||||
class="group flex gap-2 items-center px-3 py-1.5 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend"
|
||||
>
|
||||
<svg class="size-4">
|
||||
<use
|
||||
href="/ui.svg#link"
|
||||
class="fill-current group-hover:fill-black group-hover:dark:fill-white blend"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-current group-hover:text-black group-hover:dark:text-white blend">
|
||||
See Repository
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
import Container from "@components/Container.astro";
|
||||
---
|
||||
|
||||
<div class="flex-1 py-5">
|
||||
<Container size="md">
|
||||
<slot />
|
||||
</Container>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
import "@styles/global.css";
|
||||
import BaseHead from "@components/BaseHead.astro";
|
||||
import Header from "@components/Header.astro";
|
||||
import Footer from "@components/Footer.astro";
|
||||
import Drawer from "@components/Drawer.astro";
|
||||
const { title, description } = Astro.props;
|
||||
import { SITE } from "@consts";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead
|
||||
title={`${title} | ${SITE.TITLE}`}
|
||||
description={description}
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<Drawer />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
import Container from "@components/Container.astro";
|
||||
---
|
||||
|
||||
<div class="pt-36 pb-5">
|
||||
<Container size="md">
|
||||
<slot />
|
||||
</Container>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export function formatDate(date: Date) {
|
||||
return Intl.DateTimeFormat("en-GB", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
export function readingTime(html: string) {
|
||||
const textOnly = html.replace(/<[^>]+>/g, "");
|
||||
const wordCount = textOnly.split(/\s+/).length;
|
||||
const readingTimeMinutes = (wordCount / 200 + 1).toFixed();
|
||||
return `${readingTimeMinutes} min read`;
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection } from "astro:content";
|
||||
import PageLayout from "@layouts/PageLayout.astro";
|
||||
import TopLayout from "@layouts/TopLayout.astro";
|
||||
import BottomLayout from "@layouts/BottomLayout.astro";
|
||||
import ArticleTopLayout from "@layouts/ArticleTopLayout.astro";
|
||||
import ArticleBottomLayout from "@layouts/ArticleBottomLayout.astro";
|
||||
|
||||
// Create the static blog pages
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection("blog");
|
||||
return posts
|
||||
.filter((post) => !post.data.draft)
|
||||
.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: post,
|
||||
}));
|
||||
}
|
||||
|
||||
// Get the requested post
|
||||
type Props = CollectionEntry<"blog">;
|
||||
const post = Astro.props;
|
||||
const { title, summary } = post.data;
|
||||
---
|
||||
|
||||
<PageLayout title={title} description={summary}>
|
||||
<TopLayout>
|
||||
<div class="animate">
|
||||
<ArticleTopLayout entry={post} />
|
||||
</div>
|
||||
</TopLayout>
|
||||
<BottomLayout>
|
||||
<div class="animate">
|
||||
<ArticleBottomLayout entry={post} />
|
||||
</div>
|
||||
</BottomLayout>
|
||||
</PageLayout>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import PageLayout from "@layouts/PageLayout.astro";
|
||||
import TopLayout from "@layouts/TopLayout.astro";
|
||||
import BottomLayout from "@layouts/BottomLayout.astro";
|
||||
import Blog from "@components/Blog";
|
||||
import { BLOG } from "@consts";
|
||||
|
||||
const posts = (await getCollection("blog"))
|
||||
.filter((post) => !post.data.draft)
|
||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
|
||||
|
||||
const tags = [...new Set(posts.flatMap((post) => post.data.tags))].sort(
|
||||
(a, b) => a.localeCompare(b)
|
||||
);
|
||||
---
|
||||
|
||||
<PageLayout title={BLOG.TITLE} description={BLOG.DESCRIPTION}>
|
||||
<TopLayout>
|
||||
<div class="animate page-heading">
|
||||
{BLOG.TITLE}
|
||||
</div>
|
||||
</TopLayout>
|
||||
<BottomLayout>
|
||||
<div class="animate">
|
||||
<Blog client:load tags={tags} data={posts} />
|
||||
</div>
|
||||
</BottomLayout>
|
||||
</PageLayout>
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import PageLayout from "@layouts/PageLayout.astro";
|
||||
import ArrowCard from "@components/ArrowCard";
|
||||
import StackCard from "@components/StackCard.astro";
|
||||
import { SITE, SOCIALS } from "@consts";
|
||||
import TwinklingStars from "@components/TwinklingStars.astro";
|
||||
import MeteorShower from "@components/MeteorShower.astro";
|
||||
|
||||
const posts = (await getCollection("blog"))
|
||||
.filter((post) => !post.data.draft)
|
||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
|
||||
.slice(0, 3);
|
||||
|
||||
const projects = (await getCollection("projects"))
|
||||
.filter((project) => !project.data.draft)
|
||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
|
||||
.slice(0, 3);
|
||||
|
||||
const stack = [
|
||||
{
|
||||
text: "Astro",
|
||||
icon: "astro",
|
||||
href: "https://astro.build",
|
||||
},
|
||||
{
|
||||
text: "Javascript",
|
||||
icon: "javascript",
|
||||
href: "https://www.javascript.com",
|
||||
},
|
||||
{
|
||||
text: "Typescript",
|
||||
icon: "typescript",
|
||||
href: "https://www.typescriptlang.org",
|
||||
},
|
||||
{
|
||||
text: "Tailwind",
|
||||
icon: "tailwind",
|
||||
href: "https://tailwindcss.com",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<PageLayout title="Home" description={SITE.DESCRIPTION}>
|
||||
<!-- Light Mode: Particles -->
|
||||
<div class="absolute inset-0 block dark:hidden">
|
||||
<div id="particles1" class="fixed inset-0"></div>
|
||||
<div id="particles2" class="fixed inset-0"></div>
|
||||
<div id="particles3" class="fixed inset-0"></div>
|
||||
</div>
|
||||
|
||||
<!-- Dark Theme: Stars -->
|
||||
<div class="absolute inset-0 bg-black hidden dark:block">
|
||||
<div id="stars1" class="fixed inset-0"></div>
|
||||
<div id="stars2" class="fixed inset-0"></div>
|
||||
<div id="stars3" class="fixed inset-0"></div>
|
||||
</div>
|
||||
|
||||
<!-- Dark Theme: Twinkling Stars / Metors -->
|
||||
<div id="galaxy" class="fixed inset-0">
|
||||
<div class="hidden dark:block">
|
||||
<TwinklingStars />
|
||||
<MeteorShower />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script is:inline src="/js/bg.js"></script>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="relative h-screen w-full">
|
||||
<div
|
||||
id="planetcont"
|
||||
class="animate absolute inset-0 top-1/4 overflow-hidden"
|
||||
>
|
||||
<div
|
||||
id="crescent"
|
||||
class="absolute top-0 left-1/2 -translate-x-1/2 w-[250vw] min-h-[100vh] aspect-square rounded-full p-[1px] bg-gradient-to-b from-black/25 dark:from-white/75 from-0% to-transparent to-5%"
|
||||
>
|
||||
<div
|
||||
id="planet"
|
||||
class="w-full h-full bg-white dark:bg-black rounded-full p-[1px] overflow-hidden flex justify-center"
|
||||
>
|
||||
<div
|
||||
id="blur"
|
||||
class="w-full h-20 rounded-full bg-neutral-900/25 dark:bg-white/25 blur-3xl"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="animate absolute h-full w-full flex items-center justify-center"
|
||||
>
|
||||
<div
|
||||
class="relative w-full h-full flex items-center justify-center"
|
||||
>
|
||||
<div class="p-5 text-center">
|
||||
<p
|
||||
class="animated text-lg md:text-xl lg:text-2xl font-semibold opacity-75"
|
||||
>
|
||||
Hello, I am Moritz
|
||||
</p>
|
||||
<p
|
||||
class="animated text-2xl md:text-3xl lg:text-4xl font-bold uppercase text-black dark:text-white"
|
||||
>
|
||||
Computer Science Student
|
||||
</p>
|
||||
<p
|
||||
class="animated text-sm md:text-base lg:text-lg opacity-75"
|
||||
>
|
||||
Currently studying at Paderborn University.
|
||||
</p>
|
||||
<div
|
||||
id="ctaButtons"
|
||||
class="animated flex flex-wrap gap-4 justify-center mt-5"
|
||||
>
|
||||
<a
|
||||
href="/blog/"
|
||||
class="py-2 px-4 rounded truncate text-xs md:text-sm lg:text-base bg-black dark:bg-white text-white dark:text-black hover:opacity-75 blend"
|
||||
>
|
||||
Read my blog
|
||||
</a>
|
||||
<a
|
||||
href="/work/"
|
||||
class="py-2 px-4 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend"
|
||||
>
|
||||
View my work
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="relative bg-white dark:bg-black">
|
||||
<div class="mx-auto max-w-screen-sm p-5 space-y-24 pb-16">
|
||||
<!-- About Section -->
|
||||
<section class="animate">
|
||||
<article>
|
||||
<p>
|
||||
I love to build things, may it be front-end, back-end or
|
||||
a cli-tool. I am motivated by challenging projects where
|
||||
I have to research and learn new concepts.
|
||||
</p>
|
||||
<p>Now</p>
|
||||
<p>
|
||||
I currently study computer science at
|
||||
<a
|
||||
href="https://upb.de"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Paderborn University</a
|
||||
>
|
||||
with economics as my minor subject, while also getting a
|
||||
peek at electrical engineering & maths in my regular subject.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- Blog Preview Section -->
|
||||
<section class="animate">
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between">
|
||||
<p class="font-semibold text-black dark:text-white">
|
||||
Recent posts
|
||||
</p>
|
||||
<a
|
||||
href="/blog/"
|
||||
class="w-fit col-span-3 group flex gap-1 items-center underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend"
|
||||
>
|
||||
<span
|
||||
class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend"
|
||||
>
|
||||
All posts
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="space-y-4">
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li>
|
||||
<ArrowCard entry={post} />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tech Stack Section -->
|
||||
<section class="animate">
|
||||
<div class="space-y-4">
|
||||
<p class="font-semibold text-black dark:text-white">
|
||||
Website build with
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center gap-2 mt-5">
|
||||
{
|
||||
stack.map((item) => (
|
||||
<StackCard
|
||||
text={item.text}
|
||||
icon={item.icon}
|
||||
href={item.href}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Project Preview Section -->
|
||||
<section class="animate">
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between">
|
||||
<p class="font-semibold text-black dark:text-white">
|
||||
Recent projects
|
||||
</p>
|
||||
<a
|
||||
href="/projects/"
|
||||
class="w-fit col-span-3 group flex gap-1 items-center underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend"
|
||||
>
|
||||
<span
|
||||
class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend"
|
||||
>
|
||||
All projects
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="space-y-4">
|
||||
{
|
||||
projects.map((project) => (
|
||||
<li>
|
||||
<ArrowCard entry={project} />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section class="animate">
|
||||
<div>
|
||||
<p class="font-semibold text-black dark:text-white">
|
||||
Let's Connect
|
||||
</p>
|
||||
<p>Reach out to me via email or on social media.</p>
|
||||
<div class="grid grid-cols-4 gap-y-2 mt-4 auto-cols-min">
|
||||
{
|
||||
SOCIALS.map((social) => (
|
||||
<>
|
||||
<div class="col-span-1 flex items-center gap-1">
|
||||
<span class="whitespace-nowrap truncate">
|
||||
{social.NAME}
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-span-3 truncate">
|
||||
<a
|
||||
href={social.HREF}
|
||||
target="_blank"
|
||||
class="w-fit col-span-3 group flex gap-1 items-center underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend"
|
||||
>
|
||||
<span class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend">
|
||||
{social.TEXT}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection } from "astro:content";
|
||||
import PageLayout from "@layouts/PageLayout.astro";
|
||||
import TopLayout from "@layouts/TopLayout.astro";
|
||||
import BottomLayout from "@layouts/BottomLayout.astro";
|
||||
import ArticleTopLayout from "@layouts/ArticleTopLayout.astro";
|
||||
import ArticleBottomLayout from "@layouts/ArticleBottomLayout.astro";
|
||||
|
||||
// Create the static projects pages
|
||||
export async function getStaticPaths() {
|
||||
const projects = await getCollection("projects");
|
||||
return projects
|
||||
.filter((project) => !project.data.draft)
|
||||
.map((project) => ({
|
||||
params: { slug: project.slug },
|
||||
props: project,
|
||||
}));
|
||||
}
|
||||
|
||||
// Get the requested project
|
||||
type Props = CollectionEntry<"projects">;
|
||||
const project = Astro.props;
|
||||
const { title, summary } = project.data;
|
||||
---
|
||||
|
||||
<PageLayout title={title} description={summary}>
|
||||
<TopLayout>
|
||||
<div class="animate">
|
||||
<ArticleTopLayout entry={project} />
|
||||
</div>
|
||||
</TopLayout>
|
||||
<BottomLayout>
|
||||
<div class="animate">
|
||||
<ArticleBottomLayout entry={project} />
|
||||
</div>
|
||||
</BottomLayout>
|
||||
</PageLayout>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import PageLayout from "@layouts/PageLayout.astro";
|
||||
import TopLayout from "@layouts/TopLayout.astro";
|
||||
import BottomLayout from "@layouts/BottomLayout.astro";
|
||||
import Projects from "@components/Projects";
|
||||
import { PROJECTS } from "@consts";
|
||||
|
||||
const projects = (await getCollection("projects"))
|
||||
.filter((project) => !project.data.draft)
|
||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
|
||||
|
||||
const tags = [
|
||||
...new Set(projects.flatMap((project) => project.data.tags)),
|
||||
].sort((a, b) => a.localeCompare(b));
|
||||
---
|
||||
|
||||
<PageLayout title={PROJECTS.TITLE} description={PROJECTS.DESCRIPTION}>
|
||||
<TopLayout>
|
||||
<div class="animate page-heading">
|
||||
{PROJECTS.TITLE}
|
||||
</div>
|
||||
</TopLayout>
|
||||
<BottomLayout>
|
||||
<div class="animate">
|
||||
<Projects client:load tags={tags} data={projects} />
|
||||
</div>
|
||||
</BottomLayout>
|
||||
</PageLayout>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import type { APIRoute } from "astro";
|
||||
|
||||
const robotsTxt = `
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: ${new URL("sitemap-index.xml", import.meta.env.SITE).href}
|
||||
`.trim();
|
||||
|
||||
export const GET: APIRoute = () => {
|
||||
return new Response(robotsTxt, {
|
||||
headers: {
|
||||
"Content-Type": "text/plain; charset=utf-8",
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import rss from "@astrojs/rss";
|
||||
import { getCollection } from "astro:content";
|
||||
import { SITE } from "@consts";
|
||||
|
||||
type Context = {
|
||||
site: string;
|
||||
};
|
||||
|
||||
export async function GET(context: Context) {
|
||||
const posts = (await getCollection("blog")).map((item) => ({
|
||||
item,
|
||||
pre: "blog",
|
||||
}));
|
||||
const projects = (await getCollection("projects")).map((item) => ({
|
||||
item,
|
||||
pre: "projects",
|
||||
}));
|
||||
|
||||
const items = [...posts, ...projects].filter(
|
||||
({ item }) => !item.data.draft
|
||||
);
|
||||
|
||||
items.sort(
|
||||
(a, b) =>
|
||||
new Date(b.item.data.date).getTime() -
|
||||
new Date(a.item.data.date).getTime()
|
||||
);
|
||||
|
||||
return rss({
|
||||
title: SITE.TITLE,
|
||||
description: SITE.DESCRIPTION,
|
||||
site: context.site,
|
||||
items: items.map(({ item, pre }) => ({
|
||||
title: item.data.title,
|
||||
description: item.data.summary,
|
||||
pubDate: item.data.date,
|
||||
link: `/${pre}/${item.slug}/`,
|
||||
})),
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection } from "astro:content";
|
||||
import PageLayout from "@layouts/PageLayout.astro";
|
||||
import TopLayout from "@layouts/TopLayout.astro";
|
||||
import BottomLayout from "@layouts/BottomLayout.astro";
|
||||
import Search from "@components/Search";
|
||||
import { SEARCH } from "@consts";
|
||||
|
||||
const posts = (await getCollection("blog")).filter((post) => !post.data.draft);
|
||||
|
||||
const projects = (await getCollection("projects")).filter(
|
||||
(post) => !post.data.draft
|
||||
);
|
||||
|
||||
const data = [...posts, ...projects] as CollectionEntry<"blog">[];
|
||||
---
|
||||
|
||||
<PageLayout title={SEARCH.TITLE} description={SEARCH.DESCRIPTION}>
|
||||
<TopLayout>
|
||||
<div class="animate page-heading">
|
||||
{SEARCH.TITLE}
|
||||
</div>
|
||||
</TopLayout>
|
||||
<BottomLayout>
|
||||
<div class="animate">
|
||||
<Search client:load data={data} />
|
||||
</div>
|
||||
</BottomLayout>
|
||||
</PageLayout>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import PageLayout from "@layouts/PageLayout.astro";
|
||||
import TopLayout from "@layouts/TopLayout.astro";
|
||||
import BottomLayout from "@layouts/BottomLayout.astro";
|
||||
import { WORK } from "@consts";
|
||||
|
||||
const collection = await getCollection("work");
|
||||
|
||||
collection.sort(
|
||||
(a, b) =>
|
||||
new Date(b.data.dateStart).getTime() -
|
||||
new Date(a.data.dateStart).getTime()
|
||||
);
|
||||
|
||||
const work = await Promise.all(
|
||||
collection.map(async (item) => {
|
||||
const { Content } = await item.render();
|
||||
return { ...item, Content };
|
||||
})
|
||||
);
|
||||
|
||||
function formatWorkDate(input: Date | string) {
|
||||
if (typeof input === "string") return input;
|
||||
|
||||
const month = input.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
});
|
||||
|
||||
const year = new Date(input).getFullYear();
|
||||
return `${month} ${year}`;
|
||||
}
|
||||
---
|
||||
|
||||
<PageLayout title={WORK.TITLE} description={WORK.DESCRIPTION}>
|
||||
<TopLayout>
|
||||
<div class="animate page-heading">
|
||||
{WORK.TITLE}
|
||||
</div>
|
||||
</TopLayout>
|
||||
<BottomLayout>
|
||||
<ul>
|
||||
{
|
||||
work.map((entry) => (
|
||||
<li class="animate border-b border-black/10 dark:border-white/25 mt-4 py-8 first-of-type:mt-0 first-of-type:pt-0 last-of-type:border-none">
|
||||
<div class="text-sm uppercase mb-4">
|
||||
{formatWorkDate(entry.data.dateStart)} -{" "}
|
||||
{formatWorkDate(entry.data.dateEnd)}
|
||||
</div>
|
||||
<div class="text-black dark:text-white font-semibold">
|
||||
{entry.data.company}
|
||||
</div>
|
||||
<div class="text-sm font-semibold">
|
||||
{entry.data.role}
|
||||
</div>
|
||||
<article class="prose dark:prose-invert">
|
||||
<entry.Content />
|
||||
</article>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</BottomLayout>
|
||||
</PageLayout>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
@font-face {
|
||||
font-family: "Atkinson";
|
||||
src: url("/fonts/atkinson-regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson";
|
||||
src: url("/fonts/atkinson-bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
color-scheme: light;
|
||||
background-color: white;
|
||||
font-family: "Atkinson", sans-serif;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
@apply h-full w-full antialiased;
|
||||
@apply bg-white dark:bg-black;
|
||||
@apply text-black/75 dark:text-white/75;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply relative flex flex-col;
|
||||
}
|
||||
|
||||
main {
|
||||
@apply flex flex-col flex-1 bg-white dark:bg-black;
|
||||
}
|
||||
|
||||
header {
|
||||
@apply border-b;
|
||||
@apply transition-all duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
header:not(.scrolled) {
|
||||
@apply bg-transparent border-transparent;
|
||||
}
|
||||
|
||||
header.scrolled {
|
||||
@apply bg-white/75 dark:bg-black/50;
|
||||
@apply border-black/10 dark:border-white/25;
|
||||
@apply backdrop-blur-sm saturate-200;
|
||||
}
|
||||
|
||||
article {
|
||||
@apply prose dark:prose-invert max-w-full pb-12;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
@apply font-semibold text-black dark:text-white;
|
||||
}
|
||||
|
||||
.blend {
|
||||
@apply transition-all duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
/** Light theme particles on home page */
|
||||
@keyframes animateParticle {
|
||||
from {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
}
|
||||
|
||||
/** styles for public /animation.js */
|
||||
.animate {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
transition: opacity 1s ease, transform 1s ease;
|
||||
}
|
||||
|
||||
.animate.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
article img {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* TWINKLE STARS
|
||||
*/
|
||||
|
||||
#twinkle-star.template {
|
||||
@apply absolute -left-full; /* hide offscreen */
|
||||
}
|
||||
|
||||
#twinkle-star.twinkle {
|
||||
@apply animate-twinkle; /* defined in tailwind.config */
|
||||
}
|
||||
|
||||
/**
|
||||
* Meteors
|
||||
*/
|
||||
|
||||
#meteors .shower {
|
||||
@apply absolute inset-0 top-0;
|
||||
@apply left-1/2 -translate-x-1/2;
|
||||
@apply w-screen aspect-square;
|
||||
}
|
||||
|
||||
#meteors .meteor {
|
||||
@apply animate-meteor; /* defined in tailwind.config */
|
||||
@apply absolute top-1/2 left-1/2 w-px h-[75vh];
|
||||
@apply bg-gradient-to-b from-white to-transparent;
|
||||
}
|
||||
|
||||
#meteors .shower.ur {
|
||||
@apply rotate-45;
|
||||
}
|
||||
|
||||
#meteors .shower.dr {
|
||||
@apply rotate-135;
|
||||
}
|
||||
|
||||
#meteors .shower.dl {
|
||||
@apply rotate-225;
|
||||
}
|
||||
|
||||
#meteors .shower.ul {
|
||||
@apply rotate-315;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
export type Page = {
|
||||
TITLE: string;
|
||||
DESCRIPTION: string;
|
||||
};
|
||||
|
||||
export interface Site extends Page {
|
||||
AUTHOR: string;
|
||||
}
|
||||
|
||||
export type Links = {
|
||||
TEXT: string;
|
||||
HREF: string;
|
||||
}[];
|
||||
|
||||
export type Socials = {
|
||||
NAME: string;
|
||||
ICON: string;
|
||||
TEXT: string;
|
||||
HREF: string;
|
||||
}[];
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
import defaultTheme from "tailwindcss/defaultTheme";
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: ["class"],
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ["Atkinson", ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
typography: {
|
||||
DEFAULT: {
|
||||
css: {
|
||||
maxWidth: "full",
|
||||
},
|
||||
},
|
||||
},
|
||||
rotate: {
|
||||
45: "45deg",
|
||||
135: "135deg",
|
||||
225: "225deg",
|
||||
315: "315deg",
|
||||
},
|
||||
animation: {
|
||||
twinkle: "twinkle 2s ease-in-out forwards",
|
||||
meteor: "meteor 3s ease-in-out forwards",
|
||||
},
|
||||
keyframes: {
|
||||
twinkle: {
|
||||
"0%": {
|
||||
opacity: 0,
|
||||
transform: "rotate(0deg)",
|
||||
},
|
||||
"50%": {
|
||||
opacity: 1,
|
||||
transform: "rotate(180deg)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 0,
|
||||
transform: "rotate(360deg)",
|
||||
},
|
||||
},
|
||||
meteor: {
|
||||
"0%": {
|
||||
opacity: 0,
|
||||
transform: "translateY(200%)",
|
||||
},
|
||||
"50%": {
|
||||
opacity: 1,
|
||||
},
|
||||
"100%": {
|
||||
opacity: 0,
|
||||
transform: "translateY(0)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("@tailwindcss/typography")],
|
||||
};
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"strictNullChecks": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@*": ["src/*"]
|
||||
},
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js"
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.astro"],
|
||||
"exclude": ["dist", "node_modules"]
|
||||
}
|
||||
Loading…
Reference in New Issue