About page and home page

layouts/_default/about.html

@@ -0,0 +1,17 @@
+{{ define "styles" }}
+    {{ $styles := resources.Get "css/about.css" | toCSS | minify }}
+
+    <link rel="stylesheet" href="{{ $styles.Permalink }}" />
+{{ end }}
+
+{{ define "main" }}
+    {{ $faceImage := resources.Get "images/big-face.png" }}
+    
+    <section>
+        <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face">
+        {{ .Content }}
+    </section>
+    
+    <h2>Contact</h2>
+    {{ partial "contact-form.html" . }}
+{{ end }}

layouts/index.html

@@ -4,8 +4,33 @@
     <link rel="stylesheet" href="{{ $styles.Permalink }}" />
 {{ end }}
 {{ define "main" }}
-    <section>
-        <h2>Projects</h2>
+    {{ $faceImage := resources.Get "images/big-face.png" }}
+    
+    <section id="intro">
+        <div>
+            <h1>Hi! I am <span>Hazem</span>, a sofware engineer currently working at <a href="https://finteum.com" target="_blank">Finteum</a></h1>
+            <p>I have over two years of experience mainly working on web and cross platform mobile applications in E-Commerce, Fintech, Auditing and Compliance. My role was mainly working on the front-end.</p>
+            <div id="action-buttons">
+                <a href="/blog">Blog</a>
+                <a href="/contact">Contact</a>
+            </div>
+        </div>
+        <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face">
+    </section>
+
+    <section id="about">
+        <h2>About</h2>
+        <p>Tinkering is what got me to where I am now as a professional engineer.</p>
+        {{ partial "about-card.html" . }}
+    </section>
+
+    <section id="projects">
+        <div>
+            <h2>Projects</h2>
+            <a class="read-more" href="/projects">
+                View more
+            </a>
+        </div>
         <p>These are all the projects I worked on personally and professionally.</p>
         {{ range (where .Site.Pages "Section" "projects") }}
             {{ range .Pages }}
@@ -14,8 +39,13 @@
         {{ end }}
     </section>
     
-    <section>
-        <h2>Blog</h2>
+    <section id="blog">
+        <div>
+            <h2>Blog</h2>
+            <a class="read-more" href="/blog">
+                View more
+            </a>
+        </div>
         <p>These are articles about things I learned about software engineering.</p>
         {{ range (where .Site.Pages "Section" "blog") }}
             {{ range .Pages }}
@@ -24,7 +54,7 @@
         {{ end }}
     </section>
 
-    <section>
+    <section id="contact">
         <h2>Contact</h2>
         <p>Here you can contact me personally for any questions or opportunities.</p>
 

layouts/partials/about-card.html

@@ -0,0 +1,28 @@
+{{ $styles := resources.Get "css/partials/about-card.css" | toCSS | minify }}
+
+<link rel="stylesheet" href="{{ $styles.Permalink }}" />
+
+{{ $cv := resources.Get "cv.pdf" }}
+{{ $faceImage := resources.Get "images/borded-face.png" }}
+
+<div id="about-card">
+  <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face" />
+  <div>
+    <p>
+      My programming experience is mostly non-professional but it was essential
+      for my development Even though I am working professionally for over two
+      years now, I got into programming much longer than that. I got into web
+      development in the Summer of 2018 as I started learning the basics: HTML,
+      CSS, JS and most importantly how the web works by building very small
+      projects.
+    </p>
+    <div id="links">
+      <a href="{{ $cv.Permalink }}" target="_blank">
+        Download CV
+      </a>
+      <a class="read-more" href="/about">
+        Read more
+      </a>
+    </div>
+  </div>
+</div>

layouts/partials/card.html

@@ -2,7 +2,7 @@
 
 <link rel="stylesheet" href="{{ $styles.Permalink }}" />
 
-<article>
+<article class="card">
   <div>
     <h3>{{ .Title }}</h3>
     <p>{{ .Params.description }}</p>

layouts/partials/header.html

@@ -9,7 +9,7 @@
 
 <header>
   <div id="header-face">
-    <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi" />
+    <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face" />
     <h3>Hazem Krimi</h3>
   </div>
   <div id="menus">