From aec2263303227455887e3b04d571d5d59113f7ce Mon Sep 17 00:00:00 2001 From: Lenin Compres Date: Fri, 22 Nov 2024 19:18:50 -0500 Subject: [PATCH] refactoring --- _config.yml | 1 - index.html | 7 +- index.js => main.js | 54 +++++++++++-- src/pages.js | 175 ------------------------------------------ src/pages/bio.js | 18 +++++ src/pages/contact.js | 21 +++++ src/pages/projects.js | 114 +++++++++++++++++++++++++++ 7 files changed, 201 insertions(+), 189 deletions(-) delete mode 100644 _config.yml rename index.js => main.js (86%) delete mode 100755 src/pages.js create mode 100644 src/pages/bio.js create mode 100644 src/pages/contact.js create mode 100644 src/pages/projects.js diff --git a/_config.yml b/_config.yml deleted file mode 100644 index c419263..0000000 --- a/_config.yml +++ /dev/null @@ -1 +0,0 @@ -theme: jekyll-theme-cayman \ No newline at end of file diff --git a/index.html b/index.html index f7e29ea..a0cd5b4 100755 --- a/index.html +++ b/index.html @@ -1,6 +1,5 @@ - - + @@ -14,10 +13,8 @@ gtag('js', new Date()); gtag('config', 'G-9S3H2NXER5'); - + - - \ No newline at end of file diff --git a/index.js b/main.js similarity index 86% rename from index.js rename to main.js index ada8799..a8fc581 100755 --- a/index.js +++ b/main.js @@ -1,16 +1,22 @@ import * as STYLE from "./src/style.js"; import Pager from "./src/Pager.js"; import Copy from "./src/Copy.js"; -import "./src/pages.js"; import SOCIAL_LINKS from "./src/social.js"; +import CardScroll from "./src/CardScroll.js"; +import news from "./src/news.js"; +import bioPage from "./src/pages/bio.js"; +import projectsPage from "./src/pages/projects.js"; +import contactPage from "./src/pages/contact.js"; -const _hoverPage = new Binder(); -const _isMobile = new Binder(); -const _isWide = new Binder(); +binderSet({ + hoverPage: false, + isMobile: false, + isWide: false, +}) function resized(e) { - _isMobile.value = window.innerWidth < 780; - _isWide.value = window.innerWidth > 1050; + isMobile = window.innerWidth < 780; + isWide = window.innerWidth > 1050; }; @@ -23,6 +29,38 @@ Copy.add({ en: "educator", es: "educador", }, + bio: { + en: "bio", + es: "biografía" + }, + home: { + es: "home", + en: "inicio", + }, + projects: { + es: "proyectos", + en: "projects", + }, + contact: { + es: "contacto", + en: "contact", + } +}); + +let newsScroll = new CardScroll(news); +newsScroll.start(); +window.addEventListener('hashchange', () => { + newsScroll.clear(); + newsScroll.start(); +}); + +Pager.add({ + [Copy.KEY.home]: { + section: newsScroll, + }, + [Copy.KEY.bio]: bioPage, + [Copy.KEY.projects]: projectsPage, + [Copy.KEY.contact]: contactPage, }); DOM.set({ @@ -175,8 +213,8 @@ DOM.set({ }, text: Copy.get(name), onclick: e => Pager.key = name, - mouseover: e => _hoverPage.value = name, - mouseout: e => _hoverPage.value = false, + mouseover: e => hoverPage = name, + mouseout: e => hoverPage = false, }, })), }, diff --git a/src/pages.js b/src/pages.js deleted file mode 100755 index c7fbc10..0000000 --- a/src/pages.js +++ /dev/null @@ -1,175 +0,0 @@ -import allProjects from "./projects.js" -import * as STYLE from "./style.js"; -import SOCIAL_LINKS from "./social.js"; -import Copy from "./Copy.js"; -import CardScroll from "./CardScroll.js"; -import news from "./news.js"; -import Pager from "./Pager.js"; - -const projects = allProjects.filter(p => !p.hidden); -const NONE = "∅"; -const _activeProject = new Binder(); -const _allTags = new Binder([]); -const _activeTag = new Binder(NONE); -Pager._key.onChange(val => _activeTag.value = NONE); - -const showTag = (tag = NONE) => _activeTag.value = tag; -const addTag = (tag) => !_allTags.value.includes(tag) ? (_allTags.value = [..._allTags.value, tag].sort(sortWords)) : null; -const sortWords = (a, b) => a < b ? -1 : 1; - -Copy.add({ - bio: { - en: "bio", - es: "biografía" - }, - home: { - es: "home", - en: "inicio", - }, - projects: { - es: "proyectos", - en: "projects", - }, - contact: { - es: "contacto", - en: "contact", - } -}); - -let newsScroll = new CardScroll(news); -newsScroll.start(); -window.addEventListener('hashchange', () => { - newsScroll.clear(); - newsScroll.start() -}); - -Pager.add({ - [Copy.KEY.home]: { - section: newsScroll, - }, - [Copy.KEY.bio]: { - section: { - style: STYLE.PAGE, - model: STYLE.SLIDE("left", 2), - lineHeight: "1.5em", - content: { - p: Copy.text({ - es: `Lenin Comprés (también conocido como Prof. Lenino) es un profesional en medios interactivos, ciencias de la educación y artes escénicas. Se desempeña como profesor y tecnólogo creativo en la Escuela de Artes TISCH de la Universidad de Nueva York y es graduado de Teachers College de la Universidad de Columbia. Lenin es coautor del guion galardonado de Mis 500 locos, que representó a la República Dominicana en los Óscares de 2021. También es el creador de Lenino’s JACK RABBITS, el primer juego de mesa original escrito por un dominicano, que cuenta con un manual de instrucciones completamente en verso y rima. Como artista, se presenta bajo su seudónimo Lenino como un cuentacuentos musicómico.`, - en: `Lenin Comprés (also known as Prof. Lenino) is a professional in interactive media, educational sciences, and performing arts. He serves as a professor and creative technologist at New York University's TISCH School of the Arts and holds a degree from Columbia University's Teachers College. Lenin is the co-writer of the award-winning script for A State of Madness, which represented the Dominican Republic at the 2021 Oscars. He is also the creator of Lenino’s JACK RABBITS, the first original Dominican-authored board game featuring an instructional booklet written entirely in verse and rhyme. As an artist, he performs as a quirky musical storyteller under his Lenino moniker.` - }), - }, - } - }, - [Copy.KEY.projects]: { - menu: { - display: "flex", - ul: _allTags.as(val => ({ - maxWidth: "50em", - margin: "0 0.5em 0.5em", - justifyContent: "center", - display: "flex", - flexWrap: "wrap", - li: [ - [NONE, ...val].map((tag, i) => ({ - a: { - model: STYLE.SLIDE("left", i), - backgroundColor: _activeTag.as({ - [tag]: STYLE.COLOR.LINK_DARK, - default: STYLE.COLOR.PALE - }), - color: _activeTag.as(val => val === tag ? STYLE.COLOR.PAGE : STYLE.COLOR.LINK), - boxShadow: STYLE.SHADOW.NORMAL, - borderRadius: "0.25em", - padding: "0.2em 0.68em", - margin: "0.3em 0.3em 0 0", - display: "inline-block", - text: tag, - onclick: e => showTag(tag), - }, - })), - { - color: STYLE.COLOR.PALE, - textShadow: STYLE.SHADOW.TEXT, - text: _activeTag.as(val => val !== NONE ? projects.filter(p => p.tags.includes(val)).length : projects.length), - } - ], - })), - }, - section: projects.map((project, i) => ({ - style: STYLE.PAGE, - model: STYLE.SLIDE(i), - position: "relative", - fontSize: "1em", - width: "23em", - cursor: "pointer", - boxShadow: _activeProject.as(val => val === i ? STYLE.SHADOW.HIGHLIGHT : STYLE.SHADOW.NORMAL), - display: _activeTag.as(val => val === NONE || project.tags.includes(val) ? "block" : "none"), - main: { - minHeight: "6.5em", - div: { - float: "left", - height: "6em", - width: "6em", - marginRight: "0.6em", - backgroundImage: `url(${project.img ? project.img : project.folder + "/thumbnail.jpg"})`, - backgroundSize: "cover", - backgroundPosition: "center" - }, - h6: { - marginBottom: "0.25em", - fontWeight: "bold", - text: project.title, - }, - p: project.desc, - }, - ul: { - marginTop: "0.2em", - li: project.tags.sort(sortWords).map(tag => ({ - borderRadius: "0.25em", - padding: "0.2em 0.4em", - marginRight: "0.2em", - backgroundColor: STYLE.COLOR.PALE, - color: STYLE.COLOR.LINK, - border: "solid 1px", - borderColor: _activeTag.as({ - [tag]: STYLE.COLOR.LINK, - default: STYLE.COLOR.PALE, - }), - display: "inline-block", - text: tag, - click: e => { - _activeTag.value = _activeTag.value === tag ? NONE : tag; - e.stopPropagation(); - }, - ready: elt => addTag(tag), - })) - }, - mouseover: e => _activeProject.value = i, - mouseout: e => _activeProject.value = false, - click: e => { - let link = project.link ? project.link : project.folder - window.open(link, "_blank") - }, - })), - onready: () => { - showTag(); - _activeTag.value = false; - } - }, - [Copy.KEY.contact]: { - menu: { - fontSize: "3.43em", - marginTop: "1em", - ul: { - style: STYLE.FLEX, - justifyContent: "center", - li: SOCIAL_LINKS.map((a, i) => ({ - a: { - model: [a, STYLE.SLIDE(i)], - margin: "0.25em", - } - })) - } - } - }, -}); \ No newline at end of file diff --git a/src/pages/bio.js b/src/pages/bio.js new file mode 100644 index 0000000..d084cf2 --- /dev/null +++ b/src/pages/bio.js @@ -0,0 +1,18 @@ +import Copy from "../Copy.js"; +import * as STYLE from "../style.js"; + +const bioPage = { + section: { + style: STYLE.PAGE, + model: STYLE.SLIDE("left", 2), + lineHeight: "1.5em", + content: { + p: Copy.text({ + es: `Lenin Comprés (también conocido como Prof. Lenino) es un profesional en medios interactivos, ciencias de la educación y artes escénicas. Se desempeña como profesor y tecnólogo creativo en la Escuela de Artes TISCH de la Universidad de Nueva York y es graduado de Teachers College de la Universidad de Columbia. Lenin es coautor del guion galardonado de Mis 500 locos, que representó a la República Dominicana en los Óscares de 2021. También es el creador de Lenino’s JACK RABBITS, el primer juego de mesa original escrito por un dominicano, que cuenta con un manual de instrucciones completamente en verso y rima. Como artista, se presenta bajo su seudónimo Lenino como un cuentacuentos musicómico.`, + en: `Lenin Comprés (also known as Prof. Lenino) is a professional in interactive media, educational sciences, and performing arts. He serves as a professor and creative technologist at New York University's TISCH School of the Arts and holds a degree from Columbia University's Teachers College. Lenin is the co-writer of the award-winning script for A State of Madness, which represented the Dominican Republic at the 2021 Oscars. He is also the creator of Lenino’s JACK RABBITS, the first original Dominican-authored board game featuring an instructional booklet written entirely in verse and rhyme. As an artist, he performs as a quirky musical storyteller under his Lenino moniker.` + }), + }, + } +}; + +export default bioPage; \ No newline at end of file diff --git a/src/pages/contact.js b/src/pages/contact.js new file mode 100644 index 0000000..ac134b6 --- /dev/null +++ b/src/pages/contact.js @@ -0,0 +1,21 @@ +import SOCIAL_LINKS from "../social.js"; +import * as STYLE from "../style.js"; + +const contactPage = { + menu: { + fontSize: "3.43em", + marginTop: "1em", + ul: { + style: STYLE.FLEX, + justifyContent: "center", + li: SOCIAL_LINKS.map((a, i) => ({ + a: { + model: [a, STYLE.SLIDE(i)], + margin: "0.25em", + } + })) + } + } +}; + +export default contactPage; \ No newline at end of file diff --git a/src/pages/projects.js b/src/pages/projects.js new file mode 100644 index 0000000..c94db9e --- /dev/null +++ b/src/pages/projects.js @@ -0,0 +1,114 @@ +import Copy from "../Copy.js"; +import * as STYLE from "../style.js"; +import allProjects from "../projects.js"; +import Pager from "../Pager.js"; + +const projects = allProjects.filter(p => !p.hidden); +const NONE = "∅"; +const _activeProject = new Binder(); +const _allTags = new Binder([]); +const _activeTag = new Binder(NONE); +Pager._key.onChange(val => _activeTag.value = NONE); + +const showTag = (tag = NONE) => _activeTag.value = tag; +const addTag = (tag) => !_allTags.value.includes(tag) ? (_allTags.value = [..._allTags.value, tag].sort(sortWords)) : null; +const sortWords = (a, b) => a < b ? -1 : 1; + +const projectsPage = { + menu: { + display: "flex", + ul: _allTags.as(val => ({ + maxWidth: "50em", + margin: "0 0.5em 0.5em", + justifyContent: "center", + display: "flex", + flexWrap: "wrap", + li: [ + [NONE, ...val].map((tag, i) => ({ + a: { + model: STYLE.SLIDE("left", i), + backgroundColor: _activeTag.as({ + [tag]: STYLE.COLOR.LINK_DARK, + default: STYLE.COLOR.PALE + }), + color: _activeTag.as(val => val === tag ? STYLE.COLOR.PAGE : STYLE.COLOR.LINK), + boxShadow: STYLE.SHADOW.NORMAL, + borderRadius: "0.25em", + padding: "0.2em 0.68em", + margin: "0.3em 0.3em 0 0", + display: "inline-block", + text: tag, + onclick: e => showTag(tag), + }, + })), + { + color: STYLE.COLOR.PALE, + textShadow: STYLE.SHADOW.TEXT, + text: _activeTag.as(val => val !== NONE ? projects.filter(p => p.tags.includes(val)).length : projects.length), + } + ], + })), + }, + section: projects.map((project, i) => ({ + style: STYLE.PAGE, + model: STYLE.SLIDE(i), + position: "relative", + fontSize: "1em", + width: "23em", + cursor: "pointer", + boxShadow: _activeProject.as(val => val === i ? STYLE.SHADOW.HIGHLIGHT : STYLE.SHADOW.NORMAL), + display: _activeTag.as(val => val === NONE || project.tags.includes(val) ? "block" : "none"), + main: { + minHeight: "6.5em", + div: { + float: "left", + height: "6em", + width: "6em", + marginRight: "0.6em", + backgroundImage: `url(${project.img ? project.img : project.folder + "/thumbnail.jpg"})`, + backgroundSize: "cover", + backgroundPosition: "center" + }, + h6: { + marginBottom: "0.25em", + fontWeight: "bold", + text: project.title, + }, + p: project.desc, + }, + ul: { + marginTop: "0.2em", + li: project.tags.sort(sortWords).map(tag => ({ + borderRadius: "0.25em", + padding: "0.2em 0.4em", + marginRight: "0.2em", + backgroundColor: STYLE.COLOR.PALE, + color: STYLE.COLOR.LINK, + border: "solid 1px", + borderColor: _activeTag.as({ + [tag]: STYLE.COLOR.LINK, + default: STYLE.COLOR.PALE, + }), + display: "inline-block", + text: tag, + click: e => { + _activeTag.value = _activeTag.value === tag ? NONE : tag; + e.stopPropagation(); + }, + ready: elt => addTag(tag), + })) + }, + mouseover: e => _activeProject.value = i, + mouseout: e => _activeProject.value = false, + click: e => { + let link = project.link ? project.link : project.folder + window.open(link, "_blank") + }, + })), + onready: () => { + showTag(); + _activeTag.value = false; + } +}; + +export default projectsPage; \ No newline at end of file