feat: create new template - hacker

OSSPhilippines · Mar 14, 2020 · a84fdb0 · a84fdb0
1 parent c318fae
commit a84fdb0
Show file tree

Hide file tree

Showing 4 changed files with 291 additions and 0 deletions.
diff --git a/hacker/README.md b/hacker/README.md
@@ -0,0 +1,25 @@
+# Hacker - Free Portfolio Website Templates
+
+A simple terminal template for you amazing programmers out there!
+
+## Features
+
+- FREE
+- Mobile Responsive
+- SEO Friendly
+- Fast
+- 0 Dependencies
+- Compatible with any web server
+
+## How to use
+
+1. Close or manually download the code.
+2. Under the "plain" folder, edit the file `config.js`.
+3. Open the `index.html` file in your browser.
+4. If everything looks good, upload it to your server.
+
+## I am not a web developer, how do I setup my portfolio website?
+
+> Need help with setting up your portfolio website?
+
+Contact me @ [email protected] :)
diff --git a/hacker/config.js b/hacker/config.js
@@ -0,0 +1,68 @@
+window.PorfolioConfig = {
+  name: 'John Doe',
+  jobTitle: 'Full-stack Web Developer',
+  skills: [
+    {
+      name: 'JavaScript',
+      description: 'Reprehenderit mollit id ad veniam.'
+    },
+    {
+      name: 'HTML',
+      description: 'Fugiat veniam esse consequat quis cillum elit consequat Lorem pariatur ipsum veniam irure incididunt non.'
+    },
+    {
+      name: 'CSS',
+      description: 'Elit tempor mollit consectetur laborum nostrud qui in.'
+    }
+  ],
+  works: [
+    {
+      name: 'Vue Stripe Checkout',
+      link: 'https://jofftiquez.github.io/vue-stripe-checkout',
+      description: 'Mollit dolor tempor adipisicing non pariatur in tempor cillum do. In officia ullamco laborum ullamco voluptate. Laboris sunt quis enim Lorem laboris aliquip duis non magna excepteur voluptate. Pariatur velit aliquip officia nulla anim reprehenderit deserunt. Sint nostrud ipsum do aliquip.'
+    },
+    {
+      name: 'ToDo App',
+      link: 'https://theuselessweb.com/',
+      description: 'Esse magna anim incididunt enim sint aute consectetur ipsum id nostrud eu do. Pariatur et anim enim aliquip anim. Laboris labore incididunt labore enim nisi elit excepteur deserunt irure exercitation exercitation. Lorem sit ad laborum sit velit veniam sit nisi nostrud occaecat duis nulla duis.'
+    },
+    {
+      name: 'A Mobile Game',
+      link: 'https://theuselessweb.com/',
+      description: 'Incididunt non cupidatat deserunt ut commodo qui non do Lorem. Qui aute minim enim sit magna est consectetur incididunt. Ex est cupidatat tempor pariatur deserunt labore tempor minim laboris magna ipsum minim ea ea. Consectetur do anim laboris nulla nisi veniam sint qui.'
+    }
+  ],
+  hobbies: [
+    {
+      name: 'Rock Climbing',
+      description: 'Occaecat ipsum dolor ea ad ut irure do proident excepteur consectetur duis eu culpa velit.'
+    },
+    {
+      name: 'Surfing',
+      description: 'Laboris occaecat adipisicing culpa duis aute ea excepteur quis eiusmod mollit est pariatur.'
+    },
+    {
+      name: 'Rubick\'s Cube',
+      description: 'Laborum pariatur sint labore officia enim occaecat id.'
+    }
+  ],
+  contacts: {
+    email: '[email protected]',
+    mobileNo: '+639171234567',
+    phoneNo: '+12 345 6789',
+    links: [
+      {
+        name: 'GitHub',
+        link: 'https://github.com/jofftiquez'
+      },
+      {
+        name: 'Facebook',
+        link: 'https://facebook.com/jofftiquez'
+      },
+      {
+        name: 'Twitter',
+        link: 'https://twitter.com/jrtiquez'
+      }
+    ]
+  }
+};
diff --git a/hacker/cursor.gif b/hacker/cursor.gif
diff --git a/hacker/index.html b/hacker/index.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Hacker | Free Professional Portfolio Website Templates by Jofferson Tiquez</title>
+  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+  <style>
+    #app {
+      background-color: black;
+      background-image: url('./cursor.gif');
+      background-repeat: no-repeat;
+      background-size: 50;
+      background-attachment: fixed;
+      background-position-x: -92px;
+    }
+
+    .v-application,
+    .v-application .display-4,
+    .v-application .display-3,
+    .v-application .display-2,
+    .v-application .display-1,
+    .v-application .headline,
+    .v-application .title,
+    .v-application .subtitle-1,
+    .v-application .subtitle-2,
+    .v-application .body-2,
+    .v-application .body-1,
+    .v-application .caption,
+    .v-application .overline {
+      font-family: 'Source Code Pro', monospace !important;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app">
+    <v-app>
+      <v-container v-bind="sectionHeight">
+        <v-row align="center">
+          <v-col cols="12" md="6">
+            <h1 class="display-4 primary--text">{{name}}</h1>
+            <h2 class="primary--text">{{jobTitle}}</h2>
+            <p>Sit quis in tempor quis. Nisi ex exercitation in irure. Reprehenderit sint aliqua et dolore enim laboris dolore exercitation magna aliqua ex ad.</p>
+            <v-btn href="#skills" text class="primary--text">/Skills</v-btn href="skills">
+            <v-btn href="#works" text class="primary--text">/Recent Works</v-btn>
+            <v-btn href="#hobbies" text class="primary--text">/Hobbies</v-btn>
+            <v-btn href="#contact" text class="primary--text" outlined>/Contacts</v-btn>
+          </v-col>
+        </v-row>
+      </v-container>
+      <v-container>
+        <v-row id="skills" class="mb-5">
+          <v-col cols="12" md="6">
+            <h1 class="primary--text">/Skills</h1>
+          </v-col>
+          <v-col v-for="(skill, index) in skills" cols="12" :key="index">
+            <v-card hover height="100%">
+              <v-card-text>
+                <h2 class="primary--text">> {{skill.name}}</h2>
+                <br>
+                <p>:{{skill.description}}</p>
+              </v-card-text>
+              <v-footer>
+                <v-spacer></v-spacer>
+                <small class="primary--text">~/.skills</small>
+              </v-footer>
+            </v-card>
+          </v-col>
+        </v-row>
+        <v-row id="works" class="mb-5">
+          <v-col cols="12" md="6">
+            <h1 class="primary--text">/Recent Works</h1>
+          </v-col>
+          <v-col v-for="(work, index) in works" cols="12" :key="index">
+            <v-card hover height="100%">
+              <v-card-text>
+                <h2 class="primary--text">> {{work.name}}</h2>
+                <br>
+                <p>:{{work.description}}</p>
+              </v-card-text>
+              <v-footer>
+                <v-spacer></v-spacer>
+                <small class="primary--text">~/.works</small>
+              </v-footer>
+            </v-card>
+          </v-col>
+        </v-row>
+        <v-row id="hobbies" class="mb-5">
+          <v-col cols="12" md="6">
+            <h1 class="primary--text">/My Hobbies</h1>
+          </v-col>
+          <v-col v-for="(hobby, index) in hobbies" cols="12" :key="index">
+            <v-card hover height="100%">
+              <v-card-text>
+                <h2 class="primary--text">> {{hobby.name}}</h2>
+                <br>
+                <p>:{{hobby.description}}</p>
+              </v-card-text>
+              <v-footer>
+                <v-spacer></v-spacer>
+                <small class="primary--text">~/.hobbies</small>
+              </v-footer>
+            </v-card>
+          </v-col>
+        </v-row>
+        <v-row id="contact" justify="center">
+          <v-col cols="12" md="10" class="text-center">
+            <h1 class="primary--text">/Let's Talk!</h1>
+          </v-col>
+          <v-col cols="12" sm="6" md="4" class="text-center">
+            <v-row>
+              <v-col class="text-center" cols="12">
+                <h3 v-if="contacts && contacts.email">{{contacts.email}}</h3>
+                <h3 v-if="contacts && contacts.mobileNo">{{contacts.mobileNo}}</h3>
+                <h3 v-if="contacts && contacts.phoneNo">{{contacts.phoneNo}}</h3>
+              </v-col>
+              <v-col class="text-center" cols="12">
+                <v-btn
+                  v-for="(link, index) in contactLinks"
+                  outlined
+                  rounded
+                  class="ma-1"
+                  target="_blank"
+                  :href="link.link"
+                  :key="index"
+                  color="primary"
+                  class="primary--text"
+                >
+                  {{link.name}}
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-container>
+      <v-footer>
+        <v-spacer></v-spacer>
+        <small>Template made with <v-icon class="red--text">mdi-heart</v-icon> by <a href="https://twitter.com/jrtiquez" target="_blank">Jofferson R Tiquez</a></small>
+      </v-footer>
+    </v-app>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
+  <script src="config.js"></script>
+  <script>
+    var vm = new Vue({
+      el: '#app',
+      vuetify: new Vuetify({
+        theme: {
+          dark: true,
+          themes: {
+            dark: {
+              primary: '#19c113',
+              secondary: '#424242',
+              accent: '#82B1FF',
+              error: '#FF5252',
+              info: '#2196F3',
+              success: '#4CAF50',
+              warning: '#FFC107',
+            }
+          }
+        }
+      }),
+      data () {
+        return {
+          menu: false,
+          ...window.PorfolioConfig
+        };
+      },
+      computed: {
+        $isMobile () {
+          return this.$vuetify.breakpoint.smAndDown;
+        },
+        sectionHeight () {
+          return {
+            style: 'min-height: 100vh',
+            class: 'fill-height'
+          }
+        },
+        contactLinks () {
+          if (this.contacts && this.contacts.links && this.contacts.links.length) {
+            return this.contacts.links;
+          }
+          return [];
+        }
+      }
+    });
+  </script>
+</body>
+
+</html>