mobile, add content

2020-04-14 18:40:03 -04:00 · 2020-04-14 18:40:03 -04:00 · 6de0611c1f
commit 6de0611c1f
parent d882cf1698
5 changed files with 420 additions and 728 deletions
--- a/backup.css
+++ b/backup.css
@ -1,450 +0,0 @@
-#bgWrap div:nth-child(1) {
-	-webkit-clip-path: polygon(2.0% 0, 2.1% 0, -8.0% 20%, -8.1% 20%);
-}
-
-#bgWrap div:nth-child(2) {
-	-webkit-clip-path: polygon(6.35% 0, 6.45% 0, -4.65% 22%, -4.75% 22%);
-}
-
-#bgWrap div:nth-child(3) {
-	-webkit-clip-path: polygon(10.7% 0, 10.8% 0, -1.3% 24%, -1.4% 24%);
-}
-
-#bgWrap div:nth-child(4) {
-	-webkit-clip-path: polygon(15.04% 0, 15.14% 0, 3.04% 24%, 2.94% 24%);
-}
-
-#bgWrap div:nth-child(5) {
-	-webkit-clip-path: polygon(19.39% 0, 19.49% 0, 8.39% 22%, 8.29% 22%);
-}
-
-#bgWrap div:nth-child(6) {
-	-webkit-clip-path: polygon(23.74% 0, 23.84% 0, 13.74% 20%, 13.64% 20%);
-}
-
-#bgWrap div:nth-child(7) {
-	-webkit-clip-path: polygon(28.09% 0, 28.19% 0, 19.09% 18%, 18.99% 18%);
-}
-
-#bgWrap div:nth-child(8) {
-	-webkit-clip-path: polygon(32.43% 0, 32.53% 0, 24.43% 16%, 24.33% 16%);
-}
-
-#bgWrap div:nth-child(9) {
-	-webkit-clip-path: polygon(36.78% 0, 36.88% 0, 28.78% 16%, 28.68% 16%);
-}
-
-#bgWrap div:nth-child(10) {
-	-webkit-clip-path: polygon(41.13% 0, 41.23% 0, 32.13% 18%, 32.03% 18%);
-}
-
-#bgWrap div:nth-child(11) {
-	-webkit-clip-path: polygon(45.48% 0, 45.58% 0, 35.48% 20%, 35.38% 20%);
-}
-
-#bgWrap div:nth-child(12) {
-	-webkit-clip-path: polygon(49.83% 0, 49.93% 0, 38.83% 22%, 38.73% 22%);
-}
-
-#bgWrap div:nth-child(13) {
-	-webkit-clip-path: polygon(54.17% 0, 54.27% 0, 42.17% 24%, 42.07% 24%);
-}
-
-#bgWrap div:nth-child(14) {
-	-webkit-clip-path: polygon(58.52% 0, 58.62% 0, 46.52% 24%, 46.42% 24%);
-}
-
-#bgWrap div:nth-child(15) {
-	-webkit-clip-path: polygon(62.87% 0, 62.97% 0, 51.87% 22%, 51.77% 22%);
-}
-
-#bgWrap div:nth-child(16) {
-	-webkit-clip-path: polygon(67.22% 0, 67.32% 0, 57.22% 20%, 57.12% 20%);
-}
-
-#bgWrap div:nth-child(17) {
-	-webkit-clip-path: polygon(71.57% 0, 71.67% 0, 62.57% 18%, 62.47% 18%);
-}
-
-#bgWrap div:nth-child(18) {
-	-webkit-clip-path: polygon(75.91% 0, 76.01% 0, 67.91% 16%, 67.81% 16%);
-}
-
-#bgWrap div:nth-child(19) {
-	-webkit-clip-path: polygon(80.26% 0, 80.36% 0, 72.26% 16%, 72.16% 16%);
-}
-
-#bgWrap div:nth-child(20) {
-	-webkit-clip-path: polygon(84.61% 0, 84.71% 0, 75.61% 18%, 75.51% 18%);
-}
-
-#bgWrap div:nth-child(21) {
-	-webkit-clip-path: polygon(88.96% 0, 89.06% 0, 78.96% 20%, 78.86% 20%);
-}
-
-#bgWrap div:nth-child(22) {
-	-webkit-clip-path: polygon(93.3% 0, 93.4% 0, 82.3% 22%, 82.2% 22%);
-}
-
-#bgWrap div:nth-child(23) {
-	-webkit-clip-path: polygon(97.65% 0, 97.75% 0, 85.65% 24%, 85.55% 24%);
-}
-
-#bgWrap div:nth-child(24) {
-	-webkit-clip-path: polygon(102.0% 0, 102.1% 0, 90.0% 24%, 89.9% 24%);
-}
-
-#bgWrap div:nth-child(25) {
-	-webkit-clip-path: polygon(106.35% 0, 106.45% 0, 95.35% 22%, 95.25% 22%);
-}
-
-#bgWrap div:nth-child(26) {
-	-webkit-clip-path: polygon(-9.5% 100%, -9.4% 100%, 0.5% 80%, 0.4% 80%);
-}
-
-#bgWrap div:nth-child(27) {
-	-webkit-clip-path: polygon(-5.15% 100%, -5.05% 100%, 5.85% 78%, 5.75% 78%);
-}
-
-#bgWrap div:nth-child(28) {
-	-webkit-clip-path: polygon(-0.8% 100%, -0.7% 100%, 11.2% 76%, 11.1% 76%);
-}
-
-#bgWrap div:nth-child(29) {
-	-webkit-clip-path: polygon(3.54% 100%, 3.64% 100%, 15.54% 76%, 15.44% 76%);
-}
-
-#bgWrap div:nth-child(30) {
-	-webkit-clip-path: polygon(7.89% 100%, 7.99% 100%, 18.89% 78%, 18.79% 78%);
-}
-
-#bgWrap div:nth-child(31) {
-	-webkit-clip-path: polygon(12.24% 100%, 12.34% 100%, 22.24% 80%, 22.14% 80%);
-}
-
-#bgWrap div:nth-child(32) {
-	-webkit-clip-path: polygon(16.59% 100%, 16.69% 100%, 25.59% 82%, 25.49% 82%);
-}
-
-#bgWrap div:nth-child(33) {
-	-webkit-clip-path: polygon(20.93% 100%, 21.03% 100%, 28.93% 84%, 28.83% 84%);
-}
-
-#bgWrap div:nth-child(34) {
-	-webkit-clip-path: polygon(25.28% 100%, 25.38% 100%, 33.28% 84%, 33.18% 84%);
-}
-
-#bgWrap div:nth-child(35) {
-	-webkit-clip-path: polygon(29.63% 100%, 29.73% 100%, 38.63% 82%, 38.53% 82%);
-}
-
-#bgWrap div:nth-child(36) {
-	-webkit-clip-path: polygon(33.98% 100%, 34.08% 100%, 43.98% 80%, 43.88% 80%);
-}
-
-#bgWrap div:nth-child(37) {
-	-webkit-clip-path: polygon(38.33% 100%, 38.43% 100%, 49.33% 78%, 49.23% 78%);
-}
-
-#bgWrap div:nth-child(38) {
-	-webkit-clip-path: polygon(42.67% 100%, 42.77% 100%, 54.67% 76%, 54.57% 76%);
-}
-
-#bgWrap div:nth-child(39) {
-	-webkit-clip-path: polygon(47.02% 100%, 47.12% 100%, 59.02% 76%, 58.92% 76%);
-}
-
-#bgWrap div:nth-child(40) {
-	-webkit-clip-path: polygon(51.37% 100%, 51.47% 100%, 62.37% 78%, 62.27% 78%);
-}
-
-#bgWrap div:nth-child(41) {
-	-webkit-clip-path: polygon(55.72% 100%, 55.82% 100%, 65.72% 80%, 65.62% 80%);
-}
-
-#bgWrap div:nth-child(42) {
-	-webkit-clip-path: polygon(60.07% 100%, 60.17% 100%, 69.07% 82%, 68.97% 82%);
-}
-
-#bgWrap div:nth-child(43) {
-	-webkit-clip-path: polygon(64.41% 100%, 64.51% 100%, 72.41% 84%, 72.31% 84%);
-}
-
-#bgWrap div:nth-child(44) {
-	-webkit-clip-path: polygon(68.76% 100%, 68.86% 100%, 76.76% 84%, 76.66% 84%);
-}
-
-#bgWrap div:nth-child(45) {
-	-webkit-clip-path: polygon(73.11% 100%, 73.21% 100%, 82.11% 82%, 82.01% 82%);
-}
-
-#bgWrap div:nth-child(46) {
-	-webkit-clip-path: polygon(77.46% 100%, 77.56% 100%, 87.46% 80%, 87.36% 80%);
-}
-
-#bgWrap div:nth-child(47) {
-	-webkit-clip-path: polygon(81.8% 100%, 81.9% 100%, 92.8% 78%, 92.7% 78%);
-}
-
-#bgWrap div:nth-child(48) {
-	-webkit-clip-path: polygon(86.15% 100%, 86.25% 100%, 98.15% 76%, 98.05% 76%);
-}
-
-#bgWrap div:nth-child(49) {
-	-webkit-clip-path: polygon(90.5% 100%, 90.6% 100%, 102.5% 76%, 102.4% 76%);
-}
-
-#bgWrap div:nth-child(50) {
-	-webkit-clip-path: polygon(94.85% 100%, 94.95% 100%, 105.85% 78%, 105.75% 78%);
-}
-
-#bgWrap div:nth-child(51) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(3.0% 0, 3.1% 0, -9.0% 24%, -9.1% 24%);
-}
-
-#bgWrap div:nth-child(52) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(7.35% 0, 7.45% 0, -5.15% 25%, -5.25% 25%);
-}
-
-#bgWrap div:nth-child(53) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(11.7% 0, 11.8% 0, -2.3% 28%, -2.4% 28%);
-}
-
-#bgWrap div:nth-child(54) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(16.04% 0, 16.14% 0, 1.54% 29%, 1.44% 29%);
-}
-
-#bgWrap div:nth-child(55) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(20.39% 0, 20.49% 0, 6.89% 27%, 6.79% 27%);
-}
-
-#bgWrap div:nth-child(56) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(24.74% 0, 24.84% 0, 12.24% 25%, 12.14% 25%);
-}
-
-#bgWrap div:nth-child(57) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(29.09% 0, 29.19% 0, 18.59% 21%, 18.49% 21%);
-}
-
-#bgWrap div:nth-child(58) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(33.43% 0, 33.53% 0, 23.43% 20%, 23.33% 20%);
-}
-
-#bgWrap div:nth-child(59) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(37.78% 0, 37.88% 0, 27.28% 21%, 27.18% 21%);
-}
-
-#bgWrap div:nth-child(60) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(42.13% 0, 42.23% 0, 30.63% 23%, 30.53% 23%);
-}
-
-#bgWrap div:nth-child(61) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(46.48% 0, 46.58% 0, 34.98% 23%, 34.88% 23%);
-}
-
-#bgWrap div:nth-child(62) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(50.83% 0, 50.93% 0, 37.33% 27%, 37.23% 27%);
-}
-
-#bgWrap div:nth-child(63) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(55.17% 0, 55.27% 0, 41.67% 27%, 41.57% 27%);
-}
-
-#bgWrap div:nth-child(64) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(59.52% 0, 59.62% 0, 45.02% 29%, 44.92% 29%);
-}
-
-#bgWrap div:nth-child(65) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(63.87% 0, 63.97% 0, 50.87% 26%, 50.77% 26%);
-}
-
-#bgWrap div:nth-child(66) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(68.22% 0, 68.32% 0, 56.72% 23%, 56.62% 23%);
-}
-
-#bgWrap div:nth-child(67) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(72.57% 0, 72.67% 0, 62.07% 21%, 61.97% 21%);
-}
-
-#bgWrap div:nth-child(68) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(76.91% 0, 77.01% 0, 66.91% 20%, 66.81% 20%);
-}
-
-#bgWrap div:nth-child(69) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(81.26% 0, 81.36% 0, 71.26% 20%, 71.16% 20%);
-}
-
-#bgWrap div:nth-child(70) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(85.61% 0, 85.71% 0, 75.11% 21%, 75.01% 21%);
-}
-
-#bgWrap div:nth-child(71) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(89.96% 0, 90.06% 0, 77.46% 25%, 77.36% 25%);
-}
-
-#bgWrap div:nth-child(72) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(94.3% 0, 94.4% 0, 80.8% 27%, 80.7% 27%);
-}
-
-#bgWrap div:nth-child(73) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(98.65% 0, 98.75% 0, 85.15% 27%, 85.05% 27%);
-}
-
-#bgWrap div:nth-child(74) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(103.0% 0, 103.1% 0, 89.0% 28%, 88.9% 28%);
-}
-
-#bgWrap div:nth-child(75) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(107.35% 0, 107.45% 0, 94.85% 25%, 94.75% 25%);
-}
-
-#bgWrap div:nth-child(76) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(-6.5% 100%, -6.4% 100%, 5.0% 77%, 4.9% 77%);
-}
-
-#bgWrap div:nth-child(77) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(-2.15% 100%, -2.05% 100%, 10.85% 74%, 10.75% 74%);
-}
-
-#bgWrap div:nth-child(78) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(2.2% 100%, 2.3% 100%, 15.7% 73%, 15.6% 73%);
-}
-
-#bgWrap div:nth-child(79) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(6.54% 100%, 6.64% 100%, 21.04% 71%, 20.94% 71%);
-}
-
-#bgWrap div:nth-child(80) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(10.89% 100%, 10.99% 100%, 24.39% 73%, 24.29% 73%);
-}
-
-#bgWrap div:nth-child(81) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(15.24% 100%, 15.34% 100%, 26.74% 77%, 26.64% 77%);
-}
-
-#bgWrap div:nth-child(82) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(19.59% 100%, 19.69% 100%, 30.59% 78%, 30.49% 78%);
-}
-
-#bgWrap div:nth-child(83) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(23.93% 100%, 24.03% 100%, 33.93% 80%, 33.83% 80%);
-}
-
-#bgWrap div:nth-child(84) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(28.28% 100%, 28.38% 100%, 37.78% 81%, 37.68% 81%);
-}
-
-#bgWrap div:nth-child(85) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(32.63% 100%, 32.73% 100%, 43.13% 79%, 43.03% 79%);
-}
-
-#bgWrap div:nth-child(86) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(36.98% 100%, 37.08% 100%, 48.98% 76%, 48.88% 76%);
-}
-
-#bgWrap div:nth-child(87) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(41.33% 100%, 41.43% 100%, 54.33% 74%, 54.23% 74%);
-}
-
-#bgWrap div:nth-child(88) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(45.67% 100%, 45.77% 100%, 59.67% 72%, 59.57% 72%);
-}
-
-#bgWrap div:nth-child(89) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(50.02% 100%, 50.12% 100%, 64.52% 71%, 64.42% 71%);
-}
-
-#bgWrap div:nth-child(90) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(54.37% 100%, 54.47% 100%, 67.87% 73%, 67.77% 73%);
-}
-
-#bgWrap div:nth-child(91) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(58.72% 100%, 58.82% 100%, 70.22% 77%, 70.12% 77%);
-}
-
-#bgWrap div:nth-child(92) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(63.07% 100%, 63.17% 100%, 74.07% 78%, 73.97% 78%);
-}
-
-#bgWrap div:nth-child(93) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(67.41% 100%, 67.51% 100%, 77.91% 79%, 77.81% 79%);
-}
-
-#bgWrap div:nth-child(94) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(71.76% 100%, 71.86% 100%, 82.26% 79%, 82.16% 79%);
-}
-
-#bgWrap div:nth-child(95) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(76.11% 100%, 76.21% 100%, 86.61% 79%, 86.51% 79%);
-}
-
-#bgWrap div:nth-child(96) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(80.46% 100%, 80.56% 100%, 92.46% 76%, 92.36% 76%);
-}
-
-#bgWrap div:nth-child(97) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(84.8% 100%, 84.9% 100%, 98.3% 73%, 98.2% 73%);
-}
-
-#bgWrap div:nth-child(98) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(89.15% 100%, 89.25% 100%, 102.65% 73%, 102.55% 73%);
-}
-
-#bgWrap div:nth-child(99) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(93.5% 100%, 93.6% 100%, 108.0% 71%, 107.9% 71%);
-}
-
-#bgWrap div:nth-child(100) {
-	background-color: #272727;
-	-webkit-clip-path: polygon(97.85% 100%, 97.95% 100%, 110.35% 75%, 110.25% 75%);
-}
-
--- a/cssgen.py
+++ b/cssgen.py
@ -50,10 +50,14 @@ def main():
 		initial.append(p0)

 	for i in range(4*n):	# Animations
-		if i in range(50,100):
-			f.write(f'#bgWrap div:nth-child({i+1}) {{\n\tanimation: s{i+1} ease-in-out 5s infinite alternate;\n\tbackground-color: #272727;\n\t{initial[i]}\n}}\n\n')
-		else:
-			f.write(f'#bgWrap div:nth-child({i+1}) {{\n\tanimation: s{i+1} ease-in-out 5s infinite alternate;\n\t{initial[i]}\n}}\n\n')
+		f.write(f'#bgWrap div:nth-child({i+1}) {{\n\tanimation: s{i+1} ease-in-out 3s infinite alternate;\n\t')
+		if i in range(17, 25): f.write(f'background-color: #272727;')
+		if i in range(33, 50): f.write(f'background-color: #272727;')
+		if i in range(50, 67): f.write(f'background-color: #272727;')
+		if i in range(67, 75): f.write(f'background-color: #b5b5b5;')
+		if i in range(75, 83): f.write(f'background-color: #272727;')
+		if i in range(83, 100): f.write(f'background-color: #b5b5b5;')
+		f.write(f'\n\t{initial[i]}\n}}\n\n')


 if __name__ == "__main__":
--- a/index.css
+++ b/index.css
@ -12,6 +12,21 @@ html, body {
 	background: #fd558f;
 }

+a {
+	color: #fd558f;
+	text-decoration: none;
+	font-weight: 500;
+
+	-webkit-transition: color 0.3s cubic-bezier(.25, .8, .25, 1);
+	transition: color 0.3s cubic-bezier(.25, .8, .25, 1);
+	-moz-transition: color 0.3s cubic-bezier(.25, .8, .25, 1);
+	-ms-transition: color 0.3s cubic-bezier(.25, .8, .25, 1);
+}
+
+a:hover {
+	color: #ff72a3;
+}
+
 #bgWrap {
 	width: 100%; height: 100%;
 	position: absolute;
@ -27,6 +42,12 @@ html, body {
 	background-color: white;
 }

+#bgWrap div:nth-child(101) {
+	-webkit-clip-path: polygon(70% 0, 100% 0, 100% 100%, 20% 100%);
+	background-color: #e6e6df;
+	z-index: -1;
+}
+
 #mainWrap {
 	width: 100%; height: 100%;
 	display: grid;
@ -44,6 +65,7 @@ html, body {
 	font-size: 300%;
 	font-weight: 300;
 	margin: 0;
+
 }

 #name h5 {
@ -60,6 +82,7 @@ html, body {
 	grid-column: 2;
 	height: 50%;
 	width: 60%;
+	color: black;

 	display: grid;
 	grid-template-columns: 1fr 29fr;
@ -67,6 +90,10 @@ html, body {
 	grid-column-gap: 10%;
 }

+input {
+	pointer-events: none;
+}
+
 #tab1, label[for='tab1'] { grid-row: 4; grid-column: 1; }
 #tab2, label[for='tab2'] { grid-row: 5; grid-column: 1; }
 #tab3, label[for='tab3'] { grid-row: 6; grid-column: 1; }
@ -82,7 +109,6 @@ html, body {
 	transition: 0.3s opacity ease-in, 0.3s transform ease;
 	transition: 0.3s opacity ease-in, 0.3s transform ease, 0.3s -webkit-transform ease;
 	grid-column: 2;
-	grid-row: 1 / 10;
 	font-size: 200%;
 }

@ -92,34 +118,33 @@ html, body {
 	-ms-user-select: none;
 	user-select: none;

-	border: 1px solid white;
+	border: 1px solid black;
 	border-radius: 3px;
 	height: 0;
    padding-top: calc(100% - 1px);
    cursor: pointer;

-	-webkit-transition: background-color 0.15s cubic-bezier(.25, .8, .25, 1);
-	transition: background-color 0.15s cubic-bezier(.25, .8, .25, 1);
-	-moz-transition: background-color 0.15s cubic-bezier(.25, .8, .25, 1);
-	-ms-transition: background-color 0.15s cubic-bezier(.25, .8, .25, 1);
+	-webkit-transition: background-color 0.15s ease-out;
+	transition: background-color 0.15s ease-out;
+	-moz-transition: background-color 0.15s ease-out;
+	-ms-transition: background-color 0.15s ease-out;
 }

-.tab + label:hover {
-	background-color: rgba(255, 255, 255, 0.1);
+label:hover {
+	background-color: #ff72a3;
 }

 .tab:checked:nth-of-type(1) ~ label:nth-of-type(1),
 .tab:checked:nth-of-type(2) ~ label:nth-of-type(2),
 .tab:checked:nth-of-type(3) ~ label:nth-of-type(3) {
-	background-color: rgba(255, 255, 255, 0.3);
+	background-color: #fd558f;
 }

 .content {
 	opacity: 0;
 	position: absolute;
-	left: 0;
-	grid-row: 1 / 10;
-	z-index: -1;
+	top: 0; left: 0;
+	grid-row: 2 / 10;
 	padding: 10%;
 	
 }
@ -133,14 +158,57 @@ input[type='radio'] {
 	font-weight: 400;
 	font-size: 100%;
 	margin: 0;
-	text-shadow: 6px 6px #272727;
+	text-shadow: 6px 6px #b5b5b5;
 }

 .content p {
 	margin-left: 2%;
 	text-align: justify;
-	font-weight: 300;
+	font-weight: 400;
 	font-size: 50%;
-	color: #fefefe;
-
+	color: black;
+}
+
+@media only screen and (max-width: 600px) {
+
+	#bgWrap div {
+		display: none;
+	}
+
+	#bgWrap div:nth-child(101) {
+		-webkit-clip-path: polygon(0 40%, 100% 30%, 100% 100%, 0 100%);
+		background-color: #e6e6df;
+		z-index: -1;
+		display: block;
+	}
+
+	#mainWrap {
+		width: 100%; height: 100%;
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr 2fr;
+	}
+
+	#bgWrap {
+		width: 100%; height: 100%;
+		position: absolute;
+		top: 0; left: 0;
+		background-color: #121212; 
+		z-index: -1;
+	}
+
+	#name {
+		grid-row: 1;
+		grid-column: 1;
+	}
+
+	#tabs {
+		height: 80%; width: 80%;
+		grid-row: 2;
+		grid-column: 1;
+	}
+
+	.content {
+		grid-row: 1 / 10;
+	}
 }
--- a/index.html
+++ b/index.html
@ -6,7 +6,8 @@
    <link rel="icon" href="./favicon.ico?v=2">
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./output.css">
-    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400&&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./outputmob.css">
+    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 </head>
 <body>
@ -21,6 +22,7 @@
 		<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
 		<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
 		<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
+		<div></div>
 	</div>
 	<div id="mainWrap">
 		<div id="name">
@ -40,7 +42,7 @@
 			<div class="content">
 		    	<h2>ABOUT</h2>
 		    	<p>
-		    		My name is Kenneth Jao and I'm a developer, electrical and computer engineer, and just generally a problem solver.
+		    		My name is <a href="https://kjao.me/resume">Kenneth Jao</a> and I'm a developer, electrical and computer engineer, and just generally a problem solver.
 		    	</p>
 		    	<p>
 		    		As a developer, I specialize in full-stack development, network design and security, and system administration.
@ -51,9 +53,25 @@
 			</div>
 			<div class="content">
 				<h2>PROJECTS</h2>
+				<p>
+					I work on many projects, most of which can be found at my <a href="https://github.com/ksjdragon/">GitHub</a>. The most significant ones are found on this website.
+				</p>
+				<p>
+					Most of my projects are web based, or at least acessible by web, since I find that it's the easiest way to deliver content.
+				</p>
+				<p>
+					<a href="https://epicycles.kjao.me/">Epicycles</a><br>
+					<a href="https://binbin.kjao.me/">BinBin</a>
+				</p>
 			</div>
 			<div class="content">
-				<h2>Projects</h2>
+				<h2>OTHER</h2>
+				<p>
+					Outside of developing, I also have a <a href="https://blog.kjao.me/">blog</a> where I write about puzzles or problems, things I come across, or whatever interests me.
+				</p>
+				<p>
+					I'm also a music lover, playing instruments since I was little. In fact, songs I've made can be found <a href="https://soundcloud.com/f_wrld">here</a>.
+				</p>
 			</div>
 		</div>
 	</div>
--- a/output.css
+++ b/output.css