initialized next project

This commit is contained in:
2024-10-27 11:25:21 +01:00
parent 1514049c14
commit ff7910584c
63 changed files with 221 additions and 2409 deletions

3
.eslintrc.json Normal file
View File

@@ -0,0 +1,3 @@
{
"extends": ["next/core-web-vitals", "next/typescript"]
}

45
.gitignore vendored
View File

@@ -1,21 +1,40 @@
# build output # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
dist/
# generated types
.astro/
# dependencies # dependencies
node_modules/ /node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# logs # testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
pnpm-debug.log*
# environment variables # env files (can opt-in for commiting if needed)
.env .env*
.env.production
# macOS-specific files # vercel
.DS_Store .vercel
# typescript
*.tsbuildinfo
next-env.d.ts

View File

@@ -1,4 +0,0 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}

11
.vscode/launch.json vendored
View File

@@ -1,11 +0,0 @@
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}

View File

@@ -1 +1,36 @@
# vaporvee's website This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

View File

@@ -1,17 +0,0 @@
import { defineConfig } from "astro/config";
import minify from "astro-min";
import metaTags from "astro-meta-tags";
import mdx from "@astrojs/mdx";
import lighthouse from "astro-lighthouse";
import icon from "astro-icon";
// https://astro.build/config
export default defineConfig({
integrations: [
minify(),
metaTags(),
mdx(),
lighthouse(),
icon(),
],
});

BIN
bun.lockb

Binary file not shown.

9
next.config.ts Normal file
View File

@@ -0,0 +1,9 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
sassOptions: {
silenceDeprecations: ['legacy-js-api'],
}
};
export default nextConfig;

View File

@@ -1,48 +1,27 @@
{ {
"name": "vaporvees-website", "name": "vaporvee-web",
"type": "module", "version": "0.1.0",
"version": "0.0.1", "private": true,
"scripts": { "scripts": {
"dev": "astro dev", "dev": "next dev --turbopack",
"start": "astro dev", "build": "next build",
"build": "astro build", "start": "next start",
"preview": "astro preview", "lint": "next lint"
"astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/markdown-remark": "^4.2.1", "next": "15.0.1",
"@astrojs/mdx": "^2.1.1", "react": "19.0.0-rc-69d4b800-20241021",
"@expressive-code/plugin-shiki": "^0.32.4", "react-dom": "19.0.0-rc-69d4b800-20241021",
"@iconify-json/flat-color-icons": "^1.1.10", "sass": "^1.80.4"
"@iconify-json/logos": "^1.1.43",
"@iconify-json/prime": "^1.1.12",
"@iconify-json/simple-icons": "^1.1.109",
"@iconify-json/typcn": "^1.1.9",
"@iconify-json/vscode-icons": "^1.1.35",
"@microflash/remark-callout-directives": "^2.0.0",
"astro": "^4.2.6",
"astro-expressive-code": "^0.32.4",
"astro-icon": "^1.1.0",
"astro-lighthouse": "^0.1.3",
"astro-meta-tags": "^0.2.1",
"astro-min": "^1.1.0-dev.4",
"npx": "^3.0.0",
"rehype-autolink-headings": "^7.1.0",
"rehype-pretty-code": "^0.13.0",
"rehype-slug": "^6.0.0",
"remark-directive": "^3.0.0",
"remark-external-links": "^9.0.1",
"remark-toc": "^9.0.0",
"sass": "^1.70.0",
"shiki": "^1.0.0",
"unist-util-visit": "^5.0.0"
}, },
"devDependencies": { "devDependencies": {
"@iconify-json/mdi": "^1.1.67" "typescript": "^5",
}, "@types/node": "^20",
"optionalDependencies": { "@types/react": "^18",
"@esbuild/linux-x64": "^0.20.0", "@types/react-dom": "^18",
"@minify-html/node-linux-x64": "^0.15.0", "postcss": "^8",
"@rollup/rollup-linux-x64-gnu": "^4.10.0" "tailwindcss": "^3.4.1",
"eslint": "^8",
"eslint-config-next": "15.0.1"
} }
} }

8
postcss.config.mjs Normal file
View File

@@ -0,0 +1,8 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};
export default config;

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View File

@@ -1,16 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="V_Bottom" transform="matrix(1.87289,0,0,1.11233,-284.183,-107.81)">
<path d="M283.682,421.257C286.503,417.769 290.342,417.769 293.163,421.257C297.047,426.059 302.823,433.2 308.573,440.309C311.364,443.76 312.522,449.839 311.443,455.378C310.365,460.918 307.295,464.664 303.833,464.664C294.048,464.664 282.798,464.664 273.013,464.664C269.55,464.664 266.48,460.918 265.402,455.378C264.324,449.839 265.482,443.76 268.272,440.309C274.023,433.2 279.798,426.059 283.682,421.257Z" style="fill:rgb(126,202,156);"/>
</g>
<g id="V_Left" transform="matrix(-0.346681,0.571039,1.48881,1.12367,261.667,67.7284)">
<path d="M317.216,77.117C328.725,77.207 337.292,80.426 337.044,84.566C336.754,89.405 336.371,95.79 336.062,100.946C335.924,103.239 333.06,105.502 328.186,107.169C323.311,108.836 316.886,109.749 310.517,109.68C246.197,108.985 74.77,107.131 -0.973,106.313C-8.802,106.228 -15.527,104.676 -18.717,102.217C-21.906,99.758 -21.099,96.749 -16.586,94.277C-6.859,88.949 4.068,82.964 11.218,79.048C16.012,76.422 24.221,74.82 32.546,74.885C82.595,75.277 257.388,76.648 317.216,77.117Z" style="fill:rgb(126,202,156);"/>
</g>
<g id="V_Left1" serif:id="V_Left" transform="matrix(0.346681,0.571039,-1.48881,1.12367,250.333,67.7284)">
<path d="M317.216,77.117C328.725,77.207 337.292,80.426 337.044,84.566C336.754,89.405 336.371,95.79 336.062,100.946C335.924,103.239 333.06,105.502 328.186,107.169C323.311,108.836 316.886,109.749 310.517,109.68C246.197,108.985 74.77,107.131 -0.973,106.313C-8.802,106.228 -15.527,104.676 -18.717,102.217C-21.906,99.758 -21.099,96.749 -16.586,94.277C-6.859,88.949 4.068,82.964 11.218,79.048C16.012,76.422 24.221,74.82 32.546,74.885C82.595,75.277 257.388,76.648 317.216,77.117Z" style="fill:rgb(126,202,156);"/>
</g>
<g id="V_Top" transform="matrix(1.11404,-8.06924e-17,7.58833e-16,1.51247,56.2966,-11.7445)">
<path d="M321.069,75.834C328.515,75.834 334.551,80.28 334.551,85.764L334.551,100.196C334.551,102.83 333.13,105.357 330.601,107.219C328.073,109.082 324.643,110.128 321.067,110.128C269.971,110.128 88.583,110.128 37.466,110.128C33.887,110.128 30.454,109.081 27.923,107.217C25.392,105.352 23.97,102.824 23.97,100.187C23.97,95.656 23.97,90.304 23.97,85.773C23.97,80.284 30.011,75.834 37.464,75.834L321.069,75.834Z" style="fill:rgb(126,202,156);"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 230 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1014 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

View File

@@ -1,3 +0,0 @@
<svg width="29" height="5" viewBox="0 0 29 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="29" height="5" rx="2.5" fill="#7ECA9C"/>
</svg>

Before

Width:  |  Height:  |  Size: 155 B

View File

@@ -1,18 +0,0 @@
---
import "../styles/donation_callout.scss";
interface Props {
text: string;
}
const { text } = Astro.props;
---
<div class="donation-callout">
<img class="heart" src="/img/animated/green-heart.webp" alt="Green Heart" />
<p>
{text}<br />
<button
><a href="https://ko-fi.com/vaporvee" target="_blank">Donate</a></button
>
</p>
</div>

View File

@@ -1,9 +0,0 @@
---
const year = new Date().getFullYear();
import "../styles/footer.scss";
---
<footer>
&copy vaporvee 2021-{year} |
<a href="https://github.com/vaporvee/web" target="_blank">Sourcecode</a>
</footer>

View File

@@ -1,44 +0,0 @@
<style lang="scss">
@import "../styles/_var.scss";
#galary-zoom {
display: none;
margin: 0;
backdrop-filter: blur(10px);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
#zoom-image {
user-select: none;
position: sticky;
min-height: 20px;
min-width: 20px;
max-height: 35%;
max-width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
@media (max-width: $responsive-width) {
#zoom-image {
max-height: 100%;
max-width: 90%;
transform: translate(-7%, -50%);
}
}
}
</style>
<script lang="ts">
function maximizeImage(img) {
document.getElementById("galary-zoom").style.display = "initial";
document.getElementById("zoom-image").src = img.src;
}
</script>
<div id="galary-zoom" onclick='this.style.display = "none";'>
<img id="zoom-image" />
</div>

View File

@@ -1,56 +0,0 @@
---
const routes = {
Home: "/",
Projects: "/projects",
//Skills: "/skills",
Blog: "/blog",
};
import "../styles/navbar.scss";
import Logo from "../../public/favicon.svg?raw";
import { Icon } from "astro-icon/components";
---
<header>
<nav>
<a class="logo" href="/"><Fragment set:html={Logo} /></a>
{
Object.entries(routes).map(([pageName, path]) => {
const isActive =
(Astro.url.pathname.startsWith(path) && path !== "/") ||
Astro.url.pathname === path;
return (
<div class="navbar-entry">
<a href={path} class={isActive ? "active" : ""}>
{pageName}
{isActive ? (
<div class="highlighter">
<img src="/nav_highlight.svg" />
</div>
) : null}
</a>
</div>
);
})
}
</nav>
<div class="social">
<a href="https://github.com/vaporvee" target="_blank"
><Icon class="icon" size={25} name="mdi:github" /></a
>
<a href="https://discord.com/invite/EBdaTefpWy" target="_blank"
><Icon class="icon" size={25} name="prime:discord" /></a
>
<a
href="https://www.linkedin.com/in/yannik-ain/"
style="margin-right:4px;"
target="_blank"><Icon class="icon" size={25} name="mdi:linkedin" /></a
>
<span>|</span>
<a
style="font-weight: 700; margin-left: 5px; text-decoration: none; color: white"
target="_blank"
href="https://docs.vaporvee.com/#">Docs</a
>
</div>
</header>

View File

@@ -1,102 +0,0 @@
---
import SkillBadge from "./SkillBadge.astro";
import type { SkillKey } from "../data/skills";
interface Props {
name: string;
skills: SkillKey[];
href?: string;
gallery?: string | string[];
center?: true;
}
const { name, href, gallery, center, skills } = Astro.props;
---
<style lang="scss">
@import "../styles/_var.scss";
a {
color: white;
padding: 20px;
&.project-external {
text-decoration: none;
&::after {
width: 20px;
position: absolute;
right: 20px;
top: 20px;
}
}
}
.content {
padding: 0;
margin: 20px !important;
max-width: 40vw;
transition: border-color 0.3s;
.gallery {
margin: 15px;
display: flex;
justify-content: space-between;
img {
max-height: 250px;
max-width: 100%;
border-radius: 10px;
transition: transform 0.3s;
cursor: pointer;
&:hover {
transform: scale(1.1);
}
@media (max-width: $responsive-width) {
max-height: 12.5vh !important;
}
}
@media (max-width: $responsive-width) {
.single {
max-height: 17vh !important;
}
}
}
h2 {
font-size: 20px;
}
&:hover {
border-color: $link;
}
}
.no-hover {
&:hover {
border: 1px solid lighten($highlight, 12%);
}
}
</style>
<div id="galary-zoom"><img id="zoom-image" /></div>
<div class={href ? "content" : "content no-hover"}>
<a class="project-external" target={href ? "_blank" : ""} href={href}>
<h2>{name}</h2><slot /><br />
</a>
<div style="margin-inline: 20px;">
<b style="color: #fff;">Tools used:</b><br />
{skills.map((skill: SkillKey) => <SkillBadge key={skill} />)}
</div><br />
<div
style={center ? "text-align: center;" : ""}
class={gallery ? "gallery" : ""}
>
{
Array.isArray(gallery) ? (
gallery.map((src) => (
<img onclick="maximizeImage(this)" loading="lazy" src={src} />
))
) : (
<img
class="single"
onclick="maximizeImage(this)"
loading="lazy"
src={gallery as string}
/>
)
}
</div>
</div>

View File

@@ -1,57 +0,0 @@
---
import { Icon } from "astro-icon/components";
import { skills } from "../data/skills";
import type { SkillKey } from "../data/skills";
interface Props {
key: SkillKey;
}
const { key } = Astro.props;
---
<style lang="scss">
@import "../styles/_var.scss";
.icon {
color: white;
margin-top: 10px;
margin-inline: 5px;
}
.tooltip {
position: relative;
display: inline-block;
&:hover {
.tooltiptext {
visibility: visible;
}
}
.tooltiptext {
visibility: hidden;
background-color: $primary;
text-align: center;
padding: 5px 0;
border-radius: 6px;
border: 2px solid;
position: absolute;
z-index: 1;
width: 120px;
bottom: 85%;
left: 50%;
margin-left: -60px;
}
}
</style>
<div class="tooltip">
<span style={"border-color:" + skills[key].color} class="tooltiptext"
><a
style={skills[key].url ? "" : "color: #fff"}
href={skills[key].url}
target={skills[key].url ? "_blank" : ""}>{key}</a
></span
>
<Icon
name={skills[key].iconName}
size={25}
class="icon"
style={"color:" + skills[key].color}
/>
</div>

View File

@@ -1,133 +0,0 @@
const skilllist = {
"React": {
iconName: "mdi:react",
url: "https://react.dev/",
color: "#60C7DE"
},
"React Native": {
iconName: "mdi:react",
url: "https://reactnative.dev/",
color: "#60C7DE"
},
"TypeScript": {
iconName: "mdi:language-typescript",
url: "https://github.com/topics/typescript",
color: "#3178c6"
},
"Capacitor.js": {
iconName: "logos:capacitorjs-icon",
url: "https://capacitorjs.com/",
color: "#35A4EF"
},
"Android": {
iconName: "mdi:android",
url: "https://android.com/",
color: "#3DDC84"
},
"iOS": {
iconName: "mdi:apple-ios",
},
"Vue": {
iconName: "logos:vue",
url: "https://vuejs.org/",
color: "#41b883"
},
"Go": {
iconName: "logos:go",
url: "https://go.dev/",
color: "#00acd7"
},
"Tauri": {
iconName: "logos:tauri",
url: "https://tauri.app/",
color: "#24c8db"
},
"Git": {
iconName: "mdi:git",
url: "https://git-scm.com/",
color: "#de4c36"
},
"Tailwind": {
iconName: "logos:tailwindcss-icon",
url: "https://tailwindcss.com/",
color: "#44a8b3"
},
"Python": {
iconName: "logos:python",
url: "https://python.org/",
color: "#3572A5"
},
"Linux": {
iconName: "flat-color-icons:linux",
},
"C++": {
iconName: "mdi:language-cpp",
url: "https://github.com/topics/cpp?l=c%2B%2B&o",
color: "#f34b7d"
},
"C#": {
iconName: "mdi:language-csharp",
url: "https://github.com/topics/c-sharp?l=c%23",
color: "#178600"
},
"Godot": {
iconName: "logos:godot-icon",
url: "https://godotengine.org/",
color: "#478cbf"
},
"Unreal Engine": {
iconName: "mdi:unreal",
url: "https://www.unrealengine.com/"
},
"Astro": {
iconName: "vscode-icons:file-type-astro",
url: "https://astro.build/",
color: "#ff5a03"
},
"Bun": {
iconName: "logos:bun",
color:"#FBF0DF",
url: "https://bun.sh/"
},
"Blender": {
iconName: "logos:blender",
url: "https://blender.org/",
color: "#e87d0d"
},
"OpenAI API": {
iconName: "simple-icons:openai",
url: "https://platform.openai.com/docs/api-reference/"
},
"Elevenlabs API": {
iconName: "mdi:two",
url: "https://elevenlabs.io/api"
},
"Adobe Photoshop": {
iconName: "logos:adobe-photoshop"
},
"Adobe Illustrator": {
iconName: "logos:adobe-illustrator"
},
"Adobe Premiere": {
iconName: "logos:adobe-premiere"
},
"Adobe Indesign": {
iconName: "logos:adobe-indesign"
},
"Docker":{
iconName: "mdi:docker",
url: "https://www.docker.com/",
color: "#1d63ed"
}
} as const;
type Skill = {
iconName: string
url?: string
color?: string
}
type SkillKey = keyof typeof skilllist;
const skills: Record<SkillKey, Skill> = skilllist
export { skills }
export type { SkillKey }

2
src/env.d.ts vendored
View File

@@ -1,2 +0,0 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

BIN
src/fonts/GeistMonoVF.woff Normal file

Binary file not shown.

BIN
src/fonts/GeistVF.woff Normal file

Binary file not shown.

View File

@@ -1,39 +0,0 @@
---
interface Props {
title: string;
description: string;
}
const { title } = Astro.props;
const { description } = Astro.props;
import "../styles/main.scss";
import "../styles/callout.scss";
import Navbar from "../components/Navbar.astro";
import Footer from "../components/Footer.astro";
import { ViewTransitions } from "astro:transitions";
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="darkreader-lock" />
<meta name="theme-color" content="#1c1427" />
<meta name="description" content={description} />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title} | vaporvee's Website</title>
<ViewTransitions />
</head>
<body>
<Navbar />
<main>
<slot />
</main>
<br />
<Footer />
</body>
</html>

View File

@@ -1,28 +0,0 @@
---
interface Props {
href: string;
}
const { href } = Astro.props;
import "../styles/main.scss";
import "../styles/callout.scss";
import { ViewTransitions } from "astro:transitions";
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="darkreader-lock" />
<meta name="theme-color" content="#1c1427" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta http-equiv="refresh" content={"0; url=" + href} />
<title>Redirecting... | vaporvee's Website</title>
<ViewTransitions />
</head>
<body>
<a href={href}>Click if not redirecting</a>
</body>
</html>

29
src/layouts/default.tsx Normal file
View File

@@ -0,0 +1,29 @@
import localFont from "next/font/local";
import "../styles/globals.scss";
const geistSans = localFont({
src: "../fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "../fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}

View File

@@ -1,19 +0,0 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout
title="ERROR 404"
description="This is my personal website with my projects, docs and other useful stuff."
>
<main>
<div class="center">
<h1 style="text-align: center;">ERROR 404</h1>
<br />
<p style="font-size: 22px;">
The page either never existed or was renamed.<br />
Try something in the navbar above!
</p>
</div>
</main>
</Layout>

View File

@@ -1,15 +0,0 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout
title="Blog"
description="This is my personal website with my projects, docs and other useful stuff."
>
<main>
<div class="content">
<h1>Blog</h1>
<p style="font-size: 20px; min-width: 70vw;">Coming soon! 🚧</p>
</div>
</main>
</Layout>

7
src/pages/blog.tsx Normal file
View File

@@ -0,0 +1,7 @@
import '../layouts/default'
export default function Home() {
return (
<div>Blog</div>
);
}

View File

@@ -1,5 +0,0 @@
---
import Redirect from "../layouts/Redirect.astro";
---
<Redirect href="https://docs.vaporvee.com/" />

View File

@@ -1,5 +0,0 @@
---
import Redirect from "../../layouts/Redirect.astro";
---
<Redirect href="https://docs.vaporvee.com/discord-rpc-godot" />

View File

@@ -1,44 +0,0 @@
---
import Layout from "../layouts/Layout.astro";
import "../styles/home.scss";
import { Icon } from "astro-icon/components";
---
<Layout
title="Home"
description="This is my personal website with my projects, docs and other useful stuff."
>
<div class="lines">
<div class="home-main-box">
<div class="home-title-box">
<h1 class="home-title">vaporvee</h1>
<h2 class="home-title home-subtitle">web & game developer</h2>
<a href="/projects">
<button class="continue"
>To my Projects<Icon
size={35}
class="icon"
name="typcn:arrow-right-outline"
/>
</button>
</a>
</div>
<div class="content">
<div class="avatar portrait"><div class="avatar"></div></div>
<p>
Hello my name is <b>Yannik</b>!<br />
Im a <b> web and game developer</b> living <b>in Germany</b>.<br />
<br /><br />
My primary tools: React, Vue, TypeScript, Godot Engine's GDScript, Golang.
<br />
While I have some preferred tools, I always choose the best one for the
job, even if it's not on my usual list. My goal is to find the right solution
for each project.
<br />
Beyond coding I'm passionate about design, making games / stories, music
and cooking.
</p>
</div>
</div>
</div>
</Layout>

7
src/pages/index.tsx Normal file
View File

@@ -0,0 +1,7 @@
import '../layouts/default'
export default function Home() {
return (
<div>Home</div>
);
}

View File

@@ -1,99 +0,0 @@
---
import Layout from "../layouts/Layout.astro";
import ProjectCard from "../components/ProjectCard.astro";
import GalaryZoom from "../components/GalaryZoom.astro";
---
<style lang="scss">
h1 {
margin-bottom: 40px;
}
</style>
<Layout
title="Projects"
description="This is my personal website with my projects, docs and other useful stuff."
>
<main>
<div style="margin-bottom: 20px;">
<h1 style="text-align: center;">Projects</h1>
<GalaryZoom />
<ProjectCard
name="voicenext"
skills={[
"React",
"TypeScript",
"Tailwind",
"Bun",
"Capacitor.js",
"Astro",
"React Native",
"Python",
"Tauri",
"Android",
"iOS",
"Git",
]}
center={true}
gallery={[
"/img/projects/voicenext/Promo.png",
"/img/projects/voicenext/Home.png",
"/img/projects/voicenext/Register.png",
"/img/projects/voicenext/Settings.png",
"/img/projects/voicenext/Settings2.png",
]}
href="https://voicenext.app"
>My team and I are currently working on voicenext, a voice messaging app
designed to keep communication simple and intuitive. With voicenext, you
just hold to speak and tap to listen. We are also working on unique
features that other messaging apps haven't considered because we are
solely focused on audio.
</ProjectCard>
<ProjectCard
name="SmartCustomerAI"
skills={[
"Vue",
"TypeScript",
"Bun",
"Tauri",
"OpenAI API",
"Elevenlabs API",
"Python",
"Linux",
"Docker",
"Git",
]}
gallery="/img/projects/sca/call.png"
>I am currently developing a program that can simulate customer calls.
For this, I am using the Web Speech Recognition API, OpenAI, and
Elevenlabs. It is in a finished state but currently exclusive to a
customer.
</ProjectCard>
<ProjectCard
name="acecore"
skills={["Go", "Python", "Git", "Linux"]}
gallery="/img/projects/acecore.png"
href="https://github.com/vaporvee/acecore"
>Modular multi purpose bot powering your Discord server.<br />
Custom forms with ticket and approve system, tags / custom commands, sticky
messages, auto join roles, autopublish, cat pictures and much more
</ProjectCard>
<ProjectCard
name="DiscordRPC Godot Plugin"
skills={["Godot", "C++", "Python", "Git", "Linux"]}
gallery="/img/projects/discord-rpc.png"
href="https://github.com/vaporvee/discord-rpc-godot"
>The first Discord RPC plugin for the version 4 of the Godot game
engine.
</ProjectCard>
<ProjectCard
name="Astro.js GitHub Component"
skills={["TypeScript", "Astro", "Git"]}
href="https://github.com/vaporvee/astro-github-component"
>Adds a component to astro with statically built GitHub info and dynamic
updated stars and forks. Supports GitHub auth tokens in the built
process (use a .env for example) and dynamic stars/forks caching to
manage the GitHub API rate limiting.
</ProjectCard>
</div>
</main>
</Layout>

7
src/pages/projects.tsx Normal file
View File

@@ -0,0 +1,7 @@
import '../layouts/default'
export default function Home() {
return (
<div>Projects</div>
);
}

View File

@@ -1,15 +0,0 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout
title="Skills"
description="This is my personal website with my projects, docs and other useful stuff."
>
<main>
<div class="content">
<h1>Skills</h1>
<p style="font-size: 20px;">Coming soon! 🚧</p>
</div>
</main>
</Layout>

View File

@@ -1,32 +0,0 @@
@font-face {
font-family: "Tanker-Regular";
src: url("/fonts/Tanker-Regular.ttf") format("truetype");
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Satoshi-Regular";
src: url("/fonts/Satoshi-Regular.ttf") format("truetype");
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Satoshi-Bold";
src: url("/fonts/Satoshi-Bold.ttf") format("truetype");
font-weight: 700;
font-display: swap;
font-style: normal;
}
$primary: #1C1B20;
$secondary: #5f5d630f;
$highlight: #332f3c;
$accent: #7eca9c;
$link: #ccffbd;
$responsive-width: 1226px;
$responsive-width-secondary: 750px;

View File

@@ -1,80 +0,0 @@
.callout {
max-width: 700px;
--callout-color: hsl(207, 14%, 62%);
--callout-background: ;
--callout-border: 1px solid hsl(205, 15%, 33%);
--callout-radius: 8px;
--callout-padding: 1.2vh;
border: var(--callout-border);
border-radius: var(--callout-radius);
background: var(--callout-background);
margin: 1vh;
}
.callout code,
.callout pre {
border: none;
}
.callout-content {
padding: var(--callout-padding);
}
.callout-content:first-child,
.callout-content:only-child {
margin-block-start: 0;
}
.callout-content:last-child,
.callout-content:only-child {
margin-block-end: 0;
}
.callout-indicator {
display: flex;
align-items: center;
padding: var(--callout-padding) var(--callout-padding) 0;
}
.callout-hint {
margin-inline-end: calc(var(--callout-padding) / 4);
color: var(--callout-color);
}
.callout-title {
margin-inline-start: calc(var(--callout-padding) / 4);
color: var(--callout-color);
font-size: 0.9em;
font-weight: bold;
letter-spacing: 0.04em;
}
.callout-note {
--callout-background: hsl(0, 0%, 32%, 0.05);
--callout-color: hsl(0, 0%, 92%, 0.6);
--callout-border: 1px solid hsl(0, 0%, 66%, 0.25);
}
.callout-commend {
--callout-background: hsl(153, 47%, 49%, 0.05);
--callout-color: hsl(153, 62%, 54%);
--callout-border: 1px solid hsl(153, 47%, 49%, 0.25);
}
.callout-warn {
--callout-background: hsl(45, 100%, 55%, 0.05);
--callout-color: hsl(45, 97%, 66%);
--callout-border: 1px solid hsl(45, 100%, 55%, 0.25);
}
.callout-deter {
--callout-background: hsl(353, 83%, 58%, 0.05);
--callout-color: hsl(341, 89%, 63%);
--callout-border: 1px solid hsl(353, 83%, 58%, 0.25);
}
.callout-assert {
--callout-background: rgba(47, 131, 157, 0.05);
--callout-color: hsl(201, 89%, 63%);
--callout-border: 1px solid hsl(195, 61%, 56%, 0.25);
}

View File

@@ -1,27 +0,0 @@
.donation-callout {
position: sticky;
.heart {
margin-right: 10px;
margin-top: 10px;
width: 5vh;
height: 5vh;
max-width: 50px;
max-height: 50px;
}
display: flex;
border-radius: 10px;
margin-block: 50px;
background-color: #7c7c7c1f;
border: 1px solid lighten(#7c7c7c1f, 12%);
padding: 16px;
font-size: 16px;
button {
align-self: self-end;
margin: 0;
margin-top: 16px;
min-width: 150px;
a[target="_blank"]::after {
background-color: white;
}
}
}

View File

@@ -1,15 +0,0 @@
footer {
display: flexbox;
align-items: center;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 2vh;
a {
color: white;
&[target="_blank"]::after {
background-color: white;
}
}
}

20
src/styles/globals.scss Normal file
View File

@@ -0,0 +1,20 @@
@tailwind base;
@tailwind components;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}

View File

@@ -1,199 +0,0 @@
@import "./_var.scss";
main {
display: unset;
flex-direction: unset;
align-items: unset;
max-width: 100%;
}
.lines {
background-color: $secondary;
background-image:
repeating-linear-gradient(
-45deg,
transparent,
transparent 2rem,
$primary 2rem,
$primary 4rem
);
background-size: 100vw 99.3vh;
animation: barberpole 11s linear infinite;
background-repeat: repeat;
min-height: 75vh;
padding-inline: 10vw;
display: flex;
align-items: center;
justify-content: space-evenly;
.home-main-box {
display: flex;
justify-content: space-between;
align-items: center;
width: 100vw;
.home-title-box {
justify-self: flex-start;
margin-right: 5vw;
h1 {
font-size: 110px;
color: #e6e6e6;
background: linear-gradient(to right, #e6e6e6 0, white 8%, #e6e6e6 16%);
background-position: 0;
background-color: #e6e6e6;
background-repeat: no-repeat;
background-size: 500px;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 3s infinite linear;
animation-fill-mode: forwards;
text-size-adjust: none;
}
h2{
font-size: 35px;
}
.home-title {
margin: 0;
color: #fff;
font-family: "Tanker-Regular", "Arial";
}
.continue {
margin-top: 40px !important;
padding: 15px 50px;
font-size: 22px;
&:hover{
svg{
transition: margin-left 0.2s;
margin-left: 30px !important;
}
&{
transition: padding-right 0.2s;
padding-right: 38px;
cursor: pointer;
}
}
.icon{
margin-left:18px;
margin-bottom:-9px;
}
}
}
}
.content {
justify-self: flex-end;
margin: 0;
margin-top: 25px !important;
max-width: 528px;
&p {
z-index: 2;
}
.avatar {
position: absolute;
box-shadow: 0px 4px 4px 0px #00000040;
top: 0;
right: 0;
width: 80px;
height: 80px;
border-radius: 40px;
background-size: cover;
transition: opacity 0.5s linear;
background-image: url("/img/avatar.webp");
z-index: 1;
&.portrait {
top: 8% !important;
right: 10%;
background-image: url("/img/portrait.webp");
&:hover {
opacity: 100;
}
}
&:hover {
opacity: 0;
box-shadow: none;
}
}
}
}
@media (max-width: $responsive-width) {
.icon{
margin-left:18px;
margin-bottom:-11px;
}
.lines {
flex-direction: column;
.home-main-box {
flex-direction: column;
align-items: center;
.home-title-box {
margin-right: 0;
margin-bottom: 2vh;
text-align: center;
h1 {
font-size: 75px;
}
h2 {
font-size: 25px;
}
.continue {
margin-top: 20px;
padding: 10px 30px;
padding-bottom: 15px;
font-size: 18px;
&:hover{
svg{
transition: margin-left 0.2s;
margin-left: 30px !important;
}
&{
transition: padding-right 0.2s;
padding-right: 18px;
cursor: pointer;
}
}
}
}
.content {
margin-top: 10px;
margin-bottom: 20px;
justify-self: center;
}
}
}
.lines{
margin-bottom: 50px;
}
}
@media (max-width: $responsive-width-secondary){
.avatar {
&.portrait {
left: 50%;
transform: translate(-50%, 0);
right: 0 !important;
top: 5% !important;
}
}
.content {
p{
margin-top: 120px;
}
}
}
@keyframes shine {
0% {
background-position: -200px;
}
100% {
background-position: 500px;
}
}
@keyframes barberpole {
100% {
background-position: 100% 100%;
}
}

View File

@@ -1,208 +0,0 @@
@import "./_var.scss";
:root {
color-scheme: dark;
--accent-color: $accent; // conversion for theme color meta tag
}
::selection {
background-color: $accent;
}
::marker {
color: $accent;
}
body {
background-color: $primary;
font-family: "Satoshi-Regular", "Arial";
font-size: 16px;
position: relative;
min-height: 95vh;
}
h1 {
font-family: "Tanker-Regular", "Arial";
}
main {
display: flex;
justify-content: space-evenly;
}
.content {
display: flex;
flex-direction: column;
position: relative;
align-self: center;
background-color: $highlight;
border-radius: 25px;
border: 1px solid lighten($highlight, 12%);
box-shadow: 0px 4px 4px 0px #00000040;
padding: 2vw;
width: 65vw;
padding: 20px;
margin-bottom: 11vh;
}
.second-content {
align-self: center;
text-align: center;
$second-content-clr: #6e6e6e40;
background-color: $second-content-clr;
border-radius: 25px;
border: 1px solid lighten($second-content-clr, 12%);
min-width: 30vw;
margin-inline: 10vw;
p,
ul,
h1,
h2,
h3 {
padding-inline: 2vw;
}
}
td {
border-inline: 15px solid;
border-color: #ffffff00;
}
table {
overflow: scroll;
display: block;
}
b,
strong {
font-family: "Satoshi-Bold";
color: $accent;
}
a {
color: $link;
&[target="_blank"]::after {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: -0.125em;
content: " ";
$external_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z'/%3E%3C/svg%3E");
-webkit-mask: $external_svg no-repeat center;
mask: $external_svg no-repeat center;
background-color: $link; // This will color the SVG
}
}
figure {
margin: 0;
}
.expressive-code {
border: 1px solid lighten(#282a36, 10%);
code {
background-color: transparent;
}
pre {
background-color: transparent !important;
border: transparent !important;
background: none !important;
}
.copy {
button {
width: 30px !important;
height: 30px !important;
margin: 5px !important;
border-radius: 25px !important;
display: none;
}
}
&:hover {
.copy {
button {
display: inline;
}
}
}
& {
position: relative;
overflow: scroll;
display: grid;
margin: 0;
max-width: 50vw;
background-color: #282a36;
border-radius: 20px;
}
.frame.is-terminal .header::before {
background-color: gray !important;
}
}
code {
background-color: #282a36;
padding-inline: 10px;
padding-block: 2px;
border-radius: 15px;
}
h1,
h2,
h3 {
a {
color: white;
text-decoration: none;
}
}
svg {
margin-bottom: -2px;
}
img {
max-width: 100%;
max-height: 100%;
}
button {
$button-color: #42b971;
padding-block: 10px;
padding-inline: 20px;
border-radius: 50px;
font-family: "Satoshi-Bold";
background-color: $button-color;
border: 1px solid lighten($button-color, 12%);
font-size: 18px;
&:active {
background-color: darken($button-color, 10);
transform: translateY(1px);
}
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: $responsive-width) {
.content {
min-width: 50vw !important;
}
}
@media (max-width: $responsive-width-secondary) {
.content {
min-width: 85vw !important;
}
}

View File

@@ -1,960 +0,0 @@
{
"name": "moonlight-ii",
"type": "dark",
"colors": {
"foreground": "#c8d3f5",
"focusBorder": "#82aaff",
"contrastBorder": "#15151b",
"editorCursor.foreground": "#82aaff",
"editorRuler.foreground": "#444a73bb",
"scrollbar.shadow": "#00000022",
"tree.indentGuidesStroke": "#828bb866",
"editorLink.activeForeground": "#c8d3f5",
"selection.background": "#c8d3f5",
"progressBar.background": "#82aaff",
"textLink.foreground": "#65bcff",
"textLink.activeForeground": "#b2dfff",
"editorLineNumber.foreground": "#444a73",
"editorLineNumber.activeForeground": "#828bb8",
"editorBracketMatch.border": "#82aaffbb",
"editorBracketMatch.background": "#1F2028",
"editorWhitespace.foreground": "#c8d3f540",
"editor.background": "#1F2028",
"editor.foreground": "#c8d3f5",
"editor.lineHighlightBackground": "#2f334d",
"editor.selectionBackground": "#828bb850",
"editor.selectionHighlightBackground": "#444a73",
"editor.findMatchBackground": "#444a73",
"editor.findMatchBorder": "#86e1fc",
"editor.findMatchHighlightBackground": "#444a73",
"editorOverviewRuler.findMatchForeground": "#86e1fcbb",
"editorOverviewRuler.errorForeground": "#ff757fcc",
"editorOverviewRuler.infoForeground": "#65bcff66",
"editorOverviewRuler.warningForeground": "#ffc777cc",
"editorOverviewRuler.modifiedForeground": "#82aaff66",
"editorOverviewRuler.addedForeground": "#c3e88d66",
"editorOverviewRuler.deletedForeground": "#ff98a466",
"editorOverviewRuler.bracketMatchForeground": "#3e68d7bb",
"editorOverviewRuler.border": "#1F2028",
"editorHoverWidget.background": "#15151b",
"editorHoverWidget.border": "#000000aa",
"editorIndentGuide.background": "#444a73bb",
"editorIndentGuide.activeBackground": "#828bb8aa",
"editorGroupHeader.tabsBackground": "#1c1d24",
"editorGroup.border": "#15151b",
"editorGutter.modifiedBackground": "#82aaff66",
"editorGutter.addedBackground": "#c3e88d66",
"editorGutter.deletedBackground": "#ff5370aa",
"tab.activeBorder": "#82aaff",
"tab.activeModifiedBorder": "#828bb8",
"tab.unfocusedActiveBorder": "#828bb8",
"tab.activeForeground": "#c8d3f5",
"tab.activeBackground": "#1F2028",
"tab.inactiveForeground": "#828bb8",
"tab.inactiveBackground": "#1c1d24",
"tab.unfocusedActiveForeground": "#c8d3f5",
"tab.border": "#15151b",
"statusBar.noFolderBackground": "#1F2028",
"statusBar.border": "#15151b",
"statusBar.background": "#1c1d24",
"statusBar.foreground": "#828bb8",
"statusBar.debuggingBackground": "#baacff",
"statusBar.debuggingForeground": "#c8d3f5",
"statusBarItem.hoverBackground": "#828bb820",
"activityBar.background": "#1c1d24",
"activityBar.border": "#1F202860",
"activityBar.foreground": "#b4c2f0",
"activityBarBadge.background": "#3e68d7",
"activityBarBadge.foreground": "#ffffff",
"titleBar.activeBackground": "#1c1d24",
"titleBar.activeForeground": "#c8d3f5",
"titleBar.inactiveBackground": "#1c1d24",
"titleBar.inactiveForeground": "#828bb8",
"sideBar.background": "#1c1d24",
"sideBar.foreground": "#828bb8",
"sideBar.border": "#15151b",
"titleBar.border": "#15151b",
"sideBarTitle.foreground": "#c8d3f5",
"sideBarSectionHeader.background": "#1c1d24",
"sideBarSectionHeader.border": "#2f334d",
"input.background": "#15151b",
"input.foreground": "#c8d3f5",
"input.placeholderForeground": "#c8d3f5aa",
"input.border": "#00000066",
"inputValidation.errorBackground": "#c53b53",
"inputValidation.errorForeground": "#ffffff",
"inputValidation.errorBorder": "#ff537050",
"inputValidation.infoBackground": "#446bbb",
"inputValidation.infoForeground": "#ffffff",
"inputValidation.infoBorder": "#82aaff50",
"inputValidation.warningBackground": "#ad7c43",
"inputValidation.warningForeground": "#ffffff",
"inputValidation.warningBorder": "#ffc77750",
"dropdown.foreground": "#c8d3f5",
"dropdown.background": "#2f334d",
"dropdown.border": "#00000066",
"list.hoverForeground": "#c8d3f5",
"list.hoverBackground": "#1c1d24",
"list.activeSelectionBackground": "#383e5c",
"list.activeSelectionForeground": "#ffffff",
"list.inactiveSelectionForeground": "#c8d3f5",
"list.inactiveSelectionBackground": "#292e46",
"list.focusBackground": "#131421",
"list.focusForeground": "#c8d3f5",
"list.highlightForeground": "#86e1fc",
"list.warningForeground": "#ffc777cc",
"terminal.foreground": "#bcc4d6",
"terminal.selectionBackground": "#c8d3f544",
"terminal.ansiWhite": "#c8d3f5",
"terminal.ansiBlack": "#000000",
"terminal.ansiBlue": "#82aaff",
"terminal.ansiCyan": "#86e1fc",
"terminal.ansiGreen": "#c3e88d",
"terminal.ansiMagenta": "#fca7ea",
"terminal.ansiRed": "#ff757f",
"terminal.ansiYellow": "#ffc777",
"terminal.ansiBrightWhite": "#c8d3f5",
"terminal.ansiBrightBlack": "#828bb8",
"terminal.ansiBrightBlue": "#82aaff",
"terminal.ansiBrightCyan": "#86e1fc",
"terminal.ansiBrightGreen": "#c3e88d",
"terminal.ansiBrightMagenta": "#fca7ea",
"terminal.ansiBrightRed": "#ff757f",
"terminal.ansiBrightYellow": "#ffc777",
"terminal.border": "#2f334d",
"scrollbarSlider.background": "#828bb830",
"scrollbarSlider.hoverBackground": "#a9b8e830",
"scrollbarSlider.activeBackground": "#82aaff",
"minimap.findMatchHighlight": "#86e1fccc",
"minimap.selectionHighlight": "#86e1fc33",
"minimapGutter.addedBackground": "#c3e88d66",
"minimapGutter.modifiedBackground": "#82aaff66",
"editorSuggestWidget.background": "#15151b",
"editorSuggestWidget.foreground": "#a9b8e8",
"editorSuggestWidget.highlightForeground": "#86e1fc",
"editorSuggestWidget.selectedBackground": "#2f334d",
"editorSuggestWidget.border": "#00000033",
"editorError.foreground": "#ff5370",
"editorWarning.foreground": "#ffc777cc",
"editorWidget.background": "#1c1d24",
"editorWidget.resizeBorder": "#82aaff",
"editorMarkerNavigation.background": "#c8d3f505",
"widget.shadow": "#00000033",
"panel.border": "#00000033",
"panel.background": "#1c1d24",
"panel.dropBackground": "#c8d3f5",
"panelTitle.inactiveForeground": "#828bb8",
"panelTitle.activeForeground": "#c8d3f5",
"panelTitle.activeBorder": "#82aaff",
"terminalCursor.foreground": "#82aaff",
"diffEditor.insertedTextBackground": "#c3e88d15",
"diffEditor.removedTextBackground": "#ff537020",
"notifications.background": "#15151b",
"notifications.foreground": "#c8d3f5",
"notificationLink.foreground": "#82aaff",
"badge.background": "#3e68d7",
"badge.foreground": "#ffffff",
"button.background": "#3e68d7",
"button.hoverBackground": "#65bcffcc",
"extensionButton.prominentBackground": "#3e68d7",
"extensionButton.prominentHoverBackground": "#65bcffcc",
"peekView.border": "#00000030",
"peekViewEditor.background": "#c8d3f505",
"peekViewTitle.background": "#c8d3f505",
"peekViewResult.background": "#c8d3f505",
"peekViewEditorGutter.background": "#c8d3f505",
"peekViewTitleDescription.foreground": "#c8d3f560",
"peekViewResult.matchHighlightBackground": "#828bb850",
"peekViewEditor.matchHighlightBackground": "#828bb850",
"debugToolBar.background": "#1c1d24",
"pickerGroup.foreground": "#82aaff",
"gitDecoration.deletedResourceForeground": "#ff5370dd",
"gitDecoration.conflictingResourceForeground": "#ffc777cc",
"gitDecoration.modifiedResourceForeground": "#82aaffee",
"gitDecoration.untrackedResourceForeground": "#77e0c6dd",
"gitDecoration.ignoredResourceForeground": "#777fabaa",
"gitlens.trailingLineForegroundColor": "#828bb8aa",
"editorCodeLens.foreground": "#828bb8",
"peekViewResult.selectionBackground": "#828bb870",
"breadcrumb.background": "#1F2028",
"breadcrumb.foreground": "#828bb8",
"breadcrumb.focusForeground": "#c8d3f5",
"breadcrumb.activeSelectionForeground": "#82aaff",
"breadcrumbPicker.background": "#1c1d24",
"menu.background": "#1c1d24",
"menu.foreground": "#c8d3f5",
"menu.selectionBackground": "#00000050",
"menu.selectionForeground": "#82aaff",
"menu.selectionBorder": "#00000030",
"menu.separatorBackground": "#c8d3f5",
"menubar.selectionBackground": "#00000030",
"menubar.selectionForeground": "#82aaff",
"menubar.selectionBorder": "#00000030",
"settings.dropdownForeground": "#c8d3f5",
"settings.dropdownBackground": "#2f334d",
"settings.dropdownBorder": "#15151b",
"settings.numberInputForeground": "#c8d3f5",
"settings.numberInputBackground": "#15151b",
"settings.numberInputBorder": "#00000066",
"settings.textInputForeground": "#c8d3f5",
"settings.textInputBackground": "#15151b",
"settings.textInputBorder": "#00000066",
"settings.headerForeground": "#82aaff",
"settings.modifiedItemIndicator": "#82aaff",
"settings.checkboxBackground": "#131421",
"settings.checkboxForeground": "#c8d3f5",
"settings.checkboxBorder": "#00000066"
},
"tokenColors": [
{
"name": "Comment",
"scope": ["comment", "punctuation.definition.comment", "string.quoted.docstring"],
"settings": {
"foreground": "#858aa6"
}
},
{
"name": "Variables and Plain Text",
"scope": ["variable", "support.variable", "string constant.other.placeholder", "text.html"],
"settings": {
"foreground": "#c8d3f5"
}
},
{
"name": "DOM Variables",
"scope": [
"support.variable.dom",
"support.constant.math",
"support.type.object.module",
"support.variable.object.process",
"support.constant.json"
],
"settings": {
"foreground": "#ffc777"
}
},
{
"name": "Nil",
"scope": ["constant.language.undefined", "constant.language.null"],
"settings": {
"foreground": "#7f85a3"
}
},
{
"name": "PHP Constants",
"scope": ["constant.other.php"],
"settings": {
"foreground": "#ffc777"
}
},
{
"name": "Colors",
"scope": ["constant.other.color"],
"settings": {
"foreground": "#ffffff"
}
},
{
"name": "Invalid",
"scope": ["invalid", "invalid.illegal"],
"settings": {
"foreground": "#ff5370"
}
},
{
"name": "Invalid deprecated",
"scope": ["invalid.deprecated"],
"settings": {
"foreground": "#c099ff"
}
},
{
"name": "Keyword, Storage",
"scope": ["keyword", "storage.type", "storage.modifier", "keyword.other.important"],
"settings": {
"foreground": "#c099ff"
}
},
{
"name": "Keyword, Storage",
"scope": ["keyword.control", "storage"],
"settings": {}
},
{
"name": "Interpolation",
"scope": ["punctuation.definition.template-expression", "punctuation.section.embedded"],
"settings": {
"foreground": "#86e1fc"
}
},
{
"name": "Spread",
"scope": ["keyword.operator.spread", "keyword.operator.rest"],
"settings": {
"foreground": "#ff757f",
"fontStyle": "bold"
}
},
{
"name": "Operator, Misc",
"scope": [
"keyword.operator",
"keyword.control",
"punctuation",
"punctuation.definition.string",
"punctuation.support.type.property-name",
"text.html.vue-html meta.tag",
"punctuation.definition.keyword",
"punctuation.terminator.rule",
"punctuation.definition.entity",
"constant.other.color",
"meta.tag",
"punctuation.definition.tag",
"punctuation.separator.inheritance.php",
"punctuation.definition.block.tag",
"punctuation.definition.tag.html",
"punctuation.definition.tag.begin.html",
"punctuation.definition.tag.end.html",
"meta.property-list",
"meta.brace.square",
"keyword.other.template",
"keyword.other.substitution"
],
"settings": {
"foreground": "#86e1fc"
}
},
{
"name": "Keyword Control",
"scope": ["keyword.control"],
"settings": {}
},
{
"name": "Tag",
"scope": ["entity.name.tag", "meta.tag", "markup.deleted.git_gutter"],
"settings": {
"foreground": "#ff757f"
}
},
{
"name": "Function, Special Method",
"scope": ["entity.name.function", "variable.function", "keyword.other.special-method"],
"settings": {
"foreground": "#82aaff"
}
},
{
"name": "Support Function",
"scope": ["support.function", "meta.function-call entity.name.function"],
"settings": {
"foreground": "#65bcff"
}
},
{
"name": "C-related Block Level Variables",
"scope": ["source.cpp meta.block variable.other"],
"settings": {
"foreground": "#ff757f"
}
},
{
"name": "Other Variable, String Link",
"scope": ["support.other.variable", "string.other.link"],
"settings": {
"foreground": "#ff757f"
}
},
{
"name": "Constant, Function Argument, Tag Attribute, Embedded",
"scope": [
"variable.other.constant",
"constant.language",
"keyword.other.type.php",
"storage.type.php",
"support.constant",
"constant.character",
"constant.escape",
"keyword.other.unit"
],
"settings": {
"foreground": "#ff98a4"
}
},
{
"name": "Number, Boolean",
"scope": [
"constant.numeric",
"constant.language.boolean",
"constant.language.json",
"constant.language.infinity",
"constant.language.nan"
],
"settings": {
"foreground": "#ff966c"
}
},
{
"name": "Function Argument",
"scope": [
"variable.parameter.function.language.special",
"variable.parameter",
"meta.function.parameter variable"
],
"settings": {
"foreground": "#fca7ea"
}
},
{
"name": "String, Symbols, Inherited Class, Markup Heading",
"scope": [
"string",
"constant.other.symbol",
"constant.other.key",
"entity.other.inherited-class",
"markup.heading",
"markup.inserted.git_gutter",
"meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js",
"meta.attribute-selector"
],
"settings": {
"fontStyle": "",
"foreground": "#c3e88d"
}
},
{
"name": "Object",
"scope": ["variable.other.object"],
"settings": {
"foreground": "#ffc777"
}
},
{
"name": "Object Key",
"scope": [
"meta.object-literal.key",
"string.alias.graphql",
"string.unquoted.graphql",
"string.unquoted.alias.graphql",
"meta.field.declaration.ts variable.object.property",
"variable.object.property"
],
"settings": {
"foreground": "#4fd6be"
}
},
{
"name": "Nested Object Property",
"scope": ["meta.object.member", "variable.other.object.property"],
"settings": {
"foreground": "#a9b8e8"
}
},
{
"name": "Object Property",
"scope": [
"variable.other.property",
"support.variable.property",
"support.variable.property.dom"
],
"settings": {
"foreground": "#a9b8e8"
}
},
{
"name": "Haskell Constants",
"scope": ["source.haskell constant.other.haskell"],
"settings": {
"foreground": "#ff98a4"
}
},
{
"name": "Haskell Imports",
"scope": ["source.haskell meta.import.haskell entity.name.namespace"],
"settings": {
"foreground": "#c8d3f5"
}
},
{
"name": "Types Fixes",
"scope": ["source.haskell storage.type", "source.c storage.type", "source.java storage.type"],
"settings": {
"foreground": "#ffc777"
}
},
{
"name": "Lambda Arrow",
"scope": ["storage.type.function"],
"settings": {
"foreground": "#c099ff"
}
},
{
"name": "Class, Support",
"scope": [
"entity.name",
"support.type",
"support.class",
"support.orther.namespace.use.php",
"meta.use.php",
"support.other.namespace.php",
"markup.changed.git_gutter",
"support.type.sys-types"
],
"settings": {
"foreground": "#ffc777"
}
},
{
"name": "Entity types",
"scope": ["support.type"],
"settings": {
"foreground": "#ff966c"
}
},
{
"name": "CSS Class and Support",
"scope": [
"source.css support.type.property-name",
"source.sass support.type.property-name",
"source.scss support.type.property-name",
"source.less support.type.property-name",
"source.stylus support.type.property-name",
"source.postcss support.type.property-name",
"support.type.property-name.css",
"support.type.vendored.property-name"
],
"settings": {
"foreground": "#82aaff"
}
},
{
"name": "Sub-methods",
"scope": ["entity.name.module.js", "variable.import.parameter.js", "variable.other.class.js"],
"settings": {
"foreground": "#ff757f"
}
},
{
"name": "Language methods",
"scope": ["variable.language"],
"settings": {
"foreground": "#ff757f"
}
},
{
"name": "entity.name.method.js",
"scope": ["entity.name.method.js"],
"settings": {
"foreground": "#82aaff"
}
},
{
"name": "meta.method.js",
"scope": ["meta.class-method.js entity.name.function.js", "variable.function.constructor"],
"settings": {
"foreground": "#82aaff"
}
},
{
"name": "Attributes",
"scope": ["entity.other.attribute-name"],
"settings": {
"foreground": "#c099ff"
}
},
{
"name": "HTML Attributes",
"scope": [
"text.html.basic entity.other.attribute-name.html",
"text.html.basic entity.other.attribute-name"
],
"settings": {
"foreground": "#ffc777"
}
},
{
"name": "HTML Doctype",
"scope": [
"meta.tag.metadata.doctype entity.name.tag",
"meta.tag.metadata.doctype entity.other.attribute-name"
],
"settings": {
"foreground": "#c099ff"
}
},
{
"name": "CSS Classes",
"scope": ["entity.other.attribute-name.class"],
"settings": {
"foreground": "#ffc777"
}
},
{
"name": "CSS ID's",
"scope": ["source.sass keyword.control"],
"settings": {
"foreground": "#82aaff"
}
},
{
"name": "CSS psuedo selectors",
"scope": [
"entity.other.attribute-name.pseudo-class",
"entity.other.attribute-name.pseudo-element"
],
"settings": {
"foreground": "#4fd6be"
}
},
{
"name": "CSS Property value",
"scope": ["support.constant.property-value"],
"settings": {
"foreground": "#fca7ea"
}
},
{
"name": "Inserted",
"scope": ["markup.inserted"],
"settings": {
"foreground": "#c3e88d"
}
},
{
"name": "Deleted",
"scope": ["markup.deleted"],
"settings": {
"foreground": "#ff757f"
}
},
{
"name": "Changed",
"scope": ["markup.changed"],
"settings": {
"foreground": "#c099ff"
}
},
{
"name": "Regular Expressions",
"scope": ["string.regexp"],
"settings": {
"foreground": "#b4f9f8"
}
},
{
"name": "Regular Expressions - Punctuation",
"scope": ["punctuation.definition.group"],
"settings": {
"foreground": "#ff757f"
}
},
{
"name": "Regular Expressions - Character Class",
"scope": ["constant.other.character-class.regexp", "keyword.control.anchor.regexp"],
"settings": {
"foreground": "#c099ff"
}
},
{
"name": "Regular Expressions - Character Class Set",
"scope": ["constant.other.character-class.set.regexp"],
"settings": {
"foreground": "#ffc777"
}
},
{
"name": "Regular Expressions - Quantifier",
"scope": ["keyword.operator.quantifier.regexp"],
"settings": {
"foreground": "#fca7ea"
}
},
{
"name": "Escape Characters",
"scope": ["constant.character.escape"],
"settings": {
"foreground": "#86e1fc"
}
},
{
"name": "URL",
"scope": ["*url*", "*link*", "*uri*"],
"settings": {
"fontStyle": "underline"
}
},
{
"name": "Decorators",
"scope": [
"tag.decorator.js entity.name.tag.js",
"tag.decorator.js punctuation.definition.tag.js"
],
"settings": {
"foreground": "#82aaff"
}
},
{
"name": "CSS Units",
"scope": ["keyword.other.unit"],
"settings": {
"foreground": "#fc7b7b"
}
},
{
"name": "ES7 Bind Operator",
"scope": ["source.js constant.other.object.key.js string.unquoted.label.js"],
"settings": {
"foreground": "#ff757f"
}
},
{
"name": "JSON Key - Level 0",
"scope": ["source.json meta.structure.dictionary.json support.type.property-name.json"],
"settings": {
"foreground": "#82aaff"
}
},
{
"name": "JSON Key - Level 1",
"scope": [
"source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
],
"settings": {
"foreground": "#65bcff"
}
},
{
"name": "JSON Key - Level 2",
"scope": [
"source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
],
"settings": {
"foreground": "#ff757f"
}
},
{
"name": "JSON Key - Level 3",
"scope": [
"source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
],
"settings": {
"foreground": "#fca7ea"
}
},
{
"name": "JSON Key - Level 4",
"scope": [
"source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
],
"settings": {
"foreground": "#ffc777"
}
},
{
"name": "JSON Key - Level 5",
"scope": [
"source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
],
"settings": {
"foreground": "#4fd6be"
}
},
{
"name": "JSON Key - Level 6",
"scope": [
"source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
],
"settings": {
"foreground": "#82aaff"
}
},
{
"name": "Plain Punctuation",
"scope": ["punctuation.definition.list_item.markdown"],
"settings": {
"foreground": "#828bb8"
}
},
{
"name": "Block Punctuation",
"scope": [
"meta.block",
"meta.brace",
"punctuation.definition.block",
"punctuation.definition.parameters",
"punctuation.section.function"
],
"settings": {
"foreground": "#b4c2f0"
}
},
{
"name": "Markdown - Plain",
"scope": ["meta.jsx.children", "meta.embedded.block"],
"settings": {
"foreground": "#b4c2f0"
}
},
{
"name": "Markdown - Markup Raw Inline",
"scope": ["text.html.markdown markup.inline.raw.markdown"],
"settings": {
"foreground": "#c099ff"
}
},
{
"name": "Markdown - Markup Raw Inline Punctuation",
"scope": [
"text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown"
],
"settings": {
"foreground": "#86e1fc"
}
},
{
"name": "Markdown - Heading punctuation",
"scope": [
"markdown.heading",
"markup.heading | markup.heading entity.name",
"markup.heading.markdown punctuation.definition.heading.markdown"
],
"settings": {
"foreground": "#86e1fc"
}
},
{
"name": "Markup - Italic",
"scope": ["markup.italic"],
"settings": {
"fontStyle": "italic",
"foreground": "#ff757f"
}
},
{
"name": "Markup - Bold",
"scope": ["markup.bold", "markup.bold string"],
"settings": {
"fontStyle": "bold",
"foreground": "#ff757f"
}
},
{
"name": "Markup - Bold-Italic",
"scope": [
"markup.bold markup.italic",
"markup.italic markup.bold",
"markup.quote markup.bold",
"markup.bold markup.italic string",
"markup.italic markup.bold string",
"markup.quote markup.bold string"
],
"settings": {
"fontStyle": "bold",
"foreground": "#ff757f"
}
},
{
"name": "Markup - Underline",
"scope": ["markup.underline"],
"settings": {
"fontStyle": "underline",
"foreground": "#ff966c"
}
},
{
"name": "Markdown - Blockquote",
"scope": ["markup.quote punctuation.definition.blockquote.markdown"],
"settings": {
"foreground": "#86e1fc"
}
},
{
"name": "Markup - Quote",
"scope": ["markup.quote"],
"settings": {
"fontStyle": "italic"
}
},
{
"name": "Markdown - Link",
"scope": ["string.other.link.title.markdown"],
"settings": {
"foreground": "#82aaff"
}
},
{
"name": "Markdown - Link Description",
"scope": ["string.other.link.description.title.markdown"],
"settings": {
"foreground": "#c099ff"
}
},
{
"name": "Markdown - Link Anchor",
"scope": ["constant.other.reference.link.markdown"],
"settings": {
"foreground": "#ffc777"
}
},
{
"name": "Markup - Raw Block",
"scope": ["markup.raw.block"],
"settings": {
"foreground": "#c099ff"
}
},
{
"name": "Markdown - Fenced Bode Block Variable",
"scope": ["markup.fenced_code.block.markdown", "markup.inline.raw.string.markdown"],
"settings": {
"foreground": "#86e1fc"
}
},
{
"name": "Markdown - Fenced Language",
"scope": ["variable.language.fenced.markdown"],
"settings": {
"foreground": "#86e1fc"
}
},
{
"name": "Markdown - Separator",
"scope": ["meta.separator"],
"settings": {
"fontStyle": "bold",
"foreground": "#86e1fc"
}
},
{
"name": "Markup - Table",
"scope": ["markup.table"],
"settings": {
"foreground": "#828bb8"
}
},
{
"scope": "token.info-token",
"settings": {
"foreground": "#65bcff"
}
},
{
"scope": "token.warn-token",
"settings": {
"foreground": "#ffc777"
}
},
{
"scope": "token.error-token",
"settings": {
"foreground": "#ff757f"
}
},
{
"scope": "token.debug-token",
"settings": {
"foreground": "#c099ff"
}
}
]
}

View File

@@ -1,68 +0,0 @@
@import './_var.scss';
header {
padding-top: 2.5vh;
padding-bottom: 2.5vh;
margin-inline: 2.5vw;
display: flex;
justify-content: space-between;
align-items: center;
position: unset;
.logo {
margin-right: 2.5vw;
margin-top: -8px;
width: 50px;
}
nav {
justify-self: flex-start;
display: inline-flex;
.navbar-entry {
display: flex;
flex-direction: column;
align-items: center;
a {
color: lighten($accent,30);
text-decoration: none;
text-align: center;
margin-inline: 8px;
transition: color 0.5s;
font-family: "Satoshi-Bold";
&:hover{
color: $accent;
}
}
.active {
color: $accent;
}
.highlighter {
margin-top: -10px;
}
}
}
.social {
margin-top: -15px;
a{
color: white;
transition: color 0.5s;
.icon{
margin: 0;
margin-bottom: -5px;
}
&:hover{
color: $accent !important;
}
&[target="_blank"]::after {
content: none;
display: unset;
}
}
}
}

View File

@@ -1,24 +0,0 @@
@import "./_var.scss";
.sidebar {
left: 0;
top: 0;
font-size: 18px;
display: flex;
justify-content: space-evenly;
margin-top: 3vh;
width: 18vw;
a {
color: white;
text-decoration: none;
}
.active {
color: $accent;
}
.repo-link {
text-decoration: underline;
color: $accent;
&[target="_blank"]::after {
background-color: $accent;
}
}
}

19
tailwind.config.ts Normal file
View File

@@ -0,0 +1,19 @@
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [],
};
export default config;

View File

@@ -1,3 +1,27 @@
{ {
"extends": "astro/tsconfigs/base" "compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
} }