Cole Marshall

Web Designer & Developer

CM@ColeMarshall.net

CM Logo

Profiles

ResumeLinkedInBehanceDribbbleArtStation500pxGitHubStack OverflowLinktreeLinktree

Knowledge

HTML

Hypertext Markup Language, defines the structure of the web page

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Cole Marshall - Web Designer and Developer</title>
	</head>
	<body>
		<h1>Cole Marshall</h1>
		<h2>Web 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>cloud DevOps</li>
			<li>web 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:CM@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 = [
			"Web Design",
			"Frontend Web Development",
			"Backend Web Development",
			"Cloud DevOps",
		];
	}

	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("Web 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 = "Web Developer & Designer") {
		$this->profession = $initialProfession;
		$this->specialties = [
			"HTML", "CSS", "Sass", "JavaScript", "TypeScript", "Vue.js", "jQuery",
			"cross-browser compatibility", "mobile/responsive design", "search engine optimization",
			"PHP", "Node.js", "MySQL", "REST", "XML", "JSON", "Git", "automation",
			"API development", "cloud DevOps", "IaC (Infrastructure as Code)", "unit testing",
			"Photoshop", "Illustrator", "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

MySQLMySQL

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','other') 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

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>
JSONJSON

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

{
	"basics": {
		"name": "Cole Marshall",
		"label": "Web Designer & Developer",
		"picture": "https://ColeMarshall.net/images/ColeMarshall.jpg",
		"email": "CM@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