unurled/site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

?

Browse source
This commit is contained in:
unurled 2024-01-25 11:53:46 +01:00
parent c6306ce99f
commit e42ecdd3a1
Signed by: unurled
GPG key ID: FDBC9CBE1F82423F
8 changed files with 165 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/Footer.vue
View file

@ -6,17 +6,14 @@
<style>
.footer {
position: absolute;
bottom: 5vh;
}
@media only screen and (min-width: 768px) {
.git-link {
color: var(--dark-accent4);
}
.git-link {
color: var(--dark-accent4);
}
.git-link:hover {
color: var(--dark-accent6);
.git-link:hover {
color: var(--dark-accent6);
}
}
</style>

2
src/components/Home.vue
View file

@ -5,7 +5,7 @@ defineProps<{ name: string }>()
</script>
<script lang="ts">
var rotate = document.getElementById("rotate");
const rotate = document.getElementById("rotate");
if (rotate != null) {
rotate.style.animation = "rotate 0.4s linear infinite both";

46
src/components/Link.vue
View file

@ -25,27 +25,47 @@ const props = defineProps({
<style>
.display {
display: inline-flex;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.link {
padding: .5em;
padding: .2em;
background-color: var(--dark-shade1);
-webkit-box-shadow: 0px 0px 20px 10px #2d3139;
-moz-box-shadow: 0px 0px 20px 10px #2d3139;
box-shadow: 0px 0px 20px 10px #2d3139;
text-shadow: 0px 0px 10px var(--dark-accent4);
-webkit-box-shadow: 0px 0px 10px 5px #2d3139;
-moz-box-shadow: 0px 0px 10px 5px #2d3139;
box-shadow: 0px 0px 10px 5px #2d3139;
text-shadow: 0px 0px 5px var(--dark-accent4);
border-radius: 1em;
font-size: 2rem;
font-size: 1rem;
color: var(--dark-accent4);
margin-right: 3em;
transition: transform .2s;
}
.link:hover {
color: var(--dark-accent1);
background-color: var(--dark-accent4);
transform: translate(0, 10%);
}
@media only screen and (min-width: 768px) {
.display {
display: inline-flex;
}
.link {
padding: .5em;
background-color: var(--dark-shade1);
-webkit-box-shadow: 0px 0px 20px 10px #2d3139;
-moz-box-shadow: 0px 0px 20px 10px #2d3139;
box-shadow: 0px 0px 20px 10px #2d3139;
text-shadow: 0px 0px 10px var(--dark-accent4);
border-radius: 1em;
font-size: 2rem;
color: var(--dark-accent4);
margin-right: 3em;
transition: transform .2s;
}
.link:hover {
color: var(--dark-accent1);
background-color: var(--dark-accent4);
transform: translate(0, 10%);
}
}
</style>

31
src/components/NavBar.vue
View file

@ -5,24 +5,33 @@ import Link from './Link.vue';
</script>
<template>
<div class="nav">
<div class="links">
<Link href="https://unurled.me" :isExternal="true" label="Website" icon="mdi:web" />
<Link href="https://github.com/unurled" :isExternal="true" label="Github" icon="feather:github"/>
<Link href="https://git.unurled.me/unurled" :isExternal="true" label="Git" icon="mdi:git"/>
</div>
<div class="links">
<Link href="https://unurled.me" :isExternal="true" label="Website" icon="mdi:web" />
<Link href="https://github.com/unurled" :isExternal="true" label="Github" icon="feather:github"/>
<Link href="https://git.unurled.me/unurled" :isExternal="true" label="Git" icon="mdi:git"/>
</div>
</template>
<style>
.nav {
.links {
display: flex;
position: fixed;
top: 2vh;
left: 40%;
align-items: center;
/* position: fixed; */
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
justify-content: center;
width: 75vw;
}
@media only screen and (min-width: 768px) {
.links {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
}
</style>

33
src/components/Project.vue
View file

@ -10,7 +10,7 @@ const props = defineProps({
</script>
<template>
<a class="card" :href="link">
<a class="card" :href="link">
<h1 class="name">{{ name }}</h1>
<p class="description">{{ description }}</p>
<img :src="icon" >
@ -20,24 +20,35 @@ const props = defineProps({
<style>
.card {
width: 25%;
display: flex;
flex-direction: column;
color: var(--dark-accent2);
border: solid;
border-radius: 15px;
border-color: var(--dark-accent1);
margin-bottom: 10px;
transition: .5s transform;
max-height: 25%;
}
.card:hover {
color: var(--dark-accent3);
transform: translate(0, -8%);
color: var(--dark-accent4);
}
@media only screen and (min-width: 768px) {
.card {
width: 25%;
color: var(--dark-accent2);
border: solid;
border-radius: 15px;
border-color: var(--dark-accent1);
margin-bottom: 10px;
transition: .5s transform;
max-height: 25%;
}
.card:hover .project-link {
color: var(--dark-accent3);
}
.card:hover {
transform: translate(0, -8%);
color: var(--dark-accent4);
}
.card:hover .project-link {
color: var(--dark-accent3);
}
}
</style>