Riyu is a cool, modern, and minimal portfolio template that is super easy to customize.
Whether you just want to add your information to create a page or edit styles and sections to add your own flair, Riyu has you covered.
- Super lightweight and loads ridiculously fast (no external dependencies except a few font icons)
- Mobile-first and fully responsive
- Minimal and modern look
- Hack the built html template or recreate from source
- Easy to edit data file to quickly add your info in (
- Easy to edit common styles using SASS variables
- Comes with a watch and build system with no customization necessary (livereload!)
- SASS preprocessor
- Liquid templating (Jekyll, Nunjucks)
You can use Riyu on two ways, by editing the raw html/css (use as is), or use data file/build system to customize Riyu more. It also features a Live Editor (beta) to more easily bootstrap your own page.
Riyu Editor is a companion web app that allows you to easily add your own content for Riyu. The editor creates both a ready built html file you can drop on your server and a data.json file for use on Riyu's build system.
Fair warning: this was a bit of a weekend hack, and I have not covered all edge cases. Use with caution.
Editing the raw html/css
The easiest way to edit Riku (without any setup at all) is to simply edit the built files (
index.html) and adding your information.
Use data file/Customize template
- Fork/Clone the repo
yarn installto install dependencies
yarn. This will start a watch server that automatically live reloads as you make edits!
You can also run
yarn build to build your files without starting the livereload server.
Use data file
You can customize most of Riku's data by editing the
src/data.js file. Excerpt:
Once edited, you can run
npm run build/
yarn build and it will edit the
index.html file to add your data. The watch server also watches this file so you can edit the data file while developing.
Template files liquid are located in
src/templates, and they are built to
SASS files are located in
src/scss and they are built to
The majority of styles are extracted, and you can easily change the Riyu's theme/colour scheme by editing the stylesheet's variables
$mobile: "(min-width: 460px)"; $tablet: "(min-width: 768px)"; $desktop: "(min-width: 1024px)"; $main-color: #f04; $main-text-color: #fff; $info-color: $main-color; $info-text-color: white; $tag-color: #eceff5; $muted-color: #eaeaea; $footer-color: black; $footer-text-color: white; $footer-alt-color: $main-color;
For example, simply edit
$main-color to change the Riyu's main color scheme (reddish tint by default).