├── .gitignore ├── js └── index.js ├── src ├── js │ └── index.js ├── scss │ ├── about.scss │ ├── header.scss │ ├── index.scss │ ├── footer.scss │ ├── variables.scss │ ├── lead.scss │ ├── animations.scss │ ├── projects.scss │ ├── base.scss │ └── experience.scss ├── templates │ ├── partials │ │ ├── header.html │ │ ├── footer.html │ │ ├── about.html │ │ ├── lead.html │ │ ├── experience.html │ │ └── projects.html │ └── index.html └── data.js ├── img ├── merc-01.png └── combustion.png ├── editor ├── build │ ├── riyu.zip │ ├── favicon.ico │ ├── static │ │ └── css │ │ │ ├── main.c33b70d9.css.map │ │ │ └── main.c33b70d9.css │ └── asset-manifest.json ├── public │ ├── riyu.zip │ ├── favicon.ico │ └── index.html ├── screenshot.png ├── src │ ├── index.css │ ├── index.js │ ├── util │ │ └── paths.js │ ├── App.test.js │ ├── Button.js │ ├── App.css │ ├── metadata.js │ ├── zip │ │ └── index.js │ ├── data.js │ ├── logo.svg │ ├── Onboarding │ │ └── index.js │ ├── styled │ │ └── index.js │ └── App.js ├── .gitignore ├── config │ ├── jest │ │ ├── fileTransform.js │ │ └── cssTransform.js │ ├── polyfills.js │ ├── env.js │ ├── paths.js │ ├── webpack.config.dev.js │ └── webpack.config.prod.js ├── README.md ├── scripts │ ├── test.js │ ├── genZipBundle.js │ ├── build.js │ └── start.js └── package.json ├── lib └── fontello │ ├── font │ ├── fontello.eot │ ├── fontello.ttf │ ├── fontello.woff │ ├── fontello.woff2 │ └── fontello.svg │ ├── LICENSE.txt │ ├── css │ ├── fontello-codes.css │ ├── fontello-ie7-codes.css │ ├── fontello-ie7.css │ ├── animation.css │ ├── fontello.css │ └── fontello-embedded.css │ ├── config.json │ ├── README.txt │ └── demo.html ├── editor.html ├── package.json ├── gulpfile.js ├── README.md ├── css └── index.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | /* Add your own script here */ 2 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | /* Add your own script here */ 2 | -------------------------------------------------------------------------------- /src/scss/about.scss: -------------------------------------------------------------------------------- 1 | .contact__msg { 2 | line-height: 24px; 3 | } 4 | -------------------------------------------------------------------------------- /img/merc-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Secretmapper/Riyu/HEAD/img/merc-01.png -------------------------------------------------------------------------------- /src/templates/partials/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | -------------------------------------------------------------------------------- /img/combustion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Secretmapper/Riyu/HEAD/img/combustion.png -------------------------------------------------------------------------------- /editor/build/riyu.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Secretmapper/Riyu/HEAD/editor/build/riyu.zip -------------------------------------------------------------------------------- /editor/public/riyu.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Secretmapper/Riyu/HEAD/editor/public/riyu.zip -------------------------------------------------------------------------------- /editor/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Secretmapper/Riyu/HEAD/editor/screenshot.png -------------------------------------------------------------------------------- /editor/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Secretmapper/Riyu/HEAD/editor/build/favicon.ico -------------------------------------------------------------------------------- /editor/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Secretmapper/Riyu/HEAD/editor/public/favicon.ico -------------------------------------------------------------------------------- /lib/fontello/font/fontello.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Secretmapper/Riyu/HEAD/lib/fontello/font/fontello.eot -------------------------------------------------------------------------------- /lib/fontello/font/fontello.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Secretmapper/Riyu/HEAD/lib/fontello/font/fontello.ttf -------------------------------------------------------------------------------- /lib/fontello/font/fontello.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Secretmapper/Riyu/HEAD/lib/fontello/font/fontello.woff -------------------------------------------------------------------------------- /lib/fontello/font/fontello.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Secretmapper/Riyu/HEAD/lib/fontello/font/fontello.woff2 -------------------------------------------------------------------------------- /editor/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | overflow: hidden; 5 | font-family: sans-serif; 6 | } 7 | -------------------------------------------------------------------------------- /editor/build/static/css/main.c33b70d9.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"static/css/main.c33b70d9.css","sourceRoot":""} -------------------------------------------------------------------------------- /src/templates/partials/footer.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/scss/header.scss: -------------------------------------------------------------------------------- 1 | .header-container { 2 | &__img { 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | min-width: 100%; 7 | min-height: 100%; 8 | z-index: -100; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /editor/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); 10 | -------------------------------------------------------------------------------- /editor/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.c33b70d9.css", 3 | "main.css.map": "static/css/main.c33b70d9.css.map", 4 | "main.js": "static/js/main.2ec4ed96.js", 5 | "main.js.map": "static/js/main.2ec4ed96.js.map" 6 | } -------------------------------------------------------------------------------- /editor/src/util/paths.js: -------------------------------------------------------------------------------- 1 | export const riyuRoot = './' 2 | export const templates = './src/templates' 3 | export const bundle = './editor/public/riyu.zip' 4 | 5 | export default { 6 | templates, 7 | bundle, 8 | riyuRoot 9 | } 10 | -------------------------------------------------------------------------------- /editor/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /src/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import './variables'; 2 | 3 | @import './animations'; 4 | @import './base'; 5 | @import './header'; 6 | @import './lead'; 7 | @import './projects'; 8 | @import './experience'; 9 | @import './about'; 10 | @import './footer'; 11 | -------------------------------------------------------------------------------- /lib/fontello/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Font license info 2 | 3 | 4 | ## Font Awesome 5 | 6 | Copyright (C) 2016 by Dave Gandy 7 | 8 | Author: Dave Gandy 9 | License: SIL () 10 | Homepage: http://fortawesome.github.com/Font-Awesome/ 11 | 12 | 13 | -------------------------------------------------------------------------------- /editor/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # misc 10 | .DS_Store 11 | .env 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | 16 | -------------------------------------------------------------------------------- /src/scss/footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | background-color: $footer-color; 3 | color: $footer-text-color; 4 | text-align: center; 5 | padding: 20px 0; 6 | 7 | &__name { 8 | margin-top: 0; 9 | margin-bottom: 0; 10 | } 11 | &__title { 12 | margin-top: 0; 13 | color: $footer-alt-color; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /lib/fontello/css/fontello-codes.css: -------------------------------------------------------------------------------- 1 | 2 | .icon-twitter:before { content: '\f099'; } /* '' */ 3 | .icon-github-circled:before { content: '\f09b'; } /* '' */ 4 | .icon-mail-alt:before { content: '\f0e0'; } /* '' */ 5 | .icon-dribbble:before { content: '\f17d'; } /* '' */ 6 | .icon-skype:before { content: '\f17e'; } /* '' */ 7 | .icon-linkedin-squared:before { content: '\f30c'; } /* '' */ -------------------------------------------------------------------------------- /editor/config/jest/fileTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | // This is a custom Jest transformer turning file imports into filenames. 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 7 | 8 | module.exports = { 9 | process(src, filename) { 10 | return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'; 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /editor/src/Button.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export default styled.button` 4 | background: #f04; 5 | border-radius: 3px; 6 | border: none; 7 | color: #fff; 8 | cursor: pointer; 9 | display: block; 10 | font-size: 16px; 11 | font-weight: 700; 12 | padding: 9px 13px; 13 | text-align: center; 14 | margin: 20px auto; 15 | text-decoration: none; 16 | ` 17 | -------------------------------------------------------------------------------- /src/scss/variables.scss: -------------------------------------------------------------------------------- 1 | $mobile: "(min-width: 460px)"; 2 | $tablet: "(min-width: 768px)"; 3 | $desktop: "(min-width: 1024px)"; 4 | 5 | $main-color: #f04; 6 | $main-text-color: #fff; 7 | 8 | $info-color: $main-color; 9 | $info-text-color: white; 10 | 11 | $tag-color: #eceff5; 12 | 13 | $muted-color: #eaeaea; 14 | $footer-color: black; 15 | $footer-text-color: white; 16 | $footer-alt-color: $main-color; 17 | -------------------------------------------------------------------------------- /editor/config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // This is a custom Jest transformer turning style imports into empty objects. 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 5 | 6 | module.exports = { 7 | process() { 8 | return 'module.exports = {};'; 9 | }, 10 | getCacheKey() { 11 | // The output is always the same. 12 | return 'cssTransform'; 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /editor/README.md: -------------------------------------------------------------------------------- 1 | # Riyu Editor 2 | 3 | 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. 4 | 5 | [Try it now](http://secretmapper.github.io/Riyu/editor.html) 6 | 7 | _Fair warning: this was a bit of a weekend hack, and I have not covered all edge cases. Use with caution._ 8 | -------------------------------------------------------------------------------- /editor/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /editor.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /editor/scripts/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | process.env.NODE_ENV = 'test'; 4 | process.env.PUBLIC_URL = ''; 5 | 6 | // Load environment variables from .env file. Suppress warnings using silent 7 | // if this file is missing. dotenv will never modify any environment variables 8 | // that have already been set. 9 | // https://github.com/motdotla/dotenv 10 | require('dotenv').config({silent: true}); 11 | 12 | const jest = require('jest'); 13 | const argv = process.argv.slice(2); 14 | 15 | // Watch unless on CI or in coverage mode 16 | if (!process.env.CI && argv.indexOf('--coverage') < 0) { 17 | argv.push('--watch'); 18 | } 19 | 20 | 21 | jest.run(argv); 22 | -------------------------------------------------------------------------------- /editor/build/static/css/main.c33b70d9.css: -------------------------------------------------------------------------------- 1 | .App{text-align:center}.App-logo{-webkit-animation:App-logo-spin infinite 20s linear;animation:App-logo-spin infinite 20s linear;height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}body{margin:0;padding:0;overflow:hidden;font-family:sans-serif} 2 | /*# sourceMappingURL=main.c33b70d9.css.map*/ -------------------------------------------------------------------------------- /src/scss/lead.scss: -------------------------------------------------------------------------------- 1 | .lead { 2 | padding: 30px 0 100px; 3 | @media #{$tablet} { 4 | padding: 115px 0; 5 | } 6 | &__heading { 7 | animation: slideUp 750ms both; 8 | font-size: 40px; 9 | 10 | @media #{$mobile} { 11 | font-size: 55px; 12 | } 13 | } 14 | &__sub { 15 | animation: slideDown 750ms both; 16 | font-size: 16px; 17 | line-height: 20px; 18 | margin-bottom: 30px; 19 | } 20 | } 21 | 22 | .call-to-action { 23 | .btn { 24 | animation: fadeIn 500ms both; 25 | } 26 | } 27 | 28 | .socials { 29 | margin-top: 10px; 30 | 31 | &__link { 32 | color: inherit; 33 | text-decoration: none; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/scss/animations.scss: -------------------------------------------------------------------------------- 1 | @keyframes slideUp { 2 | 0% { 3 | opacity: 0; 4 | transform: translateY(20px); 5 | } 6 | 100% { 7 | opacity: 1; 8 | transform: translateY(0); 9 | } 10 | } 11 | 12 | @keyframes slideDown { 13 | 0% { 14 | opacity: 0; 15 | transform: translateY(-20px); 16 | } 17 | 100% { 18 | opacity: 1; 19 | transform: translateY(0); 20 | } 21 | } 22 | 23 | @keyframes fadeIn { 24 | from { 25 | opacity: 0; 26 | -webkit-transform: scale(0.86); 27 | transform: scale(0.86); 28 | } 29 | to { 30 | opacity: 1; 31 | -webkit-transform: scale(1); 32 | transform: scale(1); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /lib/fontello/css/fontello-ie7-codes.css: -------------------------------------------------------------------------------- 1 | 2 | .icon-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } 3 | .icon-github-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } 4 | .icon-mail-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } 5 | .icon-dribbble { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } 6 | .icon-skype { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } 7 | .icon-linkedin-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } -------------------------------------------------------------------------------- /editor/config/polyfills.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | if (typeof Promise === 'undefined') { 4 | // Rejection tracking prevents a common issue where React gets into an 5 | // inconsistent state due to an error, but it gets swallowed by a Promise, 6 | // and the user has no idea what causes React's erratic future behavior. 7 | require('promise/lib/rejection-tracking').enable(); 8 | window.Promise = require('promise/lib/es6-extensions.js'); 9 | } 10 | 11 | // fetch() polyfill for making API calls. 12 | require('whatwg-fetch'); 13 | 14 | // Object.assign() is commonly used with React. 15 | // It will use the native implementation if it's present and isn't buggy. 16 | Object.assign = require('object-assign'); 17 | -------------------------------------------------------------------------------- /src/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ title }} 7 | 8 | 9 | 10 | 11 | {% include "partials/header.html" %} 12 |
13 | {% include "partials/lead.html" %} 14 | {% include "partials/experience.html" %} 15 | {% include "partials/projects.html" %} 16 | {% include "partials/about.html" %} 17 |
18 | {% include "partials/footer.html" %} 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/templates/partials/about.html: -------------------------------------------------------------------------------- 1 |
2 |

Testimonials

3 | {% for testimonial in testimonials %} 4 |
5 |

“{{ testimonial.quote }}”

6 | 7 | {{ testimonial.name }} 8 | {% if testimonial.title %} 9 | ({{ testimonial.title }}) 10 | {% endif %} 11 | 12 |
13 | {% endfor %} 14 |
15 |

Contact

16 |

I'm currently available for freelance projects or full-time work. If you're interested in working with me, please get in touch through {{ email }}. 17 |

18 |
19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Riyu", 3 | "version": "0.8.0", 4 | "description": "", 5 | "main": "js/scripts.js", 6 | "scripts": { 7 | "start": "npm run watch", 8 | "watch": "gulp serve", 9 | "build": "gulp build", 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "author": "Arian Allenson M. Valdez ", 13 | "license": "MIT", 14 | "dependencies": { 15 | "browser-sync": "^2.18.8", 16 | "decache": "^4.1.0", 17 | "gulp": "^3.9.1", 18 | "gulp-autoprefixer": "^3.1.1", 19 | "gulp-file-include": "^1.1.0", 20 | "gulp-jsbeautifier": "^2.1.0", 21 | "gulp-liquify": "^0.0.6", 22 | "gulp-plumber": "^1.1.0", 23 | "gulp-rename": "^1.2.2", 24 | "gulp-sass": "^3.1.0", 25 | "gulp-uglify": "^2.1.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/templates/partials/lead.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{{ header }}

4 |
5 | {{ description }} 6 |
7 | 8 |
9 | {{ cta.label }} 10 | 11 |
12 | {% for social in socials %} 13 | {% assign url = social.url %} 14 | {% if social.icon == 'mail-alt' %} 15 | {% capture url %}mailto:{{ email }}{% endcapture %} 16 | {% endif %} 17 | 22 | 23 | 24 | {% endfor %} 25 |
26 |
27 |
28 |
29 | -------------------------------------------------------------------------------- /src/templates/partials/experience.html: -------------------------------------------------------------------------------- 1 |
2 |

Experience

3 |
4 |
5 | {% for experience in experiences %} 6 |
7 |
8 |
{{ experience.timeline }}
9 |

10 | {{ experience.title }} 11 |

12 |
13 | {% for tag in experience.tags %} 14 |
{{ tag }}
15 | {% endfor %} 16 |
17 |

{{ experience.description }}

18 |
    19 | {% for resp in experience.responsibilities %} 20 |
  • {{ resp }}
    • 21 | {% endfor %} 22 |
23 |
24 |
25 | {% endfor %} 26 |
27 |
28 | -------------------------------------------------------------------------------- /lib/fontello/css/fontello-ie7.css: -------------------------------------------------------------------------------- 1 | [class^="icon-"], [class*=" icon-"] { 2 | font-family: 'fontello'; 3 | font-style: normal; 4 | font-weight: normal; 5 | 6 | /* fix buttons height */ 7 | line-height: 1em; 8 | 9 | /* you can be more comfortable with increased icons size */ 10 | /* font-size: 120%; */ 11 | } 12 | 13 | .icon-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } 14 | .icon-github-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } 15 | .icon-mail-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } 16 | .icon-dribbble { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } 17 | .icon-skype { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } 18 | .icon-linkedin-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } -------------------------------------------------------------------------------- /editor/src/metadata.js: -------------------------------------------------------------------------------- 1 | module.exports = new Map([ 2 | ['header', 'string'], 3 | ['description', 'text'], 4 | ['name', 'string'], 5 | ['title', 'string'], 6 | ['footerTitle', 'string'], 7 | ['email', 'string'], 8 | ['cta', new Map([ 9 | ['label', 'string'], 10 | ['url', 'string'], 11 | ])], 12 | ['socials', new Map([ 13 | ['twitter', 'string'], 14 | ['github-circled', 'string'], 15 | ['icon-mail-alt', 'string'], 16 | ['dribbble', 'string'], 17 | ['skype', 'string'], 18 | ['linkedin-squared', 'string'] 19 | ])], 20 | ['experiences', [new Map([ 21 | ['title'], 22 | ['timeline'], 23 | ['description', 'text'], 24 | ['responsibilities', ['text']], 25 | ])]], 26 | ['projects', [new Map([ 27 | ['name'], 28 | ['description', 'text'], 29 | ['tags', ['string']], 30 | ['alt'], 31 | ['img'], 32 | ['url'], 33 | ])]], 34 | ['testimonials', [new Map([ 35 | ['quote'], 36 | ['name'], 37 | ['title'], 38 | ])]] 39 | ]) 40 | -------------------------------------------------------------------------------- /src/templates/partials/projects.html: -------------------------------------------------------------------------------- 1 |
2 |

My Projects

3 | {% for project in projects %} 4 |
5 |
6 | {% assign alt = project.alt %} 7 | {% unless project.alt %} 8 | {% capture alt %}{{ project.name }} Screenshot{% endcapture %} 9 | {% endif %} 10 | {{alt}} 11 |
12 |
13 |

14 | {{ project.name }} 15 |

16 |
17 | {% for tag in project.tags %} 18 |
{{ tag }}
19 | {% endfor %} 20 |
21 |

22 | {{ project.description }} 23 |

24 | View Project 25 |
26 |

27 |
28 |
29 | {% endfor %} 30 |
31 | -------------------------------------------------------------------------------- /editor/src/zip/index.js: -------------------------------------------------------------------------------- 1 | import JSZip from 'jszip' 2 | import FileSaver from 'file-saver' 3 | import { bundle } from '../util/paths' 4 | 5 | // TODO: proper zip singleton/management 6 | let zip 7 | 8 | export async function preloadZip () { 9 | try { 10 | const response = await fetch(bundle) 11 | zip = await JSZip.loadAsync(response.arrayBuffer()) 12 | } catch (e) { 13 | // TODO: Better error messages 14 | alert('Sorry something went wrong! Please reload the page :(') 15 | console.error(e) 16 | } 17 | } 18 | 19 | export async function generateZip (html, data) { 20 | try { 21 | zip.file('index.html', html) 22 | zip.folder('src').file('data.js', `module.exports = ${JSON.stringify(data, null, 4)}`) 23 | 24 | if (JSZip.support.blob) { 25 | const blob = await zip.generateAsync({ type: 'blob' }) 26 | FileSaver.saveAs(blob, 'riyu.zip') 27 | } else { 28 | throw new Error('Saving zip files through javascript not supported on this browser') 29 | } 30 | } catch (e) { 31 | // TODO: Better error messages 32 | alert('Sorry something went wrong! Please reload the page :(') 33 | console.error(e) 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /lib/fontello/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "css_prefix_text": "icon-", 4 | "css_use_suffix": false, 5 | "hinting": true, 6 | "units_per_em": 1000, 7 | "ascent": 850, 8 | "glyphs": [ 9 | { 10 | "uid": "627abcdb627cb1789e009c08e2678ef9", 11 | "css": "twitter", 12 | "code": 61593, 13 | "src": "fontawesome" 14 | }, 15 | { 16 | "uid": "58a16628dcbd6456c61218f3d27591be", 17 | "css": "skype", 18 | "code": 61822, 19 | "src": "fontawesome" 20 | }, 21 | { 22 | "uid": "0f6a2573a7b6df911ed199bb63717e27", 23 | "css": "github-circled", 24 | "code": 61595, 25 | "src": "fontawesome" 26 | }, 27 | { 28 | "uid": "ccc2329632396dc096bb638d4b46fb98", 29 | "css": "mail-alt", 30 | "code": 61664, 31 | "src": "fontawesome" 32 | }, 33 | { 34 | "uid": "1145676a91138011729fa2909997af66", 35 | "css": "linkedin-squared", 36 | "code": 62220, 37 | "src": "fontawesome" 38 | }, 39 | { 40 | "uid": "199c44bca402ec5a6351f75ba5228375", 41 | "css": "dribbble", 42 | "code": 61821, 43 | "src": "fontawesome" 44 | } 45 | ] 46 | } -------------------------------------------------------------------------------- /src/scss/projects.scss: -------------------------------------------------------------------------------- 1 | .project { 2 | overflow: hidden; 3 | margin-bottom: 30px; 4 | text-align: center; 5 | 6 | @media #{$tablet} { 7 | text-align: left; 8 | } 9 | 10 | &__img-container { 11 | margin: 0 auto; 12 | text-align: center; 13 | height: 100px; 14 | width: 100px; 15 | line-height: 100px; 16 | 17 | @media #{$tablet} { 18 | float: left; 19 | line-height: 300px; 20 | height: 300px; 21 | width: 300px; 22 | } 23 | } 24 | &__img { 25 | display: inline-block; 26 | margin: 0 auto; 27 | max-height: 100%; 28 | max-width: 100%; 29 | text-align: center; 30 | vertical-align: middle; 31 | } 32 | &__name { 33 | margin-bottom: 5px; 34 | } 35 | &__details { 36 | padding: 15px; 37 | 38 | @media #{$tablet} { 39 | margin-left: 300px; 40 | margin-right: 0; 41 | } 42 | } 43 | } 44 | 45 | 46 | .project:nth-child(even) { 47 | .project__img-container { 48 | @media #{$tablet} { 49 | float: right; 50 | } 51 | } 52 | .project__details { 53 | @media #{$tablet} { 54 | margin-left: 0; 55 | margin-right: 300px; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/scss/base.scss: -------------------------------------------------------------------------------- 1 | // reset 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | border: 0; 6 | vertical-align: baseline; 7 | } 8 | 9 | * { 10 | box-sizing: border-box; 11 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; 12 | } 13 | 14 | .container { 15 | padding: 0 20px 20px 20px; 16 | margin: 0 auto; 17 | 18 | @media #{$tablet} { 19 | max-width: 900px; 20 | padding: 0 30px 50px 30px; 21 | } 22 | } 23 | 24 | .btn { 25 | border-radius: 3px; 26 | cursor: pointer; 27 | display: inline-block; 28 | font-size: 16px; 29 | font-weight: 700; 30 | padding: 9px 13px; 31 | 32 | text-decoration: none; 33 | 34 | background: $info-color; 35 | color: $info-text-color; 36 | 37 | &--primary { 38 | background: $main-color; 39 | color: $main-text-color; 40 | } 41 | 42 | &--lg { 43 | padding: 18px 26px; 44 | } 45 | } 46 | 47 | .skill-tags { 48 | @media #{$tablet} { 49 | margin-left: 10px; 50 | } 51 | } 52 | 53 | .skill-tag { 54 | background-color: $tag-color; 55 | display: inline-block; 56 | padding: 4px 8px; 57 | } 58 | 59 | .testimonial { 60 | border-left: 1px solid $main-color; 61 | padding: 15px 15px; 62 | p { 63 | margin-top: 0; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /editor/config/env.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be 4 | // injected into the application via DefinePlugin in Webpack configuration. 5 | 6 | var REACT_APP = /^REACT_APP_/i; 7 | 8 | function getClientEnvironment(publicUrl) { 9 | var raw = Object 10 | .keys(process.env) 11 | .filter(key => REACT_APP.test(key)) 12 | .reduce((env, key) => { 13 | env[key] = process.env[key]; 14 | return env; 15 | }, { 16 | // Useful for determining whether we’re running in production mode. 17 | // Most importantly, it switches React into the correct mode. 18 | 'NODE_ENV': process.env.NODE_ENV || 'development', 19 | // Useful for resolving the correct path to static assets in `public`. 20 | // For example, . 21 | // This should only be used as an escape hatch. Normally you would put 22 | // images into the `src` and `import` them in code to get their paths. 23 | 'PUBLIC_URL': publicUrl 24 | }); 25 | // Stringify all values so we can feed into Webpack DefinePlugin 26 | var stringified = { 27 | 'process.env': Object 28 | .keys(raw) 29 | .reduce((env, key) => { 30 | env[key] = JSON.stringify(raw[key]); 31 | return env; 32 | }, {}) 33 | }; 34 | 35 | return { raw, stringified }; 36 | } 37 | 38 | module.exports = getClientEnvironment; 39 | -------------------------------------------------------------------------------- /editor/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | 17 | React App 18 | 19 | 20 |
21 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /editor/scripts/genZipBundle.js: -------------------------------------------------------------------------------- 1 | var archiver = require('archiver'); 2 | var fs = require('fs-extra'); 3 | var path = require('path'); 4 | 5 | var paths = { 6 | // TODO: This should really not be hardcoded 7 | build: path.join(__dirname, '..', '/build'), 8 | bundle: path.join(__dirname, '..', '/public/riyu.zip'), 9 | riyu: path.join(__dirname, '..', '..'), 10 | } 11 | 12 | function prepareBundleStream () { 13 | if (fs.existsSync(paths.bundle)) { 14 | fs.unlink(paths.bundle); 15 | } 16 | 17 | return fs.createWriteStream(paths.bundle); 18 | } 19 | 20 | function onArchiverErr (err) { 21 | throw err; 22 | } 23 | 24 | function onArchiverFinish (archive) { 25 | console.log('riyu bundle finished: ' + archive.pointer() + ' total bytes'); 26 | } 27 | 28 | function genZipBundle () { 29 | var output = prepareBundleStream(); 30 | var archive = archiver('zip', { store: true }); 31 | 32 | output.on('close', function () { onArchiverFinish(archive) }); 33 | archive.on('error', onArchiverErr); 34 | archive.pipe(output); 35 | 36 | addFilesToArchiver(archive); 37 | archive.finalize(); 38 | } 39 | 40 | function addFilesToArchiver(archive) { 41 | var directories = ['css', 'img', 'js', 'lib']; 42 | var files = ['index.html', 'README.md', 'package.json']; 43 | 44 | for (var i = 0; i < directories.length; i++) { 45 | var dir = directories[i]; 46 | archive.directory(path.join(paths.riyu, dir), dir); 47 | } 48 | 49 | // TODO: there's gotta be a better way to do this 50 | for (var i = 0; i < files.length; i++) { 51 | var file = files[i]; 52 | archive.glob(file, { cwd: paths.riyu }); 53 | } 54 | } 55 | 56 | genZipBundle(); 57 | -------------------------------------------------------------------------------- /src/scss/experience.scss: -------------------------------------------------------------------------------- 1 | .experience-container { 2 | } 3 | 4 | .timeline { 5 | position: relative; 6 | 7 | &__line { 8 | width: 1px; 9 | background: $muted-color; 10 | position: absolute; 11 | top: 0; 12 | bottom: 0; 13 | 14 | left: 100%; 15 | @media #{$tablet} { 16 | left: 50%; 17 | } 18 | } 19 | &__item { 20 | animation: slideUp 750ms both; 21 | 22 | border: 1px solid #eaeaea; 23 | border-top: 2px solid $main-color; 24 | color: #222; 25 | display: inline-block; 26 | font-size: 13px; 27 | padding: 20px; 28 | position: relative; 29 | vertical-align: top; 30 | width: 97%; 31 | @media #{$tablet} { 32 | width: 46%; 33 | } 34 | &:after { 35 | height: 1px; 36 | top: 0; 37 | background-color: $muted-color; 38 | content: ''; 39 | display: block; 40 | left: inherit; 41 | position: absolute; 42 | 43 | right: -4%; 44 | width: 4%; 45 | 46 | @media #{$tablet} { 47 | right: -9%; 48 | width: 9%; 49 | } 50 | } 51 | &:nth-child(odd) { 52 | margin-top: 20px; 53 | margin-bottom: -100px; 54 | 55 | @media #{$tablet} { 56 | margin-top: 160px; 57 | margin-left: 7%; 58 | &:after { 59 | left: -8%; 60 | width: 8%; 61 | } 62 | } 63 | } 64 | &:last-of-type { 65 | margin-bottom: 0; 66 | } 67 | } 68 | } 69 | 70 | .experience { 71 | &__header { 72 | margin-bottom: 10px; 73 | padding-bottom: 10px; 74 | border-bottom: 1px solid $muted-color; 75 | } 76 | &__name { 77 | margin: 0; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /editor/src/data.js: -------------------------------------------------------------------------------- 1 | import fixture from 'data'; 2 | import Immutable, { fromJS, List } from 'immutable'; 3 | import UUID from "node-uuid"; 4 | 5 | export default fromJS({ 6 | title: fixture.title, 7 | header: fixture.header, 8 | description: fixture.description, 9 | name: fixture.name, 10 | footerTitle: fixture.footerTitle, 11 | email: fixture.email, 12 | cta: fixture.cta, 13 | socials: { 14 | twitter: 'http://twitter/', 15 | 'github-circled': 'http://github', 16 | dribbble: 'http://dribbble', 17 | skype: 'htttp://skype', 18 | 'mail-alt': 'mailto: email', 19 | 'linkedin-squared': 'http://linkedin', 20 | }, 21 | projects: [ 22 | { __key: UUID.v4(), ...fixture.projects[0] }, 23 | { __key: UUID.v4(), ...fixture.projects[1] } 24 | ], 25 | experiences: [ 26 | { __key: UUID.v4(), ...fixture.experiences[0] }, 27 | { __key: UUID.v4(), ...fixture.experiences[1] } 28 | ], 29 | testimonials: [ 30 | { __key: UUID.v4(), ...fixture.testimonials[0] }, 31 | { __key: UUID.v4(), ...fixture.testimonials[1] } 32 | ] 33 | }) 34 | 35 | export const toLiquid = data => { 36 | const socials = data.get('socials') 37 | 38 | // convert 'socials' from Object to Array of Objects 39 | return data.setIn( 40 | ['socials'], 41 | List(socials.keySeq().toArray().map(key => ( 42 | { icon: key, url: socials.get(key) } 43 | ))) 44 | ).toJS() 45 | } 46 | 47 | export const isString = v => isVarTypeOf(v, String) 48 | export const isKeyed = Immutable.Iterable.isKeyed 49 | export const isIndexed = v => Immutable.Iterable.isIndexed(v) || isVarTypeOf(v, Array) 50 | 51 | function isVarTypeOf(_var, _type) { 52 | try { 53 | return _var.constructor === _type; 54 | } catch(ex) { 55 | return false; //fallback for null or undefined 56 | } 57 | } 58 | 59 | export const getScrollTop = (iwindow) => { 60 | if (typeof iwindow.pageYOffset !== 'undefined'){ 61 | //most browsers except IE before #9 62 | return iwindow.pageYOffset; 63 | } else { 64 | var B = iwindow.document.body; //IE 'quirks' 65 | var D = iwindow.document.documentElement; //IE with doctype 66 | D = (D.clientHeight) ? D: B; 67 | 68 | return D.scrollTop; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /lib/fontello/css/animation.css: -------------------------------------------------------------------------------- 1 | /* 2 | Animation example, for spinners 3 | */ 4 | .animate-spin { 5 | -moz-animation: spin 2s infinite linear; 6 | -o-animation: spin 2s infinite linear; 7 | -webkit-animation: spin 2s infinite linear; 8 | animation: spin 2s infinite linear; 9 | display: inline-block; 10 | } 11 | @-moz-keyframes spin { 12 | 0% { 13 | -moz-transform: rotate(0deg); 14 | -o-transform: rotate(0deg); 15 | -webkit-transform: rotate(0deg); 16 | transform: rotate(0deg); 17 | } 18 | 19 | 100% { 20 | -moz-transform: rotate(359deg); 21 | -o-transform: rotate(359deg); 22 | -webkit-transform: rotate(359deg); 23 | transform: rotate(359deg); 24 | } 25 | } 26 | @-webkit-keyframes spin { 27 | 0% { 28 | -moz-transform: rotate(0deg); 29 | -o-transform: rotate(0deg); 30 | -webkit-transform: rotate(0deg); 31 | transform: rotate(0deg); 32 | } 33 | 34 | 100% { 35 | -moz-transform: rotate(359deg); 36 | -o-transform: rotate(359deg); 37 | -webkit-transform: rotate(359deg); 38 | transform: rotate(359deg); 39 | } 40 | } 41 | @-o-keyframes spin { 42 | 0% { 43 | -moz-transform: rotate(0deg); 44 | -o-transform: rotate(0deg); 45 | -webkit-transform: rotate(0deg); 46 | transform: rotate(0deg); 47 | } 48 | 49 | 100% { 50 | -moz-transform: rotate(359deg); 51 | -o-transform: rotate(359deg); 52 | -webkit-transform: rotate(359deg); 53 | transform: rotate(359deg); 54 | } 55 | } 56 | @-ms-keyframes spin { 57 | 0% { 58 | -moz-transform: rotate(0deg); 59 | -o-transform: rotate(0deg); 60 | -webkit-transform: rotate(0deg); 61 | transform: rotate(0deg); 62 | } 63 | 64 | 100% { 65 | -moz-transform: rotate(359deg); 66 | -o-transform: rotate(359deg); 67 | -webkit-transform: rotate(359deg); 68 | transform: rotate(359deg); 69 | } 70 | } 71 | @keyframes spin { 72 | 0% { 73 | -moz-transform: rotate(0deg); 74 | -o-transform: rotate(0deg); 75 | -webkit-transform: rotate(0deg); 76 | transform: rotate(0deg); 77 | } 78 | 79 | 100% { 80 | -moz-transform: rotate(359deg); 81 | -o-transform: rotate(359deg); 82 | -webkit-transform: rotate(359deg); 83 | transform: rotate(359deg); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /lib/fontello/css/fontello.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'fontello'; 3 | src: url('../font/fontello.eot?87006925'); 4 | src: url('../font/fontello.eot?87006925#iefix') format('embedded-opentype'), 5 | url('../font/fontello.woff2?87006925') format('woff2'), 6 | url('../font/fontello.woff?87006925') format('woff'), 7 | url('../font/fontello.ttf?87006925') format('truetype'), 8 | url('../font/fontello.svg?87006925#fontello') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ 13 | /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ 14 | /* 15 | @media screen and (-webkit-min-device-pixel-ratio:0) { 16 | @font-face { 17 | font-family: 'fontello'; 18 | src: url('../font/fontello.svg?87006925#fontello') format('svg'); 19 | } 20 | } 21 | */ 22 | 23 | [class^="icon-"]:before, [class*=" icon-"]:before { 24 | font-family: "fontello"; 25 | font-style: normal; 26 | font-weight: normal; 27 | speak: none; 28 | 29 | display: inline-block; 30 | text-decoration: inherit; 31 | width: 1em; 32 | margin-right: .2em; 33 | text-align: center; 34 | /* opacity: .8; */ 35 | 36 | /* For safety - reset parent styles, that can break glyph codes*/ 37 | font-variant: normal; 38 | text-transform: none; 39 | 40 | /* fix buttons height, for twitter bootstrap */ 41 | line-height: 1em; 42 | 43 | /* Animation center compensation - margins should be symmetric */ 44 | /* remove if not needed */ 45 | margin-left: .2em; 46 | 47 | /* you can be more comfortable with increased icons size */ 48 | /* font-size: 120%; */ 49 | 50 | /* Font smoothing. That was taken from TWBS */ 51 | -webkit-font-smoothing: antialiased; 52 | -moz-osx-font-smoothing: grayscale; 53 | 54 | /* Uncomment for 3D effect */ 55 | /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ 56 | } 57 | 58 | .icon-twitter:before { content: '\f099'; } /* '' */ 59 | .icon-github-circled:before { content: '\f09b'; } /* '' */ 60 | .icon-mail-alt:before { content: '\f0e0'; } /* '' */ 61 | .icon-dribbble:before { content: '\f17d'; } /* '' */ 62 | .icon-skype:before { content: '\f17e'; } /* '' */ 63 | .icon-linkedin-squared:before { content: '\f30c'; } /* '' */ -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp') 2 | var browserSync = require('browser-sync').create(); 3 | var plumber = require('gulp-plumber') 4 | var liquid = require('gulp-liquify') 5 | var prettify = require('gulp-jsbeautifier') 6 | var uglify = require('gulp-uglify') 7 | var sass = require('gulp-sass') 8 | var rename = require('gulp-rename') 9 | var autoprefixer = require('gulp-autoprefixer') 10 | var decache = require('decache') 11 | 12 | gulp.task('scripts', function () { 13 | return gulp.src('./src/js/scripts.js') 14 | .pipe(plumber(plumber({ 15 | errorHandler: function (err) { 16 | console.log(err) 17 | this.emit('end') 18 | } 19 | }))) 20 | .pipe(uglify({ 21 | preserveComments: 'license' 22 | })) 23 | .pipe(rename({extname: '.min.js'})) 24 | .pipe(gulp.dest('js')) 25 | }) 26 | 27 | gulp.task('styles', function () { 28 | return gulp.src('./src/scss/index.scss') 29 | .pipe(plumber(plumber({ 30 | errorHandler: function (err) { 31 | console.log(err) 32 | this.emit('end') 33 | } 34 | }))) 35 | .pipe(sass({outputStyle: 'compressed'})) 36 | .pipe(autoprefixer()) 37 | .pipe(gulp.dest('css')) 38 | }) 39 | 40 | gulp.task('templates', function () { 41 | var root = './src/templates/' 42 | 43 | decache('./src/data.js') 44 | var data = require('./src/data.js') 45 | 46 | return gulp.src(root + 'index.html') 47 | .pipe(liquid(data)) 48 | .pipe(prettify()) 49 | .pipe(rename('index.html')) 50 | .pipe(gulp.dest('./')) 51 | }) 52 | 53 | gulp.task('watch', ['scripts', 'styles', 'templates'], function () { 54 | gulp.watch('src/js/*.js', ['scripts']) 55 | gulp.watch('src/scss/*.scss', ['styles']) 56 | gulp.watch(['src/templates/**/*.html', 'src/data.js'], ['templates']) 57 | }) 58 | 59 | gulp.task('serve', ['scripts', 'styles', 'templates'], function() { 60 | browserSync.init({ 61 | server: { 62 | baseDir: "./" 63 | }, 64 | open: true 65 | }) 66 | 67 | gulp.watch('src/js/*.js', ['scripts']) 68 | gulp.watch('src/scss/*.scss', ['styles']) 69 | gulp.watch(['src/templates/**/*.html', 'src/data.js'], ['templates']); 70 | 71 | gulp.watch('index.html', function () { 72 | gulp.src('index.html').pipe(browserSync.stream()) 73 | }) 74 | gulp.watch('css/index.css', function () { 75 | gulp.src('css/index.css').pipe(browserSync.stream()) 76 | }) 77 | }) 78 | 79 | gulp.task('webserver', function() { 80 | gulp.src('app') 81 | .pipe(webserver({ 82 | livereload: true, 83 | directoryListing: true, 84 | open: true 85 | })) 86 | }) 87 | 88 | gulp.task('build', ['scripts', 'styles', 'templates']) 89 | -------------------------------------------------------------------------------- /src/data.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: 'John Smith', 3 | header: "Hi, I'm John Smith", 4 | description: "I'm a college junior currently taking up Computer Science in University X. I'm a freelance developer with 4 years of experience, having worked with clients such as X, Y, Z. I enjoy building everything from small business sites to rich interactive web apps.", 5 | name: 'John Smith', 6 | footerTitle: 'Software Engineer', 7 | email: 'johnsmith@mail.com', 8 | cta: { 9 | label: 'Get my resume', 10 | url: 'resume.pdf', 11 | }, 12 | socials: [ 13 | { icon: 'twitter', url: '//' }, 14 | { icon: 'github-circled', url: '//' }, 15 | { icon: 'mail-alt' }, // mail alt automatically links to mailto:email 16 | { icon: 'dribbble', url: '//' }, 17 | { icon: 'skype', url: '//' }, 18 | { icon: 'linkedin-squared', url: '//' }, 19 | ], 20 | projects: [ 21 | { 22 | name: 'Combustion', 23 | description: 'Combustion is a sleek, modern web client for the transmission bittorrent client.', 24 | tags: ['React', 'Javascript', 'Webpack', 'Mobx', 'CSSModules'], 25 | alt: 'Combustion Screenshot', // alt description of image for accessibility. defaults to '{{name}} Screenshot' 26 | img: 'combustion.png', 27 | url: '//' 28 | }, 29 | { 30 | name: 'Merc-01', 31 | description: 'Merc-01 is a fast paced twin-stick shooter built on top of pyglet.', 32 | tags: ['Python', 'WebGL', 'Pyglet'], 33 | img: 'merc-01.png', 34 | url: '//' 35 | } 36 | ], 37 | experiences: [ 38 | { 39 | title: 'Senior Software Engineer at Company A', 40 | timeline: 'Jan 2016 - Present', 41 | description: 'Implemented Gamification for system', 42 | }, 43 | { 44 | title: 'Fullstack Software Engineer at Company B', 45 | timeline: 'Feb 2015 - Dec 2015', 46 | responsibilities: [ 47 | 'Worked with a global team of developers and artists for the implementation of new features in Existing Codebase of a Free-to-play MMO', 48 | 'Increased rate of tickets/tasks done by the team up to 300% within first few weeks!', 49 | 'Added Abstractions on Server API to Minimize Duplicate Code' 50 | ] 51 | } 52 | ], 53 | testimonials: [ 54 | { 55 | quote: 'Incredibly talented and hardworking. A super friendly guy who is a frequent communicator', 56 | name: 'Person Name', 57 | title: 'CEO at Company' 58 | }, 59 | { 60 | quote: 'Wow, thank you for this, you probably have the most intuitive explanation for this problem!', 61 | name: 'Person Name' 62 | } 63 | ] 64 | } 65 | -------------------------------------------------------------------------------- /editor/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lib/fontello/README.txt: -------------------------------------------------------------------------------- 1 | This webfont is generated by http://fontello.com open source project. 2 | 3 | 4 | ================================================================================ 5 | Please, note, that you should obey original font licenses, used to make this 6 | webfont pack. Details available in LICENSE.txt file. 7 | 8 | - Usually, it's enough to publish content of LICENSE.txt file somewhere on your 9 | site in "About" section. 10 | 11 | - If your project is open-source, usually, it will be ok to make LICENSE.txt 12 | file publicly available in your repository. 13 | 14 | - Fonts, used in Fontello, don't require a clickable link on your site. 15 | But any kind of additional authors crediting is welcome. 16 | ================================================================================ 17 | 18 | 19 | Comments on archive content 20 | --------------------------- 21 | 22 | - /font/* - fonts in different formats 23 | 24 | - /css/* - different kinds of css, for all situations. Should be ok with 25 | twitter bootstrap. Also, you can skip style and assign icon classes 26 | directly to text elements, if you don't mind about IE7. 27 | 28 | - demo.html - demo file, to show your webfont content 29 | 30 | - LICENSE.txt - license info about source fonts, used to build your one. 31 | 32 | - config.json - keeps your settings. You can import it back into fontello 33 | anytime, to continue your work 34 | 35 | 36 | Why so many CSS files ? 37 | ----------------------- 38 | 39 | Because we like to fit all your needs :) 40 | 41 | - basic file, .css - is usually enough, it contains @font-face 42 | and character code definitions 43 | 44 | - *-ie7.css - if you need IE7 support, but still don't wish to put char codes 45 | directly into html 46 | 47 | - *-codes.css and *-ie7-codes.css - if you like to use your own @font-face 48 | rules, but still wish to benefit from css generation. That can be very 49 | convenient for automated asset build systems. When you need to update font - 50 | no need to manually edit files, just override old version with archive 51 | content. See fontello source code for examples. 52 | 53 | - *-embedded.css - basic css file, but with embedded WOFF font, to avoid 54 | CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain. 55 | We strongly recommend to resolve this issue by `Access-Control-Allow-Origin` 56 | server headers. But if you ok with dirty hack - this file is for you. Note, 57 | that data url moved to separate @font-face to avoid problems with ( 53 | 58 | { show && 59 | 60 | 61 | Riyu Editor 62 | 63 | Riyu 64 | is a cool, modern, and minimal portfolio/personal web page template that is super easy to customize. 65 | 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. 66 | 67 |

FAQ:

68 |
    69 |
  • How do I add my own images for my projects?
    • 70 |
    Simply add in the expected filename of your image (project.png) and generate the HTML. Then place your images on a directory named img - this is where all the images are resolved (/img/project.png). You can of course edit the html once generated.
    71 |
  • Can I change the colour scheme?
    • 72 |
    You can change the colour scheme (and every style really) of Riyu. Changing colour schemes/styles through the Riyu Editor web app is currently not supported.
    73 |
  • Is it free?
    • 74 |
    Riyu is free (as in beer) and open source (MIT). There is no need to add credits or linkbacks, but I'd appreciate if you star the repo :)
    75 |
76 | 77 | 78 |
I'd love to hear what everyone is doing with Riyu. If so inclined, Open an issue here with a link to a site built on Riyu
79 |
You can open this page again by clicking the i button on the left inside the editor
80 | 81 | 82 | 83 | } 84 | 85 | ) 86 | -------------------------------------------------------------------------------- /editor/config/paths.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var fs = require('fs'); 5 | var url = require('url'); 6 | 7 | // Make sure any symlinks in the project folder are resolved: 8 | // https://github.com/facebookincubator/create-react-app/issues/637 9 | var appDirectory = fs.realpathSync(process.cwd()); 10 | function resolveApp(relativePath) { 11 | return path.resolve(appDirectory, relativePath); 12 | } 13 | 14 | // We support resolving modules according to `NODE_PATH`. 15 | // This lets you use absolute paths in imports inside large monorepos: 16 | // https://github.com/facebookincubator/create-react-app/issues/253. 17 | 18 | // It works similar to `NODE_PATH` in Node itself: 19 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders 20 | 21 | // We will export `nodePaths` as an array of absolute paths. 22 | // It will then be used by Webpack configs. 23 | // Jest doesn’t need this because it already handles `NODE_PATH` out of the box. 24 | 25 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. 26 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. 27 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421 28 | 29 | var nodePaths = (process.env.NODE_PATH || '') 30 | .split(process.platform === 'win32' ? ';' : ':') 31 | .filter(Boolean) 32 | .filter(folder => !path.isAbsolute(folder)) 33 | .map(resolveApp); 34 | 35 | var envPublicUrl = process.env.PUBLIC_URL; 36 | 37 | function ensureSlash(path, needsSlash) { 38 | var hasSlash = path.endsWith('/'); 39 | if (hasSlash && !needsSlash) { 40 | return path.substr(path, path.length - 1); 41 | } else if (!hasSlash && needsSlash) { 42 | return path + '/'; 43 | } else { 44 | return path; 45 | } 46 | } 47 | 48 | function getPublicUrl(appPackageJson) { 49 | return envPublicUrl || require(appPackageJson).homepage; 50 | } 51 | 52 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer 53 | // "public path" at which the app is served. 54 | // Webpack needs to know it to put the right 159 | 160 | 161 | -------------------------------------------------------------------------------- /lib/fontello/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 278 | 279 | 291 | 292 | 293 |
294 |

295 | fontello 296 | font demo 297 |

298 | 301 |
302 |
303 |
304 |
icon-twitter0xf099
305 |
icon-github-circled0xf09b
306 |
icon-mail-alt0xf0e0
307 |
icon-dribbble0xf17d
308 |
309 |
310 |
icon-skype0xf17e
311 |
icon-linkedin-squared0xf30c
312 |
313 |
314 |
Generated by fontello.com
315 | 316 | -------------------------------------------------------------------------------- /editor/config/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var autoprefixer = require('autoprefixer'); 5 | var webpack = require('webpack'); 6 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 7 | var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); 8 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); 9 | var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); 10 | var getClientEnvironment = require('./env'); 11 | var paths = require('./paths'); 12 | 13 | 14 | 15 | // Webpack uses `publicPath` to determine where the app is being served from. 16 | // In development, we always serve from the root. This makes config easier. 17 | var publicPath = '/'; 18 | // `publicUrl` is just like `publicPath`, but we will provide it to our app 19 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. 20 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. 21 | var publicUrl = ''; 22 | // Get environment variables to inject into our app. 23 | var env = getClientEnvironment(publicUrl); 24 | 25 | // This is the development configuration. 26 | // It is focused on developer experience and fast rebuilds. 27 | // The production configuration is different and lives in a separate file. 28 | module.exports = { 29 | // You may want 'eval' instead if you prefer to see the compiled output in DevTools. 30 | // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343. 31 | devtool: 'cheap-module-source-map', 32 | // These are the "entry points" to our application. 33 | // This means they will be the "root" imports that are included in JS bundle. 34 | // The first two entry points enable "hot" CSS and auto-refreshes for JS. 35 | entry: [ 36 | 'whatwg-fetch', 37 | 'srcdoc-polyfill', 38 | // Include an alternative client for WebpackDevServer. A client's job is to 39 | // connect to WebpackDevServer by a socket and get notified about changes. 40 | // When you save a file, the client will either apply hot updates (in case 41 | // of CSS changes), or refresh the page (in case of JS changes). When you 42 | // make a syntax error, this client will display a syntax error overlay. 43 | // Note: instead of the default WebpackDevServer client, we use a custom one 44 | // to bring better experience for Create React App users. You can replace 45 | // the line below with these two lines if you prefer the stock client: 46 | // require.resolve('webpack-dev-server/client') + '?/', 47 | // require.resolve('webpack/hot/dev-server'), 48 | require.resolve('react-dev-utils/webpackHotDevClient'), 49 | // We ship a few polyfills by default: 50 | require.resolve('./polyfills'), 51 | // Finally, this is your app's code: 52 | paths.appIndexJs 53 | // We include the app code last so that if there is a runtime error during 54 | // initialization, it doesn't blow up the WebpackDevServer client, and 55 | // changing JS code would still trigger a refresh. 56 | ], 57 | output: { 58 | // Next line is not used in dev but WebpackDevServer crashes without it: 59 | path: paths.appBuild, 60 | // Add /* filename */ comments to generated require()s in the output. 61 | pathinfo: true, 62 | // This does not produce a real file. It's just the virtual path that is 63 | // served by WebpackDevServer in development. This is the JS bundle 64 | // containing code from all our entry points, and the Webpack runtime. 65 | filename: 'static/js/bundle.js', 66 | // This is the URL that app is served from. We use "/" in development. 67 | publicPath: publicPath 68 | }, 69 | resolve: { 70 | root: [path.resolve('.'), path.resolve('../src')], 71 | // This allows you to set a fallback for where Webpack should look for modules. 72 | // We read `NODE_PATH` environment variable in `paths.js` and pass paths here. 73 | // We use `fallback` instead of `root` because we want `node_modules` to "win" 74 | // if there any conflicts. This matches Node resolution mechanism. 75 | // https://github.com/facebookincubator/create-react-app/issues/253 76 | fallback: paths.nodePaths, 77 | // These are the reasonable defaults supported by the Node ecosystem. 78 | // We also include JSX as a common component filename extension to support 79 | // some tools, although we do not recommend using it, see: 80 | // https://github.com/facebookincubator/create-react-app/issues/290 81 | extensions: ['.js', '.json', '.jsx', ''], 82 | alias: { 83 | // Support React Native Web 84 | // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 85 | 'react-native': 'react-native-web' 86 | } 87 | }, 88 | 89 | module: { 90 | // First, run the linter. 91 | // It's important to do this before Babel processes the JS. 92 | preLoaders: [ 93 | { 94 | test: /\.(js|jsx)$/, 95 | loader: 'eslint', 96 | include: paths.appSrc, 97 | } 98 | ], 99 | loaders: [ 100 | // ** ADDING/UPDATING LOADERS ** 101 | // The "url" loader handles all assets unless explicitly excluded. 102 | // The `exclude` list *must* be updated with every change to loader extensions. 103 | // When adding a new loader, you must add its `test` 104 | // as a new entry in the `exclude` list for "url" loader. 105 | 106 | // "url" loader embeds assets smaller than specified size as data URLs to avoid requests. 107 | // Otherwise, it acts like the "file" loader. 108 | { 109 | exclude: [ 110 | /\.html$/, 111 | // We have to write /\.(js|jsx)(\?.*)?$/ rather than just /\.(js|jsx)$/ 112 | // because you might change the hot reloading server from the custom one 113 | // to Webpack's built-in webpack-dev-server/client?/, which would not 114 | // get properly excluded by /\.(js|jsx)$/ because of the query string. 115 | // Webpack 2 fixes this, but for now we include this hack. 116 | // https://github.com/facebookincubator/create-react-app/issues/1713 117 | /\.(js|jsx)(\?.*)?$/, 118 | /\.css$/, 119 | /\.json$/, 120 | /\.svg$/ 121 | ], 122 | loader: 'url', 123 | query: { 124 | limit: 10000, 125 | name: 'static/media/[name].[hash:8].[ext]' 126 | } 127 | }, 128 | { 129 | test: /\.(html)$/, 130 | include: path.resolve('../src'), 131 | loader: 'raw' 132 | }, 133 | // Process JS with Babel. 134 | { 135 | test: /\.(js|jsx)$/, 136 | include: paths.appSrc, 137 | loader: 'babel', 138 | query: { 139 | 140 | // This is a feature of `babel-loader` for webpack (not Babel itself). 141 | // It enables caching results in ./node_modules/.cache/babel-loader/ 142 | // directory for faster rebuilds. 143 | cacheDirectory: true 144 | } 145 | }, 146 | // "postcss" loader applies autoprefixer to our CSS. 147 | // "css" loader resolves paths in CSS and adds assets as dependencies. 148 | // "style" loader turns CSS into JS modules that inject