Initial Commit
This commit is contained in:
parent
f188a23092
commit
c20f66d77d
13
.eslintignore
Normal file
13
.eslintignore
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
30
.eslintrc.cjs
Normal file
30
.eslintrc.cjs
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:svelte/recommended',
|
||||
'prettier'
|
||||
],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['@typescript-eslint'],
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020,
|
||||
extraFileExtensions: ['.svelte']
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2017: true,
|
||||
node: true
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.svelte'],
|
||||
parser: 'svelte-eslint-parser',
|
||||
parserOptions: {
|
||||
parser: '@typescript-eslint/parser'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
140
.gitignore
vendored
140
.gitignore
vendored
|
|
@ -1,132 +1,10 @@
|
|||
# ---> Node
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
.cache
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
|
|
|
|||
13
.prettierignore
Normal file
13
.prettierignore
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
9
.prettierrc
Normal file
9
.prettierrc
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"pluginSearchDirs": ["."],
|
||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||
}
|
||||
38
README.md
38
README.md
|
|
@ -1,2 +1,38 @@
|
|||
# website-remake
|
||||
# create-svelte
|
||||
|
||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
|
||||
|
||||
## Creating a project
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm create svelte@latest
|
||||
|
||||
# create a new project in my-app
|
||||
npm create svelte@latest my-app
|
||||
```
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of your app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
|
|
|
|||
36
package.json
Normal file
36
package.json
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"name": "sangelo-website",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.0.0",
|
||||
"@sveltejs/kit": "^1.20.4",
|
||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||
"@typescript-eslint/parser": "^6.0.0",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-svelte": "^2.30.0",
|
||||
"prettier": "^2.8.0",
|
||||
"prettier-plugin-svelte": "^2.10.1",
|
||||
"sass": "^1.63.6",
|
||||
"svelte": "^4.0.5",
|
||||
"svelte-check": "^3.4.3",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^4.4.2"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"svelte-material-icons": "^3.0.5",
|
||||
"svelte-transition": "^0.0.10"
|
||||
}
|
||||
}
|
||||
12
src/app.d.ts
vendored
Normal file
12
src/app.d.ts
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
13
src/app.html
Normal file
13
src/app.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
77
src/app.scss
Normal file
77
src/app.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
/* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */
|
||||
|
||||
/* imports */
|
||||
// @use "assets/scrollbar.scss";
|
||||
@import url("https://fonts.cdnfonts.com/css/manrope");
|
||||
|
||||
/* general style */
|
||||
html,
|
||||
body,
|
||||
main {
|
||||
font-family: $font-family;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
color: $white;
|
||||
background-color: $space-black;
|
||||
margin-bottom: 0px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
h1.no-select,
|
||||
h2.no-select,
|
||||
h3.no-select,
|
||||
h4.no-select,
|
||||
h5.no-select,
|
||||
h6.no-select{
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.link:link {
|
||||
color: $french-sky-blue;
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link:visited {
|
||||
color: $deep-sky-blue;
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
|
||||
// Firefox
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $space-cadet #00000000;
|
||||
/* Set the thumb and track colors */
|
||||
background-clip: padding-box;
|
||||
/* Remove the background */
|
||||
}
|
||||
|
||||
// Webkit & Blink
|
||||
*::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background-color: #00000000;
|
||||
background-clip: padding-box;
|
||||
/* Remove the background */
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: $space-cadet;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background-color: #00000000;
|
||||
/* Set a fallback color */
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track-piece {
|
||||
background-color: #00000000;
|
||||
}
|
||||
42
src/assets/about.scss
Normal file
42
src/assets/about.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
// about.scss
|
||||
|
||||
.container #about {
|
||||
display: flex; // reaffirming flex, if needed
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#about {
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
margin: 2em;
|
||||
|
||||
svg.logo {
|
||||
margin-right: 1em;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
content {
|
||||
display: flex;
|
||||
height: 80%;
|
||||
width: 60em;
|
||||
margin-left: 6em;
|
||||
|
||||
.about-text {
|
||||
align-self: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
66
src/assets/index.scss
Normal file
66
src/assets/index.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
/* layout */
|
||||
.container {
|
||||
height: 100vh;
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.section {
|
||||
height: 100vh;
|
||||
scroll-snap-align: start;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* content style */
|
||||
|
||||
#home {
|
||||
header {
|
||||
background-color: transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 4em;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
user-select: text;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
/* width: 145px;
|
||||
height: 145px; */
|
||||
width: 8em;
|
||||
height: 8em;
|
||||
transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
||||
header .logo:hover {
|
||||
filter: drop-shadow(0 4px 10px rgba(0, 145, 251, 0.2));
|
||||
}
|
||||
|
||||
|
||||
/* colored words */
|
||||
span.word-hello-world-color {
|
||||
color: $french-sky-blue;
|
||||
}
|
||||
|
||||
span.word-sangelo-color {
|
||||
color: $deep-sky-blue;
|
||||
}
|
||||
|
||||
span.word-create-color {
|
||||
color: $capri;
|
||||
}
|
||||
}
|
||||
41
src/assets/navbar.scss
Normal file
41
src/assets/navbar.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
// navbar.scss
|
||||
|
||||
.dial-navbar {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
font-size: 24px;
|
||||
margin-right: 1em;
|
||||
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
.page {
|
||||
opacity: 0.5; // Lower opacity for inactive pages
|
||||
transition: opacity 0.3s;
|
||||
font-weight: 500;
|
||||
|
||||
&.active {
|
||||
opacity: 1; // Full opacity for the active page
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
// .first {
|
||||
// opacity: 0;
|
||||
// cursor: default;
|
||||
// }
|
||||
|
||||
// .last {
|
||||
// opacity: 0;
|
||||
// cursor: default;
|
||||
// }
|
||||
|
||||
list-style-position: inside;
|
||||
}
|
||||
35
src/assets/projects.scss
Normal file
35
src/assets/projects.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
.container #projects {
|
||||
display: flex; // reaffirming flex, if needed
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#projects {
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
margin: 2em;
|
||||
|
||||
svg.logo {
|
||||
margin-right: 1em;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
content {
|
||||
display: flex;
|
||||
height: 80%;
|
||||
width: 60em;
|
||||
margin-left: 6em;
|
||||
}
|
||||
}
|
||||
90
src/assets/socials.scss
Normal file
90
src/assets/socials.scss
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
.container #socials {
|
||||
display: flex; // reaffirming flex, if needed
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-center;
|
||||
text-align: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#socials {
|
||||
content {
|
||||
display: flex;
|
||||
height: 80%;
|
||||
width: 60em;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2em;
|
||||
margin-top: 10em;
|
||||
}
|
||||
|
||||
.round-button {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: ease-in-out 0.1s;
|
||||
}
|
||||
|
||||
.button.discord {
|
||||
background: linear-gradient(162deg, #6d85d8 24.09%, #4a68cc 89.49%);
|
||||
}
|
||||
|
||||
.button.youtube {
|
||||
background: linear-gradient(217deg, #ff5554 50%, #ff7171 94.82%);
|
||||
}
|
||||
|
||||
.button.github {
|
||||
background: linear-gradient(158deg, #24292d 55.62%, #262c30 90.01%);
|
||||
}
|
||||
|
||||
.button.email {
|
||||
background: linear-gradient(158deg, #ec8f5a 55.62%, #ffaf37 90.01%);
|
||||
}
|
||||
|
||||
.round-button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.round-button:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 2em;
|
||||
|
||||
svg.logo {
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.footer.footer-credits {
|
||||
font-weight: 800;
|
||||
margin-bottom: -0.7em;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
1
src/lib/index.ts
Normal file
1
src/lib/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
// place files you want to import through the `$lib` alias in this folder.
|
||||
13
src/routes/+layout.svelte
Normal file
13
src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<script>
|
||||
import '../app.scss';
|
||||
import Navbar from './Navbar.svelte';
|
||||
|
||||
import { fly } from 'svelte/transition';
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
{#key data.pathname}
|
||||
<main in:fly={{ x: 10, duration: 250, delay: 250 }} out:fly={{ x: -5, duration: 250 }}>
|
||||
<slot />
|
||||
</main>
|
||||
{/key}
|
||||
7
src/routes/+layout.ts
Normal file
7
src/routes/+layout.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
export const load = ({ url }) => {
|
||||
const { pathname } = url;
|
||||
|
||||
return {
|
||||
pathname
|
||||
};
|
||||
};
|
||||
269
src/routes/+page.svelte
Normal file
269
src/routes/+page.svelte
Normal file
|
|
@ -0,0 +1,269 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
// Icons
|
||||
import IconDiscord from 'svelte-material-icons/Discord.svelte';
|
||||
import IconYouTube from 'svelte-material-icons/Youtube.svelte';
|
||||
import IconGitHub from 'svelte-material-icons/Github.svelte';
|
||||
import IconEmailFast from 'svelte-material-icons/EmailFast.svelte';
|
||||
|
||||
const emojis = [
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ☕️',
|
||||
'with 🍵',
|
||||
'with 🍪',
|
||||
'with 💤',
|
||||
'with passion',
|
||||
'on a 💻',
|
||||
'in 🏫',
|
||||
'at 🏠',
|
||||
'with <img src="/assets/emojis/vscodium.png" alt="VSCodium" style="height: 18px;"/>',
|
||||
'with <img src="/assets/emojis/stackoverflow.png" alt="StackOverflow" style="height: 18px;"/>'
|
||||
];
|
||||
|
||||
let emoji = '';
|
||||
|
||||
function changeEmoji() {
|
||||
emoji = emojis[Math.floor(Math.random() * emojis.length)];
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
changeEmoji();
|
||||
});
|
||||
|
||||
function smoothScrollTo(elementId: string) {
|
||||
const element = document.getElementById(elementId);
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function redirectToHome() {
|
||||
// goto('/');
|
||||
smoothScrollTo('home');
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
// Trigger redirection on Enter key or Space bar
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
redirectToHome();
|
||||
}
|
||||
}
|
||||
|
||||
function openWebsite(url: string) {
|
||||
goto(url);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div id="home" class="section">
|
||||
<header>
|
||||
<div class="svg-container">
|
||||
<svg
|
||||
class="logo"
|
||||
width="145px"
|
||||
height="145px"
|
||||
viewBox="0 0 145 145"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="mask0_1404_2"
|
||||
style="mask-type: alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="27"
|
||||
y="0"
|
||||
width="90"
|
||||
height="145"
|
||||
>
|
||||
<path
|
||||
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
|
||||
fill="#131313"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1404_2)">
|
||||
<rect width="144.6" height="36.15" fill="#00C4FB" />
|
||||
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
|
||||
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
|
||||
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>
|
||||
<span class="word-hello-world-color">Hello World</span>, I'm
|
||||
<span class="word-sangelo-color">Sangelo</span><br />and I
|
||||
<span class="word-create-color">create</span> things.
|
||||
</h1>
|
||||
</header>
|
||||
</div>
|
||||
<div id="about" class="section">
|
||||
<header>
|
||||
<svg
|
||||
role="button"
|
||||
class="logo"
|
||||
width="145px"
|
||||
height="145px"
|
||||
viewBox="0 0 145 145"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
tabindex="0"
|
||||
on:click={redirectToHome}
|
||||
on:keydown={handleKeydown}
|
||||
>
|
||||
<mask
|
||||
id="mask0_1404_2"
|
||||
style="mask-type: alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="27"
|
||||
y="0"
|
||||
width="90"
|
||||
height="145"
|
||||
>
|
||||
<path
|
||||
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
|
||||
fill="#131313"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1404_2)">
|
||||
<rect width="144.6" height="36.15" fill="#00C4FB" />
|
||||
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
|
||||
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
|
||||
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
|
||||
</g>
|
||||
</svg>
|
||||
<h1 class="no-select">About me</h1>
|
||||
</header>
|
||||
<content>
|
||||
<div class="about-text">
|
||||
<h2>Hi! It's me, Sangelo.</h2>
|
||||
<p>
|
||||
I'm a guy who does stuff.<br />
|
||||
<br />
|
||||
I enjoy creating a variety of things, including UI prototypes, scripts, and programs. Although
|
||||
I'm new to programming, I love learning new languages. I support open-source software and design
|
||||
my workflow around it, using Linux and self-hosted tools daily.
|
||||
</p>
|
||||
</div>
|
||||
</content>
|
||||
</div>
|
||||
<div id="projects" class="section">
|
||||
<header>
|
||||
<svg
|
||||
role="button"
|
||||
class="logo"
|
||||
width="145px"
|
||||
height="145px"
|
||||
viewBox="0 0 145 145"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
tabindex="0"
|
||||
on:click={redirectToHome}
|
||||
on:keydown={handleKeydown}
|
||||
>
|
||||
<mask
|
||||
id="mask0_1404_2"
|
||||
style="mask-type: alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="27"
|
||||
y="0"
|
||||
width="90"
|
||||
height="145"
|
||||
>
|
||||
<path
|
||||
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
|
||||
fill="#131313"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1404_2)">
|
||||
<rect width="144.6" height="36.15" fill="#00C4FB" />
|
||||
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
|
||||
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
|
||||
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
|
||||
</g>
|
||||
</svg>
|
||||
<h1 class="no-select">Projects</h1>
|
||||
</header>
|
||||
</div>
|
||||
<div id="socials" class="section">
|
||||
<content>
|
||||
<div class="button-container">
|
||||
<a href="https://discord.com/users/373525255102136341" class="round-button button discord" aria-label="Discord">
|
||||
<IconDiscord size="2.5em"/>
|
||||
</a>
|
||||
<a href="https://youtube.com/@Sangeloo" class="round-button button youtube" aria-label="YouTube">
|
||||
<IconYouTube size="3em"/>
|
||||
</a>
|
||||
<a href="https://github.com/SangeloDev" class="round-button button github" aria-label="GitHub">
|
||||
<IconGitHub size="3em"/>
|
||||
</a>
|
||||
<a href="mailto:contact@sangelo.space" class="round-button button email" aria-label="Email">
|
||||
<IconEmailFast size="3em"/>
|
||||
</a>
|
||||
</div>
|
||||
</content>
|
||||
<footer>
|
||||
<svg
|
||||
role="button"
|
||||
class="logo"
|
||||
width="145px"
|
||||
height="145px"
|
||||
viewBox="0 0 145 145"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
tabindex="0"
|
||||
on:click={redirectToHome}
|
||||
on:keydown={handleKeydown}
|
||||
>
|
||||
<mask
|
||||
id="mask0_1404_2"
|
||||
style="mask-type: alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="27"
|
||||
y="0"
|
||||
width="90"
|
||||
height="145"
|
||||
>
|
||||
<path
|
||||
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
|
||||
fill="#131313"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1404_2)">
|
||||
<rect width="144.6" height="36.15" fill="#00C4FB" />
|
||||
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
|
||||
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
|
||||
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
|
||||
</g>
|
||||
</svg>
|
||||
<p class="no-select footer footer-credits">© Sangelo 2023-2024, All rights reserved.</p>
|
||||
<p class="no-select footer footer-text">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
Designed and developed <span class="dynamic-icon" on:click={() => openWebsite("https://sangelo.space")}>{@html emoji}</span> by Sangelo.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../assets/index.scss';
|
||||
@import '../assets/about.scss';
|
||||
@import '../assets/projects.scss';
|
||||
@import '../assets/socials.scss';
|
||||
</style>
|
||||
50
src/routes/Navbar.svelte
Normal file
50
src/routes/Navbar.svelte
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export const activeSection = writable('home');
|
||||
|
||||
function smoothScrollTo(elementId: string) {
|
||||
const element = document.getElementById(elementId);
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function updateActiveSection() {
|
||||
const sections = document.querySelectorAll('.page');
|
||||
|
||||
sections.forEach(section => {
|
||||
const sectionTop = section.offsetTop;
|
||||
const sectionHeight = section.offsetHeight;
|
||||
|
||||
if (window.scrollY >= sectionTop && window.scrollY < (sectionTop + sectionHeight)) {
|
||||
activeSection.set(section.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
window.addEventListener('scroll', updateActiveSection);
|
||||
});
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
// Trigger redirection on Enter key or Space bar
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
smoothScrollTo('home');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ul class="dial-navbar">
|
||||
<li class="page" id="home" on:click={() => smoothScrollTo('home')} class:active={$activeSection === 'home'}>Home</li>
|
||||
<li class="page" id="about" on:click={() => smoothScrollTo('about')} class:active={$activeSection === 'about'}>About</li>
|
||||
<li class="page" id="projects" on:click={() => smoothScrollTo('projects')} class:active={$activeSection === 'projects'}>Projects</li>
|
||||
<li class="page" id="socials" on:click={() => smoothScrollTo('socials')} class:active={$activeSection === 'socials'}>Socials</li>
|
||||
</ul>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../assets/navbar.scss";
|
||||
</style>
|
||||
67
src/routes/about/+page.svelte
Normal file
67
src/routes/about/+page.svelte
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
function redirectToHome() {
|
||||
goto('/');
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
// Trigger redirection on Enter key or Space bar
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
redirectToHome();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<svg
|
||||
role="button"
|
||||
class="logo"
|
||||
width="145px"
|
||||
height="145px"
|
||||
viewBox="0 0 145 145"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
tabindex="0"
|
||||
on:click={redirectToHome}
|
||||
on:keydown={handleKeydown}
|
||||
>
|
||||
<mask
|
||||
id="mask0_1404_2"
|
||||
style="mask-type: alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="27"
|
||||
y="0"
|
||||
width="90"
|
||||
height="145"
|
||||
>
|
||||
<path
|
||||
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
|
||||
fill="#131313"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1404_2)">
|
||||
<rect width="144.6" height="36.15" fill="#00C4FB" />
|
||||
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
|
||||
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
|
||||
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
|
||||
</g>
|
||||
</svg>
|
||||
<h1 class="no-select">About me</h1>
|
||||
</header>
|
||||
|
||||
<content>
|
||||
<div class="about-text">
|
||||
<h2>Hi! It's me, Sangelo.</h2>
|
||||
<p>
|
||||
I'm a guy who does stuff. I enjoy creating a variety of things, including UI prototypes,
|
||||
scripts, and programs. Although I'm new to programming, I love learning new languages. I
|
||||
support open-source software and design my workflow around it, using Linux and self-hosted
|
||||
tools daily.
|
||||
</p>
|
||||
</div>
|
||||
</content>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../assets/about.scss';
|
||||
</style>
|
||||
16
src/variables.scss
Normal file
16
src/variables.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
/* Variables and mixins declared here will be available in all other SCSS files */
|
||||
|
||||
|
||||
// Color Palette
|
||||
$french-sky-blue: #0091fb;
|
||||
$deep-sky-blue: #00b2fa;
|
||||
$capri: #00c4fb;
|
||||
$light-capri: #45d3fa;
|
||||
$space-black: #121316;
|
||||
$space-cadet: #2b2d42;
|
||||
$space-grey: #3e4053;
|
||||
$white: #ffffff;
|
||||
|
||||
|
||||
// Font Family
|
||||
$font-family: 'Manrope', sans-serif;
|
||||
BIN
static/assets/emojis/stackoverflow.png
Normal file
BIN
static/assets/emojis/stackoverflow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
static/assets/emojis/vscodium.png
Normal file
BIN
static/assets/emojis/vscodium.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
3
static/bullet-point.svg
Normal file
3
static/bullet-point.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="10" cy="10" r="10" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 149 B |
BIN
static/favicon.ico
Normal file
BIN
static/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
18
svelte.config.js
Normal file
18
svelte.config.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import adapter from '@sveltejs/adapter-auto';
|
||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: [vitePreprocess({})],
|
||||
|
||||
kit: {
|
||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
17
tsconfig.json
Normal file
17
tsconfig.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true
|
||||
}
|
||||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
}
|
||||
14
vite.config.ts
Normal file
14
vite.config.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()],
|
||||
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: "@use \"src/variables.scss\" as *;"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
Reference in a new issue