canal swans init
This commit is contained in:
Max Fowler
parent
60c1578954
commit
9c3b1d949e
|
|
@ -0,0 +1,9 @@
|
|||
# Project dependencies
|
||||
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
|
||||
.cache
|
||||
node_modules
|
||||
yarn-error.log
|
||||
static/mfowler/*
|
||||
|
||||
# Build directory
|
||||
/public
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.cache
|
||||
package.json
|
||||
package-lock.json
|
||||
public
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"endOfLine": "lf",
|
||||
"semi": false,
|
||||
"singleQuote": false,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 gatsbyjs
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
/**
|
||||
* Implement Gatsby's Browser APIs in this file.
|
||||
*
|
||||
* See: https://www.gatsbyjs.org/docs/browser-apis/
|
||||
*/
|
||||
|
||||
// You can delete this file if you're not using it
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
module.exports = {
|
||||
siteMetadata: {
|
||||
title: `Gatsby Default Starter`,
|
||||
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
|
||||
author: `@gatsbyjs`,
|
||||
},
|
||||
plugins: [
|
||||
'gatsby-plugin-sass',
|
||||
`gatsby-plugin-react-helmet`,
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `static`,
|
||||
path: `${__dirname}/static`,
|
||||
},
|
||||
},
|
||||
`gatsby-transformer-sharp`,
|
||||
`gatsby-plugin-sharp`,
|
||||
{
|
||||
resolve: `gatsby-plugin-manifest`,
|
||||
options: {
|
||||
name: `gatsby-starter-default`,
|
||||
short_name: `starter`,
|
||||
start_url: `/`,
|
||||
background_color: `#663399`,
|
||||
theme_color: `#663399`,
|
||||
display: `minimal-ui`,
|
||||
// icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
path: `${__dirname}/static/content/blog`,
|
||||
name: `blog`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-transformer-remark`,
|
||||
options: {
|
||||
plugins: [
|
||||
`gatsby-remark-copy-linked-files`,
|
||||
{
|
||||
resolve: `gatsby-remark-images`,
|
||||
options: {
|
||||
// It's important to specify the maxWidth (in pixels) of
|
||||
// the content container as this plugin uses this as the
|
||||
// base for generating different widths of each image.
|
||||
maxWidth: 750,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
`gatsby-transformer-sharp`,
|
||||
`gatsby-plugin-sharp`,
|
||||
{
|
||||
resolve: `gatsby-plugin-mdx`,
|
||||
options: {
|
||||
extensions: [`.mdx`, `.md`],
|
||||
gatsbyRemarkPlugins: [
|
||||
{
|
||||
resolve: `gatsby-remark-images`,
|
||||
options: {
|
||||
maxWidth: 750,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
const path = require(`path`)
|
||||
exports.createPages = async ({ actions, graphql, reporter }) => {
|
||||
const { createPage } = actions
|
||||
|
||||
// all markdown remark
|
||||
const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
|
||||
const result = await graphql(`
|
||||
{
|
||||
allMarkdownRemark(
|
||||
sort: { order: DESC, fields: [frontmatter___date] }
|
||||
limit: 1000
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
frontmatter {
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
// Handle errors
|
||||
if (result.errors) {
|
||||
reporter.panicOnBuild(`Error while running GraphQL query.`)
|
||||
return
|
||||
}
|
||||
// result.data.allMarkdownRemark.edges.forEach(({ node }) => {
|
||||
// if (node.frontmatter.path) {
|
||||
// console.log(`++ creating md page ${node.frontmatter.path}`)
|
||||
// createPage({
|
||||
// path: node.frontmatter.path,
|
||||
// component: blogPostTemplate,
|
||||
// context: {}, // additional data can be passed via context
|
||||
// })
|
||||
// } else {
|
||||
// }
|
||||
// })
|
||||
|
||||
// // all mdx
|
||||
const mdxResult = await graphql(`
|
||||
query {
|
||||
allMdx {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
frontmatter {
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
if (mdxResult.errors) {
|
||||
reporter.panicOnBuild('🚨 ERROR: Loading "mdx createPages" query')
|
||||
}
|
||||
// Create blog post pages.
|
||||
const mdxPosts = mdxResult.data.allMdx.edges
|
||||
// you'll call `createPage` for each result
|
||||
mdxPosts.forEach(({ node }, index) => {
|
||||
if (node.frontmatter.path) {
|
||||
console.log(`++ creating mdx page ${node.frontmatter.path} ${node.id}`)
|
||||
createPage({
|
||||
// This is the path
|
||||
path: node.frontmatter.path,
|
||||
// This component will wrap our MDX content
|
||||
component: path.resolve(`./src/templates/mdx-post.js`),
|
||||
// You can use the values in this context in
|
||||
// our page layout component
|
||||
context: { id: node.id },
|
||||
})
|
||||
} else {
|
||||
console.log(`++ not creating: ${node.id}`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
/**
|
||||
* Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
|
||||
*
|
||||
* See: https://www.gatsbyjs.org/docs/ssr-apis/
|
||||
*/
|
||||
|
||||
// You can delete this file if you're not using it
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,62 @@
|
|||
{
|
||||
"name": "gatsby-starter-default",
|
||||
"private": true,
|
||||
"description": "A simple starter to get up and developing quickly with Gatsby",
|
||||
"version": "0.1.0",
|
||||
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
|
||||
"dependencies": {
|
||||
"@mdx-js/mdx": "^1.5.2",
|
||||
"@mdx-js/react": "^1.5.2",
|
||||
"classnames": "^2.2.5",
|
||||
"gatsby": "^2.16.1",
|
||||
"gatsby-image": "^2.2.29",
|
||||
"gatsby-plugin-feed": "^2.3.23",
|
||||
"gatsby-plugin-manifest": "^2.2.23",
|
||||
"gatsby-plugin-mdx": "^1.0.62",
|
||||
"gatsby-plugin-offline": "^3.0.16",
|
||||
"gatsby-plugin-react-helmet": "^3.1.13",
|
||||
"gatsby-plugin-sass": "^2.1.20",
|
||||
"gatsby-plugin-sharp": "^2.3.9",
|
||||
"gatsby-remark-component": "^1.1.3",
|
||||
"gatsby-remark-copy-linked-files": "^2.1.33",
|
||||
"gatsby-remark-images": "^3.1.38",
|
||||
"gatsby-remark-prismjs": "^3.3.25",
|
||||
"gatsby-remark-responsive-iframe": "^2.2.28",
|
||||
"gatsby-remark-smartypants": "^2.1.17",
|
||||
"gatsby-source-filesystem": "^2.1.40",
|
||||
"gatsby-transformer-remark": "^2.6.43",
|
||||
"gatsby-transformer-sharp": "^2.2.23",
|
||||
"node-sass": "^4.12.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.10.2",
|
||||
"react-dom": "^16.10.2",
|
||||
"react-helmet": "^5.2.1",
|
||||
"react-slick": "^0.22.3",
|
||||
"rehype-react": "^4.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gh-pages": "^2.1.1",
|
||||
"prettier": "^1.18.2"
|
||||
},
|
||||
"keywords": [
|
||||
"gatsby"
|
||||
],
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"build": "gatsby build",
|
||||
"develop": "gatsby develop",
|
||||
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
|
||||
"start": "npm run develop",
|
||||
"serve": "gatsby serve",
|
||||
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \"",
|
||||
"deploy": "gatsby build --prefix-paths && gh-pages -d public",
|
||||
"clean": "rm -rf .cache"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/gatsbyjs/gatsby/issues"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import React from 'react'
|
||||
import Slider from 'react-slick'
|
||||
import Link from 'gatsby-link'
|
||||
|
||||
class Carousel extends React.Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.handleBeforeChange = this.handleBeforeChange.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
handleBeforeChange(oldIndex, newIndex) {
|
||||
this.refs.carouselFocus.slickGoTo(newIndex);
|
||||
}
|
||||
|
||||
render = () => {
|
||||
var imagesString = this.props.imagesString;
|
||||
var images = [];
|
||||
if (imagesString) {
|
||||
images = imagesString.split(',')
|
||||
}
|
||||
else {
|
||||
images = this.props.images;
|
||||
}
|
||||
var focusSettings = {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
fade: true,
|
||||
className: `carousel-focus ${this.props.carouselName}-focus`,
|
||||
}
|
||||
var thumbnailSettings = {
|
||||
slidesToShow: images.length,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
focusOnSelect: true,
|
||||
arrows: false,
|
||||
adaptiveHeight: true,
|
||||
beforeChange: this.handleBeforeChange,
|
||||
variableWidth: true,
|
||||
asNavFor: this.refs.carouselFocus,
|
||||
className: `carousel-thumbnails ${this.props.carouselName}-thumbnails`
|
||||
}
|
||||
return (
|
||||
<div className="carousel-inner-wrapper">
|
||||
<Slider {...focusSettings} ref="carouselFocus">
|
||||
{images.map(function (imgLink, i) {
|
||||
return (
|
||||
<div className="img-container">
|
||||
<img className="carousel-thumbnail" src={imgLink}/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Slider>
|
||||
<Slider {...thumbnailSettings} ref="carouselThumbnails">
|
||||
{images.map(function (imgLink, i) {
|
||||
return (
|
||||
<div className="img-container">
|
||||
<img className="carousel-thumbnail" src={imgLink}/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Slider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Carousel
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
var classNames = require('classnames')
|
||||
|
||||
const Filler = () => {
|
||||
return (
|
||||
<div className="filler">
|
||||
<div>
|
||||
<p> test 100 </p>
|
||||
<p>Welcome to your new Gatsby site.</p>
|
||||
<p>Now go build something great.</p>
|
||||
<p>
|
||||
<Link to="/page-2/">Go to page 2</Link>
|
||||
</p>
|
||||
<p>
|
||||
<Link to="/page-2/">Go to page 2</Link>
|
||||
</p>
|
||||
<p>Now go build something great.</p>
|
||||
<p>Welcome to your new Gatsby site.</p>
|
||||
<p> test 100 </p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Filler
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
import Filler from './Filler.js'
|
||||
import SLink from "./SLink";
|
||||
var classNames = require('classnames')
|
||||
|
||||
const Footer = ({reversed}) => {
|
||||
return (
|
||||
<footer className="footer">
|
||||
<div className="footer-links-wrapper">
|
||||
<div>
|
||||
<SLink style={{"color":"black"}} className="hlink" to='/'>Canal Swans</SLink>
|
||||
</div>
|
||||
<div>
|
||||
{/*<SLink className="hlink" to='/about'>about</SLink>*/}
|
||||
{/*<SLink className="hlink" to='/rss'>rss</SLink>*/}
|
||||
{/*<SLink className="hlink" to='tinyletter.com/newsletter'>newsletter</SLink>*/}
|
||||
{/*<SLink className="hlink" to='/essays'>essays</SLink>*/}
|
||||
{/*<SLink className="hlink" to='/zines'>zines</SLink>*/}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
import Filler from './Filler.js'
|
||||
var classNames = require('classnames')
|
||||
|
||||
const Header = ({reversed}) => {
|
||||
var classes = classNames({
|
||||
'navbar': true,
|
||||
'overlaid': true,
|
||||
'reversed': reversed
|
||||
});
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div className="myname">
|
||||
<Link to="/">MAX FOWLER </Link>
|
||||
</div>
|
||||
<div className="navlinks">
|
||||
<div className="navlink">
|
||||
<Link to="/about">about</Link>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<Link to="/">work </Link>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<a href="http://twitter.com/notplants">twitter </a>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<a href="http://github.com/mhfowler">github </a>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<Link to="/notes">notes </Link>
|
||||
</div>
|
||||
<div className="navlink last-navlink">
|
||||
<Link to="/contact">contact </Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="filler-wrapper">
|
||||
<Filler/>
|
||||
<Filler/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import React from 'react'
|
||||
import SLink from './SLink.js'
|
||||
|
||||
|
||||
class SubscribePage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
emailValue: '',
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.emailInput.focus();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<form action="https://mfowler.us17.list-manage.com/subscribe/post" method="POST" target="blank" noValidate>
|
||||
<input type="hidden" name="u" value="6c6d8e78103fbc8ddebf845a3"/>
|
||||
<input type="hidden" name="id" value="b1b22a6281"/>
|
||||
<label htmlFor='MERGE0'>
|
||||
Enter your email:
|
||||
<input
|
||||
ref={(input) => { this.emailInput = input; }}
|
||||
type="email"
|
||||
className="email-input"
|
||||
name="EMAIL"
|
||||
id="MERGE0"
|
||||
value={this.state.emailValue}
|
||||
onChange={ (e)=>{this.setState({emailValue: e.target.value});} }
|
||||
autoCapitalize="off"
|
||||
autoCorrect="off"
|
||||
/>
|
||||
</label>
|
||||
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" className="button"/>
|
||||
<div style={{position: 'absolute', left: '-5000px'}} aria-hidden='true' aria-label="Please leave the following three fields empty">
|
||||
<label htmlFor="b_name">Name: </label>
|
||||
<input type="text" name="b_name" tabIndex="-1" value="" placeholder="Freddie" id="b_name"/>
|
||||
|
||||
<label htmlFor="b_email">Email: </label>
|
||||
<input type="email" name="b_email" tabIndex="-1" value="" placeholder="youremail@gmail.com" id="b_email"/>
|
||||
|
||||
<label htmlFor="b_comment">Comment: </label>
|
||||
<textarea name="b_comment" tabIndex="-1" placeholder="Please comment" id="b_comment"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const Newsletter = () => {
|
||||
return (
|
||||
<div className="newsletter">
|
||||
<img src="/mfowler/img/peaceful.jpg" className="no-mobile" style={{width: "300px", "float": "left", "margin-right": "80px"}} />
|
||||
<div className="form-holder">
|
||||
<p style={{"margin-bottom": "15px"}}>
|
||||
A mailing list of <a href="http://twitter.com/notplants">@notplants</a>.
|
||||
</p>
|
||||
<div className="mc-field-group">
|
||||
<SubscribePage/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Newsletter
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import React from 'react'
|
||||
import SLink from './SLink.js'
|
||||
import Img from "gatsby-image"
|
||||
var classNames = require('classnames')
|
||||
|
||||
|
||||
|
||||
const Project = ({project_link, project_image, project_title, project_tags, project_snippet}) => {
|
||||
return (
|
||||
<div className="project-wrapper overlaid">
|
||||
<SLink to={project_link} className="project-image-wrapper">
|
||||
<img className="project-image" src={project_image}/>
|
||||
</SLink>
|
||||
<div className="project-description">
|
||||
<SLink className="project-title" to={project_link}>
|
||||
{project_title}
|
||||
</SLink>
|
||||
<div className="project-tags">
|
||||
{project_tags}
|
||||
</div>
|
||||
<div className="project-snippet">
|
||||
{project_snippet}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Project
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
import Project from './Project'
|
||||
import SimpleSite from './SimpleSite.js'
|
||||
|
||||
var classNames = require('classnames')
|
||||
|
||||
|
||||
const Projects = () => {
|
||||
return (
|
||||
<div>
|
||||
<SimpleSite/>
|
||||
<div className="projects-wrapper">
|
||||
<Project
|
||||
project_title="What's On Your Mind?"
|
||||
project_image="/mfowler/img/thumbnails/woym-notebook.png"
|
||||
project_snippet="facebook statuses from the week after November 9th, 2016"
|
||||
project_tags="website, zine, reading"
|
||||
project_link="/work/whats-on-your-mind"
|
||||
/>
|
||||
|
||||
|
||||
<Project
|
||||
project_title="Open Source Feeds"
|
||||
project_image="/mfowler/img/thumbnails/4-graphs.png"
|
||||
project_snippet="a workshop to create your own feed algorithm"
|
||||
project_tags="workshop, mac application"
|
||||
project_linktest="https://pioneerworks.org/classes/open-source-feeds/"
|
||||
project_link="https://pioneerworks.org/classes/open-source-feeds/"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="Infinite Wishing"
|
||||
project_image="/mfowler/img/thumbnails/iw-above.png"
|
||||
project_snippet='a wishing well'
|
||||
project_tags="installation, receipt printer"
|
||||
project_link="/work/infinite-wishing"
|
||||
|
||||
/>
|
||||
|
||||
|
||||
<Project
|
||||
project_title="Looking Glass"
|
||||
project_image="/mfowler/img/thumbnails/lg-test.png"
|
||||
project_snippet="a broken mirror"
|
||||
project_tags="installation, projection mapping"
|
||||
project_link="/work/looking-glass"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="Abridged Maps"
|
||||
project_image="/mfowler/img/thumbnails/abridged1.png"
|
||||
project_snippet="a twitter bot that strips Google Maps of all natural imagery"
|
||||
project_tags="website, twitter bot"
|
||||
project_link="http://mfowler.info/abridgedmaps/index.html"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="2 Pots"
|
||||
project_image="/mfowler/img/thumbnails/2pots1.png"
|
||||
project_snippet="a series of generative line drawings"
|
||||
project_tags="installation, open frameworks, arduino"
|
||||
project_link="/work/2pots"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="Oasis"
|
||||
project_image="/mfowler/img/thumbnails/oasis.png"
|
||||
project_snippet="a virtual reality commune only accessible by SSH"
|
||||
project_tags="installation, website, raspberry pi"
|
||||
project_link="/work/oasis"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="Memory Prosthetics"
|
||||
project_image="/mfowler/img/floppy_disk.jpg"
|
||||
project_snippet="what systems and thought-processes do you use to store & organize files/links/media?"
|
||||
project_tags="website"
|
||||
project_link="http://memoryprosthetics.net"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="HowDoISpeak"
|
||||
project_snippet="a website which shows you insights about the way you text by analyzing your word usage in your text messages"
|
||||
project_tags="website"
|
||||
project_image="/mfowler/img/thumbnails/hdis.png"
|
||||
project_link="http://howdoispeak.com"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="TrueSpeak"
|
||||
project_snippet="an app that allows you to upload your text message history to a publicly viewable page on the internet"
|
||||
project_tags="website"
|
||||
project_image="/mfowler/img/thumbnails/truespeak.png"
|
||||
project_link="http://brocascoconut.com/truespeak/"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="The Capitalist T-Shirt"
|
||||
project_snippet="an e-commerce store which sells t-shirts, framed prints and booty shorts"
|
||||
project_tags="website"
|
||||
project_image="/mfowler/img/thumbnails/capitalist.png"
|
||||
project_link="http://brocascoconut.com/the_capitalist_tshirt/"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="CSS Sketchbook"
|
||||
project_snippet="experiments in css"
|
||||
project_tags="website"
|
||||
project_image="/mfowler/img/thumbnails/post-content.png"
|
||||
project_link="http://mhfowler.github.io"
|
||||
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Projects
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
|
||||
|
||||
function isExternal(url) {
|
||||
return /^https?:\/\//.test(url)
|
||||
}
|
||||
|
||||
export default class LinkDuo extends React.Component {
|
||||
render() {
|
||||
return isExternal(this.props.to) ?
|
||||
<a
|
||||
href={this.props.to}
|
||||
{...this.props}
|
||||
/>
|
||||
:
|
||||
<Link {...this.props} />;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
import React from 'react'
|
||||
import SLink from './SLink.js'
|
||||
|
||||
|
||||
const SimpleSite = () => {
|
||||
return (
|
||||
<div className="simple-site">
|
||||
<div className="about-line" style={{"marginTop": "20px"}}>
|
||||
Max Fowler is an artist, programmer and organizer living in Berlin
|
||||
who makes websites and interactive installations.
|
||||
View his <SLink to="/about">cv</SLink>, sign up for his <SLink to="/mail">newsletter</SLink>, or <a href="mailto:maxhfowler@gmail.com">send him an email</a>.
|
||||
</div>
|
||||
|
||||
<div className="simple-list">
|
||||
|
||||
<div className="list-of-projects">
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="/work/whats-on-your-mind">What's On Your Mind?</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a collection of facebook statuses from the week after November 9th, 2016
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="/work/open-source-feeds">Open Source Feeds</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a workshop to make your own feed algorithm
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="/work/infinite-wishing">Infinite Wishing</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a hopeful receipt printer
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="/work/looking-glass">Looking Glass</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a projection onto a broken mirror
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="/work/oasis">Oasis</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a virtual reality commune only acessible by SSH
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="/work/2pots">2 pots</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a series of generative lines drawings exploring controlled noise
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="http://abridgedmaps.com/">Abridged Maps</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a website that strips Google Maps of all natural imagery to reveal concrete poems about the structure of contemporary space
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="http://brocascoconut.com/truespeak/">Truespeak</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
an app that allows you to upload your text message history to a publicly viewable page on the internet
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="http://howdoispeak.com">HowDoISpeak</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a website which shows you insights about the way you text by analyzing your word usage in your text messages
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="http://brocascoconut.com/the_capitalist_tshirt/">The Capitalist T-Shirt</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
an e-commerce store which sells t-shirts, framed prints and booty shorts
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="http://brocascoconut.com">Brocas's Coconut</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
the landing page for a pseudo-anonymous mailing list
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="http://mhfowler.github.io">CSS Sketchbook</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
experiments in css
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SimpleSite
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
|
||||
const Header = () => (
|
||||
<div className="navbar overlaid">
|
||||
<div className="myname">
|
||||
<a href="/">MAX FOWLER</a>
|
||||
</div>
|
||||
<div className="navlinks">
|
||||
<div className="navlink">
|
||||
<a href="/about.html">about</a>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<a href="/">work</a>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<a href="http://twitter.com/notplants">twitter</a>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<a href="http://github.com/mhfowler">github</a>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<a href="/notes.html">notes</a>
|
||||
</div>
|
||||
<div className="navlink last-navlink">
|
||||
<a href="/contact.html">contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Header
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
.blog {
|
||||
.blog-post-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.blog-post-meta {
|
||||
text-align: center;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
header {
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
//padding-left: 50px;
|
||||
//padding-right: 50px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
a.hlink {
|
||||
//display: block;
|
||||
//text-align: right;
|
||||
//width: 100%;
|
||||
//margin-top: 10px;
|
||||
color: gray;
|
||||
float:left;
|
||||
margin-top: 5px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
body.standard a.hlink {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.center-title {
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-links-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.footer {
|
||||
height: 200px;
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Helmet from 'react-helmet'
|
||||
import Header from '../components/Header.js'
|
||||
import Footer from '../components/Footer.js'
|
||||
import SLink from '../components/SLink.js'
|
||||
import "./index.scss"
|
||||
import "./blog.scss"
|
||||
import "./markdown.scss"
|
||||
import "./canalswans.scss"
|
||||
|
||||
var classNames = require('classnames')
|
||||
|
||||
|
||||
const MoodButton = ({mood, currentMood, handleMoodClick}) => {
|
||||
var classes = classNames({
|
||||
'mood-button': true,
|
||||
'clicked': mood === currentMood
|
||||
});
|
||||
return (
|
||||
<a className={classes} onClick={handleMoodClick.bind(this, mood)}>{mood}</a>
|
||||
)
|
||||
}
|
||||
|
||||
class Layout extends React.Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.handleMoodClick = this.handleMoodClick.bind(this);
|
||||
this.state = {
|
||||
mood: 'standard'
|
||||
}
|
||||
this.handleMoodClick = this.handleMoodClick.bind(this)
|
||||
}
|
||||
|
||||
handleMoodClick(mood) {
|
||||
this.setState({mood: mood})
|
||||
}
|
||||
|
||||
render() {
|
||||
var wrapperClasses = `base-body ${this.state.mood} ${this.props.pageType}`
|
||||
return (
|
||||
<div className={wrapperClasses}>
|
||||
<Helmet
|
||||
title="mfowler.info"
|
||||
meta={[
|
||||
{name: 'description', content: 'Max Fowler | Freelancer'},
|
||||
{name: 'keywords', content: 'freelance, art'},
|
||||
]}
|
||||
bodyAttributes={{
|
||||
class: this.state.mood
|
||||
}}
|
||||
/>
|
||||
<link rel="stylesheet" type="text/css" charset="UTF-8"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"/>
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"/>
|
||||
<link rel="icon" href="/mfowler/img/favico.ico" type="image/x-icon"/>
|
||||
<div className="page-wrapper">
|
||||
<div className="main-wrapper">
|
||||
{this.props.children}
|
||||
</div>
|
||||
{ !this.props.noMoodSelector &&
|
||||
<div>
|
||||
<div className="right-filler">
|
||||
{/*<div>*/}
|
||||
{/* welcome to the website*/}
|
||||
{/*</div>*/}
|
||||
<div>
|
||||
<SLink className="hlink" to='/about'>about</SLink>
|
||||
{/*<SLink className="hlink" to='/rss'>rss</SLink>*/}
|
||||
{/*<SLink className="hlink" to='tinyletter.com/newsletter'>newsletter</SLink>*/}
|
||||
<SLink className="hlink" to='/essays'>essays</SLink>
|
||||
<SLink className="hlink" to='/zines'>zines</SLink>
|
||||
</div>
|
||||
{/*<div>*/}
|
||||
{/* <SLink className="hlink" to='/essays'>rss</SLink>*/}
|
||||
{/* <SLink className="hlink" to='/zines'>newsletter</SLink>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
<div className="center-title">
|
||||
Canal Swans
|
||||
</div>
|
||||
<div className="right-filler top-left">
|
||||
<div className="click-your-mood"> click your mood:</div>
|
||||
<MoodButton mood="standard" currentMood={this.state.mood} handleMoodClick={this.handleMoodClick} />
|
||||
<MoodButton mood="asmr" currentMood={this.state.mood} handleMoodClick={this.handleMoodClick} />
|
||||
<MoodButton mood="sponsored" currentMood={this.state.mood} handleMoodClick={this.handleMoodClick} />
|
||||
<MoodButton mood="test" currentMood={this.state.mood} handleMoodClick={this.handleMoodClick} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Layout
|
||||
|
|
@ -0,0 +1,955 @@
|
|||
body {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
#sketch-holder {
|
||||
position:absolute;
|
||||
z-index: 1;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#preloadedImages
|
||||
{
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.no-css {
|
||||
.filler-wrapper {
|
||||
display: block;
|
||||
}
|
||||
.main-wrapper {
|
||||
float: left;
|
||||
width: 100%;
|
||||
max-width: 736px;
|
||||
padding-top: 38px;
|
||||
padding-bottom: 200px;
|
||||
margin-left: 20px;
|
||||
@media screen and (max-width: 1150px) {
|
||||
max-width: 497px;
|
||||
}
|
||||
@media screen and (max-width: 850px) {
|
||||
max-width: 736px;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
float:left;
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.doc-wrapper {
|
||||
h2 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-filler {
|
||||
float: right;
|
||||
padding-right: 5px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 2%;
|
||||
width: 163px;
|
||||
@media screen and (max-width: 850px) {
|
||||
display:none;
|
||||
}
|
||||
&.top-right {
|
||||
right: 2%;
|
||||
}
|
||||
&.top-left {
|
||||
left: 20px;
|
||||
top: 2%;
|
||||
width: 100%;
|
||||
}
|
||||
&.bottom-left {
|
||||
left: 2%;
|
||||
bottom: 2%;
|
||||
display: none;
|
||||
}
|
||||
&.bottom-right {
|
||||
right: 2%;
|
||||
bottom: 2%;
|
||||
display: none;
|
||||
}
|
||||
.mood-button {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.clicked {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.click-your-mood {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
padding-bottom: 30px;
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
body.asmr {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 12px;
|
||||
background-color: #c2c2de;
|
||||
.projects-wrapper {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
body.times-new-roman {
|
||||
background-color: white;
|
||||
.simple-site {
|
||||
display:none;
|
||||
}
|
||||
a {
|
||||
color: rgb(255, 0, 174);
|
||||
}
|
||||
}
|
||||
body.standard {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 12px;
|
||||
.simple-site {
|
||||
display:none;
|
||||
}
|
||||
a {
|
||||
//color: rgb(255, 0, 174);
|
||||
color: #8900ff;
|
||||
}
|
||||
}
|
||||
body.sponsored {
|
||||
background-image: url('/mfowler/img/inverted-bp.png');
|
||||
background-repeat: repeat;
|
||||
background-size: cover;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 12px;
|
||||
color:white;
|
||||
.navlink a {
|
||||
color: white;
|
||||
}
|
||||
.simple-title a {
|
||||
color: white;
|
||||
}
|
||||
.myname a {
|
||||
color: white;
|
||||
}
|
||||
.projects-wrapper {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
body.test {
|
||||
background-image: url('/mfowler/img/triangles.png');
|
||||
background-repeat: repeat;
|
||||
background-size: cover;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: red;
|
||||
font-size: 28px;
|
||||
.navlink a {
|
||||
color: blue;
|
||||
}
|
||||
.simple-title a {
|
||||
color: blue;
|
||||
}
|
||||
.myname a {
|
||||
color: red;
|
||||
}
|
||||
.p5-sketch {
|
||||
display: block;
|
||||
}
|
||||
.projects-wrapper {
|
||||
display:none;
|
||||
}
|
||||
.page-wrapper {
|
||||
padding-top: 100px;
|
||||
}
|
||||
}
|
||||
.p5-sketch {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: -2;
|
||||
}
|
||||
.slider-wrapper {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
font-size: 16px;
|
||||
left: 20px;
|
||||
width: 169px;
|
||||
input {
|
||||
width: 40px;
|
||||
}
|
||||
.ui-slider {
|
||||
margin:auto;
|
||||
}
|
||||
.ui-slider-handle {
|
||||
outline: 0;
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
//display: none;
|
||||
//font-family: "resistanceregular";
|
||||
font-family: 'Times New Roman';
|
||||
//font-family: 'Roboto Mono', monospace;
|
||||
//background-color: #d9e2d4;
|
||||
//background-color: #efefef;
|
||||
// #d9e2d4 light green
|
||||
// #8cccb1 turqoise
|
||||
// #efefef gray
|
||||
//font-size: 12px;
|
||||
// font-size: 12px;
|
||||
font-size: 16px;
|
||||
//background-color: mediumpurple;
|
||||
//background: linear-gradient(white, black);
|
||||
//background-image: url('/mfowler/img/grid.png');
|
||||
//background-size: 200px 200px;
|
||||
//background-color: lightgray;
|
||||
//background-image: url('https://78.media.tumblr.com/37816081fb4c15e85596ed7931c6d2e0/tumblr_n6awg7ky2K1tw598eo1_500.jpg');
|
||||
//background-image: url('/mfowler/img/diamond.gif');
|
||||
//background-image: url('/mfowler/img/triangles.png');
|
||||
//background-image: url('/mfowler/img/plant.jpg');
|
||||
//background-image: url('/mfowler/img/bp.png');
|
||||
//background-image: url('/mfowler/img/bptest.png');
|
||||
//background-image: url('/mfowler/img/inverted-bp.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
.control-panel {
|
||||
//display: none;
|
||||
position: absolute;
|
||||
padding: 20px;
|
||||
top: 0px;
|
||||
padding-bottom: 30px;
|
||||
//border: 1px solid gray;
|
||||
width: 100%;
|
||||
.click-your-mood {
|
||||
float: left;
|
||||
@media screen and (max-width: 600px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.mood-button {
|
||||
display: block;
|
||||
margin-left: 23px;
|
||||
margin-bottom:5px;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.clicked {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
margin-right: 23px;
|
||||
margin-left: 0px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overlaid {
|
||||
//background-color: white;
|
||||
//padding-left: 20px;
|
||||
//padding-right: 20px;
|
||||
//padding-top: 20px;
|
||||
//padding-bottom: 20px;
|
||||
//border: px solid black;
|
||||
//border-top: 10px solid black;
|
||||
}
|
||||
|
||||
.simple-title {
|
||||
line-height: 22px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.carousel-focus {
|
||||
margin-bottom: 10px;
|
||||
.img-container {
|
||||
width: 100%;
|
||||
height: 434px;
|
||||
text-align: center;
|
||||
background: #e0dfdf;
|
||||
}
|
||||
img.carousel-thumbnail {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.carousel-thumbnails {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
|
||||
.img-container.slick-current {
|
||||
img.carousel-thumbnail {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
img.carousel-thumbnail {
|
||||
opacity: 0.5;
|
||||
//max-height:100%;
|
||||
height: 80px;
|
||||
vertical-align: middle;
|
||||
padding-right: 1px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
//opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.whats-carousel {
|
||||
.carousel-focus {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
.img-container {
|
||||
width: 100%;
|
||||
height: 434px;
|
||||
}
|
||||
}
|
||||
.carousel-thumbnails {
|
||||
max-width: 670px;
|
||||
}
|
||||
}
|
||||
.iw-focus {
|
||||
.img-container {
|
||||
height: 502px;
|
||||
}
|
||||
}
|
||||
.iw-carousel {
|
||||
.carousel-thumbnails {
|
||||
max-width: 268px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
outline: none
|
||||
}
|
||||
|
||||
a.timeline-row {
|
||||
display: block;
|
||||
color: black;
|
||||
&:visited {
|
||||
color: black;
|
||||
}
|
||||
&:hover {
|
||||
color: darkgray;
|
||||
}
|
||||
}
|
||||
|
||||
.dropline {
|
||||
background-size: 332px 150px;
|
||||
background-position: 44px;
|
||||
background-repeat: no-repeat;
|
||||
width: 400px;
|
||||
//height: 50px;
|
||||
height: 90px;
|
||||
//height: s50px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
//margin-top: 3em;
|
||||
&.reversed {
|
||||
-webkit-transform:rotateY(180deg);
|
||||
-moz-transform:rotateY(180deg);
|
||||
-o-transform:rotateY(180deg);
|
||||
-ms-transform:rotateY(180deg);
|
||||
float: right;
|
||||
}
|
||||
|
||||
@include clearfix;
|
||||
.navlinks {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
body.new-blog-body {
|
||||
.blog-post-title {
|
||||
color: #6801c1;
|
||||
}
|
||||
.doc-wrapper {
|
||||
max-width: 550px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
transition: background 0.4s;
|
||||
padding-bottom: 0px;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
|
||||
.blog-back-button {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.blog-sidebar {
|
||||
//font-family: 'PT Sans', sans-serif;
|
||||
margin-right: 45px;
|
||||
padding-top: 25px;
|
||||
margin-left: 30px;
|
||||
float: left;
|
||||
@media screen and (max-width: 1000px) {
|
||||
margin-left: 15px;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
//border: 1px solid blue;
|
||||
//background-image: url('https://78.media.tumblr.com/37816081fb4c15e85596ed7931c6d2e0/tumblr_n6awg7ky2K1tw598eo1_500.jpg');
|
||||
background-size: contain;
|
||||
//padding: 20px;
|
||||
//background-color: white;
|
||||
margin: auto;
|
||||
//max-width: 1000px;
|
||||
max-width: 750px;
|
||||
padding-top: 75px;
|
||||
//max-width: 100%;
|
||||
width: 90%;
|
||||
padding-bottom: 70px;
|
||||
min-height: 100vh;
|
||||
@include clearfix();
|
||||
@media screen and (max-width: 575px) {
|
||||
//margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.navlinks {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.navlinks:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
a {
|
||||
/*color:black;*/
|
||||
//color: #6801c1;
|
||||
color: #1724e4;
|
||||
text-decoration: none;
|
||||
/*padding:5px;*/
|
||||
/*border: 1px solid black;*/
|
||||
/*text-decoration: line-through;*/
|
||||
}
|
||||
.navlink {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
&.last-navlink {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.navlink a {
|
||||
color: black;
|
||||
&:hover {
|
||||
color: pink;
|
||||
}
|
||||
}
|
||||
.myname a {
|
||||
color: black;
|
||||
&:hover {
|
||||
color: pink;
|
||||
}
|
||||
//float: left;
|
||||
//font-size: 28px;
|
||||
//font-size: 16px;
|
||||
}
|
||||
.right-header {
|
||||
float: right;
|
||||
a {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
/*border:10px solid black;*/
|
||||
/*position:relative;*/
|
||||
/*left: -10px;*/
|
||||
/*top: -10px;*/
|
||||
/*background-color:black;*/
|
||||
/*background-color: #00ffc6;*/
|
||||
/*border-color:red;*/
|
||||
/*border-color: cadetblue;*/
|
||||
/*color:white;*/
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
max-width: 100%;
|
||||
margin-bottom: 0px;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
a.source-link {
|
||||
color: gray;
|
||||
margin-top: 150px;
|
||||
}
|
||||
.sources {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
img.img {
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
body {
|
||||
padding-bottom: 75px;
|
||||
}
|
||||
|
||||
.post {
|
||||
margin-bottom: 100px;
|
||||
/*border-bottom: 1px solid gray;*/
|
||||
/*border-right: 1px solid gray;*/
|
||||
padding-right: 100px;
|
||||
padding-bottom: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a.postlink {
|
||||
/*text-decoration:underline;*/
|
||||
}
|
||||
|
||||
.bio-pic {
|
||||
width: 200px;
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.bio-writeup {
|
||||
float: left;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.projects-list {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.about-line {
|
||||
margin-top: 40px;
|
||||
//max-width: 700px;
|
||||
max-width: 645px;
|
||||
}
|
||||
|
||||
.project-wrapper {
|
||||
float: left;
|
||||
//margin-right: 120px;
|
||||
margin-right: 45px;
|
||||
width: 200px;
|
||||
//height: 302px;
|
||||
//height: 350px;
|
||||
margin-bottom: 0px;
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
//padding-bottom:15px;
|
||||
}
|
||||
}
|
||||
|
||||
.project-image-wrapper {
|
||||
|
||||
overflow: hidden;
|
||||
/*padding: 5px;*/
|
||||
/*background-color: lightgray;*/
|
||||
margin-bottom: 5px;
|
||||
/*box-shadow: 5px;*/
|
||||
}
|
||||
.project-image {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-size: cover;
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.8;
|
||||
@media screen and (max-width: 575px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
.portfolio-image-wrapper {
|
||||
/*padding: 5px;*/
|
||||
/*background-color: lightgray;*/
|
||||
margin-bottom: 5px;
|
||||
float: left;
|
||||
/*box-shadow: 5px;*/
|
||||
}
|
||||
.portfolio-image {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
height: 100%;
|
||||
max-height: 333px;
|
||||
background-size: cover;
|
||||
}
|
||||
.portfolio-description {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
@media screen and (max-width: 1100px) {
|
||||
padding-left: 5px;
|
||||
}
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
color: black;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.portfolio-title {
|
||||
color: black;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.project-snippet {
|
||||
margin-top: 10px;
|
||||
display: none;
|
||||
}
|
||||
.project-tags {
|
||||
color: gray;
|
||||
display: none;
|
||||
display: none;
|
||||
|
||||
//margin-top: 10px;
|
||||
}
|
||||
|
||||
.note {
|
||||
width: 400px;
|
||||
}
|
||||
.note-wrapper {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.about-wrapper {
|
||||
//margin-top: 60px;
|
||||
//margin-top: 20px;
|
||||
max-width: 650px;
|
||||
float: left;
|
||||
//margin-top: 20px;
|
||||
}
|
||||
.about-writeup {
|
||||
float: left;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.portfolio-item {
|
||||
@include clearfix;
|
||||
border: 1px solid black;
|
||||
padding: 20px;
|
||||
margin-top: 40px;
|
||||
max-width: 950px;
|
||||
width: 100%;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
@media screen and (max-width: 1100px) {
|
||||
max-width: 85%;
|
||||
width: 550px;
|
||||
}
|
||||
}
|
||||
.portfolio-tags {
|
||||
color: gray;
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
}
|
||||
.author {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
//display:none;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 35px;
|
||||
//display: none;
|
||||
}
|
||||
|
||||
.projects-wrapper {
|
||||
@include clearfix;
|
||||
width: 100%;
|
||||
@media screen and (max-width: 575px) {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
.left-col {
|
||||
width: 518px;
|
||||
float: left;
|
||||
padding-bottom: 35px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.right-col {
|
||||
width: 300px;
|
||||
float: left;
|
||||
}
|
||||
.doc-wrapper {
|
||||
@include clearfix;
|
||||
//max-width: 95%;
|
||||
//max-width: 650px;
|
||||
//margin:auto;
|
||||
}
|
||||
|
||||
.documentation-wrapper {
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
padding: 25px;
|
||||
//font-family: 'PT Sans', sans-serif;
|
||||
@media screen and (max-width: 800px) {
|
||||
max-width: 85%;
|
||||
padding-left: 15px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
.documentation-wrapper.blog-wrapper {
|
||||
font-family: "Times New Roman";
|
||||
}
|
||||
|
||||
.doc-image {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.doc-image.first-image {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.cover-image {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.doc-image.small-doc-image {
|
||||
max-width: 300px;
|
||||
display: block;
|
||||
}
|
||||
.doc-image.md-doc-image {
|
||||
max-width: 450px;
|
||||
display: block;
|
||||
}
|
||||
.writeup-wrapper {
|
||||
}
|
||||
.doc-tags {
|
||||
//color: gray;
|
||||
color: #696969;
|
||||
}
|
||||
.doc-title {
|
||||
margin-bottom: 30px;
|
||||
font-decoration: italic;
|
||||
}
|
||||
|
||||
.documentation-footer {
|
||||
border-top: 1px solid gray;
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.simple-title a {
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.simple-wrapper {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.simple-description {
|
||||
padding-left: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.simple-list {
|
||||
//margin-top: 20px;
|
||||
max-width: 600px;
|
||||
}
|
||||
.here-are {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.looking-glass {
|
||||
.doc-image {
|
||||
max-width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
.filler-wrapper {
|
||||
@media screen and (max-width: 850px) {
|
||||
display: none;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
.doc-wrapper {
|
||||
max-width: 750px;
|
||||
width: 100%;
|
||||
@media screen and (max-width: 850px) {
|
||||
width: 100%;
|
||||
}
|
||||
float: left;
|
||||
}
|
||||
|
||||
.about-wrapper {
|
||||
ul {
|
||||
//padding-left: 0px;
|
||||
}
|
||||
.year {
|
||||
float: left;
|
||||
//margin-right: 15px;
|
||||
}
|
||||
.year-events {
|
||||
float: left;
|
||||
}
|
||||
.year-wrapper {
|
||||
@include clearfix();
|
||||
}
|
||||
li {
|
||||
//list-style: none;
|
||||
text-indent: -37px;
|
||||
padding-left: 37px;
|
||||
//margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
.upper-about {
|
||||
@include clearfix();
|
||||
}
|
||||
.right-about {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
div.mini-cv {
|
||||
//a {
|
||||
// color: black;
|
||||
//}
|
||||
}
|
||||
|
||||
.left-col-cv {
|
||||
padding-left: 30px;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.right-col-cv {
|
||||
float: left;
|
||||
max-width: 70%;
|
||||
}
|
||||
.year-wrapper {
|
||||
@include clearfix();
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
.button {
|
||||
margin-top: 15px;
|
||||
border-radius: 0px;
|
||||
font-family: "Helvetica";
|
||||
color: black;
|
||||
border-color: black;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
background-color: white;
|
||||
-webkit-appearance: none;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.email-input {
|
||||
width: 97%;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#mc_embed_signup .button:hover {
|
||||
border-radius: 0px;
|
||||
font-family: "Helvetica";
|
||||
color: black;
|
||||
border-color: black;
|
||||
border: 1px solid black;
|
||||
background-color: white;
|
||||
}
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*opacity: 0.5;*/
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.form-holder {
|
||||
//width: 400px;
|
||||
margin:auto; margin-top: 0px; float:left;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.only-mobile {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 700px) {
|
||||
.no-mobile {
|
||||
display: none;
|
||||
}
|
||||
.only-mobile {
|
||||
display: block;
|
||||
}
|
||||
.form-holder {
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.page-wrapper {
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
/*height: 0px;*/
|
||||
/*float: left;*/
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
.markdownWrapper {
|
||||
header {
|
||||
//h1 {
|
||||
// text-align: center;
|
||||
//}
|
||||
|
||||
p {
|
||||
color: gray;
|
||||
// text-align: center;
|
||||
// margin-bottom: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.gatsby-resp-image-wrapper {
|
||||
margin-bottom: 30px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react'
|
||||
import Layout from "../layouts/index.js"
|
||||
|
||||
const NotFoundPage = () => (
|
||||
<Layout>
|
||||
<h1>NOT FOUND</h1>
|
||||
<p>You just hit a route that doesn't exist... the sadness.</p>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
export default NotFoundPage
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
import Projects from '../components/Projects'
|
||||
import Layout from "../layouts/index.js"
|
||||
|
||||
const IndexPage = () => (
|
||||
<Layout>
|
||||
<div>
|
||||
Index Page
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
export default IndexPage
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
// src/components/layout.js
|
||||
import React from "react"
|
||||
import Carousel from "../components/Carousel.js"
|
||||
import SLink from "../components/SLink.js"
|
||||
import { MDXRenderer } from "gatsby-plugin-mdx"
|
||||
import { MDXProvider } from '@mdx-js/react'
|
||||
import Layout from "../layouts";
|
||||
import {Link} from "gatsby";
|
||||
|
||||
const shortcodes = { Carousel, SLink }
|
||||
|
||||
// simple template for testing
|
||||
// export default function PageTemplate({ data: { mdx } }) {
|
||||
// return (
|
||||
// <div>
|
||||
// <h1>{mdx.frontmatter.title}</h1>
|
||||
// <MDXProvider components={{
|
||||
// "SLink": SLink,
|
||||
// "Carousel": Carousel,
|
||||
// "img": props => <img {...props} className="imgComp" style={{ border: "3px solid green" }} />
|
||||
// }}>
|
||||
// <MDXRenderer >{mdx.body}</MDXRenderer>
|
||||
// </MDXProvider>
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
|
||||
export default function MdxTemplate({ data: { mdx }}) {
|
||||
const post = mdx
|
||||
var siteTitle = "notplants.info"
|
||||
var pageType = post.frontmatter.type;
|
||||
if (!pageType) {
|
||||
pageType = 'blog;'
|
||||
}
|
||||
var noHeader = false;
|
||||
if (pageType === 'blog') {
|
||||
noHeader = true;
|
||||
}
|
||||
return (
|
||||
<Layout noHeader={noHeader} pageType={pageType}>
|
||||
<article className={"markdownWrapper"}>
|
||||
<header style={{'margin-bottom': '20px', 'width': '100%', 'float':'left'}}>
|
||||
<h2
|
||||
style={{
|
||||
marginBottom: 0,
|
||||
}}
|
||||
>
|
||||
{post.frontmatter.title}
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
display: `block`,
|
||||
'width': '100%',
|
||||
'float': 'left'
|
||||
}}
|
||||
>
|
||||
{post.frontmatter.date}
|
||||
</p>
|
||||
{post.frontmatter.note ?
|
||||
<p
|
||||
style={{
|
||||
display: `block`,
|
||||
}}
|
||||
dangerouslySetInnerHTML={{'__html': post.frontmatter.note}}
|
||||
>
|
||||
</p>
|
||||
: null}
|
||||
</header>
|
||||
<section className="mdxWrapper">
|
||||
<MDXProvider components={{
|
||||
"SLink": SLink,
|
||||
"Carousel": Carousel,
|
||||
}}>
|
||||
<MDXRenderer >{mdx.body}</MDXRenderer>
|
||||
</MDXProvider>
|
||||
</section>
|
||||
</article>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
export const pageQuery = graphql`
|
||||
query BlogPostQuery($id: String) {
|
||||
mdx(id: { eq: $id }) {
|
||||
id
|
||||
body
|
||||
frontmatter {
|
||||
date(formatString: "MMMM DD, YYYY")
|
||||
path
|
||||
title
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
|
|
@ -0,0 +1,154 @@
|
|||
---
|
||||
path: "/posts/the-origin-of-maps"
|
||||
date: "2016-06-20T23:19:51.246Z"
|
||||
title: "The Origin Of Maps"
|
||||
type: "blog"
|
||||
note: "Max Fowler"
|
||||
---
|
||||
|
||||
The origin of all maps is direct experience. Direct experience is a source of knowledge and energy which is always available and has no substitute.[^1]
|
||||
|
||||
This is a reflection into my ongoing experiments into accessing this well,
|
||||
as a potential form of direct action against the oppressive structures that frequently mediate our world.
|
||||
What are the pathways immediately around us that lead to information being transmitted into our eyes?
|
||||
What effects do these structures have on us?
|
||||
What agency do we have in how we relate to them? What actions can we take today?
|
||||
|
||||
|
||||
|
||||
```
|
||||
Must've skipped the ship and joined the team
|
||||
For a ride
|
||||
A couple hours to learn the controls
|
||||
And commandeer both my eyes
|
||||
Hey!
|
||||
```
|
||||
[^2]
|
||||
|
||||
|
||||
A little over a year ago, on November 18th, after drinking a large coffee,
|
||||
in an unusual moment of unifying coherence,
|
||||
I decided that I would try to use a flip-phone for somewhere between three months and a year,
|
||||
along with keeping a journal of emotions that arose for me during the process,
|
||||
marking on a calendar any days where I caved and used my iPhone,
|
||||
building a robotic machine which physically childblocks your iPhone,
|
||||
and creating a collection of all the maps I drew for navigating the city while using the flip-phone.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
According to the journal, on December 14th, I imagined titling this collection of activities _The Origin Of Maps_, here is my note from that day:
|
||||
|
||||
```
|
||||
12/14/18 (friday)
|
||||
thought of the title The Origin Of Maps
|
||||
a reference to direct experience, where all maps, originally, come from
|
||||
by the time we see an address inputted into Google Maps,
|
||||
there have been many layers of mediation
|
||||
The Origin Of Maps invites a return to direct experience
|
||||
using the flip phone, you have to think of who you want to text or call
|
||||
like imagining a UI based on blank screen
|
||||
the only ideas that surface are the ideas that originate from you
|
||||
```
|
||||
|
||||
In the past year, I experienced a variety of ups and downs, and its hard to say what can really be attributed to using a flip-phone,
|
||||
but I still believe in the potential of more mindfully using (and not using) technology as a healing practice.
|
||||
|
||||
A recurring theme was that if I was feeling bad I tended to blame it on the flip-phone and be frustrated by the project,
|
||||
and if I was feeling good then I felt like the flip-phone was a great idea.
|
||||
|
||||
This was my note from May 7th:
|
||||
|
||||
```
|
||||
5/7/19 (tuesday)
|
||||
speaking with petja about how when I am feeling bad I blame my phone
|
||||
(i am alienated, i have no friends etc.),
|
||||
but when I am feeling good
|
||||
my life feels full and it seems like I have no problem
|
||||
petja says “i have friends, i am doing ok”
|
||||
```
|
||||
|
||||
Unfortunately, only the Auslanderbehorde (the German Foreigner’s office which grants Visas) is institutionally verified to really say if I’m doing OK or not.
|
||||
|
||||
In the absence of their official opinion, I will leave that for the wind to debate,
|
||||
and instead will share my journal entries from the first 10 days after I decided to use a flip-phone:
|
||||
|
||||
```
|
||||
day 1 (sunday)
|
||||
picked up rpi from kleinanzeigen and hung out with mylene
|
||||
missed on turn on the way to kleinanzeigen pickup,
|
||||
but used map in my bag to figure out where I had missed the turn
|
||||
(felt like my rope harness catching me from falling)
|
||||
|
||||
day 2 (monday)
|
||||
took my iphone with me because I wanted to use a weird app
|
||||
to text a drug dealer about buying weed
|
||||
which I thought was only available on iphone
|
||||
but turns out also has desktop version
|
||||
|
||||
day 3 (tuesday)
|
||||
took my iphone with me to studio because I was feeling like texting from the corner of the studio was nice
|
||||
was feeling unsure about the project,
|
||||
and frustrated that people were having trouble understanding how I wanted to be reached
|
||||
in the evening left studio without my smart phone
|
||||
felt rejuvenated by patty texting me updates
|
||||
to where the birthday party she was at was,
|
||||
even though we had been messaging before on telegram.
|
||||
she understood the system I wanted to use
|
||||
and laughed and told me it wasn’t that complicated
|
||||
|
||||
day 4 (wednesday)
|
||||
left my iphone at home in the morning
|
||||
felt excited about project in general as a way to provide some structure and direction to my life
|
||||
to frame a period of life as research and ritual
|
||||
|
||||
day 5 (thursday)
|
||||
felt good to only have flip-phone during the day
|
||||
and at night-time while returning to my apartment was excited to see what messages i had received on my iphone
|
||||
|
||||
day 6 (friday)
|
||||
using flip phone feels like gently scuba-diving away from my computer everyday
|
||||
messaging during the day, it was not so difficult making plans for the weekend
|
||||
|
||||
day 7 (saturday)
|
||||
thought I had memorized directions, but realized I hadn’t memorized what to do after getting out of the u-bahn
|
||||
successfully navigated the final part by asking strangers on the street for directions
|
||||
|
||||
day 8 (sunday)
|
||||
dan says “you are really making life complicated… flip-phone, veganism”
|
||||
he tells me he and a friend have been writing a song for fun with the lyrics
|
||||
“gimme me vegan ramen… fuck u…. vegan doc martens…. fuck u…. Berghain (it used to be better)…. Sysyphous (it used to be better)…. About Blank (it used to be better)”
|
||||
|
||||
day 9 (monday)
|
||||
catherine lost her computer while on vacation and spent a week without computer or phone
|
||||
she says she feels a bit feral, but in a good way. I feel like I can also feel a difference
|
||||
she is dreaming of having no laptop, just having her computer be in a physical location where it is used. or of getting a job with her hands, becoming a cook
|
||||
|
||||
day 10 (tuesday)
|
||||
enjoyed getting coffee with Isaac, and baking a sweet potato for myself in the evening. not sure if this deserves to be in the journal or not, but it felt nice to buy a single sweet potato, and take it home and bake it and eat half of it for dinner (with rice and beans) and then eat the other half for breakfast the next day with eggs
|
||||
```
|
||||
|
||||
—
|
||||
|
||||
And here is the zine I made in collaboration with Catherine Schmidt about the possibility of Disconnection Practices as healing practices:
|
||||
|
||||
disconnection-practices.pdf
|
||||
|
||||
—
|
||||
|
||||
I also wrote a bit about ups and downs I went through of wanting to “end the project” and go back to using my smart phone at different points, and how ultimately I “gave up” in May but then two days later I went back to using my dumb phone by choice and I didn’t feel as agitated anymore when it was now no longer part of an experiment but just something I was doing and could stop whenever I wanted.
|
||||
I then continued to use the dumb phone for the rest of the year until November 19, except for a period when I was in the US without a working sim card.
|
||||
I particularly look back highly on the first three months where I felt a lot of excitement and newness.
|
||||
In the months after that it mostly became routine, and the maps I drew became more and more cryptic and utilitarian.
|
||||
I am currently using my smart phone again and I may stop again in the future.
|
||||
|
||||
—
|
||||
|
||||
In tribute to the power of direct of experience,
|
||||
M
|
||||
|
||||
|
||||
[^1]: As a short philosophical digression, one could argue that even our "direct" visual perception is mediated by culture and our past experience and so in some sense is also not direct. On the other hand, we all know the difference between hearing someone tell you what someone else said (a form of mediation) and hearing it directly. So like many philosophical questions, we can see that there is some ambiguity, but also like touching our nose with our finger or breathing there are lots of things we can do without knowing exactly how we do it, and we can still speak about a spectrum from more direct to less direct in a useful way.
|
||||
[^2]: Lyrics from "Alien Days" by MGMT
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
|
|
@ -0,0 +1,39 @@
|
|||
---
|
||||
path: "/posts/wayback"
|
||||
date: "2016-06-20T23:19:51.246Z"
|
||||
title: "Wayback"
|
||||
type: "blog"
|
||||
note: "test"
|
||||
---
|
||||
An image, captured by the wayback machine from 2009,
|
||||
of a website I made in highschool containing
|
||||
now defunct links to songs I recorded in my family house's
|
||||
closet (also containing the internet router and cleaning supplies),
|
||||
along with some
|
||||
geometric broken image links from the album art I photo-shopped together from
|
||||
heavily filtered images of things around my house:
|
||||
|
||||
|
||||
[](https://web.archive.org/web/20090323231502/http://www.maximusfowler.com/maximusproductions/Music.html)
|
||||
|
||||
My freshman and sophomore years of high school I didn’t have many friends — I spent a lot of time next to
|
||||
the router making angsty electronic music. I kept a small MIDI keyboard and microphone on a fold-able table in
|
||||
the closet.
|
||||
|
||||
I made hundreds of songs, and used iWeb (apple’s WYISWYG website maker) to make a website to ‘publish’ the
|
||||
music to. I spent hours photographing my dog, and random plants and photo-shopping the images together into
|
||||
album art. I put all the songs and album art onto <a href="http://maximusfowler.com">http://maximusfowler.com</a> and
|
||||
didn’t share the website or music with anyone.
|
||||
|
||||
This last spring I looked up maximusfowler.com on the wayback machine and found three entries:
|
||||
|
||||
|
||||
I clicked through to Music.html and found the following remnant of a page from 2009:
|
||||
[https://web.archive.org/web/20090323231502/](https://web.archive.org/web/20090323231502/http://www.maximusfowler.com/maximusproductions/Music.html">https://web.archive.org/web/20090323231502/http://www.maximusfowler.com/maximusproductions/Music.html)
|
||||
|
||||
Scrolling through the blue letters on the dark background, thinking about echoes of a memory, of looking out
|
||||
the window of my bedroom at night, and an even more distant memory of barefoot stepping on a firecracker and
|
||||
crying, of diving into a lake and passing through an unexpected cold patch of water.
|
||||
|
||||
Perhaps these dark blue letters and empty boxes reverberate my childhood to me more deeply than if all the
|
||||
pages of the site remained.
|
||||
Loading…
Reference in New Issue