102 lines
2.4 KiB
Vue
102 lines
2.4 KiB
Vue
<template>
|
|
<div>
|
|
<Navbar />
|
|
<Header>
|
|
<glitch>echo</glitch> hello world!
|
|
</Header>
|
|
<div class="info">
|
|
<Card>
|
|
<h1>👋 Welcome to my website!</h1>
|
|
<h2>
|
|
I am a high school student who is interested in
|
|
<br>
|
|
• cyber security
|
|
<br>
|
|
• coding
|
|
<br>
|
|
• electronics
|
|
<br>
|
|
• gaming
|
|
<br>
|
|
• simply: everything about computers!
|
|
</h2>
|
|
</Card>
|
|
<Card>
|
|
<h1>👉 Contact me</h1>
|
|
<h2>You can contact me on the following platforms:</h2>
|
|
|
|
<a href="https://discord.com/users/568131907368386565"><i class='bx bxl-discord-alt'></i> Discord</a>
|
|
<br>
|
|
<a href="https://github.com/ngn13"><i class='bx bxl-github'></i> Github</a>
|
|
<br>
|
|
<a href="mailto:ngn13proton@proton.me"><i class='bx bxl-mastodon'></i> Mail</a>
|
|
<br>
|
|
<h2>or private message me on </h2>
|
|
<a><i>[matrix]</i> @ngn:matrix.ngn13.fun</a>
|
|
</Card>
|
|
</div>
|
|
<Logout v-if="logged"/>
|
|
<div class="version">
|
|
<p>v2.2</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Navbar from "../components/Navbar.vue";
|
|
import Header from "../components/Header.vue";
|
|
import Card from "../components/Card.vue"
|
|
import Logout from "../components/Logout.vue";
|
|
|
|
export default {
|
|
head() {
|
|
return {
|
|
title: "[ngn]",
|
|
meta: [
|
|
{
|
|
hid: "description",
|
|
name: "description",
|
|
content: "homepage of my website"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
logged: false
|
|
}
|
|
},
|
|
mounted(){
|
|
if(localStorage.getItem("token"))
|
|
this.logged = true
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.info {
|
|
padding: 50px;
|
|
gap: 30px;
|
|
display: flex;
|
|
}
|
|
.version{
|
|
color: var(--dark-fife);
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
i{
|
|
font-style: normal;
|
|
}
|
|
|
|
@media only screen and (max-width: 1076px) {
|
|
.info {
|
|
flex-direction: column;
|
|
}
|
|
.info div {
|
|
width: auto;
|
|
}
|
|
}
|
|
</style> |