web design

 

<! HTML5 & CSS >

</>

designed :: with coding

designed :: with dreamweaver

</>

<! HTML5 & CSS design :: with coding >

</>

I Sing the Body Electric

icon of page for Whitman poem
A poem by Walt Whitman

Page coded with a text editor.

Utilizes CSS design elements to display the Whitman poem.

  • linked CSS files
  • text shadows
  • box shadows
  • border images
  • gradients as border images
  • gradients as background images
  • layered background images

I Sing the Body Electric :: A poem by Walt Whitman

<! END OF LINE >

</>

<! HTML5 & CSS design :: with coding >

</>

Daily Crossword

icon of Crosword Puzzle built with HTML & CSS table code

Crosword Puzzle built with HTML & CSS table code. Page coded with a text editor.

Crosword Puzzle built with HTML & CSS table code

<! END OF LINE >

</>

<! HTML5 & CSS design :: with coding >

</>

CSS Flexbox Code Pages

CSS Flexbox photography page

icon of flexbox page for photography

web page for photography demonstrating the use of CSS Flexbox, coded with a text editor.

flexbox page for photography
 

CSS Flexbox blog page

icon of flexbox page for blog

blog sample page demonstrating the use of CSS Flexbox, coded with a text editor.

flexbox page for blog
 

CSS Flexbox page about mead

Triple Horn Mead logo

web page for Triple Horn Mead, an info page about mead; demonstrating the use of CSS Flexbox, coded with a text editor.

flexbox page for Triple Horn Mead

<! END OF LINE >

</>

<! HTML5 & CSS design :: with coding >

</>

CSS Page Grid Layout Examples

icon of CSS page grid layout examples

Using Grid Layouts to setup web pages. Pages coded with a text editor.

CSS page grid layout examples

<! END OF LINE >

</>

<! HTML5 & CSS design :: with coding >

</>

NASA View

icon of NASA info page

Basic info page for NASA. Pages coded with Dreamweaver.

NASA View

<! END OF LINE >

</>

<! HTML5 & CSS design :: with coding >

</>

Boys & Girls Club of Greenville

Boys & Girls Club of Greenville

Using CSS style sheets to control the layout and style of a site, coded with Dreamweaver.

Boys & Girls Club of Greenville

<! END OF LINE >

</>

<! HTML5 & CSS design :: with coding >

</>

Go Green California

Go Green California

Solar Power info page for Go Green California including form fields coded with Dreamweaver.

Go Green California

<! END OF LINE >

</>

<! HTML5 & CSS design :: with coding >

</>

Pete's Hobbies Site

Pete's Hobbies Site

Using jQuery to create dynamic site. Pages coded with jQuery in Dreamweaver.

Pete's Hobbies Site

<! END OF LINE >

</>

<! HTML5 & CSS design :: with coding >

</>

Watermann Gallery

Watermann Gallery

Bootstrap used to create a responsive site. Pages coded with Bootstrap in Dreamweaver.

Watermann Gallery

<! END OF LINE >

</>

<! designed :: with WordPress >

</>

pb-dq

Web Design :: Student Portfolio

Site created using WordPress (mostly) without entering any code.

Triptych Moon :: Art Gallery e-Store

</>

mockup :: pete's portfolio site design v.1

about me
After getting a degree in Digital Media and Interactive Entertainment, I shifted my career into education. Major crossovers in these two subjects are subjects like Edutainment, also called Gamification. The goal of gamification is to engage the audience to get them involved and invested to better communicate a message.
I have ADHD and Dyslexia, so I literally think differently than a neurotypical person. I see this as an asset in design. My Dyslexia is part of my visual/special thinking, and creativity.
Role Playing Games, both video games and social games like Dungeons & Dragons are growing in popularity today. I greatly enjoy this type of interactive story telling with the personal investment of a choose your own adventure.

    ideas & impressions

  • Look and Feel: Creative, Interactive, Entertaining.
  • Atypical design to show a different perspective and creativity.
  • Suggest the use of gamification of communication.
  • The lowercase letters p b d and q are all rotations and inversions of each other. These letters are often confused by a dyslexic, and these specific lowercase letters are often used in symbols for dyslexia.
  • My initials are P.B. (Peter Brown) along with d and q could create an indirect reference to my dyslexia.

theme

My last name is Brown, a color. The color brown suggests natural materials, like wood, and old parchment. Also vintage images like sepia-tone photography, and medieval manuscripts like maps. This style of maps are often used in fantasy role playing. 

Site name: pete brown’s digital quests (in lowercase) uses my full name Pete Brown, and digital quests suggests and feel of whimsy and gamification. The word digital is relevant to my modern day design, and the word quest is commonly associated with fantasy stories and games. Making the portfolio look like a game shows the creativity I offer. 

With the letters p b d q being rotations and inversions of each other, they allow for a symmetrical logo. This symmetry is a subtle reference to my Dyslexia. The domain pb-dq.com is available. 

1591 Map of Florida

pete brown’s digital quests
pp-dq.com

pete brown digital quest map design image

pete brown digital quest map design image

pete brown digital quest map design image

34573r-366 :: easter-egg

<!>34573r-366 </>