Contact page

assets/css/page/contact.css

@@ -0,0 +1,15 @@
+main h2 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+main p {
+  margin-bottom: 3rem;
+}
+
+@media only screen and (max-width: 1024px) {
+  main h2 {
+    font-size: 1.75rem;
+  }
+}
+

assets/css/partials/contact-form.css

@@ -0,0 +1,39 @@
+:root {
+  --input-light-background: #f3f3f3;
+  --input-dark-background: #2d2d2d;
+  --button-light-background: #131212;
+  --button-dark-background: #353535;
+}
+
+input,
+textarea,
+button {
+  border: none;
+  border-radius: 0.5625rem;
+  color: var(--text);
+}
+
+button {
+  padding: 1rem 2.8rem;
+  background-color: var(--button-background);
+  color: var(--white);
+}
+
+input,
+textarea {
+  padding: 1.2rem 1.9rem;
+  background-color: var(--input-background);
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+  row-gap: 1.7rem;
+}
+
+form input,
+form textarea {
+  width: 100%;
+}

assets/js/baseof.js

@@ -37,6 +37,18 @@ function loadTheme() {
       ? 'var(--nav-light-background)'
       : 'var(--nav-dark-background)'
   );
+  root.style.setProperty(
+    '--input-background',
+    theme === 'light'
+      ? 'var(--input-light-background)'
+      : 'var(--input-dark-background)'
+  );
+  root.style.setProperty(
+    '--button-background',
+    theme === 'light'
+      ? 'var(--button-light-background)'
+      : 'var(--button-dark-background)'
+  );
   root.style.setProperty(
     '--footer-background',
     theme === 'light'

content/contact.md

@@ -0,0 +1,9 @@
+---
+layout: "contact"
+title: "Contact"
+date: 2023-10-18T20:03:43+01:00
+---
+
+## Contact
+
+Here you can contact me personally for any questions or opportunities.

hugo.toml

@@ -1,6 +1,7 @@
-baseURL = 'http://hazemkrimi.tech/'
 languageCode = 'en-us'
 title = 'Hazem Krimi'
+[params]
+    formSpreeURL = 'https://formspree.io/f/xoqpgyge'
 [module]
 [menu]
     [[menu.main]]

layouts/page/contact.html

@@ -0,0 +1,11 @@
+{{ define "styles" }}
+    {{ $styles := resources.Get "css/page/contact.css" | toCSS | minify }}
+
+    <link rel="stylesheet" href="{{ $styles.Permalink }}" />
+{{ end }}
+
+{{ define "main" }}
+    {{ .Content }}
+    
+    {{ partial "contact-form.html" . }}
+{{ end }}

layouts/partials/contact-form.html

@@ -0,0 +1,10 @@
+{{ $styles := resources.Get "css/partials/contact-form.css" | toCSS | minify }}
+
+<link rel="stylesheet" href="{{ $styles.Permalink }}">
+
+<form action="{{ .Site.Params.formSpreeURL }}" method="post">
+  <input name="name" placeholder="Your name" type="text" />
+  <input name="email" placeholder="Your email" type="email" />
+  <textarea cols="30" name="message" placeholder="Enter your message here" rows="10"></textarea>
+  <button type="submit">Submit</button>
+</form>

layouts/partials/header.html

@@ -42,11 +42,9 @@
 
 <nav>
   <div id="menus">
-    <a href="/">Home</a>
+    {{ range site.Menus.main.Sort.ByWeight }}
-    <a href="/about">About</a>
+      <a {{ printf "href=%q" .URL | safeHTMLAttr }}>{{ .Name }}</a>
-    <a href="/projects">Projects</a>
+    {{ end }}
-    <a href="/blog">Blog</a>
-    <a href="/contact">Contact</a>
   </div>
   <hr>
   <div id="links">