adding responsiveness rules to css

shared/projects.css

@@ -17,10 +17,19 @@
 .project-grid {
 	display: grid;
 	grid-gap: 50px 10px;
-	grid-template-columns: 50% 50%;
+	grid-template-columns: repeat(2, 1fr);
 	margin-top: 50px;
 }
 
+@media only screen and (max-width: 640px) {
+	.project-grid {
+		display: grid;
+		grid-gap: 50px 10px;
+		grid-template-columns: repeat(1, 1fr);
+		margin-top: 50px;
+	}
+}
+
 .project-grid > a {
 	padding: 20px;
 	border-radius: 7px;

shared/style.css

@@ -177,3 +177,23 @@ p.experience-grid-time {
 	overflow-x: scroll;
 	padding: 10px;
 }
+
+@media only screen and (max-width: 640px) {
+	.personal-info-grid {
+		display: grid;
+		gap: 20px;
+		grid-template-columns: 1fr;
+	}
+
+	.experience-grid {
+		display: grid;
+		grid-template-columns: 80%;
+		gap: 40px;
+	}
+
+	.site-header {
+		padding-top: 1px;
+		padding-bottom: 1px;
+		margin: 3px auto;
+	}
+}