Cole Marshall

Senior Full-Stack Engineer & Designer

Blending design, frontend and backend development, testing, and cloud DevOps from Madison, WI.

CM@ColeMarshall.net

Profiles

Self-Portraits

HTML

Hypertext Markup Language, defines the structure of the web page

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Cole Marshall - Senior Full-Stack Engineer and Designer</title>
	</head>
	<body>
		<header>
			<h1>Cole Marshall</h1>
			<p>Senior Full-Stack Engineer and Designer</p>
		</header>
		<main>
			<p>I am an interactive designer and developer that specializes in the creation of online media.</p>
			<section aria-labelledby="specialties">
				<h2 id="specialties">Specialties</h2>
				<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>
			</section>
		</main>
		<footer>
			<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>
		</footer>
	</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 rgb(0 0 0 / 0.3);
	animation: walk 10s;

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

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

		/* Mouth */
		> div {
			inline-size: 5cm;
			block-size: 1cm;
			color: #ccc8c5;
			background-color: #9f7879;

			/* Smile */
			&:active {
				border-radius: 0 0 8px 8px;
			}
		}
	}
}

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

	to {
		translate: 100px;
	}
}

Run it

TypeScript

JavaScript with static types, makes the web page interactive in the foreground

interface Human {
	readonly nameFirst: string;
	readonly nameLast: string;
}

type ExperienceLevel =
	| 'Intern'
	| 'Junior'
	| 'Mid-Level'
	| 'Senior'
	| 'Staff'
	| 'Principal'
	| 'Contract';

interface Engineer extends Human {
	readonly profession: `${ExperienceLevel} ${string}`;
	readonly specialties: readonly [string, ...string[]];
}

// Cole's specialties
const specialties = [
	'Web Design',
	'Frontend Web Development',
	'Backend Web Development',
	'Automated Testing',
	'Cloud DevOps',
] as const;

// Instantiate Cole
const cole = {
	nameFirst: 'Cole',
	nameLast: 'Marshall',
	profession: 'Senior Full-Stack Engineer & Designer',
	specialties,
} satisfies Engineer;

// Introduce an Engineer
function introduce({ nameFirst, nameLast, profession, specialties }: Engineer): string {
	const article = /^[aeiou]/i.test(profession) ? 'an' : 'a';
	const specialtyList = new Intl.ListFormat('en', { type: 'conjunction' }).format(specialties);

	return `${nameFirst} ${nameLast} is ${article} ${profession} who specializes in ${specialtyList}.`;
}

// Echo Cole's profession and specialties
console.log(introduce(cole));

Run it

PHP

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

<?php
// Cole Class
namespace Marshall;

class Cole extends Human {
	final public const string NAME_FIRST = 'Cole';
	final public const string NAME_LAST = 'Marshall';

	public string $fullName {
		get => self::NAME_FIRST . ' ' . self::NAME_LAST;
	}

	public function __construct(
		public private(set) string $profession = 'Senior Full-Stack Engineer & Designer',
		public private(set) array $specialties = [
			'HTML', 'CSS', 'JavaScript', 'TypeScript', 'Vue.js',
			'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 getReadableDetails(): string {
		$specialties = array_slice($this->specialties, 0, -1)
			|> (fn(array $most) => implode(', ', $most) . ', and ' . array_last($this->specialties));
		$article = preg_match('/^[aeiou]/i', $this->profession) ? 'an' : 'a';

		return "{$this->fullName} is {$article} {$this->profession} who specializes in {$specialties}.";
	}
}

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

// Echo Cole's profession and specialties
echo $cole->getReadableDetails();

Run it

MySQL

Stores data for the web page

-- Human eye color table
CREATE TABLE humans_eyes (
	id CHAR(3) PRIMARY KEY,
	name VARCHAR(12) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Human hair color table
CREATE TABLE humans_hair (
	id CHAR(3) PRIMARY KEY,
	name VARCHAR(7) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Humans table
CREATE TABLE humans (
	id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
	name_first VARCHAR(255) NOT NULL,
	name_last VARCHAR(255) NOT NULL,
	sex ENUM('male', 'female', 'other') NOT NULL,
	height TINYINT UNSIGNED NOT NULL COMMENT 'cm',
	weight SMALLINT UNSIGNED NOT NULL COMMENT 'kg',
	eyes CHAR(3) NOT NULL,
	hair CHAR(3) NOT NULL,
	FOREIGN KEY (eyes) REFERENCES humans_eyes (id),
	FOREIGN KEY (hair) REFERENCES humans_hair (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 AUTO_INCREMENT=79692643551;

-- 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 h.name_last, h.name_first, e.name AS eyes, ha.name AS hair
FROM humans AS h
LEFT JOIN humans_eyes AS e ON e.id = h.eyes
LEFT JOIN humans_hair AS ha ON ha.id = h.hair
WHERE h.name_first = 'Cole';

Run it

REST

Representational state transfer, makes transferring data between applications easier

PATCH /api/cole/properties HTTP/2
Host: colemarshall.net
Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.human
Content-Type: application/merge-patch+json
Content-Length: 61
Accept: application/json

{
	"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": "Senior Full-Stack Engineer & Designer",
		"picture": "https://ColeMarshall.net/images/ColeMarshall_face.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 switch -c cole
git add .
git commit -m "Specify properties for instantiating Cole object with Human class"
git switch main
git merge cole
git push --all

AWS CDK

Cloud Development Kit, defines the cloud infrastructure beneath the web page as code (IaC)

import { App, Duration, RemovalPolicy, Stack } from 'aws-cdk-lib';
import * as events from 'aws-cdk-lib/aws-events';
import * as targets from 'aws-cdk-lib/aws-events-targets';
import * as lambda from 'aws-cdk-lib/aws-lambda';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as sqs from 'aws-cdk-lib/aws-sqs';
import * as sfn from 'aws-cdk-lib/aws-stepfunctions';
import { Construct } from 'constructs';

// Cole Stack
class ColeMarshallStack extends Stack {
	constructor(scope: Construct, id: string) {
		super(scope, id, {
			description: 'Cole Marshall, deployed as cloud infrastructure',
			env: { region: 'us-east-2' }, // Closest region to Madison, WI
		});

		// Brain
		const brain = new lambda.Function(this, 'Brain', {
			runtime: lambda.Runtime.NODEJS_22_X,
			handler: 'index.think',
			memorySize: 1024,
			code: lambda.Code.fromInline('exports.think = async (idea) => "I\'ll see what I can do!";'),
		});

		// Memories, retained
		const memories = new s3.Bucket(this, 'Memories', {
			versioned: true,
			removalPolicy: RemovalPolicy.RETAIN,
		});
		memories.grantReadWrite(brain);

		// Heart, keeps the brain warm
		new events.Rule(this, 'Heart', {
			schedule: events.Schedule.rate(Duration.minutes(5)),
			targets: [new targets.LambdaFunction(brain)],
		});

		// Arms, carry the payloads
		for (const side of ['Left', 'Right'] as const) {
			new sqs.Queue(this, `${side}Arm`);
		}

		// Legs, one foot in front of the other
		new sfn.StateMachine(this, 'Legs', {
			definitionBody: sfn.DefinitionBody.fromChainable(
				new sfn.Pass(this, 'LeftFoot').next(new sfn.Pass(this, 'RightFoot')),
			),
		});
	}
}

// Deploy Cole
new ColeMarshallStack(new App(), 'ColeMarshall');