Add vuejs and port all contents to it
This commit is contained in:
parent
5a06315c3d
commit
fd4ab34247
4
.browserslistrc
Normal file
4
.browserslistrc
Normal file
@ -0,0 +1,4 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
not ie 11
|
||||
3
.dockerignore
Normal file
3
.dockerignore
Normal file
@ -0,0 +1,3 @@
|
||||
docker/
|
||||
.editorconfig
|
||||
README.md
|
||||
19
.eslintrc.js
Normal file
19
.eslintrc.js
Normal file
@ -0,0 +1,19 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true,
|
||||
},
|
||||
extends: [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"@vue/typescript/recommended",
|
||||
"plugin:prettier/recommended",
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 2020,
|
||||
},
|
||||
rules: {
|
||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
},
|
||||
};
|
||||
25
.gitignore
vendored
25
.gitignore
vendored
@ -1,4 +1,23 @@
|
||||
node_modules/
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
build/*
|
||||
!build/robots.txt
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
24
README.md
24
README.md
@ -1,3 +1,25 @@
|
||||
# Personal Website
|
||||
This the repository for Daniel's personal website.
|
||||
This is the repository for Daniel's personal website.
|
||||
|
||||
## Project setup
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
yarn serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
yarn lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
||||
3
babel.config.js
Normal file
3
babel.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
presets: ["@vue/cli-plugin-babel/preset"],
|
||||
};
|
||||
@ -1,2 +0,0 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
@ -1,23 +1,12 @@
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
nginx:
|
||||
image: daniel-website/nginx:dev
|
||||
vue:
|
||||
image: daniel-website/vue:dev
|
||||
build:
|
||||
context: ./docker/nginx
|
||||
context: ./docker/vue
|
||||
ports:
|
||||
- 127.0.0.1:8080:80
|
||||
- 127.0.0.1:8080:8080
|
||||
volumes:
|
||||
- ./build:/var/www/html
|
||||
webpack:
|
||||
image: daniel-website/webpack:dev
|
||||
build:
|
||||
context: ./docker/webpack
|
||||
volumes:
|
||||
- ./src:/code/src
|
||||
- ./build:/code/build
|
||||
- ./node_modules:/code/node_modules
|
||||
- ./package.json:/code/package.json
|
||||
- ./package-lock.json:/code/package-lock.json
|
||||
- ./webpack.config.js:/code/webpack.config.js
|
||||
- ./:/code
|
||||
tty: true
|
||||
|
||||
13
docker/vue/Dockerfile
Normal file
13
docker/vue/Dockerfile
Normal file
@ -0,0 +1,13 @@
|
||||
FROM node:16
|
||||
|
||||
ARG VUE_CLI_VERSION=5.0.4
|
||||
|
||||
COPY entrypoint.sh /entrypoint.sh
|
||||
ENTRYPOINT ["/entrypoint.sh"]
|
||||
|
||||
USER node
|
||||
WORKDIR /code
|
||||
|
||||
RUN yarn global add @vue/cli@${VUE_CLI_VERSION}
|
||||
|
||||
CMD ["yarn", "serve"]
|
||||
@ -1,6 +1,6 @@
|
||||
#!/bin/sh
|
||||
set -e
|
||||
|
||||
npm i
|
||||
yarn
|
||||
|
||||
exec "$@"
|
||||
@ -1,9 +0,0 @@
|
||||
FROM node:18
|
||||
|
||||
COPY entrypoint.sh /entrypoint.sh
|
||||
ENTRYPOINT ["/entrypoint.sh"]
|
||||
|
||||
USER node
|
||||
WORKDIR /code
|
||||
|
||||
CMD ["npm", "run", "build:watch"]
|
||||
8461
package-lock.json
generated
8461
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
52
package.json
52
package.json
@ -2,37 +2,35 @@
|
||||
"private": true,
|
||||
"name": "personal-site",
|
||||
"version": "1.0.0",
|
||||
"description": "This the repository for Daniel's personal website.",
|
||||
"description": "This is the repository for Daniel's personal website.",
|
||||
"scripts": {
|
||||
"build": "webpack --mode=production",
|
||||
"build:dev": "webpack --mode=development",
|
||||
"build:watch": "webpack --mode=development --watch",
|
||||
"start:dev": "webpack-dev-server --mode=development"
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "ssh://git@git.chaoticlogic.us:2302/daniel/personal-website.git"
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^3.2.13",
|
||||
"vue-class-component": "^8.0.0-0",
|
||||
"vue-router": "^4.0.3"
|
||||
},
|
||||
"keywords": [
|
||||
"portfolio",
|
||||
"website"
|
||||
],
|
||||
"author": "Daniel \"Daniel_I_Am\" de Cloet",
|
||||
"devDependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.1.1",
|
||||
"css-loader": "^6.7.1",
|
||||
"dart-sass": "^1.25.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"luxon": "^2.4.0",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
"pug": "^2.0.4",
|
||||
"pug-loader": "^2.4.0",
|
||||
"sass": "^1.52.1",
|
||||
"sass-loader": "^13.0.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"webpack": "^5.72.1",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.9.0"
|
||||
"@typescript-eslint/eslint-plugin": "^5.4.0",
|
||||
"@typescript-eslint/parser": "^5.4.0",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-typescript": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"@vue/eslint-config-typescript": "^9.1.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"prettier": "^2.4.1",
|
||||
"sass": "^1.32.7",
|
||||
"sass-loader": "^12.0.0",
|
||||
"typescript": "~4.5.5"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
10
src/404.pug
10
src/404.pug
@ -1,10 +0,0 @@
|
||||
doctype html
|
||||
html(lang="en")
|
||||
head
|
||||
title Error
|
||||
style.
|
||||
html { color-scheme: light dark; }
|
||||
body { width: 35em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; }
|
||||
body
|
||||
h1 An error occurred
|
||||
p Sorry, the page you are looking does not exist.
|
||||
13
src/50x.pug
13
src/50x.pug
@ -1,13 +0,0 @@
|
||||
doctype html
|
||||
html(lang="en")
|
||||
head
|
||||
title Error
|
||||
style.
|
||||
html { color-scheme: light dark; }
|
||||
body { width: 35em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; }
|
||||
body
|
||||
h1 An error occurred
|
||||
p Sorry, the page you are looking for is currently unavailable.<br>Please try again later.
|
||||
p If you are the system administrator of this resource then you should check the error log for details.
|
||||
p
|
||||
em Faithfully yours, nginx.
|
||||
33
src/App.vue
Normal file
33
src/App.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<PageHeader />
|
||||
<div class="container">
|
||||
<div class="split-content">
|
||||
<main>
|
||||
<router-view />
|
||||
</main>
|
||||
<aside>
|
||||
<tag-list />
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<page-footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
|
||||
import PageHeader from "@/components/header/PageHeader.vue";
|
||||
import PageFooter from "@/components/footer/PageFooter.vue";
|
||||
import TagList from "@/components/tags/TagList.vue";
|
||||
|
||||
@Options({
|
||||
components: {
|
||||
PageHeader,
|
||||
PageFooter,
|
||||
TagList,
|
||||
},
|
||||
})
|
||||
export default class App extends Vue {}
|
||||
</script>
|
||||
16
src/components/ArrowImage.vue
Normal file
16
src/components/ArrowImage.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
<polyline points="12 5 19 12 12 19"></polyline>
|
||||
</svg>
|
||||
</template>
|
||||
34
src/components/footer/PageFooter.vue
Normal file
34
src/components/footer/PageFooter.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<footer>
|
||||
<div class="credits">
|
||||
<p>Designed and developed by Daniel de Cloet.</p>
|
||||
<p>
|
||||
Built with
|
||||
<a target="_blank" href="https://vuejs.org">Vue.js</a>. Iconset
|
||||
provided by
|
||||
<a target="_blank" href="https://fontawesome.com/"
|
||||
>Font Awesome</a
|
||||
>. View the
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://git.chaoticlogic.us/daniel/personal-website/"
|
||||
>source code</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
<social-links />
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
|
||||
import SocialLinks from "./SocialLinks.vue";
|
||||
|
||||
@Options({
|
||||
components: {
|
||||
SocialLinks,
|
||||
},
|
||||
})
|
||||
export default class PageFooter extends Vue {}
|
||||
</script>
|
||||
21
src/components/footer/SocialLinks.vue
Normal file
21
src/components/footer/SocialLinks.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="social-links">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/Daniel-I-Am"
|
||||
><i class="fa-brands fa-github"></i
|
||||
></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://git.chaoticlogic.us/daniel/"
|
||||
><i class="fa-brands fa-gitlab"></i
|
||||
></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/in/daniel-de-cloet-11254a182/"
|
||||
><i class="fa-brands fa-linkedin"></i
|
||||
></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
39
src/components/header/HeaderBrand.vue
Normal file
39
src/components/header/HeaderBrand.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<router-link :to="{ name: 'home' }" class="brand">
|
||||
<img
|
||||
src="//via.placeholder.com/256"
|
||||
alt="Brand Logo"
|
||||
class="brand-logo"
|
||||
/>
|
||||
<span class="brand-name">Daniel de Cloet</span>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/style/variables";
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
color: $text-color;
|
||||
user-select: none;
|
||||
|
||||
.brand-logo {
|
||||
width: auto;
|
||||
height: $brand-height;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
line-height: $brand-height;
|
||||
vertical-align: middle;
|
||||
font-size: 28px;
|
||||
|
||||
margin-left: 2rem;
|
||||
|
||||
@media (max-width: $sm) {
|
||||
font-size: 20px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
46
src/components/header/HeaderHero.vue
Normal file
46
src/components/header/HeaderHero.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<section class="hero">
|
||||
<h1>I'm Daniel, junior software engineer</h1>
|
||||
<p>
|
||||
I am a student pursuing a Bachelor's in Computer Science, with a
|
||||
software engineering specialization. <br />
|
||||
I have a love for discovering new technologies and inventing unique
|
||||
solutions to complex problems.
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/style/variables";
|
||||
|
||||
section.hero {
|
||||
max-width: 60%;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
|
||||
@media (max-width: $lg) {
|
||||
max-width: 75%;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: $md) {
|
||||
max-width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $primary;
|
||||
font-size: 2.5rem;
|
||||
|
||||
@media (max-width: $md) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
54
src/components/header/HeaderNavigation.vue
Normal file
54
src/components/header/HeaderNavigation.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<nav class="site-nav">
|
||||
<ul class="nav-items">
|
||||
<li class="nav-item">
|
||||
<router-link :to="{ name: 'snippets' }">Snippets</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/style/variables";
|
||||
|
||||
.site-nav {
|
||||
flex-grow: 1;
|
||||
max-width: 250px;
|
||||
|
||||
.nav-items {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
.nav-item {
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 1.1rem;
|
||||
color: $text-color;
|
||||
|
||||
&:hover {
|
||||
color: darken($text-color, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $md) {
|
||||
.site-nav {
|
||||
flex-grow: unset;
|
||||
max-width: unset;
|
||||
|
||||
.nav-items {
|
||||
justify-content: unset;
|
||||
|
||||
.nav-item {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
14
src/components/header/HeaderWave.vue
Normal file
14
src/components/header/HeaderWave.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="wave">
|
||||
<svg
|
||||
preserveAspectRatio="none"
|
||||
width="1440"
|
||||
height="74"
|
||||
viewBox="0 0 1440 74"
|
||||
>
|
||||
<path
|
||||
d="M456.464 0.0433865C277.158 -1.70575 0 50.0141 0 50.0141V74H1440V50.0141C1440 50.0141 1320.4 31.1925 1243.09 27.0276C1099.33 19.2816 1019.08 53.1981 875.138 50.0141C710.527 46.3727 621.108 1.64949 456.464 0.0433865Z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
31
src/components/header/PageHeader.vue
Normal file
31
src/components/header/PageHeader.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="home-header">
|
||||
<div class="container">
|
||||
<header>
|
||||
<header-brand />
|
||||
<header-navigation />
|
||||
</header>
|
||||
<header-hero />
|
||||
</div>
|
||||
<header-wave />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
|
||||
import HeaderBrand from "./HeaderBrand.vue";
|
||||
import HeaderHero from "./HeaderHero.vue";
|
||||
import HeaderNavigation from "./HeaderNavigation.vue";
|
||||
import HeaderWave from "./HeaderWave.vue";
|
||||
|
||||
@Options({
|
||||
components: {
|
||||
HeaderBrand,
|
||||
HeaderHero,
|
||||
HeaderNavigation,
|
||||
HeaderWave,
|
||||
},
|
||||
})
|
||||
export default class PageHeader extends Vue {}
|
||||
</script>
|
||||
35
src/components/snippets/SnippetList.vue
Normal file
35
src/components/snippets/SnippetList.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<section class="snippet-list">
|
||||
<div class="header">
|
||||
<h3>Latest snippets</h3>
|
||||
<div class="all-snippets">
|
||||
<router-link :to="{ name: 'snippets' }">
|
||||
All snippets
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<ul class="snippet-items">
|
||||
<snippet-list-element />
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
|
||||
import SnippetListElement from "./SnippetListElement.vue";
|
||||
|
||||
@Options({
|
||||
components: {
|
||||
SnippetListElement,
|
||||
},
|
||||
})
|
||||
export default class SnippetList extends Vue {}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/style/variables";
|
||||
@import "@/style/snippet";
|
||||
</style>
|
||||
15
src/components/snippets/SnippetListElement.vue
Normal file
15
src/components/snippets/SnippetListElement.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<li class="snippet-item">
|
||||
<img
|
||||
src="//via.placeholder.com/128"
|
||||
alt="Snippet Topic"
|
||||
class="snippet-image"
|
||||
/>
|
||||
<div class="snippet-text">
|
||||
<h4 class="snippet-title">Title</h4>
|
||||
<span class="snippet-date" title="pretty date">
|
||||
relative date
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
24
src/components/tags/TagList.vue
Normal file
24
src/components/tags/TagList.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<section class="snippet-common-tags">
|
||||
<h3>Common tags</h3>
|
||||
<ul class="common-tags">
|
||||
<li>
|
||||
<arrow-image />
|
||||
<a href="javascript:void(0)">Some tag</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
|
||||
import ArrowImage from "@/components/ArrowImage.vue";
|
||||
|
||||
@Options({
|
||||
components: {
|
||||
ArrowImage,
|
||||
},
|
||||
})
|
||||
export default class TagList extends Vue {}
|
||||
</script>
|
||||
@ -1,18 +0,0 @@
|
||||
extends templates/homepage.pug
|
||||
|
||||
block main
|
||||
section.snippet-recent
|
||||
.header
|
||||
h3 Latest Snippets
|
||||
.all-snippets
|
||||
a(href="/snippets") All Snippets
|
||||
.list
|
||||
div(insert-data='insertRecentSnippets(this, 5)')
|
||||
|
||||
block aside
|
||||
section.snippet-common-tags
|
||||
h3 Common tags
|
||||
ul.common-tags
|
||||
li
|
||||
include partials/arrow.pug
|
||||
a.link(href="javascript:void(0)") Some tag
|
||||
@ -1,26 +0,0 @@
|
||||
const { DateTime } = require('luxon');
|
||||
|
||||
require('../sass/main.scss');
|
||||
|
||||
window.insertRecentSnippets = (element, amount = 5) => {
|
||||
const snippetTemplate = require('../partials/recent-snippet.pug');
|
||||
const snippets = require('../data/snippets.json');
|
||||
snippets.forEach(snippet => {
|
||||
if (snippet.timeAdded) {
|
||||
const date = DateTime.fromSeconds(snippet.timeAdded);
|
||||
snippet.timeAddedPretty = date.toLocaleString(DateTime.DATETIME_FULL);
|
||||
snippet.timeAddedRelative = date.toRelative({
|
||||
base: DateTime.now(),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
element.outerHTML = snippetTemplate({ snippets });
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
document.querySelectorAll('div[insert-data]').forEach(e => {
|
||||
const f = new Function(e.attributes.getNamedItem('insert-data').nodeValue).bind(e);
|
||||
f();
|
||||
});
|
||||
});
|
||||
7
src/main.ts
Normal file
7
src/main.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
|
||||
import "./style/main.scss";
|
||||
|
||||
createApp(App).use(router).mount("#app");
|
||||
@ -1,2 +0,0 @@
|
||||
span.arrow
|
||||
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
||||
@ -1,25 +0,0 @@
|
||||
footer
|
||||
.credits
|
||||
p Designed and developed by Daniel de Cloet.
|
||||
p
|
||||
| Built with
|
||||
|
|
||||
a(href="https://vuejs.org", target='_blank') Vue.js
|
||||
| . Iconset provided by
|
||||
|
|
||||
a(href='https://fontawesome.com/', target='_blank') Font Awesome
|
||||
| . View the
|
||||
|
|
||||
a(href="https://git.chaoticlogic.us/daniel/personal-website/", target='_blank') source code
|
||||
| .
|
||||
.social-links
|
||||
ul
|
||||
li
|
||||
a(href="https://github.com/Daniel-I-Am", target='_blank')
|
||||
i.fa-brands.fa-github
|
||||
li
|
||||
a(href="https://git.chaoticlogic.us/daniel/", target='_blank')
|
||||
i.fa-brands.fa-gitlab
|
||||
li
|
||||
a(href="https://www.linkedin.com/in/daniel-de-cloet-11254a182/", target='_blank')
|
||||
i.fa-brands.fa-linkedin
|
||||
@ -1,2 +0,0 @@
|
||||
.wave
|
||||
| <svg preserveAspectRatio="none" width="1440" height="74" viewBox="0 0 1440 74"><path d="M456.464 0.0433865C277.158 -1.70575 0 50.0141 0 50.0141V74H1440V50.0141C1440 50.0141 1320.4 31.1925 1243.09 27.0276C1099.33 19.2816 1019.08 53.1981 875.138 50.0141C710.527 46.3727 621.108 1.64949 456.464 0.0433865Z"></path></svg>
|
||||
@ -1,8 +0,0 @@
|
||||
header
|
||||
a.router-link-active.router-link-exact-active.brand(href='/')
|
||||
img.brand-logo(src="//via.placeholder.com/256", alt="Brand Logo")
|
||||
span.brand-name Daniel de Cloet
|
||||
nav.site-nav
|
||||
ul.nav-items
|
||||
li.nav-item
|
||||
a(href="/snippets") Snippets
|
||||
@ -1,4 +0,0 @@
|
||||
section.hero
|
||||
h1 I'm Daniel, junior software engineer
|
||||
p.
|
||||
I am a student pursuing a Bachelor's in Computer Science, with a software engineering specialization. <br> I have a love for discovering new technologies and inventing unique solutions to complex problems.
|
||||
@ -1,7 +0,0 @@
|
||||
ul.snippet-items
|
||||
each snippet in snippets
|
||||
li.snippet-item
|
||||
img.snippet-image(src="//via.placeholder.com/128", alt="Snippet Topic")
|
||||
.snippet-text
|
||||
h4.snippet-title=snippet.title
|
||||
span.snippet-date(title=snippet.timeAddedPretty)=snippet.timeAddedRelative
|
||||
23
src/router/index.ts
Normal file
23
src/router/index.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
|
||||
import HomeView from "../views/HomeView.vue";
|
||||
import SnippetsView from "../views/SnippetsView.vue";
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: "/",
|
||||
name: "home",
|
||||
component: HomeView,
|
||||
},
|
||||
{
|
||||
path: "/snippets",
|
||||
name: "snippets",
|
||||
component: SnippetsView,
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.BASE_URL),
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
@ -1,78 +0,0 @@
|
||||
$brand-height: 64px;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
color: $text-color;
|
||||
user-select: none;
|
||||
|
||||
.brand-logo {
|
||||
width: auto;
|
||||
height: $brand-height;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
line-height: $brand-height;
|
||||
vertical-align: middle;
|
||||
font-size: 28px;
|
||||
|
||||
margin-left: 2rem;
|
||||
|
||||
@media (max-width: $sm) {
|
||||
font-size: 20px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
flex-grow: 1;
|
||||
max-width: 250px;
|
||||
|
||||
.nav-items {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
.nav-item {
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 1.1rem;
|
||||
color: $text-color;
|
||||
|
||||
&:hover {
|
||||
color: darken($text-color, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $md) {
|
||||
flex-direction: column;
|
||||
|
||||
.site-nav {
|
||||
flex-grow: unset;
|
||||
max-width: unset;
|
||||
|
||||
.nav-items {
|
||||
justify-content: unset;
|
||||
|
||||
.nav-item {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#app > .header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
section.hero {
|
||||
max-width: 60%;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
|
||||
@media (max-width: $lg) {
|
||||
max-width: 75%;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: $md) {
|
||||
max-width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $primary;
|
||||
font-size: 2.5rem;
|
||||
|
||||
@media (max-width: $md) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
6
src/shims-vue.d.ts
vendored
Normal file
6
src/shims-vue.d.ts
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
/* eslint-disable */
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
extends templates/page.pug
|
||||
12
src/style/_header.scss
Normal file
12
src/style/_header.scss
Normal file
@ -0,0 +1,12 @@
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: $md) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
#app > .header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
$snippet-image-size: 24px;
|
||||
|
||||
section.snippet-recent {
|
||||
section.snippet-list {
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -21,7 +21,7 @@ section.snippet-recent {
|
||||
}
|
||||
}
|
||||
|
||||
section.snippet-recent,
|
||||
section.snippet-list,
|
||||
section.snippet {
|
||||
.list {
|
||||
.snippet-items {
|
||||
@ -89,8 +89,8 @@ section.snippet {
|
||||
}
|
||||
}
|
||||
|
||||
section.snippet-popular {
|
||||
.popular-items {
|
||||
section.snippet-common-tags {
|
||||
.common-tags {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
@ -30,3 +30,6 @@ $md: 768px;
|
||||
$lg: 992px;
|
||||
$xl: 1200px;
|
||||
$xxl: 1400px;
|
||||
|
||||
// Header
|
||||
$brand-height: 64px;
|
||||
@ -12,8 +12,6 @@
|
||||
|
||||
// Component specific styling
|
||||
@import "header";
|
||||
@import "hero";
|
||||
@import "snippet";
|
||||
@import "footer";
|
||||
@import "home";
|
||||
@import "pagination";
|
||||
@ -1,4 +0,0 @@
|
||||
extends page.pug
|
||||
|
||||
block variables
|
||||
- var isHome = true;
|
||||
@ -1 +0,0 @@
|
||||
extends skeleton.pug
|
||||
@ -1,26 +0,0 @@
|
||||
block variables
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
head
|
||||
meta(charset='UTF-8')
|
||||
meta(http-equiv='X-UA-Compatible', content='IE=edge')
|
||||
meta(name='viewport', content='width=device-width, initial-scale=1.0')
|
||||
title Portfolio - Daniel de Cloet
|
||||
body.page-home
|
||||
#app
|
||||
.home-header
|
||||
.container
|
||||
include ../partials/header.pug
|
||||
- if (isHome)
|
||||
include ../partials/hero.pug
|
||||
- if (isHome)
|
||||
include ../partials/header-wave.pug
|
||||
.container
|
||||
.split-content
|
||||
main
|
||||
block main
|
||||
aside
|
||||
block aside
|
||||
.container
|
||||
include ../partials/footer.pug
|
||||
16
src/views/HomeView.vue
Normal file
16
src/views/HomeView.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<snippet-list />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
|
||||
import SnippetList from "@/components/snippets/SnippetList.vue";
|
||||
|
||||
@Options({
|
||||
components: {
|
||||
SnippetList,
|
||||
},
|
||||
})
|
||||
export default class HomeView extends Vue {}
|
||||
</script>
|
||||
5
src/views/SnippetsView.vue
Normal file
5
src/views/SnippetsView.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
41
tsconfig.json
Normal file
41
tsconfig.json
Normal file
@ -0,0 +1,41 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"moduleResolution": "node",
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"useDefineForClassFields": true,
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"types": [
|
||||
"webpack-env"
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"tests/**/*.ts",
|
||||
"tests/**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
4
vue.config.js
Normal file
4
vue.config.js
Normal file
@ -0,0 +1,4 @@
|
||||
const { defineConfig } = require("@vue/cli-service");
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true,
|
||||
});
|
||||
@ -1,75 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
|
||||
function getPugHtmlPluginEntries(basepath) {
|
||||
const pugTemplateFiles = fs.readdirSync(basepath)
|
||||
.filter(file => path.extname(file).toLowerCase() === '.pug');
|
||||
|
||||
return pugTemplateFiles.map(pugFileName => new HtmlWebpackPlugin({
|
||||
inject: true,
|
||||
hash: false,
|
||||
filename: `${path.parse(pugFileName).name}.html`,
|
||||
template: path.join(basepath, pugFileName),
|
||||
}));
|
||||
}
|
||||
|
||||
module.exports = (env, argv) => {
|
||||
const isDevelopment = argv.mode === 'development';
|
||||
|
||||
return {
|
||||
entry: {
|
||||
app: './src/js/app.js',
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'build'),
|
||||
filename: "[name].bundle.js",
|
||||
},
|
||||
devServer: {
|
||||
port: 3000,
|
||||
},
|
||||
plugins: [
|
||||
...getPugHtmlPluginEntries('./src'),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: isDevelopment ? '[name].css' : '[name].[hash].css',
|
||||
chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css',
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.pug$/,
|
||||
use: ["pug-loader"],
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
|
||||
"css-loader",
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
sourceMap: isDevelopment,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
outputPath: 'fonts',
|
||||
},
|
||||
}
|
||||
],
|
||||
}
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.scss'],
|
||||
},
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user