mirror of
https://github.com/Akomry/website.git
synced 2025-12-06 08:43:53 +00:00
feat: it's gettin somewhere
This commit is contained in:
Akomry
parent
bf001e0656
commit
81cb291539
12 changed files with 559 additions and 55 deletions
20
frontend/src/components/HeaderNav.vue
Normal file
20
frontend/src/components/HeaderNav.vue
Normal 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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue