Ako/website
1
0
Fork 0
mirror of https://github.com/Akomry/website.git synced 2025-12-06 03:33:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: it's gettin somewhere

Browse source
This commit is contained in:
Akomry 2025-04-02 15:54:26 +02:00
parent bf001e0656
commit 81cb291539
12 changed files with 559 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.idea/portfolio.iml generated
View file

@ -1,5 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="PYTHON_MODULE" version="4">
<component name="Flask">
<option name="enabled" value="true" />
</component>
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.venv" />

227
frontend/package-lock.json generated
View file

@ -9,12 +9,16 @@
"version": "0.0.0",
"dependencies": {
"@floating-ui/vue": "^1.1.6",
"@iconify/vue": "^4.3.0",
"@unhead/vue": "^2.0.3",
"axios": "^1.8.4",
"iconify-icon": "^2.3.0",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@iconify/json": "^2.2.323",
"@tomjs/vite-plugin-iconify": "^1.2.1",
"@tsconfig/node22": "^22.0.0",
"@types/node": "^22.13.9",
"@vitejs/plugin-vue": "^5.2.1",
@ -985,12 +989,45 @@
}
}
},
"node_modules/@iconify/json": {
"version": "2.2.323",
"resolved": "https://registry.npmjs.org/@iconify/json/-/json-2.2.323.tgz",
"integrity": "sha512-PtRN4hK9OkT2nlEa76A5QT54E6/SOukceKQkOZv9mk44UOlaS/9fhJFNUEA+FBAXEPcnnCQb2nVui+IAn7xTSw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@iconify/types": "*",
"pathe": "^1.1.2"
}
},
"node_modules/@iconify/json/node_modules/pathe": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
"integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
"dev": true,
"license": "MIT"
},
"node_modules/@iconify/types": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
"license": "MIT"
},
"node_modules/@iconify/vue": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.3.0.tgz",
"integrity": "sha512-Xq0h6zMrHBbrW8jXJ9fISi+x8oDQllg5hTDkDuxnWiskJ63rpJu9CvJshj8VniHVTbsxCg9fVoPAaNp3RQI5OQ==",
"license": "MIT",
"dependencies": {
"@iconify/types": "^2.0.0"
},
"funding": {
"url": "https://github.com/sponsors/cyberalien"
},
"peerDependencies": {
"vue": ">=3"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@ -1683,6 +1720,30 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@tomjs/vite-plugin-iconify": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@tomjs/vite-plugin-iconify/-/vite-plugin-iconify-1.2.1.tgz",
"integrity": "sha512-Si5W4d+Hbo+yYpm2iLABTwwxm9K7Kl6y45F3DwqP99zWVJa5bPAWqiWJyUf5uZ5F+rzqxewXtapFVhir8yBlxQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"cac": "^6.7.14",
"fs-extra": "^11.2.0",
"lodash.clonedeep": "^4.5.0",
"node-html-parser": "^6.1.12",
"picocolors": "^1.0.0"
},
"bin": {
"ti": "dist/cli.mjs"
},
"engines": {
"node": ">=16"
},
"peerDependencies": {
"@iconify/json": "*",
"vite": ">=2"
}
},
"node_modules/@tsconfig/node22": {
"version": "22.0.1",
"resolved": "https://registry.npmjs.org/@tsconfig/node22/-/node22-22.0.1.tgz",
@ -1707,6 +1768,22 @@
"undici-types": "~6.20.0"
}
},
"node_modules/@unhead/vue": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.0.3.tgz",
"integrity": "sha512-6Yci+MTunYuJLYwujBA68hEr5PabBl87yEhImrG4AUogaYWqIwtMHukn0bQvcjaBksXartLJtGUhxhmKgBdyPw==",
"license": "MIT",
"dependencies": {
"hookable": "^5.5.3",
"unhead": "2.0.3"
},
"funding": {
"url": "https://github.com/sponsors/harlan-zw"
},
"peerDependencies": {
"vue": ">=3.5.13"
}
},
"node_modules/@vitejs/plugin-vue": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.3.tgz",
@ -2134,6 +2211,13 @@
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/boolbase": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
"dev": true,
"license": "ISC"
},
"node_modules/brace-expansion": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@ -2206,6 +2290,16 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/cac": {
"version": "6.7.14",
"resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
"integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/call-bind-apply-helpers": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@ -2336,6 +2430,36 @@
"node": ">= 8"
}
},
"node_modules/css-select": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
"dev": true,
"license": "BSD-2-Clause",
"dependencies": {
"boolbase": "^1.0.0",
"css-what": "^6.1.0",
"domhandler": "^5.0.2",
"domutils": "^3.0.1",
"nth-check": "^2.0.1"
},
"funding": {
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/css-what": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
"dev": true,
"license": "BSD-2-Clause",
"engines": {
"node": ">= 6"
},
"funding": {
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@ -2433,6 +2557,65 @@
"node": ">=0.10"
}
},
"node_modules/dom-serializer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
"dev": true,
"license": "MIT",
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.2",
"entities": "^4.2.0"
},
"funding": {
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
}
},
"node_modules/domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/fb55"
}
],
"license": "BSD-2-Clause"
},
"node_modules/domhandler": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
"dev": true,
"license": "BSD-2-Clause",
"dependencies": {
"domelementtype": "^2.3.0"
},
"engines": {
"node": ">= 4"
},
"funding": {
"url": "https://github.com/fb55/domhandler?sponsor=1"
}
},
"node_modules/domutils": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
"integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
"dev": true,
"license": "BSD-2-Clause",
"dependencies": {
"dom-serializer": "^2.0.0",
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3"
},
"funding": {
"url": "https://github.com/fb55/domutils?sponsor=1"
}
},
"node_modules/dunder-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@ -2889,7 +3072,6 @@
"version": "5.5.3",
"resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
"integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
"dev": true,
"license": "MIT"
},
"node_modules/human-signals": {
@ -3161,6 +3343,13 @@
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/lodash.clonedeep": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
"integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
"dev": true,
"license": "MIT"
},
"node_modules/lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@ -3360,6 +3549,17 @@
"license": "MIT",
"optional": true
},
"node_modules/node-html-parser": {
"version": "6.1.13",
"resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-6.1.13.tgz",
"integrity": "sha512-qIsTMOY4C/dAa5Q5vsobRpOOvPfC4pB61UVW2uSwZNUp0QU/jCekTal1vMmbO0DgdHeLUJpv/ARmDqErVxA3Sg==",
"dev": true,
"license": "MIT",
"dependencies": {
"css-select": "^5.1.0",
"he": "1.2.0"
}
},
"node_modules/node-releases": {
"version": "2.0.19",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@ -3444,6 +3644,19 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/nth-check": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
"dev": true,
"license": "BSD-2-Clause",
"dependencies": {
"boolbase": "^1.0.0"
},
"funding": {
"url": "https://github.com/fb55/nth-check?sponsor=1"
}
},
"node_modules/open": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/open/-/open-10.1.0.tgz",
@ -3955,6 +4168,18 @@
"dev": true,
"license": "MIT"
},
"node_modules/unhead": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/unhead/-/unhead-2.0.3.tgz",
"integrity": "sha512-l2O1DSzEid8Fp+I+FMMhFnl1IewyAvBhbdYipaq9Jh2AMndv//yWZ2amjzDLpYpUmDr9E8WTcdoAXkm9wH60Aw==",
"license": "MIT",
"dependencies": {
"hookable": "^5.5.3"
},
"funding": {
"url": "https://github.com/sponsors/harlan-zw"
}
},
"node_modules/unicorn-magic": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",

4
frontend/package.json
View file

@ -12,12 +12,16 @@
},
"dependencies": {
"@floating-ui/vue": "^1.1.6",
"@iconify/vue": "^4.3.0",
"@unhead/vue": "^2.0.3",
"axios": "^1.8.4",
"iconify-icon": "^2.3.0",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@iconify/json": "^2.2.323",
"@tomjs/vite-plugin-iconify": "^1.2.1",
"@tsconfig/node22": "^22.0.0",
"@types/node": "^22.13.9",
"@vitejs/plugin-vue": "^5.2.1",

35
frontend/src/App.vue
View file

@ -1,24 +1,20 @@
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import StarrySky from "@/components/StarrySky.vue";
import Projects from "@/components/Projects.vue";
import HeaderNav from "@/components/HeaderNav.vue"
</script>
<template>
<div class="dark">
<header>
<div class="background">
<div class="dark">
<div class="wrapper">
<nav>
<RouterLink to="/" class="nav-li">Home</RouterLink>
<RouterLink to="/about" class="nav-li">About me</RouterLink>
</nav>
</div>
</header>
<RouterView />
<starry-sky />
<header-nav />
<RouterView />
<starry-sky />
</div>
</div>
</template>
<style lang="scss">
@ -26,23 +22,22 @@ import Projects from "@/components/Projects.vue";
@use "sass:map";
@use "sass:math";
:root {
background: #000000;
}
:root * {
color: #e0e0e0;
}
body {
height: 100%;
.background {
height: 250%;
position:absolute;
top:0;
left:0;
background: linear-gradient(
to top,
#000000 0%,
#000000 -10%,
#000000 50%,
map.get(map.get(base.$themes, "dark"), "background") 100%,
) no-repeat;
font-family: Consolas, sans-serif;
font-family: "YaHei Consolas Hybrid", Consolas, Inconsolata, sans-serif;
}
.nav-li {

20
frontend/src/components/HeaderNav.vue Normal file
View file

@ -0,0 +1,20 @@
<template>
<nav>
<RouterLink to="/about" class="nav-li">About me</RouterLink>
<RouterLink to="/" class="nav-li">Home</RouterLink>
</nav>
</template>
<script setup lang="ts">
import {RouterLink} from "vue-router";
</script>
<style lang="scss">
nav {
padding: 15pt;
display: flex;
flex-direction: row-reverse;
}
</style>

57
frontend/src/components/Projects.vue
View file

@ -2,29 +2,62 @@
</script>
<template>
<h3 class="center">Projects</h3>
<div class="center flex">
<h3 class="center">Some cool projects I worked on</h3>
<div class="center card-container">
<a class="card" href="https://github.com/Akomry/makeyourownapp-jam" target="_blank" rel="external nofllow noopener">
<img class="rounded" src="../components/icons/Illustration3.png" alt="makeyourownapp-jam" width="300">
<br><span>Make your own app! game jam</span>
</a>
<div>
<a href="https://github.com/Akomry/makeyourownapp-jam" target="_blank" rel="external nofllow noopener">
<img class="rounded card" src="../components/icons/Illustration3.png" alt="makeyourownapp-jam" width="300">
</a>
<br>
<span>Make your own app! game jam</span>
</div>
<a href="https://github.com/Akomry/sae302-chat">
<img class="rounded" src="" alt="sae302-chat" width="300">
</a>
<div>
<a class="card" href="https://github.com/Akomry/sae302-chat">
<img class="rounded card" src="" alt="sae302-chat" width="300">
</a>
<br>
<span>Communication app</span>
</div>
<a href="https://github.com/Akomry/website">
<img class="rounded" src="" alt="website" width="300">
</a>
<div>
<a class="card" href="https://github.com/Akomry/website">
<img class="rounded card" src="" alt="website" width="300">
</a>
<br>
<span>Current website</span>
</div>
</div>
</template>
<style lang="scss" scoped>
@use '../assets/base';
@use 'sass:map';
a {
padding: 10px;
}
.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(24rem, auto));
gap: 2rem;
}
.card {
border: map.get(map.get(base.$themes, 'dark'), 'background') 1rem;
&:hover {
transform: scale(105%);
}
&:active {
transform: scale(95%);
}
}
.rounded {
border-radius: 15px;
}

209
frontend/src/components/StarrySky.vue
View file

@ -1,4 +1,5 @@
<template>
<div id="space">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
@ -130,8 +131,212 @@
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div> <div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div> <div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div> <div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div> <div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div> <div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div> <div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div> <div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
</template>
<style lang="scss">
@ -147,8 +352,8 @@
$size: math.random(5);
position: absolute;
top: math.random(350) - 1 + vh;
left: math.random(101) - 1 + vw;
top: math.random(250) - 1 + vh;
left: math.random(100) - 1 + vw;
width: $size + px;
height: $size + px;
border-radius: 50%;

6
frontend/src/router/index.ts
View file

@ -1,7 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import DashboardView from '../views/DashboardView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -16,11 +15,6 @@ const router = createRouter({
name: 'about',
component: AboutView,
},
{
path: '/dashboard',
name: 'dashboard',
component: DashboardView,
}
],
})

2
frontend/src/views/AboutView.vue
View file

@ -3,7 +3,9 @@
</script>
<template>
<div class="centerdown">
</div>
</template>
<style scoped lang="scss">

3
frontend/src/views/DashboardView.vue
View file

@ -1,3 +0,0 @@
<template>
</template>

38
frontend/src/views/HomeView.vue
View file

@ -3,18 +3,19 @@ import buttons from "@/components/88x31.vue";
import Projects from "@/components/Projects.vue";
import StarrySky from "@/components/StarrySky.vue";
function scrollToProjects() {
const projectsRect = document.querySelector('#section-projects > .section-title')!.getBoundingClientRect();
window.scrollTo({ behavior: 'smooth', top: projectsRect.top - projectsRect.height });
const projectsRect = document.querySelector('#projects')!.getBoundingClientRect();
window.scrollTo({ behavior: 'smooth', top: projectsRect.top });
}
import { Icon } from '@iconify/vue'
</script>
<template>
<div class="centerdown">
<!-- Welcome text -->
<br style="margin-top: 8%">
<pre class="center font-bigger">
<div style="min-height: 100vh;">
<!-- Welcome text -->
<br style="margin-top: 8%">
<pre class="center font-bigger">
┌─────────────────────────────────────────────┐
│ _ _ __ │
│ ___ _ __ ___ (_)| | __ ___ / _| _ __ │
@ -22,10 +23,15 @@ function scrollToProjects() {
│| __/| | | | | || || <| (_) |_ | _|| | │
│ \___||_| |_| |_||_||_|\_\\___/(_)|_| |_| │
└─────────────────────────────────────────────┘</pre>
<div class="center"><h1>Welcome to my website !</h1></div>
<hr class="margin" style="margin-top: 24%">
<div class="center">
<h1>Welcome to my website !</h1>
<button class="scroll-indicator" style="margin-top: 12%" @click="scrollToProjects()">
<Icon icon="mingcute:down-line" style="width: 3rem; height: 3rem;" width="3rem" />
</button>
</div>
</div>
<!-- 88x31 buttons -->
<br>
<div class="cell" id="projects"><projects /></div>
<br>
<div class="cell"><buttons /></div>
@ -33,4 +39,18 @@ function scrollToProjects() {
</template>
<style lang="scss" scoped>
.scroll-indicator {
background: transparent;
border: transparent;
bottom: 2rem;
&:hover {
transform: scale(105%);
}
&:active {
transform: scale(97.5%);
}
}
</style>

10
frontend/vite.config.ts
View file

@ -1,13 +1,19 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vue, { Options } from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import iconify from '@tomjs/vite-plugin-iconify'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
iconify({
resources: ['https://unpkg.com/@iconify/json/json'],
rotate: 3000,
local: ['ant-design', 'ep', 'mingcute'],
}),
],
resolve: {
alias: {