Menu

Eyes

Inspired by Rae Armantrout’s “Eyes”

 

The infinite black
There is light

Traveling faster than anything.

Within the camera obscuras
Photons die

Electrons greedily consume
Their corpses

The signal
Traveling great distances

Along Sodium pumps
Through axons and dendrites

A lacrimal response

From Tantalus Penal Colony

A pandoras box
Does it matter what’s inside?

That person no longer exists…

A part of our cure,
Is to bury the past–
The art of Forgetting.

Neural Synapse Damage!
Spock has never tried this on a Human,
You understand it could be dangerous…

     You will begin to feel a strange euphoria.
          Your body floats.
               Open your mind.
                    We move together.
     Our minds sharing the same thoughts.
     What is our name?
     Who are we?

I can’t forget,

Felt so empty,
So tormented by emptiness
The longing for her,
The pining,
Felt like a fire within the soul.

It’s hard to believe that a man could die of loneliness.

Reflection

In the rain
The ground becomes
Like a mirror
Reflecting light from
Cars and buildings
Traffic and street
Lights as well
A world painted
On a canvas
Of asphalt, concrete
and precise stone
A world so
Etherial and disturbed
By the frolicking
Raindrops falling in
Ever present chaos
Dancing around each
Other like lovers
That long for
One another at
Immense distances rarely
Touching to sweetly
Chance to become
one.

Reminder

My mind betrays me
As I look upon
This photograph of yours
I was absent– without
You as you boarded
That plane and set
Off on an adventure
With who?
The unknown is a
Weighty ghost within my
Mind, ever changing– churning
My insides with a
Deluge of emotions that
Evince qualities of the
Self, qualities I feel
Are better left in
Dark recesses, and forever
Forgotten, but there is
Also a light, faintly,
Relentlessly glimmering within the
Abyss of formless shadow
That draws me closer
To that feeling of
Love unconditional felt by
Many for you, the
Reminder.

Bootstrap

After installing Bootstrap you can quickly get started! Bootstrap uses a 12-column responsive layout placed inside a container.


Here is an example that shows the 12-column responsive grid clearly:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <style type="text/css">
      div { border:1px solid grey; }
    </style>
  </head>
  <body>
    <!-- bootstrap -->
    <div class="container">
      <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
      </div><!-- /row -->
    
      <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
      </div><!-- /row -->
    
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
      </div><!-- /row -->
    
      <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
      </div><!-- /row -->
      
      <div class="row">
        <div class="col-md-8 col-md-offset-2">.col-md-8 .col-md-offset-2
          <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
          <h2>h2. Bootstrap heading <small>Secondary text</small> <span class="label label-info">New</span></h2>
          <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
          <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
          <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
          <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
          <p class="lead">This is some lead text.</p>
          <p class="text-center bg-primary">This is a <em><mark>standard</mark> centered <strong>bg-primary</strong></em> paragraph.</p>
        </div><!-- /col-md-8 .col-md-offset-2 -->
      </div><!-- /row -->
      
    </div><!-- /container -->
  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Responsive Web Design

Responsive Web Design is a technique/technology that involves using fluid, proportional grids and CSS3 media queries. It is relatively easy to implement if you are starting from scratch. It’s a little more difficult to add to existing sites because of it’s use of containers. If you want to get started with a Responsive Web Design here are a few simple steps you can follow:

1) Add a viewport meta tag in the head:

<meta name="viewport" content="width=device-width, initial-scale=1">

2) Add a “breakpoint” in your CSS:

@media screen and (max-width: 767px) {
  /* smaller than 1024x768 for example */
  CSS { ... }
}

3) Define your custom CSS.

4) Repeat steps 2 & 3.


Here is an example that uses two elements with widths of 50% (a maximum of 390px each due to the containing element and padding) which stack on top of each other when the screen width is smaller than 768px:

<!DOCTYPE html><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    body { 
      margin:0;
      padding:0;
    }
    .container {
      margin:auto;
      max-width:800px;
    }
    .grey { 
      background-color:#ccc;
      color:#fff;
      padding:20px;
    }
    .section { 
      box-sizing:border-box; 
      float:left;
      padding:5px;
      width:50%;
    }
    @media screen and (max-width: 767px) {
      .section { width:100%; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="section">
      <div class="grey">
        Section 1: Some content.
      </div>
    </div>
  </div>
  <div class="container">
    <div class="section">
      <div class="grey">
        Section 2: Some more content.
      </div>
    </div>
  </div>
</body>
</html>

mousemove event (jQuery)

Here is a little script that allows an element with the id “follow” to follow the mouse cursor:

$(document).mousemove(function(){
  // Displays the mouse x and y coordinates inside #mouseposition.
  $("#mouseposition").html("x:"+event.pageX+", y:"+event.pageY+"."); 
  // #follow must have absolute positioning.
  $("#follow").css("left", event.pageX);
  $("#follow").css("top", event.pageY);
});

Othello Book Cover Design

Othello Book Cover Design

Othello Book Cover Design

This is a book cover concept I did for the William Shakespeare play Othello. It features a silhouette of Othello revealed in blood. I broke some conventions when creating the spine, but I think it works well as a graphic piece.

Email form processing via PHP

Here is a PHP script that sends an email from an HTML form (submitted via POST):

<?php
/*
 *
 * email form processor
 * form contains: email, subject, message.
 * email is sent from php@php.net.
 *
 */
  $email=$_POST["email"];
  $subject=$_POST["subject"];
  $message="email sent from ip address: "
  . $_SERVER["REMOTE_ADDR"]
  . "\nmessage: " 
  . $_POST["message"];
  $from="php@php.net";

  mail($email, $subject, $message, "From:".$from);
?>

(α)lpha (6) (c)arbon

(α)lpha (6) (c)arbon cover for The Mars Volta RAMROD tapes.

(α)lpha (6) (c)arbon cover for The Mars Volta RAMROD tapes.

This is a cover concept I did called αlpha 6(atomic number) carbon for The Mars Volta RAMROD tapes. I took this project on myself, seeing an opportunity to use design ideas I had after listening to the tapes. I was reviewing organic chemistry at the time. The alpha carbon is the first carbon atom attached to a functional group. Each track was a different functional group. The symbols are reminiscent of organic molecules, but modified to be obfuscated.