Cole Marshall

Web Designer & Developer

CM@ColeMarshall.net

Profiles

ResumeLinkedInBehanceDribbbleArtStation500pxGitHubStack Overflow Linktree

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", "end-to-end 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

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

JSON

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