Ako/website
1
0
Fork 0
mirror of https://github.com/Akomry/website.git synced 2025-12-06 08:43: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

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>