add main site

.gitignore

@@ -0,0 +1 @@
+.DS_Store

Dockerfile

@@ -0,0 +1,3 @@
+FROM nginx
+
+COPY nginx/matthewtran.com/html /usr/share/nginx/html

Makefile

@@ -0,0 +1,10 @@
+# temporary until I can figure out the rest
+
+all:
+	docker build -t matthewtran .
+
+run:
+	docker run --name matt -d --rm -p 80:80 matthewtran
+
+kill:
+	docker kill matt

README.md

@@ -1,2 +1,8 @@
 # matthewtran.com
-Stuff that's deployed on matthewtran.com
+
+Stuff that's deployed on matthewtran.com.
+
+```
+make
+make run
+```

nginx/matthewtran.com/html/bg.js

@@ -0,0 +1,33 @@
+function randint(min, max) {
+	return Math.random();
+}
+
+NUM_PICS = 14;
+
+if (typeof(Storage) !== "undefined") {
+	if (localStorage.bgs) {
+		console.log("Welcome back!");
+		var bgs = JSON.parse(localStorage.bgs);
+	} else {
+		console.log("First time here?");
+		var bgs = [];
+		for (var k = 0; k < NUM_PICS; k++) {
+			bgs.push(k);
+		}
+	}
+
+	var j = bgs[Math.floor(Math.random() * bgs.length)];
+	bgs.splice(bgs.indexOf(j), 1);
+
+	localStorage.bgs = JSON.stringify(bgs);
+	if (bgs.length == 0) {
+		localStorage.removeItem("bgs");
+	}
+
+	console.log("Pics left: " + bgs);
+} else {
+	console.log("No localStorage support!");
+	var j = Math.floor(Math.random() * NUM_PICS);
+}
+
+$("#bg").css({"background-image": `linear-gradient(rgba(0,0,0,0.56), rgba(0,0,0,0.56)), url('imgs/bg${j}.jpg')`});

nginx/matthewtran.com/html/fade.js

@@ -0,0 +1,10 @@
+$(window).on("load", function() {
+	IN_DELAY = 250;
+
+	$('body').animate({"opacity": "1"}, IN_DELAY);
+
+	$(".main").delay(IN_DELAY).animate({"opacity": "1"}, 750);
+	//for (var i = 7; i >= 1; i--) {
+	//	$(`.main> :nth-child(${i})`).delay(IN_DELAY + 125*i).animate({"opacity": "1"}, 500);
+	//}
+});

nginx/matthewtran.com/html/imgs/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="imgs/favicons/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

nginx/matthewtran.com/html/imgs/favicons/safari-pinned-tab.svg

@@ -0,0 +1 @@
+<svg height="682.667" viewBox="0 0 512 512" width="682.667" xmlns="http://www.w3.org/2000/svg"><path d="m49 36.8c-.6.2-1 6.4-1 15.8v15.4h70.7l5.1 11.2c20.4 45.6 28.3 63.1 30.7 68.3 1.5 3.3 4.3 9.6 6.2 14 2 4.4 4.7 10.5 6 13.5 3.7 8 10.3 23.1 10.3 23.3 0 .1-29 .2-64.5.2h-64.5v31.2h91.5c50.3 0 91.3-.2 91.1-.6-.8-1.5-6.3-13.6-17.4-38.6-19.5-43.7-37.7-84.5-41.1-91.8-1.7-3.7-3.1-6.9-3.1-7.2 0-.2-1.8-4.3-4.1-9.2a3020 3020 0 0 1 -12.1-26.8c-4.4-9.9-8.1-18.2-8.3-18.3-.5-.5-94.2-.8-95.5-.4zm292.8.3c-.7.4-1 25.6-1 73.3 0 39.9-.4 72.6-.8 72.6s-3.3-2.8-6.5-6.3c-3.2-3.4-10.8-11.6-16.9-18.2s-14.4-15.6-18.5-20c-11.8-12.8-8.5-11.6-31.3-11.5-22.1.2-20.9-.4-14.3 6.5 1.7 1.8 6.8 7.3 11.5 12.4s10.1 10.9 12 13c1.9 2 6.7 7.1 10.5 11.2 3.9 4.1 12.2 13.1 18.7 19.9 6.4 6.9 12.9 13.8 14.4 15.5 1.5 1.6 7.2 7.8 12.7 13.7l10 10.8h29.3l8.6-9.3c4.7-5 10.3-11.1 12.4-13.3 2.2-2.3 8.2-8.7 13.4-14.4 5.2-5.6 11.3-12.1 13.5-14.5 2.2-2.3 6.5-6.9 9.5-10.2 3-3.2 11.2-12 18.1-19.4s14.2-15.3 16.2-17.5l3.7-4.2h-41l-3.6 4.2c-2 2.2-6.1 6.8-9.2 10.1-3.2 3.4-10.9 11.6-17.2 18.4s-14 15.1-17.1 18.4l-5.7 6v-73.2c0-40.3-.2-73.5-.6-73.8-.8-.8-29.5-1-30.8-.2zm-291.5 249.7-2.3.3v192.7l15.2-.1h15.2l80-53.3 79.9-53.2-16-8.1-16-8-62.6 41.8c-34.5 23-62.8 41.3-63 40.7s-.3-35.2-.2-76.9v-75.7l-3.5-.1c-1.9 0-8.2-.1-14-.2s-11.5-.1-12.7.1zm344.7 0c-.7.2-1 22.8-1 64.3v63.9h33l-.1-64-.1-64h-2.6c-1.5-.1-8.4-.2-15.5-.3-7-.1-13.2-.1-13.7.1zm-104.3 65.1c-.2.3-.3 29.2-.3 64.1l.1 63.5 16.3.2 16.2.2.1-4.2c.1-4.9.1-117.9 0-121.9l-.1-2.7-16 .1c-8.9 0-16.2.4-16.3.7zm51.9 1c-.2.9-.4 15.2-.4 31.8v30.3h32.8v-63.8h-16c-13.9 0-16 .3-16.4 1.7z"/></svg>

nginx/matthewtran.com/html/imgs/favicons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

nginx/matthewtran.com/html/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-131212547-3"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-131212547-3');
+	</script>
+
+	<title>Matthew Tran's Site!</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+	<meta name="description" content="Hi! I'm Matthew Tran and I'm an EECS graduate from UC Berkeley. I love making just about anything.">
+	<link rel="canonical" href="https://matthewtran.com">
+
+	<meta property="og:title" content="Matthew Tran's Site!">
+	<meta property="og:description" content="Hi! I'm Matthew Tran and I'm an EECS graduate from UC Berkeley. I love making just about anything.">
+	<meta property="og:image" content="https://matthewtran.com/imgs/social.jpg">
+	<meta property="og:url" content="https://matthewtran.com">
+	<meta name="twitter:card" content="summary_large_image">
+	<meta property="og:site_name" content="Matthew Tran's Site!">
+	<meta name="twitter:image:alt" content="A Pic of Me.">
+	<meta property="og:type" content="website">
+
+	<link rel="apple-touch-icon" sizes="180x180" href="imgs/favicons/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="imgs/favicons/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="imgs/favicons/favicon-16x16.png">
+	<link rel="manifest" href="imgs/favicons/site.webmanifest">
+	<link rel="mask-icon" href="imgs/favicons/safari-pinned-tab.svg" color="#5ad1e5">
+	<link rel="shortcut icon" href="imgs/favicons/favicon.ico">
+	<meta name="msapplication-TileColor" content="#2b5797">
+	<meta name="msapplication-config" content="imgs/favicons/browserconfig.xml">
+	<meta name="theme-color" content="#ffffff">
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+
+	<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300|Source+Code+Pro:300" rel="stylesheet">
+	<link href="style.css" rel="stylesheet">
+
+	<script src="fade.js"></script>
+</head>
+
+<body>
+	<!-- SVGs from Font Awesome https://fontawesome.com/license (modified to fit into html) -->
+	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="none">
+		<g id="github-ico" viewBox="0 0 496 512">
+			<path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
+		</g>
+		<g id="linkedin-ico" viewBox="0 0 448 512">
+			<path fill="currentColor" d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
+		</g>
+		<g id="mail-ico" viewBox="0 0 512 512">
+			<path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path>
+		</g>
+	</svg>
+
+	<div id="bg">
+	<script src="bg.js"></script>
+
+	<div class="main">
+		<p class="tagline tl1">Hi, I'm</p>
+		<p class="tagline">Matthew Tran!</p>
+		<p class="major">EECS, UC Berkeley 2022</p>
+		<hr class="divider">
+		<p class="about">I'm a human being passionate about the intersection of electrical engineering and computer science. I've had a lifelong interest in making things that interact with the world, which so far has led me to focus on embedded systems and digital design. In my free time, I enjoy challenging myself to tackle yet another project on my seemingly endless list of ideas. </p>
+		<ul class="buttons">
+			<li><a href="https://matthewtran.dev/resume/" target="_blank">Resume</a></li>
+			<li><a href="https://matthewtran.dev" target="_blank">Blog</a></li>
+			<li><a href="https://matthewtran.dev/categories/#projects" target="_blank">Portfolio</a></li>
+		</ul>
+		<ul class="icons">
+			<li><a href="https://github.com/dragonlock2" target="_blank"><svg viewBox="0 0 496 512" width="100%" height="100%"><use xlink:href="#github-ico" /></svg></a></li>
+			<li><a href="https://linkedin.com/in/matthewlamtran" target="_blank"><svg viewBox="0 0 448 512" width="100%" height="100%"><use xlink:href="#linkedin-ico" /></svg></a></li>
+			<li><a href="mailto:matthewlamtran@berkeley.edu"><svg viewBox="0 0 512 512" width="100%" height="100%"><use xlink:href="#mail-ico" /></svg></a></li>
+		</ul>
+	</div>
+</body>
+
+<!-- inspired by ajlkn -->
+</html>

nginx/matthewtran.com/html/sitemap.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+
+
+<url>
+  <loc>https://matthewtran.com/</loc>
+  <lastmod>2019-12-16T18:42:28+00:00</lastmod>
+  <priority>1.00</priority>
+</url>
+<url>
+  <loc>https://matthewtran.com/resume.pdf</loc>
+  <lastmod>2019-12-16T18:42:28+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+
+
+</urlset>

nginx/matthewtran.com/html/style.css

@@ -0,0 +1,249 @@
+*, *:before, *:after {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+body {
+	opacity: 0;
+	background-color: #000000;
+}
+
+#bg {
+	content: '';
+	position: fixed;
+	width: 100vw;
+	height: 100vh;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+	background-color: #000000;
+}
+
+body, #bg {
+	z-index: 0;
+	min-width: 240px;
+	width: 100vw;
+	min-height: 100vh;
+
+	overflow-x: hidden;
+
+	-ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+#bg::-webkit-scrollbar { 
+    display: none;
+}
+
+.main {
+	z-index: 1;
+	color: #FFFFFF;
+
+	display: flex;
+	position: relative;
+	flex-direction: column;
+	justify-content: center;
+	text-align: left;
+	
+	max-width: 100%;
+	min-height: 100vh;
+	padding: 5rem 5rem;
+	width: 45rem;
+
+	opacity: 0;
+}
+
+.main>* {
+	opacity: 1;
+}
+
+.tagline {
+	font-family: "Montserrat", Times;
+	margin-top: 0;
+	margin-bottom: 0.75rem;
+	letter-spacing: 0.3rem;
+	width: calc(100% + 0.5rem);
+	font-size: 3.5rem;
+	line-height: 1.5;
+	font-weight: 200;
+}
+
+.tl1 {
+	margin-bottom: -0.2rem;
+}
+
+.major {
+	font-family: "Montserrat", Times;
+	margin-top: 0;
+	margin-bottom: 2rem;
+	font-size: 1.25rem;
+	line-height: 1.375;
+	font-weight: 300;
+}
+
+.divider {
+	width: 19%;
+	margin-top: 0;
+	margin-left: 0;
+	margin-bottom: 2rem;
+	border: solid 1px;
+}
+
+.about {
+	font-family: "Source Code Pro", Times;
+	margin-top: 0;
+	margin-bottom: 1.5rem;
+	font-size: 1rem;
+	line-height: 1.625;
+}
+
+.buttons {
+	font-family: "Source Code Pro", Times;
+	margin-top: 0;
+	margin-bottom: 1.5rem;
+	width: calc(100% + 0.75rem);
+	margin-left: -0.375rem;
+	margin-right: -0.375rem;
+	list-style: none;
+}
+
+.buttons li {
+	display: inline-block;
+	max-width: calc(100% - 0.75rem);
+	margin-left: 0.375rem;
+}
+
+.buttons li a {
+	border: solid 1px;
+	display: flex;
+	padding: 0 1.2rem;
+	border-radius: 0.5rem;
+	height: 2.5rem;
+	line-height: 2.5rem;
+	vertical-align: middle;
+	font-size: 1rem;
+	align-items: center;
+	justify-content: center;
+}
+
+.icons {
+	margin-top: 0;
+	margin-bottom: 0;
+	width: calc(100% + 1rem);
+	margin-left: -0.5rem;
+	list-style: none;
+}
+
+.icons li {
+	display: inline-block;
+	margin: 0.75rem;
+	vertical-align: middle;
+}
+
+.icons li a {
+	border-radius: 100%;
+	width: 1.6rem;
+	height: 1.6rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+a:link, a:visited {
+	color: #FFFFFF;
+	border-color: #FFFFFF;
+	text-decoration: none;
+	transition: 0.32s;
+}
+
+a:hover, a:active {
+	color: #5AD1E5 !important;
+	border-color: #5AD1E5 !important;
+	text-decoration: none;
+	transition: 0.32s;
+}
+
+html {
+	font-size: 18pt;
+}
+
+@media (max-width: 1680px) {
+	html {
+		font-size: 13pt;
+	}
+}
+
+@media (max-width: 980px) {
+	html {
+		font-size: 11pt;
+	}
+}
+
+@media (max-width: 736px) {
+	.main {
+		padding: 0.375rem 2rem;
+	}
+
+	.tagline {
+		margin-bottom: 0.75rem;
+		letter-spacing: 0.4375rem;
+		width: calc(100% + 0.4375rem);
+		font-size: 2.125rem;
+		line-height: 1.5;
+	}
+}
+
+@media (max-width: 480px) {
+	.main {
+		text-align: center;
+		padding: 0.375rem 2rem;
+		align-items: center;
+		align-content: center;
+	}
+
+	.tagline {
+		margin-left: 0.8rem;
+		margin-bottom: 0.65625rem;
+	}
+
+	.major {
+		margin-bottom: 1.75rem;
+	}
+
+	.divider {
+		margin-bottom: 1.75rem;
+	}
+
+	.about {
+		text-align: justify;
+	}
+
+	.buttons li {
+		display: block;
+		padding: 0.4rem 0;
+	}
+}
+
+@media (max-width: 360px) {
+	.main {
+		padding: 0.28125rem 1.5rem;
+	}
+
+	.tagline {
+		margin-bottom: 0.5625rem;
+	}
+
+	.major {
+		margin-bottom: 1.5rem;
+	}
+
+	.divider {
+		margin-bottom: 1.5rem;
+	}
+
+	.buttons li {
+		padding: 0.27rem 0;
+	}
+}