portfolio

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: [
+    '@nuxtjs',
+    'prettier',
+    'prettier/vue',
+    'plugin:prettier/recommended',
+    'plugin:nuxt/recommended'
+  ],
+  plugins: ['prettier'],
+  // add your custom rules here
+  rules: {}
+};

.github/workflows/node.js.yml

@@ -0,0 +1,34 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on: workflow_dispatch
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js setup
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16
+        cache: 'yarn'
+    - run: yarn install
+    - run: yarn build
+    - run: yarn generate
+    - name: Pushes to another repository
+      uses: cpina/github-action-push-to-another-repository@main
+      env:
+        API_TOKEN_GITHUB: ${{ secrets.API_TOKEN_GITHUB }}
+      with:
+        source-directory: 'dist'
+        destination-github-username: 'jourlez'
+        destination-repository-name: 'jourlez.github.io'
+        user-email: [email protected]
+        target-branch: main
+    - name: Test get variable exported by push-to-another-repository
+      run: echo $DESTINATION_CLONED_DIRECTORY

.gitignore

@@ -0,0 +1,90 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

README.md

@@ -0,0 +1,52 @@
+<div align="center">
+  <img alt="Logo" src="https://raw.githubusercontent.com/jourlez/portfolio/main/static/icons/mstile-150x150.png" width="150" />
+</div> 
+<h1 align="center">
+  Jourlez
+</h1>
+<p align="center">
+  Inspired by <a href="https://brittanychiang.com" target="_blank">brittanychiang.com</a> built with <a href="https://www.gatsbyjs.org/" target="_blank">Gatsby</a> and hosted with <a href="https://pages.github.com/" target="_blank">GitHub Pages</a>
+</p>
+
+<p align="center">
+  <img alt="GH Pages status" src="https://github.com/jourlez/portfolio/actions/workflows/node.js.yml/badge.svg" />
+</p>
+
+<p align="center">
+  <img alt="Preview" src="https://raw.githubusercontent.com/jourlez/portfolio/main/static/images/preview/preview.png" />
+</p>
+
+## Build Setup ⚙️
+
+> Make sure your node version is >=12
+
+```bash
+# install dependencies
+$ yarn install
+
+# serve with hot reload at localhost:3000
+
+$ yarn dev
+
+# build for production and launch server
+
+$ yarn build
+$ yarn start
+
+# generate static project
+
+$ yarn generate
+
+```
+
+## Maneuvering ⛵
+
+> A basic understanding of `Vue.js` and `Nuxt.js` is required.
+
+### Information
+
+The portfolio's information(about & bio, experince and projects) lies in the content folder.
+
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org) & [Nuxt.js Content docs](https://content.nuxtjs.org).
+
+Checkout [Tailwindcss docs](https://tailwindcss.com) for the color palette and class names.

assets/css/style.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+  scroll-behavior: smooth;
+}
+
+@layer utilities {
+  .bg-blur {
+    backdrop-filter: blur(4px);
+  }
+
+  .writing-v-lr {
+    writing-mode: vertical-lr;
+  }
+}

components/Controls/MenuToggle.vue

@@ -0,0 +1,34 @@
+<template>
+  <button
+    class="px-2 h-10 w-10 md:hidden transition ring-blue-500 dark:ring-cyan-500 hover:bg-blue-100 dark:hover:bg-gray-700 focus:ring-2 focus:outline-none rounded-full z-20"
+    :class="{ 'bg-blue-100 dark:bg-gray-800': menu }"
+    @click="toggleMenu"
+  >
+    <span
+      class="ml-auto transform h-0.5 w-6 block bg-blue-500 dark:bg-cyan-400 rounded-full transition duration-300"
+      :class="{ 'my-2': !menu, 'rotate-45': menu }"
+    ></span>
+    <span
+      class="ml-auto my-2 h-0.5 w-4 block bg-blue-500 dark:bg-cyan-400 rounded-full transition duration-300"
+      :class="{ hidden: menu }"
+    ></span>
+    <span
+      class="ml-auto transform h-0.5 block bg-blue-500 dark:bg-cyan-400 rounded-full transition duration-300"
+      :class="{ 'my-2 w-2': !menu, '-my-0.5 w-6 -rotate-45': menu }"
+    ></span>
+  </button>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  name: 'MenuToggle',
+  computed: mapGetters({
+    menu: 'menu'
+  }),
+  methods: mapActions({
+    toggleMenu: 'toggleMenu'
+  })
+};
+</script>

components/Controls/ThemeToggle.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <button
+      v-show="theme === 'dark'"
+      class="h-10 w-10 grid place-items-center rounded-full transform transition hover:bg-blue-100 dark:hover:bg-gray-700 focus:bg-blue-100 dark:focus:bg-gray-700 ring-blue-500 dark:ring-cyan-500 focus:ring-2 focus:outline-none"
+      @click="setTheme('light')"
+    >
+      <light class="h-2/3 w-2/3" />
+    </button>
+    <button
+      v-show="theme === 'light'"
+      class="h-10 w-10 grid place-items-center rounded-full transform transition hover:bg-blue-100 dark:hover:bg-gray-700 focus:bg-blue-100 dark:focus:bg-gray-700 ring-blue-500 dark:ring-cyan-500 focus:ring-2 focus:outline-none"
+      @click="setTheme('dark')"
+    >
+      <dark class="h-2/3 w-2/3" />
+    </button>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import Dark from '../Icons/Dark.vue';
+import Light from '../Icons/Light.vue';
+
+export default {
+  name: 'ThemeToggle',
+  components: { Light, Dark },
+  computed: mapGetters({
+    theme: 'theme'
+  }),
+  mounted() {
+    this.setTheme();
+  },
+  methods: mapActions({
+    setTheme: 'setTheme'
+  })
+};
+</script>

components/Icons/Dark.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="#202834"
+        d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22C6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8a8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045c-5.523 0-10-4.477-10-10c0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"
+      ></path>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Dark'
+};
+</script>

components/Icons/Envelope.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="100%"
+    height="100%"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-.41 2l-5.88 5.88a1 1 0 0 1-1.42 0L5.41 6zM20 17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7.41l5.88 5.88a3 3 0 0 0 4.24 0L20 7.41z"
+    ></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'Envelope'
+};
+</script>

components/Icons/ExternalLink.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="100%"
+    height="100%"
+    viewBox="0 0 24 24"
+  >
+    <g
+      class="transition"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M11 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-5"></path>
+      <path d="M10 14L20 4"></path>
+      <path d="M15 4h5v5"></path>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ExternalLink'
+};
+</script>