about

7 files changed, 149 insertions, 46 deletions

diff --git a/config.toml b/config.toml
index 3b6f2d8..08893be 100644
--- a/config.toml
+++ b/config.toml
@@ -5,6 +5,8 @@ title = "Hugo-blog"
 [params]
   favicon = "/images/hugo.png"
   description = "Portfolio and personal blog of gurusabarish"
+
+  # Home
   name = "Gurusabarish"
   profile = "/images/avatar-370-456322.webp"
   github = "https://github.com/gurusabarish"
@@ -12,6 +14,14 @@ title = "Hugo-blog"
   twitter = "https://twitter.com/gurusabarishh"
   instagram = "https://instagram.com/gurusabarishh"
 
+  # Do things { Please change the svg icons width="3em" height="3em" }
+  thing1 = "Python"
+  thing2 = "Machine learning"
+  thing3 = "Build things for web"
+  thing1_des = "I build something beautiful using python."
+  thing2_des = "I train robust models for various tasks."
+  thing3_des = "I love to build things for web."
+
 # Navbar Menus
 [[menu.main]]
 name    = "Blog"
diff --git a/layouts/index.html b/layouts/index.html
index faaf613..18948ec 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -21,8 +21,10 @@
     {{- partial "header.html" . -}}
 
     {{- partial "sections/home.html" . -}}
+    {{- partial "sections/do_things.html" . -}}
     {{- partial "sections/about.html" . -}}
 
+
     {{- partial "footer.html" . -}}
     {{- partial "scripts.html" . -}}
 </body>
diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
index ca83633..371142f 100644
--- a/layouts/partials/sections/about.html
+++ b/layouts/partials/sections/about.html
@@ -1,55 +1,40 @@
 <section>
-    <div class="p-3 do-things bg-white text-center" id="do-things">
-        <div class="things-i-do text-primary font-weight-bold">
-            Things I do
+    <div class="about p-3" id="about">
+        <div class="container">
+            <div class="about-me text-center font-weight-bold text-secondary">About Me</div>
         </div>
-        <div class="p-5">
-            <div class="row justify-content-center">
-                <div class="col-md-3 col-sm offset">
-                    <div class="things shadow rounded p-5 mt-5 bg-warning">
-                        <svg width="3em" height="3em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
-                            <path
-                                d="M255.03 261.65c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L253.25 192l35.71-35.72c6.25-6.25 6.25-16.38 0-22.63l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0l-58.34 58.34c-6.25 6.25-6.25 16.38 0 22.63l58.35 58.34zm96.01-11.3l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0l58.34-58.34c6.25-6.25 6.25-16.38 0-22.63l-58.34-58.34c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L386.75 192l-35.71 35.72c-6.25 6.25-6.25 16.38 0 22.63zM624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z" />
-                        </svg>
-                        <div class="p-2 font-weight-bold">
-                            Python
-                        </div>
-                        <div class="p-2 text-primary">
-                            I build something beautiful using python.
-                        </div>
-                    </div>
-                </div>
+        <div class="row justify-content-center ">
+            <div class="col-md-3 pt-5 text-center">
+                <img src="/images/gurusabarish.jpg" width="200px" alt="..." class="rounded">
+                <div class="about-me jop font-weight-bold text-secondary">web developper</div>
 
-                <div class="col-md-3 col-sm offset">
-                    <div class="things shadow rounded p-5 mt-5 bg-warning">
-                        <svg width="3em" height="3em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
-                            <path
-                                d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z" />
-                        </svg>
-                        <div class="p-2 font-weight-bold">
-                            Machine learning
-                        </div>
-                        <div class="p-2 text-primary">
-                            I train robust models for various tasks.
-                        </div>
-                    </div>
-                </div>
+                {{ if .Site.Params.linkedin }}
+                <a class="text-white" href="{{ .Site.Params.linkedin }}" target="_blank">
+                    <svg class="text-primary" width="2em" height="2em" fill="currentColor"
+                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                        <path
+                            d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
+                    </svg>
+                </a>
+                {{ end }}
+
+            </div>
+            <div class="col-md-7 pt-5 ">
+                <div class="about-content text-secondary p-3">
+                    Hi, I'm <span class="text-light">Gurusabarish</span>, a passionate <span class="text-light">web
+                        developer and ML engineer</span> from India. I tend to make use
+                    of modern web technologies to build websites that looks great, feels fantastic, and functions
+                    correctly.
 
-                <div class="col-md-3 col-sm">
-                    <div class="things shadow rounded p-5 mt-5 bg-warning">
-                        <svg width="3em" height="3em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
-                            <path
-                                d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z" />
-                        </svg>
-                        <div class="p-2 font-weight-bold">
-                            Build things for web
-                        </div>
-                        <div class="p-2 text-primary">
-                            I love to build things for web.
-                        </div>
-                    </div>
+                    <br><br>
+                    You can check my <a href="/blog">blog</a> and my <a href="https://github.com/gurusabarish"
+                        target="_blank">github</a> for more details.
+                </div>
+                <div class="text-center">
+                    <button type="button" class="btn btn-info">resume</button>
                 </div>
             </div>
         </div>
     </div>
+    </div>
 </section>
\ No newline at end of file
diff --git a/layouts/partials/sections/do_things.html b/layouts/partials/sections/do_things.html
new file mode 100644
index 0000000..ec26878
--- /dev/null
+++ b/layouts/partials/sections/do_things.html
@@ -0,0 +1,71 @@
+<section>
+    <div class="p-3 do-things bg-light text-center" id="do-things">
+        <div class="things-i-do text-primary font-weight-bold">
+            Things I do
+        </div>
+
+        <div class="p-5">
+            <div class="row justify-content-center">
+                <!-- Thing 1 -->
+                <div class="col-md-3 col-sm">
+                    <div class="things shadow rounded p-5 mt-5 bg-warning">
+                        <svg width="3em" height="3em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+                            <path
+                                d="M255.03 261.65c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L253.25 192l35.71-35.72c6.25-6.25 6.25-16.38 0-22.63l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0l-58.34 58.34c-6.25 6.25-6.25 16.38 0 22.63l58.35 58.34zm96.01-11.3l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0l58.34-58.34c6.25-6.25 6.25-16.38 0-22.63l-58.34-58.34c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L386.75 192l-35.71 35.72c-6.25 6.25-6.25 16.38 0 22.63zM624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z" />
+                        </svg>
+                        <div class="p-2 font-weight-bold">
+                            {{ if .Site.Params.thing1 }}
+                            {{ .Site.Params.thing1 }}
+                            {{ end }}
+                        </div>
+                        <div class="py-4 text-primary">
+                            {{ if .Site.Params.thing1_des }}
+                            {{ .Site.Params.thing1_des }}
+                            {{ end }}
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Thing 2 -->
+                <div class="col-md-3 col-sm">
+                    <div class="things shadow rounded p-5 mt-5 bg-warning">
+                        <svg width="3em" height="3em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+                            <path
+                                d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z" />
+                        </svg>
+                        <div class="p-2 font-weight-bold">
+                            {{ if .Site.Params.thing2 }}
+                            {{ .Site.Params.thing2 }}
+                            {{ end }}
+                        </div>
+                        <div class="py-4 text-primary">
+                            {{ if .Site.Params.thing2_des }}
+                            {{ .Site.Params.thing2_des }}
+                            {{ end }}
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Thing 3 -->
+                <div class="col-md-3 col-sm">
+                    <div class="things shadow rounded p-5 mt-5 bg-warning">
+                        <svg width="3em" height="3em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+                            <path
+                                d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z" />
+                        </svg>
+                        <div class="p-2 font-weight-bold">
+                            {{ if .Site.Params.thing3 }}
+                            {{ .Site.Params.thing3 }}
+                            {{ end }}
+                        </div>
+                        <div class="py-4 text-primary">
+                            {{ if .Site.Params.thing3_des }}
+                            {{ .Site.Params.thing3_des }}
+                            {{ end }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/static/css/index.css b/static/css/index.css
index f5e2693..9edd141 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -96,9 +96,44 @@
 
 .things-i-do {
     font-family: 'Alata', sans-serif;
+    font-size: 25px;
 }
 
 .things {
     height: 40vh;
     overflow: hidden;
+}
+
+/* about */
+
+.about {
+    height: 70vh;
+    background: url("/images/about-background.jpg");
+    background-position: center;
+    /*background-color: #63a4ff;
+    background-image: linear-gradient(315deg, #63a4ff 0%, #83eaf1 74%);*/
+}
+
+.jop {
+    font-size: 30px;
+}
+
+.about-me {
+    font-family: 'Alata', sans-serif;
+    font-size: 25px;
+}
+
+.about-content {
+    font-size: 20px;
+}
+
+.about-content a:hover {
+    text-decoration-line: none;
+    color: black;
+}
+
+@media only screen and (max-width: 600px) {
+    .about {
+        height: auto;
+    }
 }
\ No newline at end of file
diff --git a/static/images/about-background.jpg b/static/images/about-background.jpg
new file mode 100644
index 0000000..eadae0d
--- /dev/null
+++ b/static/images/about-background.jpg
diff --git a/static/images/gurusabarish.jpg b/static/images/gurusabarish.jpg
new file mode 100644
index 0000000..8318222
--- /dev/null
+++ b/static/images/gurusabarish.jpg