first commit
This commit is contained in:
ngn
86
pages/index.vue
Normal file
86
pages/index.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<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>
|
||||
• simply: everything about computers!
|
||||
</h2>
|
||||
</Card>
|
||||
<Card>
|
||||
<h1>👉 Checkout my socials</h1>
|
||||
<h2>Here you can find my socials for following platforms:</h2>
|
||||
<br>
|
||||
<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="https://www.reddit.com/user/_ngn"><i class='bx bxl-reddit'></i> Reddit</a>
|
||||
<br>
|
||||
<a href="https://fosstodon.org/@ngn"><i class='bx bxl-mastodon'></i> Fosstodon</a>
|
||||
</Card>
|
||||
</div>
|
||||
<Logout v-if="logged"/>
|
||||
</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: "ngn's Personal Website | Home Page"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logged: false
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
if(localStorage.getItem("token"))
|
||||
this.logged = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.info {
|
||||
padding: 50px;
|
||||
gap: 30px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 1076px) {
|
||||
.info {
|
||||
flex-direction: column;
|
||||
}
|
||||
.info div {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
51
pages/login.vue
Normal file
51
pages/login.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Login Page</h1>
|
||||
<Input :keyup="function() { }" placeholder="Password" type="password" id="pass"/>
|
||||
<Button :click="click">Login</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Input from '../components/Input.vue';
|
||||
import Button from '../components/Button.vue';
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
async click(e) {
|
||||
const pass = document.getElementById("pass").value
|
||||
const res = await axios.get(`/api/login?pass=${pass}`)
|
||||
if(res.data["error"]===0){
|
||||
localStorage.setItem("token", res.data["token"])
|
||||
return location.href="/"
|
||||
}
|
||||
alert("Incorrect password!")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
padding: 50px;
|
||||
background: var(--dark-three);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
color: var(--white);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 70px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
73
pages/projects.vue
Normal file
73
pages/projects.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div>
|
||||
<Navbar />
|
||||
<Header>
|
||||
<glitch>ls -la</glitch> projects
|
||||
</Header>
|
||||
<div class="projects">
|
||||
<ProjectList v-for="project in projects" :key="project">
|
||||
<Project v-for="p in project" :key="p" :name="p.name" :desc="p.desc" :url="p.url"/>
|
||||
</ProjectList>
|
||||
</div>
|
||||
<NewProject v-if="logged"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProjectList from "../components/ProjectList.vue";
|
||||
import Project from "../components/Project.vue";
|
||||
import NewProject from "../components/NewProject.vue";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
title: "[ngn]",
|
||||
meta: [
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "ngn's Personal Website | Projects Page"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logged: false,
|
||||
projects: []
|
||||
}
|
||||
},
|
||||
mounted: async function(){
|
||||
if(localStorage.getItem("token"))
|
||||
this.logged = true
|
||||
|
||||
const res = await axios.get("/api/get_projects")
|
||||
|
||||
let all = res.data["projects"]
|
||||
let projects = []
|
||||
let project = []
|
||||
for(let i = 0; i<all.length; i++){
|
||||
if(project.length!==3)
|
||||
project.push(all[i])
|
||||
else{
|
||||
projects.push(project)
|
||||
project = []
|
||||
}
|
||||
|
||||
if(i===all.length-1){
|
||||
projects.push(project)
|
||||
}
|
||||
}
|
||||
this.projects = projects
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.projects{
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
76
pages/resources.vue
Normal file
76
pages/resources.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<main>
|
||||
<Navbar />
|
||||
<Header>
|
||||
<glitch>cat</glitch> {{ header }}
|
||||
</Header>
|
||||
<div class="resources">
|
||||
<Input :keyup="keyup" placeholder="Search resource" type="text"/>
|
||||
<Resource v-for="resource in resources" :key="resource" :name="resource.name" :tags="resource.tags" :url="resource.url" />
|
||||
</div>
|
||||
<NewResource v-if="logged"/>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Resource from '../components/Resource.vue';
|
||||
import Input from '../components/Input.vue';
|
||||
import NewResource from '../components/NewResource.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
header: "resources",
|
||||
logged: false,
|
||||
resources: [],
|
||||
all: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
keyup(e) {
|
||||
let val = e.target.value
|
||||
if(e.key==="Backspace" && val===""){
|
||||
this.header = "resources"
|
||||
this.resources = this.all
|
||||
return
|
||||
}
|
||||
if(e.key==="OS")
|
||||
return
|
||||
this.header = `resources | grep ${val}`
|
||||
|
||||
// dirty asf search alg
|
||||
this.resources = []
|
||||
for(let i = 0; i < this.all.length; i++){
|
||||
if(this.all[i].name.toLowerCase().includes(val.toLowerCase()))
|
||||
this.resources.push(this.all[i])
|
||||
|
||||
for(let e = 0; e < this.all[i].tags.length; e++){
|
||||
if(this.all[i].tags[e].toLowerCase().includes(val.toLowerCase())){
|
||||
if(this.resources.indexOf(this.all[i])===-1)
|
||||
this.resources.push(this.all[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: async function(){
|
||||
if(localStorage.getItem("token"))
|
||||
this.logged = true
|
||||
|
||||
const res = await axios.get("/api/get_resources")
|
||||
this.resources = res.data["resources"]
|
||||
this.all = res.data["resources"]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.resources {
|
||||
padding: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 40px
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user