initialized next project
3
.eslintrc.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"extends": ["next/core-web-vitals", "next/typescript"]
|
||||||
|
}
|
45
.gitignore
vendored
@@ -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
|
||||||
|
4
.vscode/extensions.json
vendored
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"recommendations": ["astro-build.astro-vscode"],
|
|
||||||
"unwantedRecommendations": []
|
|
||||||
}
|
|
11
.vscode/launch.json
vendored
@@ -1,11 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "0.2.0",
|
|
||||||
"configurations": [
|
|
||||||
{
|
|
||||||
"command": "./node_modules/.bin/astro dev",
|
|
||||||
"name": "Development server",
|
|
||||||
"request": "launch",
|
|
||||||
"type": "node-terminal"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
37
README.md
@@ -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.
|
||||||
|
@@ -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(),
|
|
||||||
],
|
|
||||||
});
|
|
9
next.config.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
sassOptions: {
|
||||||
|
silenceDeprecations: ['legacy-js-api'],
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
59
package.json
@@ -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
@@ -0,0 +1,8 @@
|
|||||||
|
/** @type {import('postcss-load-config').Config} */
|
||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
BIN
public/favicon.ico
Normal file
After Width: | Height: | Size: 25 KiB |
@@ -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 |
Before Width: | Height: | Size: 230 KiB |
Before Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 33 KiB |
Before Width: | Height: | Size: 102 KiB |
Before Width: | Height: | Size: 115 KiB |
Before Width: | Height: | Size: 45 KiB |
Before Width: | Height: | Size: 207 KiB |
Before Width: | Height: | Size: 1014 KiB |
Before Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 41 KiB |
Before Width: | Height: | Size: 45 KiB |
@@ -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 |
@@ -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>
|
|
@@ -1,9 +0,0 @@
|
|||||||
---
|
|
||||||
const year = new Date().getFullYear();
|
|
||||||
import "../styles/footer.scss";
|
|
||||||
---
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
© vaporvee 2021-{year} |
|
|
||||||
<a href="https://github.com/vaporvee/web" target="_blank">Sourcecode</a>
|
|
||||||
</footer>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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
@@ -1,2 +0,0 @@
|
|||||||
/// <reference path="../.astro/types.d.ts" />
|
|
||||||
/// <reference types="astro/client" />
|
|
BIN
src/fonts/GeistMonoVF.woff
Normal file
BIN
src/fonts/GeistVF.woff
Normal 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>
|
|
@@ -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
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
@@ -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>
|
|
@@ -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
@@ -0,0 +1,7 @@
|
|||||||
|
import '../layouts/default'
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div>Blog</div>
|
||||||
|
);
|
||||||
|
}
|
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
import Redirect from "../layouts/Redirect.astro";
|
|
||||||
---
|
|
||||||
|
|
||||||
<Redirect href="https://docs.vaporvee.com/" />
|
|
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
import Redirect from "../../layouts/Redirect.astro";
|
|
||||||
---
|
|
||||||
|
|
||||||
<Redirect href="https://docs.vaporvee.com/discord-rpc-godot" />
|
|
@@ -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 />
|
|
||||||
I’m 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
@@ -0,0 +1,7 @@
|
|||||||
|
import '../layouts/default'
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div>Home</div>
|
||||||
|
);
|
||||||
|
}
|
@@ -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
@@ -0,0 +1,7 @@
|
|||||||
|
import '../layouts/default'
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div>Projects</div>
|
||||||
|
);
|
||||||
|
}
|
@@ -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>
|
|
@@ -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;
|
|
@@ -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);
|
|
||||||
}
|
|
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@@ -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
@@ -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;
|
||||||
|
}
|
@@ -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%;
|
|
||||||
}
|
|
||||||
}
|
|
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
@@ -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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@@ -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
@@ -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;
|
@@ -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"]
|
||||||
}
|
}
|
||||||
|