aboutsummaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
Diffstat (limited to 'components')
-rw-r--r--components/README.md7
-rw-r--r--components/extra/ExtraComingSoon.vue33
-rw-r--r--components/navigation/Bar.vue45
-rw-r--r--components/navigation/Footer.vue65
-rw-r--r--components/navigation/ResponsiveBar.vue235
-rw-r--r--components/ui/contacts/ContactsHero.vue37
-rw-r--r--components/ui/home/HomeHero.vue31
-rw-r--r--components/ui/interests/InterestsHero.vue41
-rw-r--r--components/ui/interests/InterestsListing.vue68
-rw-r--r--components/ui/skills/SkillsHero.vue43
-rw-r--r--components/ui/skills/SkillsListing.vue68
11 files changed, 673 insertions, 0 deletions
diff --git a/components/README.md b/components/README.md
new file mode 100644
index 0000000..a079f10
--- /dev/null
+++ b/components/README.md
@@ -0,0 +1,7 @@
+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._
diff --git a/components/extra/ExtraComingSoon.vue b/components/extra/ExtraComingSoon.vue
new file mode 100644
index 0000000..2632f44
--- /dev/null
+++ b/components/extra/ExtraComingSoon.vue
@@ -0,0 +1,33 @@
+<template>
+ <div class="hero">
+ <div class="header">
+ <img
+ class="wow fadeInUp"
+ data-wow-delay="1s"
+ src="../../assets/images/manipal.gif"
+ alt="lost gif"
+ >
+ <br>
+
+ <div style="text-align: center">
+ <small class="wow fadeInUp" data-wow-delay="1.2s">coming soon...</small>
+ <br><br>
+
+ <a href="/">
+ <img
+ class="wow fadeInUp"
+ data-wow-delay="1s"
+ src="../../assets/images/home-glitter.gif"
+ alt="home gif"
+ >
+ </a>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'ExtraComingSoon'
+}
+</script>
diff --git a/components/navigation/Bar.vue b/components/navigation/Bar.vue
new file mode 100644
index 0000000..31764ee
--- /dev/null
+++ b/components/navigation/Bar.vue
@@ -0,0 +1,45 @@
+<template>
+ <div>
+ <nav>
+ <span id="brand">
+ <a href="/">::</a>
+ </span>
+
+ <ul id="menu">
+ <li><a id="menu-item-1" href="/">/home</a></li>
+ <li>
+ <a id="menu-item-2" href="/skills">/skills</a>
+ </li>
+ <!-- <li><a id="menu-item-3" href="/projects">/projects</a></li> -->
+ <!-- <li><a id="menu-item-4" href="/about">/about me</a></li> -->
+ <!-- <li><a id="menu-item-5" href="https://blog.fuwn.me">/blog</a></li> -->
+ </ul>
+
+ <div id="toggle">
+ <div class="span">
+ menu
+ </div>
+ </div>
+ </nav>
+
+ <div id="resize">
+ <div class="close-btn">
+ close
+ </div>
+
+ <ul id="menu">
+ <li><a href="/">home<span>.</span></a></li>
+ <li><a href="/skills">skills<span>.</span></a></li>
+ <li><a href="/projects">projects<span>.</span></a></li>
+ <li><a href="/about">about me<span>.</span></a></li>
+ <li><a href="/blog">blog<span>.</span></a></li>
+ </ul>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Header'
+}
+</script>
diff --git a/components/navigation/Footer.vue b/components/navigation/Footer.vue
new file mode 100644
index 0000000..5fd72c6
--- /dev/null
+++ b/components/navigation/Footer.vue
@@ -0,0 +1,65 @@
+<template>
+ <div class="footer">
+ <div class="container">
+ <br><br><br><br>
+
+ <div class="info">
+ <div class="row">
+ <div id="personal" class="col-lg-4">
+ <p class="wow fadeInUp">
+ <code>println!(Fuwn.copyleft);<br></code>
+ </p>
+ <h4 class="wow fadeInUp" data-wow-delay="0.2s">
+ <a id="info-item-1" href="/">fuwn 2020</a>
+ </h4>
+ <br><br>
+ </div>
+
+ <div id="media" class="col-lg-4">
+ <p class="wow fadeInUp" data-wow-delay="0s">
+ <code>$ ls -a links/<br></code>
+ </p>
+
+ <ul>
+ <li id="tw" class="wow fadeInUp" data-wow-delay="0.8s">
+ <a id="media-item-1" :href="'https://twitter.com/' + socials.twitter">tw</a>
+ </li>
+ <li id="gh" class="wow fadeInUp" data-wow-delay="1s">
+ <a id="media-item-3" :href="'https://github.com/' + socials.github">gh</a>
+ </li>
+ </ul>
+ <br><br>
+ </div>
+
+ <div id="address" class="col-lg-4">
+ <p class="wow fadeInUp" data-wow-delay="0s">
+ <code>$ echo $CONTACTS<br></code>
+ </p>
+ <h4 class="wow fadeInUp" data-wow-delay="0.2s">
+ <a href="/contacts">
+ <img
+ src="../../assets/images/contacts-flash.gif"
+ alt=""
+ >
+ </a>
+ </h4>
+ <br><br>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import socials from '../../assets/json/socials.json'
+
+export default {
+ name: 'Footer',
+ data: () => {
+ return {
+ socials
+ }
+ }
+}
+</script>
diff --git a/components/navigation/ResponsiveBar.vue b/components/navigation/ResponsiveBar.vue
new file mode 100644
index 0000000..a638811
--- /dev/null
+++ b/components/navigation/ResponsiveBar.vue
@@ -0,0 +1,235 @@
+<template>
+ <nav>
+ <input id="nav" type="checkbox" class="hidden">
+ <label for="nav" class="nav-btn">
+ <i />
+ <i />
+ <i />
+ </label>
+ <div class="logo">
+ <a href="/">::</a>
+ </div>
+ <div class="nav-wrapper">
+ <ul>
+ <!-- <li>$ ls -a routes/</li> -->
+ <li><a href="/">..</a></li>
+ <li><a href="/skills">skills</a></li>
+ <li><a href="/interests">interests</a></li>
+ <li><a href="/contacts">contacts</a></li>
+ </ul>
+ </div>
+ </nav>
+</template>
+
+<script>
+export default {
+ name: 'ResponsiveBar'
+}
+</script>
+
+<style scoped lang="scss">
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ /* font-family: Poppins, serif; */
+ font-weight: 400;
+ background-position: center;
+ background-size: cover;
+}
+
+nav {
+ padding: 8px;
+}
+
+.logo {
+ float: left;
+ padding: 8px;
+ margin-left: 16px;
+ margin-top: 8px;
+ color: white;
+}
+
+.logo a {
+ color: white;
+ /* text-transform: uppercase; */
+ font-weight: 700;
+ font-size: 18px;
+ letter-spacing: 0; /* px */
+ text-decoration: none;
+}
+
+nav ul {
+ float: right;
+}
+
+nav ul li {
+ display: inline-block;
+ float: left;
+}
+
+nav ul li:not(:first-child) {
+ margin-left: 48px;
+}
+
+nav ul li:last-child {
+ margin-right: 24px;
+}
+
+nav ul li a {
+ display: inline-block;
+ outline: none;
+ color: white;
+ /* text-transform: uppercase; */
+ text-decoration: none;
+ font-size: 14px;
+ letter-spacing: 1.2px;
+ // font-weight: 600;
+}
+
+@media screen and (max-width: 864px) {
+ .logo {
+ padding: 0;
+ }
+
+ .nav-wrapper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ background: #0f0f0f;
+ opacity: 0;
+ transition: all 0.2s ease;
+ }
+
+ .nav-wrapper ul {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 100%;
+ }
+
+ .nav-wrapper ul li {
+ display: block;
+ float: none;
+ width: 100%;
+ text-align: right;
+ margin-bottom: 10px;
+ }
+
+ .nav-wrapper ul li:nth-child(1) a {
+ transition-delay: 0.2s;
+ }
+
+ .nav-wrapper ul li:nth-child(2) a {
+ transition-delay: 0.3s;
+ }
+
+ .nav-wrapper ul li:nth-child(3) a {
+ transition-delay: 0.4s;
+ }
+
+ .nav-wrapper ul li:nth-child(4) a {
+ transition-delay: 0.5s;
+ }
+
+ .nav-wrapper ul li:not(:first-child) {
+ margin-left: 0;
+ }
+
+ .nav-wrapper ul li a {
+ padding: 10px 24px;
+ opacity: 0;
+ color: white; /* #000 */
+ font-size: 14px;
+ // font-weight: 600;
+ letter-spacing: 1.2px;
+ transform: translateX(-20px);
+ transition: all 0.2s ease;
+ }
+
+ .nav-btn {
+ position: fixed;
+ right: 10px;
+ top: 10px;
+ display: block;
+ width: 48px;
+ height: 48px;
+ cursor: pointer;
+ z-index: 9999;
+ border-radius: 50%;
+ }
+
+ .nav-btn i {
+ display: block;
+ width: 20px;
+ height: 2px;
+ background: white;
+ border-radius: 2px;
+ margin-left: 14px;
+ }
+
+ .nav-btn i:nth-child(1) {
+ margin-top: 16px;
+ }
+
+ .nav-btn i:nth-child(2) {
+ margin-top: 4px;
+ opacity: 1;
+ }
+
+ .nav-btn i:nth-child(3) {
+ margin-top: 4px;
+ }
+}
+
+#nav:checked + .nav-btn {
+ transform: rotate(45deg);
+}
+
+#nav:checked + .nav-btn i {
+ background: white;
+ transition: transform 0.2s ease;
+}
+
+#nav:checked + .nav-btn i:nth-child(1) {
+ transform: translateY(6px) rotate(180deg);
+}
+
+#nav:checked + .nav-btn i:nth-child(2) {
+ opacity: 0;
+}
+
+#nav:checked + .nav-btn i:nth-child(3) {
+ transform: translateY(-6px) rotate(90deg);
+}
+
+#nav:checked ~ .nav-wrapper {
+ z-index: 9990;
+ opacity: 1;
+}
+
+#nav:checked ~ .nav-wrapper ul li a {
+ opacity: 1;
+ transform: translateX(0);
+}
+
+.hidden {
+ display: none;
+}
+</style>
diff --git a/components/ui/contacts/ContactsHero.vue b/components/ui/contacts/ContactsHero.vue
new file mode 100644
index 0000000..7167b5c
--- /dev/null
+++ b/components/ui/contacts/ContactsHero.vue
@@ -0,0 +1,37 @@
+<template>
+ <div class="container">
+ <div class="hero-content">
+ <br><br><br><br>
+
+ <div class="row">
+ <div class="col-lg-8">
+ <h3 class="wow fadeInUp" data-wow-delay="1s">
+ contacts
+ </h3>
+
+ <p class="wow fadeInUp" data-wow-delay="1.2s">
+ <code>
+ n/a<br>
+ </code>
+
+ {{ description }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'ContactsHero',
+ props: {
+ description: {
+ type: String,
+ default: () => {
+ return 'a few ways to get a hold of me'
+ }
+ }
+ }
+}
+</script>
diff --git a/components/ui/home/HomeHero.vue b/components/ui/home/HomeHero.vue
new file mode 100644
index 0000000..0ddcd4c
--- /dev/null
+++ b/components/ui/home/HomeHero.vue
@@ -0,0 +1,31 @@
+<template>
+ <div class="hero">
+ <div class="header">
+ <img
+ class="wow fadeInUp"
+ data-wow-delay="1s"
+ src="../../../assets/images/underconstruction-flash.gif"
+ alt="1990s era under constriction gif"
+ >
+ <br>
+
+ <div style="text-align: center;">
+ <small class="wow fadeInUp" data-wow-delay="1.2s">last updated: {{ updated }}</small>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Hero',
+ props: {
+ updated: {
+ type: String,
+ default: () => {
+ return '1991. 01. 11.'
+ }
+ }
+ }
+}
+</script>
diff --git a/components/ui/interests/InterestsHero.vue b/components/ui/interests/InterestsHero.vue
new file mode 100644
index 0000000..36af78a
--- /dev/null
+++ b/components/ui/interests/InterestsHero.vue
@@ -0,0 +1,41 @@
+<template>
+ <div class="container">
+ <div class="hero-content">
+ <br><br><br><br>
+
+ <div class="row">
+ <div class="col-lg-8">
+ <h3 class="wow fadeInUp" data-wow-delay="1s">
+ interests
+ </h3>
+
+ <p class="wow fadeInUp" data-wow-delay="1.2s">
+ <code>
+ handle <- openFile "interest_description.txt" ReadMode <br>
+ contents <- hGetContents handle <br>
+ putStr contents <br>
+ hClose handle <br>
+ </code>
+
+ {{ description }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'InterestsHero',
+ props: {
+ description: {
+ type: String,
+ default: () => {
+ return 'just a few things that i think are pretty cool and am ' +
+ 'considering picking up sometime in the future.'
+ }
+ }
+ }
+}
+</script>
diff --git a/components/ui/interests/InterestsListing.vue b/components/ui/interests/InterestsListing.vue
new file mode 100644
index 0000000..c04aa13
--- /dev/null
+++ b/components/ui/interests/InterestsListing.vue
@@ -0,0 +1,68 @@
+<template>
+ <div class="container">
+ <div class="hero-content">
+ <br>
+
+ <div class="row">
+ <div class="col-lg-8">
+ <div v-for="(category, heading) in interests">
+ <!-- Main categories -->
+ <h5 :id="heading" class="wow fadeInUp" data-wow-delay="1.2s">
+ # {{ heading }}
+ </h5>
+
+ <!-- If category is an array... -->
+ <ul v-if="Array.isArray(category)">
+ <li v-for="item in category">
+ {{ item }}
+ </li>
+ </ul>
+ <!-- If the category is an object... -->
+ <ul v-for="(sub_category, sub_heading) in category" v-else>
+ <!-- Sub categories -->
+ <h6 :id="sub_heading">
+ ## {{ sub_heading }}
+ </h6>
+
+ <!-- If category is an array... -->
+ <ul v-if="Array.isArray(sub_category)">
+ <li v-for="item in sub_category">
+ {{ item }}
+ </li>
+ </ul>
+ <!-- If the category is an object... -->
+ <ul v-for="(subsub_category, subsub_heading) in sub_category" v-else>
+ <!-- If the current iterated item is the last of the current interated object, add a line-break... -->
+ <br v-if="(Object.keys(sub_category).length - 1) === Object.keys(sub_category).indexOf(subsub_heading)">
+
+ <h6 :id="subsub_heading">
+ ### {{ subsub_heading }}
+ </h6>
+
+ <!-- If category is an array... -->
+ <ul v-if="Array.isArray(subsub_category)">
+ <li v-for="item in subsub_category">
+ {{ item }}
+ </li>
+ </ul>
+ </ul>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import interests from '../../../assets/json/interests.json'
+
+export default {
+ name: 'SkillsListing',
+ data: () => {
+ return {
+ interests
+ }
+ }
+}
+</script>
diff --git a/components/ui/skills/SkillsHero.vue b/components/ui/skills/SkillsHero.vue
new file mode 100644
index 0000000..616fd4f
--- /dev/null
+++ b/components/ui/skills/SkillsHero.vue
@@ -0,0 +1,43 @@
+<template>
+ <div class="container">
+ <div class="hero-content">
+ <br><br><br><br>
+
+ <div class="row">
+ <div class="col-lg-8">
+ <h3 class="wow fadeInUp" data-wow-delay="1s">
+ skills
+ </h3>
+
+ <!-- <img
+ class="wow fadeInUp"
+ data-wow-delay="1.15s"
+ src="https://web.archive.org/web/20090809234237/http://www.geocities.com/lateralusspiraleyes/neo_coding_flash.gif"
+ alt="neo"
+ >
+ <br> -->
+
+ <p class="wow fadeInUp" data-wow-delay="1.2s">
+ <code>$ cat disclaimer.txt <br></code>
+ {{ description }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'SkillsHero',
+ props: {
+ description: {
+ type: String,
+ default: () => {
+ return 'despite working in full-stack, i not only have a mild distaste ' +
+ 'for front-end, but i\'m sub-par at it so don\'t expect much in that front.'
+ }
+ }
+ }
+}
+</script>
diff --git a/components/ui/skills/SkillsListing.vue b/components/ui/skills/SkillsListing.vue
new file mode 100644
index 0000000..9cd0136
--- /dev/null
+++ b/components/ui/skills/SkillsListing.vue
@@ -0,0 +1,68 @@
+<template>
+ <div class="container">
+ <div class="hero-content">
+ <br>
+
+ <div class="row">
+ <div class="col-lg-8">
+ <div v-for="(category, heading) in skills">
+ <!-- Main categories -->
+ <h5 :id="heading" class="wow fadeInUp" data-wow-delay="1.2s">
+ # {{ heading }}
+ </h5>
+
+ <!-- If category is an array... -->
+ <ul v-if="Array.isArray(category)">
+ <li v-for="item in category">
+ {{ item }}
+ </li>
+ </ul>
+ <!-- If the category is an object... -->
+ <ul v-for="(sub_category, sub_heading) in category" v-else>
+ <!-- Sub categories -->
+ <h6 :id="sub_heading">
+ ## {{ sub_heading }}
+ </h6>
+
+ <!-- If category is an array... -->
+ <ul v-if="Array.isArray(sub_category)">
+ <li v-for="item in sub_category">
+ {{ item }}
+ </li>
+ </ul>
+ <!-- If the category is an object... -->
+ <ul v-for="(subsub_category, subsub_heading) in sub_category" v-else>
+ <!-- If the current iterated item is the last of the current interated object, add a line-break... -->
+ <br v-if="(Object.keys(sub_category).length - 1) === Object.keys(sub_category).indexOf(subsub_heading)">
+
+ <h6 :id="subsub_heading">
+ ### {{ subsub_heading }}
+ </h6>
+
+ <!-- If category is an array... -->
+ <ul v-if="Array.isArray(subsub_category)">
+ <li v-for="item in subsub_category">
+ {{ item }}
+ </li>
+ </ul>
+ </ul>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import skills from 'assets/json/skills.json'
+
+export default {
+ name: 'SkillsListing',
+ data: () => {
+ return {
+ skills
+ }
+ }
+}
+</script>
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-11 03:06:31 +0000