Git Product home page Git Product logo

violet's Introduction

violet

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

Setup / Update installed packages

Using Node v8.6+

$ 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

violet's People

Contributors

haiji505 avatar hmsk avatar renovate-bot avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.