Initial commit
This commit is contained in:
commit
4995841aaf
91
.gitignore
vendored
Normal file
91
.gitignore
vendored
Normal file
@ -0,0 +1,91 @@
|
||||
# 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
|
||||
.editorconfig
|
||||
|
||||
# Service worker
|
||||
sw.*
|
||||
|
||||
# Mac OSX
|
||||
.DS_Store
|
||||
|
||||
# Vim swap files
|
||||
*.swp
|
22
README.md
Normal file
22
README.md
Normal file
@ -0,0 +1,22 @@
|
||||
# popskip
|
||||
|
||||
> web app for damillora.com
|
||||
|
||||
## Build Setup
|
||||
|
||||
``` 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
|
||||
```
|
||||
|
||||
For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
|
7
assets/README.md
Normal file
7
assets/README.md
Normal file
@ -0,0 +1,7 @@
|
||||
# ASSETS
|
||||
|
||||
**This directory is not required, you can delete it if you don't want to use it.**
|
||||
|
||||
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
|
||||
|
||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
|
BIN
assets/bg.png
Normal file
BIN
assets/bg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.4 MiB |
3
assets/css/tailwind.css
Normal file
3
assets/css/tailwind.css
Normal file
@ -0,0 +1,3 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
29
components/Footer.vue
Normal file
29
components/Footer.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div>
|
||||
<footer>
|
||||
<div class="footer-left">
|
||||
<h1>(C) 2019 Damillora</h1>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="h-12"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
@apply h-12 bottom-0 w-full z-10 flex flex-row justify-start items-center px-4 fixed;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
footer h1 {
|
||||
@apply text-white;
|
||||
}
|
||||
.footer-left {
|
||||
|
||||
}
|
||||
</style>
|
40
components/Header.vue
Normal file
40
components/Header.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<header>
|
||||
<div class="header-left">
|
||||
<nuxt-link to="/"><p class="header-link">Damillora</p></nuxt-link>
|
||||
</div>
|
||||
<div class="header-middle">
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<nuxt-link to="/projects"><p class="header-link">Projects</p></nuxt-link>
|
||||
</div>
|
||||
</header>
|
||||
<div class="h-16"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
@apply h-16 fixed top-0 w-full z-10 flex flex-row justify-start items-center px-4;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
.header-link {
|
||||
@apply text-white text-lg;
|
||||
}
|
||||
.header-left {
|
||||
|
||||
}
|
||||
.header-middle {
|
||||
@apply flex-grow;
|
||||
}
|
||||
.header-right {
|
||||
|
||||
}
|
||||
</style>
|
34
components/Hero.vue
Normal file
34
components/Hero.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="hero-image">
|
||||
<div class="hero-fade">
|
||||
</div>
|
||||
<div class="hero-contents">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.hero-image {
|
||||
@apply w-full relative;
|
||||
background-image: url("~assets/bg.png");
|
||||
background-size: cover;
|
||||
min-height: 300px;
|
||||
height: 50vh;
|
||||
}
|
||||
.hero-fade {
|
||||
@apply bg-black w-full h-full;
|
||||
opacity: 0.25;
|
||||
}
|
||||
.hero-contents {
|
||||
@apply absolute bottom-0 text-white w-full py-4;
|
||||
}
|
||||
.hero-contents h1 {
|
||||
@apply text-6xl text-center;
|
||||
}
|
||||
</style>
|
79
components/Logo.vue
Normal file
79
components/Logo.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="VueToNuxtLogo">
|
||||
<div class="Triangle Triangle--two" />
|
||||
<div class="Triangle Triangle--one" />
|
||||
<div class="Triangle Triangle--three" />
|
||||
<div class="Triangle Triangle--four" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.VueToNuxtLogo {
|
||||
display: inline-block;
|
||||
animation: turn 2s linear forwards 1s;
|
||||
transform: rotateX(180deg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 180px;
|
||||
width: 245px;
|
||||
}
|
||||
|
||||
.Triangle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.Triangle--one {
|
||||
border-left: 105px solid transparent;
|
||||
border-right: 105px solid transparent;
|
||||
border-bottom: 180px solid #41b883;
|
||||
}
|
||||
|
||||
.Triangle--two {
|
||||
top: 30px;
|
||||
left: 35px;
|
||||
animation: goright 0.5s linear forwards 3.5s;
|
||||
border-left: 87.5px solid transparent;
|
||||
border-right: 87.5px solid transparent;
|
||||
border-bottom: 150px solid #3b8070;
|
||||
}
|
||||
|
||||
.Triangle--three {
|
||||
top: 60px;
|
||||
left: 35px;
|
||||
animation: goright 0.5s linear forwards 3.5s;
|
||||
border-left: 70px solid transparent;
|
||||
border-right: 70px solid transparent;
|
||||
border-bottom: 120px solid #35495e;
|
||||
}
|
||||
|
||||
.Triangle--four {
|
||||
top: 120px;
|
||||
left: 70px;
|
||||
animation: godown 0.5s linear forwards 3s;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 60px solid #fff;
|
||||
}
|
||||
|
||||
@keyframes turn {
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes godown {
|
||||
100% {
|
||||
top: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes goright {
|
||||
100% {
|
||||
left: 70px;
|
||||
}
|
||||
}
|
||||
</style>
|
35
components/ProjectCard.vue
Normal file
35
components/ProjectCard.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="card project-card">
|
||||
<div class="card-title">
|
||||
<h1>{{name}}</h1>
|
||||
</div>
|
||||
<div class="card-content my-4">
|
||||
<p>{{description}}</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<p><a :href="url">Website</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [ 'name', 'description', 'url' ],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.project-card {
|
||||
@apply mx-4 my-4 w-full;
|
||||
}
|
||||
@screen md {
|
||||
.project-card {
|
||||
@apply w-1/2;
|
||||
}
|
||||
}
|
||||
@screen lg {
|
||||
.project-card {
|
||||
@apply w-1/3;
|
||||
}
|
||||
}
|
||||
</style>
|
7
components/README.md
Normal file
7
components/README.md
Normal file
@ -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._
|
7
layouts/README.md
Normal file
7
layouts/README.md
Normal file
@ -0,0 +1,7 @@
|
||||
# LAYOUTS
|
||||
|
||||
**This directory is not required, you can delete it if you don't want to use it.**
|
||||
|
||||
This directory contains your Application Layouts.
|
||||
|
||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
|
50
layouts/default.vue
Normal file
50
layouts/default.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="root">
|
||||
<Header />
|
||||
<div class="body">
|
||||
<nuxt />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from '../components/Header';
|
||||
import Footer from '../components/Footer';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
Footer
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.root {
|
||||
background: url("~assets/bg.png") no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.body {
|
||||
@apply text-white relative overflow-y-auto;
|
||||
height: calc(100vh - 7rem);
|
||||
}
|
||||
.page {
|
||||
@apply relative w-full h-full;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply px-4 py-4;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
.card .card-title {
|
||||
@apply text-xl;
|
||||
}
|
||||
.title-card .card-title {
|
||||
@apply font-bold text-4xl pb-2;
|
||||
}
|
||||
.title-card .card-content {
|
||||
@apply text-xl;
|
||||
}
|
||||
|
||||
</style>
|
8
middleware/README.md
Normal file
8
middleware/README.md
Normal file
@ -0,0 +1,8 @@
|
||||
# MIDDLEWARE
|
||||
|
||||
**This directory is not required, you can delete it if you don't want to use it.**
|
||||
|
||||
This directory contains your application middleware.
|
||||
Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
|
||||
|
||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
|
62
nuxt.config.js
Normal file
62
nuxt.config.js
Normal file
@ -0,0 +1,62 @@
|
||||
|
||||
export default {
|
||||
mode: 'universal',
|
||||
/*
|
||||
** Headers of the page
|
||||
*/
|
||||
head: {
|
||||
title: 'Damillora',
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
||||
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
|
||||
],
|
||||
link: [
|
||||
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
|
||||
]
|
||||
},
|
||||
/*
|
||||
** Customize the progress-bar color
|
||||
*/
|
||||
loading: { color: '#fff' },
|
||||
/*
|
||||
** Global CSS
|
||||
*/
|
||||
css: [
|
||||
],
|
||||
/*
|
||||
** Plugins to load before mounting the App
|
||||
*/
|
||||
plugins: [
|
||||
],
|
||||
/*
|
||||
** Nuxt.js dev-modules
|
||||
*/
|
||||
buildModules: [
|
||||
// Doc: https://github.com/nuxt-community/nuxt-tailwindcss
|
||||
'@nuxtjs/tailwindcss',
|
||||
],
|
||||
/*
|
||||
** Nuxt.js modules
|
||||
*/
|
||||
modules: [
|
||||
// Doc: https://axios.nuxtjs.org/usage
|
||||
'@nuxtjs/axios',
|
||||
],
|
||||
/*
|
||||
** Axios module configuration
|
||||
** See https://axios.nuxtjs.org/options
|
||||
*/
|
||||
axios: {
|
||||
},
|
||||
/*
|
||||
** Build configuration
|
||||
*/
|
||||
build: {
|
||||
/*
|
||||
** You can extend webpack config here
|
||||
*/
|
||||
extend (config, ctx) {
|
||||
}
|
||||
}
|
||||
}
|
22
package.json
Normal file
22
package.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "popskip",
|
||||
"version": "1.0.0",
|
||||
"description": "web app for damillora.com",
|
||||
"author": "Damillora",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "nuxt",
|
||||
"build": "nuxt build",
|
||||
"start": "nuxt start",
|
||||
"generate": "nuxt generate"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxtjs/axios": "^5.3.6",
|
||||
"nuxt": "^2.0.0",
|
||||
"nuxt-fontawesome": "^0.4.0",
|
||||
"tailwindcss-transitions": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxtjs/tailwindcss": "^1.0.0"
|
||||
}
|
||||
}
|
6
pages/README.md
Normal file
6
pages/README.md
Normal file
@ -0,0 +1,6 @@
|
||||
# PAGES
|
||||
|
||||
This directory contains your Application Views and Routes.
|
||||
The framework reads all the `*.vue` files inside this directory and creates the router of your application.
|
||||
|
||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
|
27
pages/index.vue
Normal file
27
pages/index.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="card title-card absolute right-0 bottom-0 w-full sm:w-2/3 md:w-1/2 lg:w-2/5 xl:w-1/3">
|
||||
<div class="card-title">
|
||||
<h1>Yuika Mitsumine</h1>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Web Developer</p>
|
||||
</div>
|
||||
<div class="card-social">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Hero from '../components/Hero';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Hero,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
28
pages/projects.vue
Normal file
28
pages/projects.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="card title-card">
|
||||
<div class="card-title">
|
||||
<h1>Projects</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="projects">
|
||||
<ProjectCard name="Fracture" description="A quiz web application using Vue, Nuxt.js, and Vuetify." url="https://fracture.junna.moe" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProjectCard from '../components/ProjectCard';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ProjectCard
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.projects {
|
||||
@apply flex flex-row flex-wrap;
|
||||
}
|
||||
</style>
|
7
plugins/README.md
Normal file
7
plugins/README.md
Normal file
@ -0,0 +1,7 @@
|
||||
# PLUGINS
|
||||
|
||||
**This directory is not required, you can delete it if you don't want to use it.**
|
||||
|
||||
This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
|
||||
|
||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
|
11
static/README.md
Normal file
11
static/README.md
Normal file
@ -0,0 +1,11 @@
|
||||
# STATIC
|
||||
|
||||
**This directory is not required, you can delete it if you don't want to use it.**
|
||||
|
||||
This directory contains your static files.
|
||||
Each file inside this directory is mapped to `/`.
|
||||
Thus you'd want to delete this README.md before deploying to production.
|
||||
|
||||
Example: `/static/robots.txt` is mapped as `/robots.txt`.
|
||||
|
||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
|
BIN
static/favicon.ico
Normal file
BIN
static/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
10
store/README.md
Normal file
10
store/README.md
Normal file
@ -0,0 +1,10 @@
|
||||
# STORE
|
||||
|
||||
**This directory is not required, you can delete it if you don't want to use it.**
|
||||
|
||||
This directory contains your Vuex Store files.
|
||||
Vuex Store option is implemented in the Nuxt.js framework.
|
||||
|
||||
Creating a file in this directory automatically activates the option in the framework.
|
||||
|
||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
|
43
tailwind.config.js
Normal file
43
tailwind.config.js
Normal file
@ -0,0 +1,43 @@
|
||||
module.exports = {
|
||||
theme: {
|
||||
transitionProperty: {
|
||||
'none': 'none',
|
||||
'all': 'all',
|
||||
'color': 'color',
|
||||
'bg': 'background-color',
|
||||
'border': 'border-color',
|
||||
'colors': ['color', 'background-color', 'border-color'],
|
||||
'opacity': 'opacity',
|
||||
'transform': 'transform',
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
'yuika-blue': {
|
||||
'100': '#C6E7F8',
|
||||
'200': '#9FD3F0',
|
||||
'300': '#7BBEE5',
|
||||
'400': '#5AA7D7',
|
||||
'500': '#3B90C6',
|
||||
'600': '#2E72AA',
|
||||
'700': '#22558C',
|
||||
'800': '#173B6C',
|
||||
'900': '#0E254C',
|
||||
}
|
||||
},
|
||||
maxHeight: {
|
||||
'16': '4rem',
|
||||
'24': '6rem',
|
||||
'32': '8rem',
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
'sans': ['"Exo 2"',' -apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
|
||||
'display': ['"Exo 2"',' -apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
|
||||
'body': ['"Exo 2"',' -apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
|
||||
}
|
||||
},
|
||||
variants: ['responsive', 'group-hover', 'hover', 'active' ],
|
||||
plugins: [
|
||||
require('tailwindcss-transitions')(),
|
||||
],
|
||||
}
|
Loading…
Reference in New Issue
Block a user