├── .gitignore
├── views
    ├── notFound.js
    ├── main.js
    └── projects.js
├── package.json
├── LICENSE
├── readme.md
└── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | coverage/
3 | npm-debug.log*
4 | .nyc_output
5 | .vscode


--------------------------------------------------------------------------------
/views/notFound.js:
--------------------------------------------------------------------------------
 1 | var html = require('bel')
 2 | var css = require('sheetify')
 3 | 
 4 | var container = css`
 5 |   :host {
 6 |     height: 97vh;
 7 |     transition: all 0.5s;
 8 |   }
 9 | `
10 | 
11 | function notFoundView (params, store) {
12 |   return html`<main class="w-100 pa2 bg-black min-vh-100">
13 |     <div class="pa7 bg-white w-100 h-100 overflow-y-scroll ${container}">
14 |       <h1 class=" dib f-headline ma0 lh-title black tc w-100">
15 |         <span class="w-50 tr br bw3 pa3 pr5">404</span>
16 |         <span class="f-subheadline v-mid lh-solid dib tl w-50 word-wrap pl4">No encontrado</span>
17 |       </h1>
18 |     </div>
19 |   </main>`
20 | }
21 | 
22 | module.exports = notFoundView
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "projects",
 3 |   "description": "web portfolio",
 4 |   "author": "yerkopalma",
 5 |   "version": "0.1.0",
 6 |   "main": "index.js",
 7 |   "private": true,
 8 |   "files": [
 9 |     "index.js"
10 |   ],
11 |   "scripts": {
12 |     "test": "standard --verbose | snazzy",
13 |     "start": "bankai index.js -A 0.0.0.0 -p 8080 -a .",
14 |     "build": "NODE_ENV=production bankai build --optimize dist/"
15 |   },
16 |   "repository": "yerkopalma/projects",
17 |   "license": "MIT",
18 |   "keywords": [
19 |     "web",
20 |     "portfolio"
21 |   ],
22 |   "dependencies": {
23 |     "bel": "^4.6.0",
24 |     "sheetify": "^6.0.2",
25 |     "singleton-router": "^1.4.2",
26 |     "tachyons": "^4.7.1"
27 |   },
28 |   "devDependencies": {
29 |     "bankai": "^7.5.0",
30 |     "browserify-markdown": "^2.0.1",
31 |     "snazzy": "^7.0.0",
32 |     "standard": "^10.0.2",
33 |     "uglifyify": "^3.0.4",
34 |     "uglifyjs": "^2.4.10"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Yerko Palma
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/views/main.js:
--------------------------------------------------------------------------------
 1 | var html = require('bel')
 2 | var css = require('sheetify')
 3 | 
 4 | var bgColors = [
 5 |   'light-red',
 6 |   'gold',
 7 |   'light-purple',
 8 |   'pink',
 9 |   'green',
10 |   'blue',
11 |   'yellow',
12 |   'light-green'
13 | ]
14 | 
15 | var container = css`
16 |   :host {
17 |     height: 97vh;
18 |     transition: all 0.5s;
19 |   }
20 | `
21 | 
22 | var renderProjects = function (projects) {
23 |   projects.sort(function () { return 0.5 - Math.random() })
24 |   bgColors.sort(function () { return 0.5 - Math.random() })
25 |   return projects.map(function (project, i) {
26 |     return html`
27 |     <a data-route="/${i}" "class="link pointer bg-animate hover-bg-${bgColors[i]} fl w-100 w-third-m w-25-ns">
28 |         ${project && project.title
29 |           ? html`<div class="aspect-ratio aspect-ratio--16x9">
30 |             <h3 class="db pl3 f2 lh-solid bg-center cover aspect-ratio--object ma0">${project.title}</h3>
31 |               <p class="black-80 pl3 db lh-copy bg-center cover aspect-ratio--object ma0 pt5">${project.description}</p>
32 |             </div>`
33 |           : html`<div class="aspect-ratio aspect-ratio--16x9">
34 |           <img style="background-image:url(http://mrmrs.io/images/0002.jpg);"
35 |               'class="db bg-center cover aspect-ratio--object" />
36 |             </div>`}
37 |       </div>
38 |     </a>`
39 |   })
40 | }
41 | 
42 | function mainView (params, projects) {
43 |   return html`
44 |   <main class="w-100 pa2 bg-black min-vh-100">
45 |     <div class="pa3 bg-white w-100 h-100 overflow-y-scroll ${container}">
46 |       <h1 class="f1 ma0 lh-title black">Proyectos</h1>
47 |       <div class="mv5 cf w-100">
48 |         ${renderProjects(projects)}
49 |       </div>
50 |     </div>
51 |   </main>`
52 | }
53 | 
54 | module.exports = mainView
55 | 


--------------------------------------------------------------------------------
/views/projects.js:
--------------------------------------------------------------------------------
 1 | var html = require('bel')
 2 | var css = require('sheetify')
 3 | 
 4 | var container = css`
 5 |   :host {
 6 |     height: 97vh;
 7 |     transition: all 0.5s;
 8 |   }
 9 | `
10 | var octoCat = css`
11 |   :host svg {
12 |     position:absolute;
13 |     right:0;
14 |     top:0;
15 |     mix-blend-mode:darken;
16 |     color:#ffffff;fill:#000000;
17 |   }
18 |   :host:hover .octo-arm {
19 |     animation:octocat-wave .56s;
20 |   }
21 |   @keyframes octocat-wave {
22 |     0%, 100% {
23 |       transform:rotate(0);
24 |     }
25 |     20%, 60% {
26 |       transform:rotate(-20deg);
27 |     }
28 |     40%, 80% {
29 |       transform:rotate(10deg);
30 |     }
31 |   }`
32 | 
33 | function projectView (params, projects) {
34 |   var project = projects[params.project]
35 |   if (!project) return require('./notFound')()
36 |   return html`<main class="w-100 pa2 bg-black min-vh-100"">
37 |     <div id="projectBody" class="pa3 bg-white w-100 h-100 overflow-y-scroll ${container}">
38 |       <a class="pointer link" data-route="/">
39 |         <svg class="i-arrow-left" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
40 |           <path d="M10 6 L2 16 10 26 M2 16 L30 16" />
41 |         </svg>
42 |       </a>
43 |       <h1 class="f1 w-75 dip absolute top-0 left-2-l left--2 mh5 mt6 mt4-l bg-white">${project.title} ${siteLink(project.site)}</h1>
44 |       ${octolink(project.github)}
45 |     </div>
46 |   </main>`
47 | }
48 | 
49 | function octolink (repo) {
50 |   if (repo) {
51 |     return html`<a class="${octoCat}" href="${repo}" title="Fork me on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true" style="fill: rgb(21, 21, 19); color: rgb(255, 255, 255); position: absolute; top: 0px; border: 0px; right: 0px;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" /><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" class="octo-arm" style="transform-origin: 130px 106px 0px;" /><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body" /></svg></a>`
52 |   }
53 | }
54 | 
55 | function siteLink (site) {
56 |   if (site) {
57 |     return html`<a target="_blank" class="link pointer bb bw2 bg-animate hover-bg-light-red b--light-red black" href="${site}"><svg class="i-link" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
58 |             <path d="M18 8 C18 8 24 2 27 5 30 8 29 12 24 16 19 20 16 21 14 17 M14 24 C14 24 8 30 5 27 2 24 3 20 8 16 13 12 16 11 18 15"></path>
59 |         </svg></a>`
60 |   }
61 | }
62 | module.exports = projectView
63 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # projects
 2 | [![Build Status](https://img.shields.io/travis/yerkopalma/projects/master.svg?style=flat-square)](https://travis-ci.org/yerkopalma/projects) [![test coverage](https://img.shields.io/codecov/c/github/yerkopalma/projects/master.svg?style=flat-square)](https://codecov.io/github/yerkopalma/projects) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/feross/standard)
 3 | 
 4 | > web portfolio
 5 | 
 6 | ## Projects
 7 | 
 8 | ### palmacontabilidad.cl
 9 | 
10 | ![palmacontabilidad.cl][palmacontabilidad.cl]
11 | Uno de los primeros sitios que desarrollé, y que he reconstruido por lo menos unas 4 veces.
12 | Se trata básicamente de una landing page hecha para la empresa de contabilidad de mi papá.
13 | Originalmente, desarrollé la primera versión usando jquery y plantillas de [Bootstrap][bootstrap] 3, cuando recién habia aparecido esa versión, luego, reconstruí la página sin usar Bootstrap, actualmente, la página esta desarrollada con [Vue][vue] 1.x y [materializecss][materializecss].
14 | 
15 | ### salvador.palmanavea.com
16 | 
17 | ![salvador.palmanavea.com][salvador.palmanavea.com]
18 | Para el primer cumpleaños de mi hijo, quise hacerle un regalo especial. Pense primero (y aún lo pienso a veces), en crear un juego para él, pero descarte temporalmente esa idea, ya que estaba corto de tiempo, y era recien su primer cumpleaños.
19 | Entonces decidí crear una línea de tiempo para mi hijo, usé un template de [codrops][codrops], y compré un dominio "familiar". Más adelante agregué más plugins, mejoré el soporte de imagenes y videos usando [lightgallery][lightgallery] (incluso tuve que corregir un [issue][lg-issue] que no permitia ver imagenes y videos en la misma página) y me quede con el framework [choo][choo] 3.x.
20 | Cada año la iré actualizando y mejorando, quién sabe, quizas le agregue algún juego, o música, todo puede pasar...
21 | 
22 | ### matrimonio.palmanavea.com
23 | 
24 | ![matrimonio.palmanavea.com][matrimonio.palmanavea.com]
25 | El verano del 2017 me casé. Junto a mi esposa teniamos que hacer una serie de preparativos (casarse parecese ser más trabajo que cualquier desarrollo de software). Dentro de todo, decidí hacer algo especial para entregar mis partes de matrimonio. 
26 | Junto con los partes fisicos, desarrollé una [aplicación web progresiva][pwa] con la información necesaria para asistir a nuestro matrimonio. Utilicé el framework [choo][choo], para el cual desarrollé un [plugin][choo-offline] que aporta las funcionalidades _offline_ que una pwa necesita (uso de [indexDB][indexedDB] y [service workers][sw]). También usé el framework [tachyons][tachyons] (el mismo con el que desarrollé esta página) y [mapbox.js][mapbox.js], para mapbox.js usé un [plugin de direcciones][mapbox-directions] que actualmente no tiene soporte para español (pese a haber una PR abierta para internacionalización), por lo que tuve que públicar [mi propia versión del plugin][scoped-plugin], como un scoped package en npm, que daba el soporte que necesitaba.
27 | 
28 | ### senadores
29 | 
30 | El año 2017 hay elecciones parlamentarias en Chile y yo siempre he considerado que la información disponible respecto a los candidatos es poca. No sobre los candidatos presidenciales, sino los candidatos a diputados y senadores.
31 | Gracias a la ley de transparencia, hoy esa información esta disponible para quien la solicite, sin embargo, se encuentra en un formato poco amigable y sin un formato accesible para programadores. Es por esto, que decidí juntar en un solo sitio la información del senado y servel y crear una API amigable para programadores con la informacion publica de senadores.
32 | 
33 | ### singleton-router
34 | 
35 | Como desarrollador javascript, siempre estoy buscando un buen set de herramientas de desarrollo para mis trabajos. Nunca me gustaron mucho las herramientas "de moda" (angular en su momento y react ahora) y he pasado una transición que partió con jquery, luego [vue][vue] y finalmente [choo][choo].
36 | Este último framework es el que más se acerca a mis expectativas, si no fuese por un solo detalle, el router. Como el [sheet-router][sheet-router], y luego [nanorouter][nanorouter], no cumplian mis expectativas, cree mi propio router y mi propio stack de desarrollo, que se ajusta perfecto a mis expectativas.
37 | 
38 | ## License
39 | [MIT](/license)
40 | 
41 | [bootstrap]: http://getbootstrap.com/
42 | [vue]: https://vuejs.org/
43 | [materializecss]: http://materializecss.com/
44 | [palmacontabilidad.cl]: https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/f916f765f43f7acfc10fda551be806ccc56f82e5/png?url=palmacontabilidad.cl
45 | [salvador.palmanavea.com]: https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/15a27488df9d7bda08381c4236050a637745b7bb/png?url=salvador.palmanavea.com
46 | [matrimonio.palmanavea.com]: https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/b015cb4e4f6c3a53f771737729abeb9f97ce54bc/png?url=matrimonio.palmanavea.com
47 | [codrops]: https://tympanus.net/codrops/
48 | [lightgallery]: https://github.com/sachinchoolur/lightgallery.js
49 | [lg-issue]: https://github.com/sachinchoolur/lightgallery.js/issues/41
50 | [choo]: https://choo.io/
51 | [pwa]: https://en.wikipedia.org/wiki/Progressive_web_app
52 | [choo-offline]: https://github.com/YerkoPalma/choo-offline
53 | [indexedDB]: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
54 | [sw]: https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
55 | [mapbox.js]: https://www.mapbox.com/mapbox.js/api/v3.1.0/
56 | [mapbox-directions]: https://www.mapbox.com/mapbox.js/example/v1.0.0/mapbox-directions/
57 | [scoped-plugin]: https://www.npmjs.com/package/@yerkopalma/mapbox-directions.js
58 | [tachyons]: http://tachyons.io/
59 | [sheet-router]: https://github.com/yoshuawuyts/sheet-router
60 | [nanorouter]: https://github.com/yoshuawuyts/nanorouter
61 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var Router = require('singleton-router')
 2 | var css = require('sheetify')
 3 | var html = require('bel')
 4 | 
 5 | css('tachyons')
 6 | 
 7 | var projects = [
 8 |   {title: 'senadores', description: 'Datos públicos disponibles en la página www.senado.cl', github: 'https://github.com/senadores-chile>', body: html`<article class="mt7 ph6-l mt0-l"> <div class="pa4 ph5-l georgia mw9-l center"> <p class="f5 f3-ns lh-copy measure-wide georgia"> El año 2017 hay elecciones parlamentarias en Chile y yo siempre he considerado que la información disponible respecto a los candidatos es poca. No sobre los candidatos presidenciales, sino los candidatos a diputados y senadores. Gracias a la ley de transparencia, hoy esa información esta disponible para quien la solicite, sin embargo, se encuentra en un formato poco amigable y sin un formato accesible para programadores. Es por esto, que decidí juntar en un solo sitio la información del senado y servel y crear una API amigable para programadores con la informacion publica de senadores. </p></div></article>`},
 9 |   {title: 'Salvador', description: 'Pequeño sitio web que mantengo para mi hijo', github: 'https://github.com/YerkoPalma/salvador', site: 'http://salvador.palmanavea.com/', body: html`<article class="mt7 ph6-l mt0-l"> <div class="pa4 ph5-l georgia mw9-l center"> <img class="mw-100" src="https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/15a27488df9d7bda08381c4236050a637745b7bb/png?url=salvador.palmanavea.com" alt="salvador.palmanavea.com"> <p class="f5 f3-ns lh-copy measure-wide georgia"> Para el primer cumpleaños de mi hijo, quise hacerle un regalo especial. Pense primero (y aún lo pienso a veces), en crear un juego para él, pero descarte temporalmente esa idea, ya que estaba corto de tiempo, y era recien su primer cumpleaños. Entonces decidí crear una línea de tiempo para mi hijo, usé un template de <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://tympanus.net/codrops/">codrops</a> , y compré un dominio "familiar". Más adelante agregué más plugins, mejoré el soporte de imagenes y videos usando <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://github.com/sachinchoolur/lightgallery.js">lightgallery</a> (incluso tuve que corregir un <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://github.com/sachinchoolur/lightgallery.js/issues/41">issue</a> que no permitia ver imagenes y videos en la misma página) y me quede con el framework <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://choo.io">choo</a> 3.x. Cada año la iré actualizando y mejorando, quién sabe, quizas le agregue algún juego, o música, todo puede pasar…</p></div></article>`},
10 |   {title: 'Matrimonio', description: 'Parte de matrimonio interactivo (PWA)', site: 'https://matrimonio.palmanavea.com', body: html`<article class="mt7 ph6-l mt0-l"> <div class="pa4 ph5-l georgia mw9-l center"> <img class="mw-100" src="https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/b015cb4e4f6c3a53f771737729abeb9f97ce54bc/png?url=matrimonio.palmanavea.com" alt="matrimonio.palmanavea.com"> <p class="f5 f3-ns lh-copy measure-wide georgia"> El verano del 2017 me casé. Junto a mi esposa teniamos que hacer una serie de preparativos (casarse parecese ser más trabajo que cualquier desarrollo de software). Dentro de todo, decidí hacer algo especial para entregar mis partes de matrimonio. Junto con los partes fisicos, desarrollé una <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://en.wikipedia.org/wiki/Progressive_web_app">aplicación web progresiva</a> con la información necesaria para asistir a nuestro matrimonio. Utilicé el framework <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://choo.io">choo</a> , para el cual desarrollé un <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://github.com/YerkoPalma/choo-offline">plugin</a> que aporta las funcionalidades offline que una pwa necesita (uso de <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> y <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://developers.google.com/web/fundamentals/getting-started/primers/service-workers">service workers</a>). También usé el framework <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="http://tachyons.io/">tachyons</a> (el mismo con el que desarrollé esta página) y <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://www.mapbox.com/mapbox.js/api/v3.1.0/">mapbox.js</a>, para mapbox.js usé un <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://www.mapbox.com/mapbox.js/example/v1.0.0/mapbox-directions/">plugin de direcciones</a> que actualmente no tiene soporte para español (pese a haber una PR abierta para internacionalización), por lo que tuve que públicar <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://www.npmjs.com/package/@yerkopalma/mapbox-directions.js">mi propia versión del plugin</a>, como un scoped package en npm, que daba el soporte que necesitaba.</p></div></article>`},
11 |   {title: 'singleton-router', description: 'Router front end a la medida', github: 'https://github.com/YerkoPalma/singleton-router', body: html`<article class="mt7 ph6-l mt0-l"> <div class="pa4 ph5-l georgia mw9-l center"> <p class="f5 f3-ns lh-copy measure-wide georgia"> Como desarrollador javascript, siempre estoy buscando un buen set de herramientas de desarrollo para mis trabajos. Nunca me gustaron mucho las herramientas “de moda” (angular en su momento y react ahora) y he pasado una transición que partió con jquery, luego <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://vuejs.org/">vue</a> y finalmente <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://choo.io">choo</a>. Este último framework es el que más se acerca a mis expectativas, si no fuese por un solo detalle, el router. Como <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://github.com/yoshuawuyts/sheet-router">sheet-router</a> , y luego <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://github.com/yoshuawuyts/nanorouter">nanorouter</a> , no cumplian mis expectativas, cree mi propio router y mi propio stack de desarrollo, que se ajusta perfecto a mis expectativas. </p></div></article>`},
12 |   {title: 'Palma contabilidad', description: 'Contador independiente', site: 'http://palmacontabilidad.cl/', body: html`<article class="mt7 ph6-l mt0-l"> <div class="pa4 ph5-l georgia mw9-l center"> <img class="mw-100" src="https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/f916f765f43f7acfc10fda551be806ccc56f82e5/png?url=palmacontabilidad.cl" alt="palmacontabilidad.cl"> <p class="f5 f3-ns lh-copy measure-wide georgia"> Uno de los primeros sitios que desarrollé, y que he reconstruido por lo menos unas 4 veces.Se trata básicamente de una landing page hecha para la empresa de contabilidad de mi papá.Originalmente, desarrollé la primera versión usando jquery y plantillas de <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="http://getbootstrap.com/">Bootstrap</a> 3, cuando recién habia aparecido esa versión, luego, reconstruí la página sin usar Bootstrap, actualmente, la página esta desarrollada con <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="https://vuejs.org/">Vue</a> 1.x y <a class="link pointer bb b--dashed bt-0 bl-0 br-0 bw2 bg-animate hover-bg-light-red b--light-red black" href="http://materializecss.com/">materializecss</a>.</p></div></article>`},
13 |   {},
14 |   {},
15 |   {}
16 | ]
17 | 
18 | var router = Router({ onRender: onRender })
19 | 
20 | router.addRoute('/', require('./views/main'))
21 | router.addRoute('/:project', require('./views/projects'), function (params) {
22 |   var currentProject = projects[params.project]
23 |   if (currentProject.body) document.getElementById('projectBody').appendChild(currentProject.body)
24 | })
25 | router.notFound(require('./views/notFound'))
26 | router.setStore(projects) // hacking
27 | router.setRoot('/')
28 | router.start()
29 | 
30 | function onRender (currentView, previousView, cb) {
31 |   // make dissappear the previousView
32 |   previousView.addEventListener('transitionend', function (e) {
33 |     if (currentView && currentView.classList) {
34 |       // currentView.classList.add('t')
35 |       currentView.style.transition = 'all 0.5s'
36 |       currentView.classList.add('o-0')
37 |     }
38 |     // e.stopPropagation()
39 |     // replace it with the currentView
40 |     router.rootEl.appendChild(currentView)
41 |     router.rootEl.removeChild(previousView)
42 |     // make it appear
43 |     if (currentView && currentView.classList) currentView.classList.remove('o-0')
44 |     if (typeof cb === 'function') cb(router.currentRoute.params)
45 | 
46 |     var links = document.querySelectorAll('a[data-route]')
47 |     Array.prototype.forEach.call(links, function (link) {
48 |       link.addEventListener('click', function (e) {
49 |         e.preventDefault()
50 |         if (!link.getAttribute('data-bind')) router.goToPath(link.getAttribute('data-route'))
51 |         if (typeof router.onNavClick === 'function') router.onNavClick(link.getAttribute('data-route'), link)
52 |       })
53 |     })
54 |   })
55 |   if (previousView && previousView.classList) {
56 |     // previousView.classList.add('t')
57 |     previousView.style.transition = 'all 0.5s'
58 |     previousView.classList.add('o-0')
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------