All Projects → haiiro-io → violet

haiiro-io / violet

Licence: MIT license
🖼 Markdown based portfolio website for haiji.co / namika.hmsk.co

Programming Languages

Vue
7211 projects
typescript
32286 projects

Projects that are alternatives of or similar to violet

Vuecms
Static blogging for developers using NuxtJS + VueJS
Stars: ✭ 85 (+6.25%)
Mutual labels:  static-site, nuxtjs
Gp Vue Boilerplate
Grabarz & Partner Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites with vuejs.
Stars: ✭ 71 (-11.25%)
Mutual labels:  static-site, nuxtjs
Blog 2.0
🗣 A personal blog by Irfan Maulana built with Nuxt.js
Stars: ✭ 29 (-63.75%)
Mutual labels:  static-site, nuxtjs
Nuxt Netlify Cms Starter Template
⚡ Build server-less, static websites with Vue.js and Netlify CMS.
Stars: ✭ 186 (+132.5%)
Mutual labels:  static-site, nuxtjs
nuxt-cordova-app
📱 Nuxt JS (Vue JS) + Vuetify 2 SPA hybrid demo app built using Cordova
Stars: ✭ 48 (-40%)
Mutual labels:  nuxtjs
nuxt-ts-module
A tiny module to use Typescript within Nuxt.js application.
Stars: ✭ 21 (-73.75%)
Mutual labels:  nuxtjs
covid19
愛知県 新型コロナウイルス感染症対策サイト / Aichi COVID-19 Task Force website
Stars: ✭ 68 (-15%)
Mutual labels:  nuxtjs
create-nuxt-tailwind-app
[DEPRECATED] Use create-nuxt-app, they added full tailwindcss & purgecss support
Stars: ✭ 32 (-60%)
Mutual labels:  nuxtjs
phiilu.com
Personal Website
Stars: ✭ 31 (-61.25%)
Mutual labels:  static-site
nene
Nēnē: A no-frills static site generator
Stars: ✭ 22 (-72.5%)
Mutual labels:  static-site
reflex-stone
Template repository for writing GHCJS/Reflex apps targeting static sites without a backend.
Stars: ✭ 24 (-70%)
Mutual labels:  static-site
wangxin-study
浪树学习考试系统(wangxin-education)[课程点播、直播、刷题、考试、支付、营销],致力打造一个低成本通用的在线教育系统,让用户直接通过系统可视化配置并尽可能无须修改任何代码即可实现上线商用。系统采用前后端分离模式,前台和移动端采用vue.js为核心框架,后台采用Java语言,框架springboot+spring+mybatis+redis+mysql。系统目前主要功能有课程点播、直播、练习、考试、支付、营销等功能。
Stars: ✭ 267 (+233.75%)
Mutual labels:  nuxtjs
json.pizza
Online JSON formatter and prettifier
Stars: ✭ 72 (-10%)
Mutual labels:  nuxtjs
krashna-site
Website for Krashna Musika - Student Society for Classical Music in Delft
Stars: ✭ 17 (-78.75%)
Mutual labels:  static-site
pokedex-nextjs
Get to know the different render methods that the Next.js framework provides by exploring Pokemons
Stars: ✭ 39 (-51.25%)
Mutual labels:  static-site
mpc-hc.org
The source code of our website.
Stars: ✭ 64 (-20%)
Mutual labels:  static-site
LaraNuxt
Laravel framework with integrated NuxtJs support, preconfigured for eslint, jest and vuetify.
Stars: ✭ 53 (-33.75%)
Mutual labels:  nuxtjs
emojic.ch
顔認識で人の顔を😇に変換するWebサービス「えもじっく」
Stars: ✭ 13 (-83.75%)
Mutual labels:  nuxtjs
netflix-show-generator
A tool for generating Netflix show image
Stars: ✭ 18 (-77.5%)
Mutual labels:  nuxtjs
don-blog
一个基于Vue.js + Nuxt.js + SCSS + ES6/7 + Node.js + Koa.js + MySQL + Redis开发的个人博客。
Stars: ✭ 77 (-3.75%)
Mutual labels:  nuxtjs

violet

Pre-rendered portfolio websites for Haiiro Haiji / Namika Hamasaki.

Setup / Update installed packages

With Node v12

$ npm i

Development

Run as English locale

$ npm run dev

Then open localhost:8000 in your browser.

Run as Japanese locale

$ npm run dev:ja

Directory/File structure for the content writer

Add content

  1. Create new markdown file to under /contents/works/:locale
  • file name is used for URL. e.g. /contents/works/ja/amazarashi.md -> https://domain/works/mazarashi
  1. Add filename to orderedWorks Array on /nuxt.config.js
  • This data is used for index page's list and configured as pre-rendering target

Markdown format

Sample /contents/works/en/amazarashi.md

title: Amazarashi Music Video
year: 2015
owner: Sony Music Entertainment
role: UI Design
related:
  - pokemon-go
  - googleplay-game-effect
  - laughly
colors:
  - "#34393d"
  - "#263228"
  - "#555c6f"
  - "#797979"
  - "#a40505"
  - "#686868"
description: |
  Amazarashi is a Japanese rock band that continues to question modern society through its songs. I designed a user interface for their music video during my period at SIX, creative agency in Tokyo, Japan.
---

Show multimedia files

  1. Put the file to /static/images/works/[work name] as something.png
  2. Call with <work-media> custom element in the markdown file for same work
  • <work-media name="something.png"> (don't need "work name" part)
  • If you put mp4, rendered with video player automatically 😉
  • If you put the URL of youtube.com, rendered as embed player of YouTube

Licenses

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].