Restyle and restructure

6 files changed, 118 insertions, 76 deletions

diff --git a/handle.go b/handle.go
index bab3c70..7414665 100644
--- a/handle.go
+++ b/handle.go
@@ -27,48 +27,12 @@ func (app *application) home(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
-func (app *application) about(w http.ResponseWriter, r *http.Request) {
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-
-	path := strings.Split(r.URL.Path, "/")
-	pathLen := len(path)
-
-	if pathLen == 3 && path[2] == "" {
-		http.Redirect(w, r, "/about", http.StatusFound)
-		return
-	} else if pathLen == 3 && path[2] != "" || pathLen > 3 {
-		app.notFound(w)
-		return
-	}
-	err := renderTemplate(w, "main/about", nil)
-	if err != nil {
-		app.serverError(w, err)
-		return
-	}
-}
-
-func (app *application) aggregate(w http.ResponseWriter, r *http.Request) {
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-
-	p, err := app.loadPosts("html"+strings.TrimSuffix(r.URL.Path, "/"), -1)
-	if err != nil {
-		app.notFound(w)
-	}
-
-	renderTemplate(w, "main/"+strings.TrimPrefix(strings.TrimSuffix(r.URL.Path, "/"), "/"), p)
-}
-
 func (app *application) post(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")
 
 	path := strings.Split(r.URL.Path, "/")
 	if len(path) > 4 {
 		app.notFound(w)
-	} else if r.URL.Path == "/projects" {
-		app.aggregate(w, r)
-	} else if path[2] == "" {
-		http.Redirect(w, r, "/"+path[1], http.StatusFound)
-		return
 	} else if len(path) == 4 && path[3] == "" {
 		http.Redirect(w, r, "/"+path[1]+"/"+path[2], http.StatusFound)
 	} else {
diff --git a/html/main/about.tmpl.html b/html/main/about.tmpl.html
index c5b2d4e..1ea7e99 100644
--- a/html/main/about.tmpl.html
+++ b/html/main/about.tmpl.html
@@ -4,18 +4,20 @@
 {{ define "canonical" }}/about{{end}}
 
 {{ define "main" }}
-    <h1>About</h1>
-    <section class="postBackground">
-      <div class="postContent">
-        <img src="/static/media/alex_profile_512.jpg" alt="Highschool senior photo portrait of Alex next to Yerkes Observatory." style="margin-bottom: 3rem"/>
-        <p>My name is Alex Scerba, a Junior in the College for Creative Studies: Transportation Design program in Detroit, MI.</p>
-        <p>Growing up in Lake Geneva, WI, I developed a passion for making and tinkering, which lead me down the path of industrial design. I love working with my hands, fixing up and riding motorcycles and cars, and learning new skills.</p>
-        <p>In addition to sketching, rendering, and modeling, my hobby skills include programming (<a href="https://github.com/ascerba/personal-website" target="_blank" rel="noopener noreferrer">this website</a>), bookbinding, and woodworking.</p>
-        <blockquote>"It's just a machine. Open it up and see what's wrong."</blockquote>
-        <p>This summer, I hope to secure an internship to learn more skills in the design and manufacturing industry.</p>
-        <p>Connect with me on LinkedIn: <a href="https://linkedin.com/in/ascerba" target="_blank" rel="noopener noreferrer">linkedin.com/in/ascerba</a></p>
-        <p>Contact me at <a href="mailto:me@alexscerba.com">me@alexscerba.com</a></p>
-        <p>View my <a href="/static/documents/Resume_Scerba_Fall2023.pdf">résumé</a>
+    <div class="uneven-column-grid">
+      <h1>About</h1>
+      <img src="/static/media/alex_profile_512.jpg" alt="Highschool senior photo portrait of Alex next to Yerkes Observatory." style="margin-bottom: 3rem"/>
+      <div class="postBackground">
+        <div class="postContent">
+          <p>My name is Alex Scerba, a Junior in the College for Creative Studies: Transportation Design program in Detroit, MI.</p>
+          <p>Growing up in Lake Geneva, WI, I developed a passion for making and tinkering, which lead me down the path of industrial design. I love working with my hands, fixing up and riding motorcycles and cars, and learning new skills.</p>
+          <p>In addition to sketching, rendering, and modeling, my hobby skills include programming (<a href="https://github.com/ascerba/personal-website" target="_blank" rel="noopener noreferrer">this website</a>), bookbinding, and woodworking.</p>
+          <blockquote>"It's just a machine. Open it up and see what's wrong."</blockquote>
+          <p>This summer, I hope to secure an internship to learn more skills in the design and manufacturing industry.</p>
+          <p>Connect with me on LinkedIn: <a href="https://linkedin.com/in/ascerba" target="_blank" rel="noopener noreferrer">linkedin.com/in/ascerba</a></p>
+          <p>Contact me at <a href="mailto:me@alexscerba.com">me@alexscerba.com</a></p>
+          <p>View my <a href="/static/documents/Resume_Scerba_Fall2023.pdf">résumé</a>
+        </div>
       </div>
-    </section>
+    </div>
 {{ end }}
\ No newline at end of file
diff --git a/html/main/index.tmpl.html b/html/main/index.tmpl.html
index 9abcd59..561fcdf 100644
--- a/html/main/index.tmpl.html
+++ b/html/main/index.tmpl.html
@@ -4,14 +4,26 @@
 
 {{ define "main" }}
       <h1>Design Projects</h1>
-      <section class="projects even-2-col-grid">
+      <div class="uneven-column">
+        <div class="side-info">
+          <img src="/static/media/alex_profile_512.jpg" alt="Highschool senior photo portrait of Alex next to Yerkes Observatory." style="margin-bottom: 2.5rem;"/>
+          <div style="grid-column-start: 1;">
+            <p>My name is Alex Scerba, a Junior in the College for Creative Studies: Transportation Design program in Detroit, MI.</p>
+            <p>Growing up in Lake Geneva, WI, I developed a passion for making and tinkering, which lead me down the path of industrial design. I love working with my hands, fixing up and riding motorcycles and cars, and learning new skills.</p>
+            <p>In addition to sketching, rendering, and modeling, my hobby skills include programming (<a href="https://github.com/ascerba/personal-website" target="_blank" rel="noopener noreferrer">this website</a>), bookbinding, and woodworking.</p>
+            <p>This summer, I hope to secure an internship to learn more skills in the design and manufacturing industry.</p>
+            <p>Connect with me on LinkedIn: <br><a href="https://linkedin.com/in/ascerba" target="_blank" rel="noopener noreferrer"><b>linkedin.com/in/ascerba</b></a></p>
+            <p>Contact me at <a href="mailto:me@alexscerba.com"><b>me@alexscerba.com</b></a></p>
+            <p>View my <a href="/static/documents/Resume_Scerba_Fall2023.pdf"><b>résumé</b></a>
+          </div>
+        </div>
+        <div class="projects even-2-col-grid">
 {{ range .Posts.Contents }}
-        <a href="/projects/{{ .FileName }}" class="thumbnail">
-          <div class="img-zoom">
+          <a href="/projects/{{ .FileName }}" class="thumbnail">
             {{ .Image }}
-          </div>
-          <p>{{ .Title }}</p>
-        </a>
+            <span class="title">{{ .Title }}</span>
+          </a>
 {{ end }}
-      </section>
+        </div>
+      </div>
 {{ end }}
\ No newline at end of file
diff --git a/html/master.tmpl.html b/html/master.tmpl.html
index 4132222..8cd9e87 100644
--- a/html/master.tmpl.html
+++ b/html/master.tmpl.html
@@ -23,7 +23,6 @@
         <div class="hamburger"><div></div></div>
         <nav aria-labelledby="global-navigation" class="main-nav">
           <a href="/">Home</a>
-          <a href="/about">About</a>
           <a href="/static/documents/Resume_Scerba_Fall2023.pdf">Résumé</a> <!--Résumé-->
         </nav>
       </div>
diff --git a/main.go b/main.go
index 0cc9284..8bfb33d 100644
--- a/main.go
+++ b/main.go
@@ -60,8 +60,6 @@ func main() {
 
 	mux.HandleFunc("/projects", app.post)
 	mux.HandleFunc("/projects/", app.post)
-	mux.HandleFunc("/about", app.about)
-	mux.HandleFunc("/about/", app.about)
 	mux.HandleFunc("/", app.home)
 
 	if *addr == ":443" {
diff --git a/static/style.css b/static/style.css
index 3809d9f..4db06f7 100644
--- a/static/style.css
+++ b/static/style.css
@@ -48,7 +48,7 @@ body {
 

 main {

     padding: 1rem;

-    padding-top: 4rem;

+    padding-top: 7rem;

     padding-bottom: 3rem;

     max-width: 85rem;

     margin-left: auto;

@@ -62,6 +62,7 @@ header {
     align-items: center;

     padding: 1rem;

     background-color: white;

+    border-bottom: 0.1rem solid black;

 }

 

 .logo-w-name {

@@ -82,11 +83,12 @@ header {
 }

 

 h1 {

+  display: none;

   font-size: 2.5rem;

-  color: rgb(190, 190, 190);

-  padding-left: 1rem;

-  border-left: 1rem solid rgb(59, 195, 219);

-  border-bottom: .12rem solid rgb(196, 196, 196);

+  color: rgb(143, 143, 143);

+  /* padding-left: 1rem; */

+  /* border-left: 1rem solid rgb(59, 195, 219); */

+  /* border-bottom: .12rem solid rgb(196, 196, 196); */

 }

 

 b {

@@ -116,32 +118,65 @@ b {
 .even-2-col-grid {

     display: grid;

     grid-template-columns: 1fr 1fr;

-    gap: 1rem;

 }

 

-img {

-    max-width: 100%;

+.uneven-column {

+	display: flex;

+	gap: 4rem;

 }

 

-.img-zoom {

-  overflow: hidden;

+.uneven-column-grid {

+  display: grid;

+  gap: 3rem;

+  grid-template-columns: 25rem 1fr;

 }

 

-.img-zoom img {

+.side-info {

+	min-width: 20rem;

+	max-width: 30%;

+	/*background-color: rgb(240,240,240);*/

+}

+

+img {

+    max-width: 100%;

+    height: auto;

+    vertical-align: middle;

+    font-style: italic;

+    shape-margin: 1rem;

+}

+

+.thumbnail img {

   width: fit-content;

-  aspect-ratio: 16/9;

+  aspect-ratio: 4/3;

   object-fit: cover;

   display: block;

   position: relative;

   z-index: -1;

+}

+

+.thumbnail {

+	position: relative;

+}

 

-  filter: grayscale(1);

-  transition: all .3s ease-in-out;

+.title {

+  z-index: -1;

+  opacity: 0;

+  display: block;

+	position: absolute;

+	top: 0;

+	left: 0;

+	padding: 8rem 1rem;

+	text-align: center;

+	font-weight: bold;

+	color: white;

+	background-color: rgba(27, 27, 27, 0.726);

+	min-width: 100%;

+	min-height: 100%;

+  transition: all 0.3s ease-in-out;

 }

 

-.thumbnail:hover img {

-  filter: grayscale(0);

-  transform: scale(1.05);

+.thumbnail:hover .title {

+	opacity: 100%;

 }

 

 a {

@@ -199,6 +234,34 @@ blockquote {
   display: none;

 }

 

+.back-button {

+  background-color: orange;

+}

+

+@media screen and (max-width: 82rem) {

+  main {

+    margin-left: 5rem;

+    margin-right: 5rem;

+  }

+	.uneven-column {

+		flex-direction: column-reverse;

+	}

+	.side-info {

+		max-width: 100%;

+	}

+  .side-info img {

+    display: block;

+    margin: auto;

+  }

+}

+

+@media screen and (max-width: 70rem) {

+  main {

+    margin-left: 1rem;

+    margin-right: 1rem;

+  }

+}

+

 @media screen and (min-width: 45rem) {

   address {

     display: flex;

@@ -206,6 +269,10 @@ blockquote {
 }

 

 @media screen and (max-width: 45rem) {

+    main {

+      margin-left: 0.5rem;

+      margin-right: 0.5rem;

+    }

     nav {

       display: none;

     }