Cole Marshall

Interactive Designer & Developer

ColeM@ColeMarshall.net

CM Logo

Profiles

ResumeLinkedInBehanceDribbbleArtStationMyFonts500pxGitHubStack Overflow

Knowledge

HTML

Hypertext Markup Language, defines the structure of the web page

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Cole Marshall - Interactive Designer and Developer</title>
	</head>
	<body>
		<h1>Cole Marshall</h1>
		<h2>Interactive Designer and Developer</h2>
		<p>I am an interactive designer and developer that specializes in the creation of online media.</p>
		<h3>Specialties</h3>
		<ul>
			<li>frontend web development</li>
			<li>backend web development</li>
			<li>web design</li>
			<li>user interface design</li>
			<li>user experience design</li>
			<li>motion graphics</li>
			<li>type and print design</li>
		</ul>
		<p>Do you have an opportunity available that you think would suit me? <a href="mailto:ColeM@ColeMarshall.net">Send me an e-mail</a> and we'll see if it's a good fit.</p>
	</body>
</html>

Run it

CSS

Cascading Style Sheet, defines the style of the web page

/* Human container */
#humans {
	font-family: "Homo Sapiens", Arial, sans-serif;
	box-shadow: 12px 2px 16px 1px rgba(0, 0, 0, 0.3);
	position: relative;
	animation-duration: 10s;
	animation-name: walk;
}

/* Walk forward */
@keyframes walk {
	from {
		left: 0;
	}

	to {
		left: 100px;
	}
}

	/* Average male height, medium build, and imperfect posture */
	#humans .cole {
		height: 177cm;
		padding: 1cm;
		font-style: italic;
	}

		/* Hazel eyes and light skin tone */
		#humans .cole main {
			color: #514a3a;
			background-color: #efdec4;
		}

		/* Mouth */
		#humans .cole > div {
			width: 5cm;
			height: 1cm;
			color: #ccc8c5;
			background-color: #9f7879;
		}

			/* Smile */
			#humans .cole > div:active {
				border-radius: 0 0 8px 8px;
			}

Run it

JavaScript

Makes the web page interactive in the foreground

// Cole Class
class Cole {
	constructor(initialProfession) {
		this.nameFirst = "Cole";
		this.nameLast = "Marshall";
		this.profession = initialProfession;
		this.skills = [
			"Frontend Web Development",
			"Backend Web Development",
			"Web Design"
		];
	}

	getFullName() {
		return this.nameFirst + ' ' + this.nameLast;
	}

	getReadableDetails() {
		let readable = this.getFullName() + " is " + (this.profession.match(/^[aeiou]/i)?"an ":"a ") + this.profession + " who specializes in ";
		for (let i = 0; i < this.skills.length; i++) {
			readable += this.skills[i];
			if (i === this.skills.length - 2) {
				readable += (this.skills.length > 2?",":'') + " and ";
			} else if (i === this.skills.length - 1) {
				readable += ".";
			} else {
				readable += ", ";
			}
		}
		return readable;
	}
}

// Instantiate Cole
let cole = new Cole("Interactive Developer & Designer");

// Echo Cole's Profession and Skills
console.log(cole.getReadableDetails());

Run it

PHP

PHP Hypertext Preprocessor, makes the web page interactive in the background

<?php
// Cole Class
namespace Marshall;

class Cole extends Human {
	const NAME_FIRST = "Cole";
	const NAME_LAST = "Marshall";
	private string $profession;
	private array $specialties;

	function __construct(string $initialProfession = "Interactive Developer & Designer") {
		$this->profession = $initialProfession;
		$this->specialties = [
			"HTML", "CSS", "JavaScript", "Sass", "Vue.js", "jQuery",
			"cross-browser compatibility", "mobile/responsive design", "search engine optimization",
			"PHP", "Node.js", "MySQL", "REST", "XML", "JSON", "Git", "automation",
			"Photoshop", "Illustrator", "XD", "After Effects", "Graphic Design", "Typography",
			"User Interface (UI) Design", "User Experience (UX) Design", "Motion Graphics"
		];
	}

	public function getFullName():string {
		return self::NAME_FIRST . ' ' . self::NAME_LAST;
	}

	public function getProfession():string {
		return $this->profession;
	}

	public function setProfession(string $newProfession):string {
		return $this->profession = $newProfession;
	}

	public function getSpecialties():array {
		return $this->specialties;
	}

	public function setSpecialties(array $newSpecialties):array {
		return $this->specialties = $newSpecialties;
	}

	public function getReadableDetails():string {
		$readable = $this->getFullName() . " is " . (preg_match('/^[aeiou]/i',$this->getProfession())?"an ":"a ") . $this->getProfession() . " who specializes in ";
		for ($i = 0; $i < count($this->getSpecialties()); $i++) {
			$readable .= $this->getSpecialties()[$i];
			if ($i == count($this->getSpecialties()) - 2) {
				$readable .= (count($this->getSpecialties()) > 2?",":'') . " and ";
			} else if ($i == count($this->getSpecialties()) - 1) {
				$readable .= ".";
			} else {
				$readable .= ", ";
			}
		}
		return $readable;
	}
}

// Instantiate Cole
$cole = new \Marshall\Cole();

// Echo Cole's Profession and Specialties
echo $cole->getReadableDetails();

Run it

MySQL

Stores data for the web page

-- Humans table
CREATE TABLE `humans` (
	`id` bigint(12) NOT NULL,
	`name_first` varchar(255) NOT NULL,
	`name_last` varchar(255) NOT NULL,
	`sex` enum('male','female') NOT NULL,
	`height` int(3) NOT NULL,
	`weight` int(3) NOT NULL,
	`eyes` varchar(3) NOT NULL,
	`hair` varchar(3) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

ALTER TABLE `humans`
	ADD PRIMARY KEY (`id`);

ALTER TABLE `humans`
	MODIFY `id` bigint(12) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=79692643551;

-- Human eye color table
CREATE TABLE `humans_eyes` (
	`id` varchar(3) NOT NULL,
	`name` varchar(12) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

ALTER TABLE `humans_eyes`
	ADD PRIMARY KEY (`id`);

-- Human hair color table
CREATE TABLE `humans_hair` (
	`id` varchar(3) NOT NULL,
	`name` varchar(7) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

ALTER TABLE `humans_hair`
	ADD PRIMARY KEY (`id`);

-- Populate human eye colors
INSERT INTO `humans_eyes` (`id`, `name`) VALUES
('blk', 'Black'),
('blu', 'Blue'),
('bro', 'Brown'),
('gry', 'Gray'),
('dic', 'Dichromatic'),
('grn', 'Green'),
('haz', 'Hazel'),
('pnk', 'Pink'),
('unk', 'Unknown');

-- Populate human hair colors
INSERT INTO `humans_hair` (`id`, `name`) VALUES
('blk', 'Black'),
('bro', 'Brown'),
('bln', 'Blonde'),
('red', 'Red'),
('whi', 'White'),
('gry', 'Gray'),
('bal', 'Bald'),
('sdy', 'Sandy'),
('unk', 'Unknown');

-- Create record for Cole Marshall (the 79,692,643,551st human to be born)
INSERT INTO `humans` (`name_last`, `name_first`, `sex`, `height`, `weight`, `eyes`, `hair`) VALUES
('Marshall', 'Cole', 'male', 177, 80, 'haz', 'bro');

-- Retrieve all humans named Cole, including eye color name and hair color name
SELECT `humans`.`name_last`, `humans`.`name_first`, `humans_eyes`.`name` `eyes`, `humans_hair`.`name` `hair` FROM `humans` LEFT JOIN `humans_eyes` ON `humans`.`eyes` = `humans_eyes`.`id` LEFT JOIN `humans_hair` ON `humans`.`hair` = `humans_hair`.`id` WHERE `name_first` = 'Cole'

Run it

Sass

Syntactically Awesome Style Sheet, makes defining the style of the web page easier

/* Human container */
#humans {
	font-family: "Homo Sapiens", Arial, sans-serif;
	box-shadow: 12px 2px 16px 1px rgba(0, 0, 0, 0.3);
	position: relative;
	animation-duration: 10s;
	animation-name: walk;

	/* Human smile */
	@mixin smile($radius) {
		border-radius: 0 0 $radius $radius;
	}

	/* Average male height, medium build, and imperfect posture */
	.cole {
		height: 177cm;
		padding: 1cm;
		font-style: italic;

		/* Hazel eyes and light skin tone */
		main {
			color: #514a3a;
			background-color: lighten(#e5d7be, 8%);
		}

		/* Mouth */
		> div {
			width: 5cm;
			height: 1cm;
			color: #ccc8c5;
			background-color: #9f7879;

			/* Smile */
			&:active {
				@include smile(8px);
			}
		}
	}
}

/* Walk forward */
@keyframes walk {
	from {
		left: 0;
	}

	to {
		left: 100px;
	}
}

Run it

REST

Representational state transfer, makes transferring data between applications easier

POST /api/cole/properties HTTP/1.1
Host: colemarshall.net
Content-Type: application/json; charset=utf-8
Content-Length: 52

{
	"bloodType": {
		"group": "O",
		"rhesusFactor": true
	}
}
XML

Extensible Markup Language, a format for storing data for the web page or application

<?xml version="1.0" encoding="UTF-8"?>
<human>
	<name>
		<first>Cole</first>
		<last>Marshall</last>
	</name>
	<measurements>
		<chest unit="inch" cut="regular">40</chest>
		<waist unit="inch">34</waist>
		<outseam unit="inch">40 1/2</outseam>
		<neck unit="inch">15 3/4</neck>
		<sleeve unit="inch">35</sleeve>
		<head unit="inch">7 1/2</head>
		<shoe unit="inch">10</shoe>
		<hand unit="inch">8.5</hand>
		<pupil unit="mm">64</pupil>
		<height unit="cm">177</height>
		<weight unit="kg">80</weight>
	</measurements>
</human>
JSON

JavaScript Object Notation, a format for storing data for the web page or application

{
	"basics": {
		"name": "Cole Marshall",
		"label": "Interactive Designer & Developer",
		"picture": "https://ColeMarshall.net/images/ColeMarshall.jpg",
		"email": "ColeM@ColeMarshall.net",
		"website": "https://ColeMarshall.net",
		"location": {
			"postalCode": "53704",
			"city": "Madison",
			"countryCode": "US",
			"region": "WI"
		}
	}
}
Git

Allows the tracking of source changes to the web page or application

git clone https://gituniverse.com/virgosupercluster/localgroup-milkyway-orionarm-sol-earth-animals-mammals-primates-humans.git
git branch -d cole
git checkout cole
git commit -m "Specify properties for instantiating Cole object with Human class"
git checkout master
git merge cole
git push --all