diff --git a/_includes/layouts/work.njk b/_includes/layouts/work.njk new file mode 100644 index 0000000..d86bd1b --- /dev/null +++ b/_includes/layouts/work.njk @@ -0,0 +1,54 @@ +--- +layout: layouts/base.njk +--- +{# Only include the syntax highlighter CSS on blog posts #} +{%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} +{%- css %}{% include "public/css/prism-diff.css" %}{%- endcss %} +

{{ title }}

+ + +
+ {%- if project_url %} + + Deployed Project + + {% endif %} + + {%- if project_link %} + + {%- if project_link.text -%} + {{ project_link.text }} + {%- else -%} + Deployed Project + {% endif %} + + {% endif %} + + {%- if github_url %} + + Github Repo + + {% endif %} +
+ + + +{{ preview_img.alt }} + +{{ content | safe }} + +{%- if collections.posts %} +{%- set previousPost = collections.posts | getPreviousCollectionItem %} +{%- set nextPost = collections.posts | getNextCollectionItem %} +{%- if nextPost or previousPost %} + +{%- endif %} +{%- endif %} \ No newline at end of file diff --git a/content/about/index.md b/content/about/index.md deleted file mode 100644 index 456a877..0000000 --- a/content/about/index.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: About -layout: layouts/base.njk -eleventyNavigation: - key: About - order: 2 ---- -# About - -## Me - -I'm Patrick. My interests are computers and art. - -## The Website - -This website is generated using [Eleventy](https://www.11ty.dev/) and uses [eleventy-base-blog](https://github.com/11ty/eleventy-base-blog). - -The font is [Cordata PPC-400](https://int10h.org/oldschool-pc-fonts/fontlist/?2#cordata) from [Old School PC Font Resource](https://int10h.org/oldschool-pc-fonts/). - -The banner was generated using [figlet.js](https://github.com/patorjk/figlet.js). \ No newline at end of file diff --git a/content/blog/mar24.md b/content/blog/mar24.md index dfe54c3..54a10ed 100644 --- a/content/blog/mar24.md +++ b/content/blog/mar24.md @@ -4,6 +4,8 @@ description: Mar 24 Roundup date: 2024-03-31 --- +Not going to comment on how late this is! + ## What I've Been Listening To ### Amen Dunes - Boys @@ -30,3 +32,10 @@ Ah, so this is finally on Spotify! Hosono is similar to O’Rourke, any record t ### Full Body 2 - + +## Patch Notes + +There's now a works section! This meant digging out two projects (What If They Don't Have Eyes and Atamaca Garden Web Portal) and making them work again after a few years. This was surprisingly pretty straight-forward even with Discord API changes and create-react-app being discontinued! I'm not sure if the website design is very good at presenting this type of content in this way but oh well! + +There's now no 'About'. I didn't know what to put on there and now you can just look at my Works and read my blog posts to understand who I am :) (most job applications just let you specify your LinkedIn profile address seperately anyway!!) + diff --git a/content/works/atamaca-preamble.md b/content/works/atamaca-preamble.md new file mode 100644 index 0000000..5598ecb --- /dev/null +++ b/content/works/atamaca-preamble.md @@ -0,0 +1,30 @@ +--- +title: Atamaca Garden Web Portal +layout: layouts/work.njk +date: 2021-09-01 +tags: [ "works" ] +preview_img: { + src: "/img/atamaca.png", + alt: "screenshot of Atamaca Garden", +} +project_link: { + url: "/works/atamaca-garden" +} +github_url: https://github.com/patrickpatrickpatrick/atamaca-garden +summary: { + time_frame: "3 weeks", + tech_stack: "Node, HTML, CSS, Javascript", + libraries: "React, create-react-app", + roles: "Developer, Designer" +} +--- + +This was developed for the Ars Electronica Festival in 2021. It was part of [Atamaca Garden](https://ars.electronica.art/newdigitaldeal/en/networked/), which was a joint ventre between [ALMA Observatory](https://www.almaobservatory.org/en/home/) and [Fundación Mustakis](https://www.fundacionmustakis.org/). The concept behind the application was to create a 'digital landscape' that could be explored by the user. The 'landscape' consisted of different types of information (links to videos, music, books and articles) curated by architect [Diego Andrés Lara Koenig](https://www.linkedin.com/in/diego-andres-lara-koenig-0b085b1a0/?originalSubdomain=cl) and astronomer [Sergio Martín](https://www.raxlab.science/author/sergio-martin/). The types of information were related by medium and curator and the application would make the connections between the links apparant and viewable. + +I was commissioned by Fundación Mustakis to build the application and worked with [Samuel Domínguez](https://www.samuel-dominguez.com/) to determine a design. We were inspired by [Uncertain Future](https://olafureliasson.net/uncertain), an explorable online repository of [Olafur Eliasson](https://olafureliasson.net/)'s works. In the short time we had to develop the application, I created a '2D-version' which had similar functionality. As the application was built for a public arts foundation, it had to be accessible as well as functional. It's entirely usable with a keyboard and has sensible focus states. + +In addition to the explorable 'digital landscape', there was originally intended to be a Livefeed section. This section would allow the user to tune into 3 different live-streamed videos. The original design and functionality resembled a TV. Initially there would be white noise until the user picked a channel. In the end, two of the three videos were hosted by Ars Electronica on their own website so the Livefeed section only hosted an original video art piece created by Samuel Domínguez. There's also an About section where you can read more about the project, the organisations involved and the curators of the links. + +The application was deployed to an AWS S3 bucket and so had to be in a format that was easily packagable. That's why I implemented it as a SPA (Single Page Application) using React and create-react-app (now deprecated). + + diff --git a/content/works/concealed-history.md b/content/works/concealed-history.md new file mode 100644 index 0000000..d203086 --- /dev/null +++ b/content/works/concealed-history.md @@ -0,0 +1,28 @@ +--- +title: Concealed Histories Interactive Museum Exhibit +layout: layouts/work.njk +date: 2019-09-01 +tags: [ "works" ] +preview_img: { + src: "/img/concealed-history2.png", + alt: "photo of Concealed Histories interactive in the V&A Gilbert Collections gallery", +} +project_link: { + url: "https://www.vam.ac.uk/blog/digital/museum-interactives", + text: "Blog post about the interactive" +} +summary: { + time_frame: "3 months", + tech_stack: "Node, HTML, CSS, Javascript, Web Components, Go", + libraries: "Hugo, Universal Viewer", + roles: "Developer" +} +--- + +Developed as part of [Concealed Histories](https://www.vam.ac.uk/exhibitions/concealed-histories-uncovering-the-story-of-nazi-looting), a show by the [V&A](https://www.vam.ac.uk/) about the relationship between the [Fischer List](https://www.vam.ac.uk/articles/explore-entartete-kunst-the-nazis-inventory-of-degenerate-art#?xywh=-2454%2C-303%2C8987%2C6044) and the [Gilbert Collection](https://www.vam.ac.uk/collections/gilbert-collection). "Concealed Histories: The Nazis' Inventory Of 'Degenerate' Art" was an interactive temporarily installed in V&A's [South Kensington museum](https://www.vam.ac.uk/south-kensington). + +As the target device for the interactive was a low-spec computer running an outdated version of Firefox, I couldn't rely on a frontend framework. Therefore I used the static site generator [Hugo](https://gohugo.io/) to build the interactive. The interactive made use of several open-source libraries that implement the [IIIF](https://iiif.io/) standard for viewing deep-zoomable images. [Universal Viewer](https://universalviewer.io/) was used to add the ability to browse the Fischer List and [vam-viewer](https://github.com/digirati-co-uk/vam-viewer) was used to implement an annotated guided tour of the Fischer list. These were incorporated into the static site by using [WebComponents](https://developer.mozilla.org/en-US/docs/Web/API/Web_components). + +The interactive was on display from opening to the end of the Concealed Histories show. It was implemented in a way that would make future interactives easy to implement and with a view to eventually create an 'interactive authoring tool'. The pandemic and resulting closure of the museum changed these future plans however and priority was given to reimplementing the Collections site instead. + +The repo is not currently publically viewable so I have not been able to deploy the project. Please read the blog I wrote for V&A for more information. \ No newline at end of file diff --git a/content/works/img/whatifeyes1.png b/content/works/img/whatifeyes1.png new file mode 100644 index 0000000..3ee398b Binary files /dev/null and b/content/works/img/whatifeyes1.png differ diff --git a/content/works/index.md b/content/works/index.md index b6b5f59..9ae4c9e 100644 --- a/content/works/index.md +++ b/content/works/index.md @@ -1,61 +1,8 @@ --- -title: Works -layout: layouts/base.njk +layout: layouts/home.njk eleventyNavigation: key: Works - order: 3 + order: 2 --- - -## Works - -### Patworld (2023-) - -Time frame: Ongoing -Tech stack: HTML, CSS, Javascript -Libraries: Eleventy, [eleventy-base-blog](https://github.com/11ty/eleventy-base-blog) - -The website you are currently reading! It's a static site and is deployed on Cloudfront. - -The font is [Cordata PPC-400](https://int10h.org/oldschool-pc-fonts/fontlist/?2#cordata) from [Old School PC Font Resource](https://int10h.org/oldschool-pc-fonts/). - -The banner was generated using [figlet.js](https://github.com/patorjk/figlet.js). - -### Atamaca Garden Web Portal (2021) - -Time frame: 3 weeks -Tech stack: Node, HTML, CSS, Javascript -Libraries: React, create-react-app -Role(s): Developer, Designer - -Developed for [ARS ELECTRONICA GARDEN ATACAMA](https://ars.electronica.art/newdigitaldeal/en/networked/), a joint ventre between [ALMA Observatory](https://www.almaobservatory.org/en/home/), [Fundación Mustakis](https://www.fundacionmustakis.org/) and [ARS Electronica](https://ars.electronica.art/news/en/). This fully responsive Single Page Application (SPA) consists of links to videos, music, books and articles curated by architect Diego Andrés Lara Koenig and astronomer Sergio Martín. The links can be filtered by curator and type of link. This is in addition to a 'Livefeed' video art piece created by [Samuel Domínguez](https://www.samuel-dominguez.com/). - -[Atamaca Garden](/works/atamaca-garden) -[Github Repo of Atamaca Garden](https://github.com/patrickpatrickpatrick/atamaca-garden) - -### What If They Don't Have Eyes (2021) - -Time frame: < 1 week -Tech stack: Node, HTML, CSS, Javascript -Libraries used: Discord, Socket.io -Role(s): Developer, Designer - -Developed for a collaborative art-work by Steven He and Mary Pedicini as part of the [SW11NDOWS](https://www.anitagarwal.com/sw11ndows) show. The art piece was [a public sculpture which contained a QR code](https://www.anitagarwal.com/sw11ndows?pgid=l0ro6tcm-1205ec44-66fe-4b00-a3dd-d7e39b76ce61) that linked to the application. - -Concept was a publicly viewable real-time online role-play between a human (Steven) and an alien (Mary). Due to the limited timeframe, used a Discord bot (to scrape the messages sent in a channel) and Socket.io (to update the website when new messages were sent, to track number of users online, to pull from history of messages if user scrolled up). - -The design is inspired by Windows 95 and was a collaboration with Steven He. - -[What If They Don't Have Eyes](https://humorous-spurious-angle.glitch.me/) (hosted on Glitch, you might need to wait for it to spin up!) -[Github Repo](https://github.com/patrickpatrickpatrick/whatiftheydonthaveeyes) - -### Concealed Histories Interactive Exhibit at the V&A Museum, London (2019-2021) - -Time frame: 3 months -Tech stack: Node, HTML, CSS, Javascript, Web Components, Go -Libraries used: Hugo, React -Role(s): Developer - -Developed as part of [Concealed Histories](https://www.vam.ac.uk/exhibitions/concealed-histories-uncovering-the-story-of-nazi-looting), a show at the V&A about the relationship between the [Fischer List](https://www.vam.ac.uk/articles/explore-entartete-kunst-the-nazis-inventory-of-degenerate-art#?xywh=-2454%2C-303%2C8987%2C6044) (a list of art confiscated by the Nazi) and the [Gilbert Collection](https://www.vam.ac.uk/collections/gilbert-collection). This was an interactive that was temporarily installed in the Gilbert Collection in the V&A and offered visitors a more in-depth explanation of the Fischer List as well as the ability to explore it in detail using Universal Viewer. - -[Blog post about the interactive](https://www.vam.ac.uk/blog/digital/museum-interactives) - +{% set postslist = collections.works %} +{% include "postslist.njk" %} \ No newline at end of file diff --git a/content/works/what-if.md b/content/works/what-if.md new file mode 100644 index 0000000..dbbc5f5 --- /dev/null +++ b/content/works/what-if.md @@ -0,0 +1,33 @@ +--- +title: What If They Don't Have Eyes? +layout: layouts/work.njk +date: 2021-05-31 +tags: [ "works" ] +preview_img: { + src: "/img/whatifeyes1.png", + alt: "screenshot of What If They Don't Have Eyes", +} +project_link: { + url: "https://humorous-spurious-angle.glitch.me/" +} +github_url: https://github.com/patrickpatrickpatrick/whatiftheydonthaveeyes +summary: { + time_frame: "< 1 week", + tech_stack: "Node, HTML, CSS, Javascript", + libraries: "Discord, Socket.io", + roles: "Developer, Designer", +} +--- + +Developed for a [collaborative artwork](https://www.marypedicini.com/what-if-they-don-t-have-eyes) by [Steven He](https://steven.website/) and [Mary Pedicini](https://www.marypedicini.com/what-if-they-don-t-have-eyes) as part of the [SW11NDOWS](https://www.anitagarwal.com/sw11ndows) show. The art piece was [a public sculpture which contained a QR code](https://www.anitagarwal.com/sw11ndows?pgid=l0ro6tcm-1205ec44-66fe-4b00-a3dd-d7e39b76ce61) that linked to the application. The concept for the website was a publicly viewable real-time online role-play between a human (Steven) and an alien (Mary). + +Due to the limited timeframe, I leveraged as much existing technology as I could. Instead of building a chat application and backend to host messages, I used [Discord](https://discord.com/). We set up a channel for the conversation to take place in and I created a [Discord bot](https://discord.com/developers/docs/quick-start/overview-of-apps) to scrape the channel messages. This meant that Discord served as the backend for hosting the messages and the interface for sending messages. As the images would take time to render, I implemented a spinner to prevent empty messages. + +To make the website react in events in real time, I used [Socket.io](https://socket.io/). This library let me update the page whenever new messages were sent and allowed me to poll the bot to fetch more messages if the user wanted to view the chat history. In addition it also let me detect and present how many users were currently viewing the page. + +The website was designed to be a single page with inline styles and Javascript so that it would be easy to deploy on [Heroku](https://www.heroku.com/). The current deployment is on [Glitch](https://glitch.com/). + +I collaborated on the design of the application with the artists. The desire was that page look retro, so I took inspiration from [Windows 95 dialogue boxes](http://toastytech.com/guis/win952.html) and 1990s aesthetic. It's a fully responsive design and the application is a Single Page Application developed without a framework. + +The conversation has ended but you can still scroll up and see the messages (still using the Discord channel and bot scraper) and read about the artwork in the 'About' section. + diff --git a/content/works/works.11tydata.js b/content/works/works.11tydata.js new file mode 100644 index 0000000..dde50e9 --- /dev/null +++ b/content/works/works.11tydata.js @@ -0,0 +1,3 @@ +module.exports = { + "layout": "layouts/post.njk", +}; diff --git a/public/.DS_Store b/public/.DS_Store index 645c458..5ca8c8a 100644 Binary files a/public/.DS_Store and b/public/.DS_Store differ diff --git a/public/css/index.css b/public/css/index.css index 38fb2ff..c0de31a 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -453,3 +453,25 @@ input[type="radio"]+label:before { position: absolute; width: 15px; } + + +.work__links-container { + display: flex; + flex-direction: column; +} + +.work__links { + font-size: 1.5rem; + padding-bottom: 1rem; +} + +.work__summary { + list-style-type: none; + margin: 0; + padding: 0; +} + +.work__preview { + padding-top: 1rem; + width: 100%; +} \ No newline at end of file diff --git a/public/img/atamaca.png b/public/img/atamaca.png new file mode 100644 index 0000000..12f1149 Binary files /dev/null and b/public/img/atamaca.png differ diff --git a/public/img/concealed-history.png b/public/img/concealed-history.png new file mode 100644 index 0000000..21ad751 Binary files /dev/null and b/public/img/concealed-history.png differ diff --git a/public/img/concealed-history2.png b/public/img/concealed-history2.png new file mode 100644 index 0000000..7d6b15e Binary files /dev/null and b/public/img/concealed-history2.png differ diff --git a/public/img/whatifeyes1.png b/public/img/whatifeyes1.png new file mode 100644 index 0000000..3ee398b Binary files /dev/null and b/public/img/whatifeyes1.png differ diff --git a/public/img/whatifeyes2.png b/public/img/whatifeyes2.png new file mode 100644 index 0000000..e35ea24 Binary files /dev/null and b/public/img/whatifeyes2.png differ