About page and home page

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>