theme

16 files changed, 439 insertions, 213 deletions

diff --git a/config.yaml b/config.yaml
new file mode 100644
index 0000000..0c28655
--- /dev/null
+++ b/config.yaml
@@ -0,0 +1,77 @@
+baseURL: "https://hugo-profile.netlify.app/"
+languageCode: "en-us"
+title: "Hugo-profile"
+
+
+params:
+  favicon: "/images/hugo.png"
+  description: "Portfolio and personal blog of gurusabarish"
+
+  # Navbar Menus
+  customMenus:
+  - name: "Blog"
+    url: "blog"
+ 
+  # Home
+  name: "Gurusabarish"
+  profile: "/images/avatar-370-456322.webp"
+  github: "https://github.com/gurusabarish"
+  linkedin: "https://linkedin.com/in/gurusabarish"
+  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: "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."
+
+  # About
+  profile_image: "/images/gurusabarish.jpg"
+  jop: "Web developer"
+  jops_about: "web developer and ML engineer"
+  resume: ""
+  
+  projects:
+  - title: "Project name"
+    image: "https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d"
+    description:  "This is your description"
+    url: "https://github.com/gurusabarish/hugo-profile"
+    sourceurl: "https://github.com/gurusabarish/hugo-profile"
+  
+  - title: "Project name"
+    image: "https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d"
+    description:  "This is your description"
+    url: "https://github.com/gurusabarish/hugo-profile"
+    sourceurl: "https://github.com/gurusabarish/hugo-profile"
+
+  - title: "Project name"
+    image: "https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d"
+    description:  "This is your description"
+    url: "https://github.com/gurusabarish/hugo-profile"
+    sourceurl: "https://github.com/gurusabarish/hugo-profile"
+
+  - title: "Project name"
+    image: "https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d"
+    description:  "This is your description"
+    url: "https://github.com/gurusabarish/hugo-profile"
+    sourceurl: "https://github.com/gurusabarish/hugo-profile"
+
+  - title: "Project name"
+    image: "https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d"
+    description:  "This is your description"
+    url: "https://github.com/gurusabarish/hugo-profile"
+    sourceurl: "https://github.com/gurusabarish/hugo-profile"
+
+  - title: "Project name"
+    image: "https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d"
+    description:  "This is your description"
+    url: "https://github.com/gurusabarish/hugo-profile"
+    sourceurl: "https://github.com/gurusabarish/hugo-profile"
+  
+
+Author:
+  name: "Gurusabarish"
+  website: "https://github.com/gurusabarish"
\ No newline at end of file
diff --git a/examplesite/content/blog/fivth.md b/content/blog/fivth.md
index 89bb717..89bb717 100644
--- a/examplesite/content/blog/fivth.md
+++ b/content/blog/fivth.md
diff --git a/examplesite/content/blog/fourth.md b/content/blog/fourth.md
index 4d164af..4d164af 100644
--- a/examplesite/content/blog/fourth.md
+++ b/content/blog/fourth.md
diff --git a/examplesite/content/blog/markdown.md b/content/blog/markdown.md
index 1125752..1125752 100644
--- a/examplesite/content/blog/markdown.md
+++ b/content/blog/markdown.md
diff --git a/examplesite/content/blog/second.md b/content/blog/second.md
index d950ec0..d950ec0 100644
--- a/examplesite/content/blog/second.md
+++ b/content/blog/second.md
diff --git a/examplesite/content/blog/third.md b/content/blog/third.md
index a0cb9be..a0cb9be 100644
--- a/examplesite/content/blog/third.md
+++ b/content/blog/third.md
diff --git a/examplesite/config.yaml b/examplesite/config.yaml
index 4651553..e80822d 100644
--- a/examplesite/config.yaml
+++ b/examplesite/config.yaml
@@ -1,10 +1,7 @@
-baseURL: "https://hugo-profile.netlify.app/"
+baseURL: "https://example.com"
 languageCode: "en-us"
 title: "Hugo-profile"
 
-
-
-  
 params:
   favicon: "/images/hugo.png"
   description: "Portfolio and personal blog of gurusabarish"
@@ -25,8 +22,8 @@ params:
   # 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."
+  thing3: "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."
 
@@ -38,21 +35,42 @@ params:
   
   projects:
   - title: "Project name"
-    image: "/images/project.png"
+    image: "https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d"
     description:  "This is your description"
     url: "https://github.com/gurusabarish/hugo-profile"
+    sourceurl: "https://github.com/gurusabarish/hugo-profile"
   
   - title: "Project name"
-    image: "/images/project.png"
+    image: "https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d"
     description:  "This is your description"
     url: "https://github.com/gurusabarish/hugo-profile"
-  
+    sourceurl: "https://github.com/gurusabarish/hugo-profile"
 
-Author:
-  name: "Gurusabarish"
-  website: "https://github.com/gurusabarish"
+  - title: "Project name"
+    image: "https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d"
+    description:  "This is your description"
+    url: "https://github.com/gurusabarish/hugo-profile"
+    sourceurl: "https://github.com/gurusabarish/hugo-profile"
 
+  - title: "Project name"
+    image: "https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d"
+    description:  "This is your description"
+    url: "https://github.com/gurusabarish/hugo-profile"
+    sourceurl: "https://github.com/gurusabarish/hugo-profile"
 
+  - title: "Project name"
+    image: "https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d"
+    description:  "This is your description"
+    url: "https://github.com/gurusabarish/hugo-profile"
+    sourceurl: "https://github.com/gurusabarish/hugo-profile"
 
+  - title: "Project name"
+    image: "https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d"
+    description:  "This is your description"
+    url: "https://github.com/gurusabarish/hugo-profile"
+    sourceurl: "https://github.com/gurusabarish/hugo-profile"
+  
 
-  
\ No newline at end of file
+Author:
+  name: "Gurusabarish"
+  website: "https://github.com/gurusabarish"
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index b727517..23cf658 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -24,7 +24,7 @@
     {{- partial "sections/about.html" . -}}
     {{- partial "sections/do_things.html" . -}}
     {{- partial "sections/projects.html" . -}}
-
+    {{- partial "sections/contact.html" . -}}
 
     {{- partial "footer.html" . -}}
     {{- partial "scripts.html" . -}}
diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
index 71c0cd5..fc54a74 100644
--- a/layouts/partials/sections/about.html
+++ b/layouts/partials/sections/about.html
@@ -2,42 +2,74 @@
     <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="row justify-content-center ">
-            <div class="col-md-3 pt-4 text-center">
-                <img src="{{ .Site.Params.profile_image }}" width="200px" alt="{{ .Site.Params.name }}" class="rounded">
-                <div class="about-me jop font-weight-bold text-secondary">{{ .Site.Params.jop }}</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 class="row justify-content-center ">
+                <div class="col-lg-3 pt-4 text-center">
+                    <img src="{{ .Site.Params.profile_image }}" width="200px" alt="{{ .Site.Params.name }}"
+                        class="rounded">
+                    <div class="about-me jop font-weight-bold text-secondary">{{ .Site.Params.jop }}</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-lg-7 pt-3 ">
+                    <div class="about-content text-secondary p-3">
+                        Hi, I'm <span class="text-dark">{{ .Site.Params.name }}</span>, a passionate <span
+                            class="text-dark">{{ .Site.Params.jops_about | default "Your jop"}}</span> from India. I
+                        tend
+                        to make use
+                        of modern web technologies to build websites that looks great, feels fantastic, and functions
+                        correctly.
 
-            </div>
+                        <br><br>
+                        You can check my <a href="/blog">blog</a> and my <a
+                            href="{{ .Site.Params.github | default "#" }}" target="_blank">github</a> for more details.
+                    </div>
+                    <div class="social p-4">
+                        <a href="{{ .Site.Params.resume | default "#" }}" class="btn btn-info" role="button"
+                            aria-pressed="true">
+                            Resume
+                        </a>
 
-            <div class="col-md-7 pt-3 ">
-                <div class="about-content text-secondary p-3">
-                    Hi, I'm <span class="text-dark">{{ .Site.Params.name }}</span>, a passionate <span
-                        class="text-dark">{{ .Site.Params.jops_about | default "Your jop"}}</span> from India. I tend
-                    to make use
-                    of modern web technologies to build websites that looks great, feels fantastic, and functions
-                    correctly.
-
-                    <br><br>
-                    You can check my <a href="/blog">blog</a> and my <a href="{{ .Site.Params.github | default "#" }}"
-                        target="_blank">github</a> for more details.
-                </div>
-                <div class="text-center pb-3">
-                    <a href="{{ .Site.Params.resume | default "#" }}" class="btn btn-info" role="button"
-                        aria-pressed="true">Resume</a>
+                        {{ if .Site.Params.github }}
+                        <a class="text-dark" href="{{ .Site.Params.github }}" target="_blank">
+                            <svg width="2em" height="2em" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 448 512">
+                                <path
+                                    d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z" />
+                            </svg>
+                        </a>
+                        {{ end }}
+
+                        {{ if .Site.Params.twitter }}
+                        <a class="text-info" href="{{ .Site.Params.twitter }}" target="_blank">
+                            <svg width="2em" height="2em" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 448 512">
+                                <path
+                                    d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z" />
+                            </svg>
+                        </a>
+                        {{ end }}
+
+                        {{ if .Site.Params.instagram }}
+                        <a class="text-danger" href="{{ .Site.Params.instagram }}" target="_blank">
+                            <svg width="2em" height="2em" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 448 512">
+                                <path
+                                    d="M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32ZM382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z" />
+                            </svg>
+                        </a>
+                        {{ end }}
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/layouts/partials/sections/blog.html b/layouts/partials/sections/blog.html
index df72817..3689313 100644
--- a/layouts/partials/sections/blog.html
+++ b/layouts/partials/sections/blog.html
@@ -1,6 +1,6 @@
 <section>
     <div class="p-3 blog-back">
-        <div class="container-fluid">
+        <div class="container">
             <div class="text-center pb-3">
                 <h4>Recent posts</h4>
             </div>
diff --git a/layouts/partials/sections/contact.html b/layouts/partials/sections/contact.html
new file mode 100644
index 0000000..8d20f0c
--- /dev/null
+++ b/layouts/partials/sections/contact.html
@@ -0,0 +1,3 @@
+<section>
+
+</section>
\ No newline at end of file
diff --git a/layouts/partials/sections/do_things.html b/layouts/partials/sections/do_things.html
index 4467cf5..b30d5e5 100644
--- a/layouts/partials/sections/do_things.html
+++ b/layouts/partials/sections/do_things.html
@@ -1,67 +1,69 @@
 <section>
     <div class="pt-3 do-things text-center" id="do-things">
-        <div class="things-i-do text-primary font-weight-bold">
-            Things I do
-        </div>
+        <div class="container">
+            <div class="things-i-do text-primary font-weight-bold">
+                Things I do
+            </div>
 
-        <div class="do-things-card">
-            <div class="row pb-5 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 class="do-things-card">
+                <div class="row pb-5 justify-content-center">
+                    <!-- Thing 1 -->
+                    <div class="col-lg-3">
+                        <div class="things shadow rounded p-4 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 things-text text-primary">
+                                {{ if .Site.Params.thing1_des }}
+                                {{ .Site.Params.thing1_des }}
+                                {{ end }}
+                            </div>
                         </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 }}
+                    <!-- Thing 2 -->
+                    <div class="col-lg-3">
+                        <div class="things shadow rounded p-4 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 things-text text-primary">
+                                {{ if .Site.Params.thing2_des }}
+                                {{ .Site.Params.thing2_des }}
+                                {{ end }}
+                            </div>
                         </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 }}
+                    <!-- Thing 3 -->
+                    <div class="col-lg-3">
+                        <div class="things shadow rounded p-4 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 things-text text-primary">
+                                {{ if .Site.Params.thing3_des }}
+                                {{ .Site.Params.thing3_des }}
+                                {{ end }}
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/layouts/partials/sections/home.html b/layouts/partials/sections/home.html
index 84fd581..557f1ac 100644
--- a/layouts/partials/sections/home.html
+++ b/layouts/partials/sections/home.html
@@ -30,79 +30,82 @@
             </div>
         </nav>
 
-        <div class="container-fluid row" id="home">
-            <div class="text-white col-lg-8 col-sm ">
-                <div class="name-intro">
-                    Hi there, I'm
-                    <h1 class="name">{{ .Site.Params.name }}</h1>
+        <div class="container">
+            <div class="row justify-content-center" id="home">
+                <div class="text-white col-lg-8">
+                    <div class="name-intro">
+                        Hi there, I'm
+                        <h1 class="name">{{ .Site.Params.name }}</h1>
 
-                    <!-- socialmedia -->
-                    <div class="social">
-                        {{ if .Site.Params.github }}
-                        <a class="text-white" href="{{ .Site.Params.github }}" target="_blank">
-                            <svg width="1.1em" height="1.1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 448 512">
-                                <path
-                                    d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z" />
-                            </svg>
-                        </a>
-                        {{ end }}
+                        <!-- socialmedia -->
+                        <div class="social">
+                            {{ if .Site.Params.github }}
+                            <a class="text-white" href="{{ .Site.Params.github }}" target="_blank">
+                                <svg width="1.1em" height="1.1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 448 512">
+                                    <path
+                                        d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z" />
+                                </svg>
+                            </a>
+                            {{ end }}
 
-                        {{ if .Site.Params.linkedin }}
-                        <a class="text-white" href="{{ .Site.Params.linkedin }}" target="_blank">
-                            <svg width="1.1em" height="1.1em" 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 }}
+                            {{ if .Site.Params.linkedin }}
+                            <a class="text-white" href="{{ .Site.Params.linkedin }}" target="_blank">
+                                <svg width="1.1em" height="1.1em" 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 }}
 
-                        {{ if .Site.Params.twitter }}
-                        <a class="text-white" href="{{ .Site.Params.twitter }}" target="_blank">
-                            <svg width="1.1em" height="1.1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 448 512">
-                                <path
-                                    d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z" />
-                            </svg>
-                        </a>
-                        {{ end }}
+                            {{ if .Site.Params.twitter }}
+                            <a class="text-white" href="{{ .Site.Params.twitter }}" target="_blank">
+                                <svg width="1.1em" height="1.1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 448 512">
+                                    <path
+                                        d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z" />
+                                </svg>
+                            </a>
+                            {{ end }}
 
-                        {{ if .Site.Params.instagram }}
-                        <a class="text-white" href="{{ .Site.Params.instagram }}" target="_blank">
-                            <svg width="1.1em" height="1.1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 448 512">
-                                <path
-                                    d="M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32ZM382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z" />
-                            </svg>
-                        </a>
-                        {{ end }}
+                            {{ if .Site.Params.instagram }}
+                            <a class="text-white" href="{{ .Site.Params.instagram }}" target="_blank">
+                                <svg width="1.1em" height="1.1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 448 512">
+                                    <path
+                                        d="M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32ZM382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z" />
+                                </svg>
+                            </a>
+                            {{ end }}
+                        </div>
                     </div>
-                </div>
 
-                <!-- image -->
-                <div class="profile text-right">
-                    <br>
-                    <img src="{{ .Site.Params.profile | default "/images/avatar-370-456322.webp"}}" width="150px"
-                        class="rounded-circle img-fluid" alt="{{ .Site.Params.name }}">
+                    <!-- image -->
+                    <div class="row profile text-center">
+                        <br>
+                        <img src="{{ .Site.Params.profile | default "/images/avatar-370-456322.webp"}}" width="150px"
+                            class="rounded-circle img-fluid" alt="{{ .Site.Params.name }}">
+                    </div>
+
+
                 </div>
 
-                <div class="row know-more ">
-                    <div class="container p-3 rounded text-center">
-                        <a href="#about" class="text-info">
-                            know more
-                            <br>
-                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down"
-                                fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                                <path fill-rule="evenodd"
-                                    d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
-                            </svg>
-                        </a>
-                    </div>
+                <div class="col-lg-3 home-content d-none d-md-block"></div>
+            </div>
+            <div class="row know-more ">
+                <div class="container p-3 rounded text-center">
+                    <a href="#about" class="text-info">
+                        know more
+                        <br>
+                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="currentColor"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd"
+                                d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
+                        </svg>
+                    </a>
                 </div>
             </div>
-
-            <div class="col col-lg-4 col-sm home-content"></div>
         </div>
     </div>
 </section>
\ No newline at end of file
diff --git a/layouts/partials/sections/projects.html b/layouts/partials/sections/projects.html
index c4e0d25..5e1e806 100644
--- a/layouts/partials/sections/projects.html
+++ b/layouts/partials/sections/projects.html
@@ -1,24 +1,44 @@
 <section>
     <div class="projects p-3" id="projects">
-        <div class="project-heading text-center text-white container pb-3">Projects</div>
+        <div class="container">
+            <div class="project-heading text-center text-white container pb-3">Projects</div>
 
-        <div class="container p-2">
-            <div class="row justify-content-md-center">
-                {{ range .Site.Params.projects }}
-                <div class="col-lg-5">
 
-                    <div class="card mb-3">
-                        <img class="card-img-top" src="{{ .image }}" alt="{{ .title }}">
-                        <div class="card-body text-center project-des-back">
-                            <h4 class="card-title">{{ .title }}</h4>
-                            <p class="card-text">{{ .description }}</p>
-                            <p class="card-text"></p>
-                            <a href="{{ .url }}" target="_blank" class="btn btn-primary">Details</a>
+            <div class="pt-5 pb-5">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="carousel-inner">
+                                <div class="carousel-item active">
+                                    <div class="row justify-content-center">
+                                        {{ range .Site.Params.projects }}
+                                        <div class="col-md-4 mb-3">
+                                            <div class="card">
+                                                <img class="img-fluid" src="{{ .image }}" alt="{{ .title }}">
+                                                <div class="card-body">
+                                                    <h4 class="card-title">{{ .title }}</h4>
+                                                    <p class="card-text">{{ .description}}</p>
+                                                    <a href="{{ .url }}" class="btn btn-info">Go to Blog</a>
+
+                                                    {{ if .sourceurl }}
+                                                    <a class="text-dark" href="{{ .sourceurl }}" target="_blank">
+                                                        <svg width="2em" height="2em" fill="currentColor"
+                                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                                                            <path
+                                                                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z" />
+                                                        </svg>
+                                                    </a>
+                                                    {{ end }}
+                                                </div>
+                                            </div>
+                                        </div>
+                                        {{ end }}
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-
-                {{ end }}
             </div>
         </div>
     </div>
diff --git a/static/css/index.css b/static/css/index.css
index 408b75a..a338a67 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,15 +1,13 @@
 /*home*/
 
 .home {
-    height: 110vh;
+    height: auto;
     padding: 0;
     padding-bottom: 0;
     margin: 0;
     background-image: url(/images/background.png);
     background-size: cover;
     background-repeat: no-repeat;
-    background-position: right bottom;
-    overflow: hidden;
 }
 
 .name {
@@ -19,16 +17,17 @@
 .name-intro {
     font-size: 20PX;
     padding-top: 10%;
-    padding-left: 25%;
+    padding-left: 20%;
 }
 
 .profile {
-    padding-right: 20%;
+    float: right;
+    padding-right: 22%;
+    padding-bottom: 10%;
 }
 
 .know-more {
-    padding-top: 10%;
-    padding-left: 40%;
+    padding-bottom: 15%;
     font-family: cursive;
 }
 
@@ -42,17 +41,22 @@
     padding-left: 18%;
     padding-right: 5%;
     background-repeat: no-repeat;
-    background-position: center;
-    background-size: 80%;
-    background-image: url(/images/gif.gif);
+    background-position: bottom;
+    background-image: url(/images/guru.svg);
 }
 
 .social a:hover {
     text-decoration-line: none;
 }
 
+@media only screen and (max-width: 992px) {
+    .profile {
+        padding-right: 35%;
+        text-align: center !important;
+    }
+}
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
     .home {
         height: auto;
         background-position: left bottom;
@@ -63,11 +67,6 @@
         padding-left: 10%;
     }
 
-    .profile {
-        padding: 0;
-        text-align: center !important;
-    }
-
     .home-content {
         height: 30%;
         background: none;
@@ -93,7 +92,6 @@
     padding: 0;
     padding-bottom: 0;
     margin: 0;
-    overflow: hidden;
 }
 
 .things-i-do {
@@ -102,11 +100,15 @@
 }
 
 .things {
-    height: 40vh;
+    height: auto;
+}
+
+.things-text {
+    height: 100px;
     overflow: hidden;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
     .do-things-card {
         padding-left: 15%;
         padding-right: 15%;
@@ -140,7 +142,7 @@
     color: black;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
     .about {
         height: auto;
     }
@@ -162,7 +164,7 @@
 /* Projects */
 .projects {
     height: auto;
-    background-color: #101820ff;
+    background-color: #A89C94FF;
 }
 
 .project-heading {
@@ -170,21 +172,6 @@
     font-size: 25px;
 }
 
-.card-img-top {
-    width: 100% !important;
-    height: 350px !important;
-}
-
-.project-des-back {
-    background-color: #F2AA4CFF;
-}
-
-@media only screen and (max-width: 600px) {
-    .card-img-top {
-        height: 180px !important;
-    }
-}
-
 
 /* recent posts */
 .blog-back {
diff --git a/static/images/guru.svg b/static/images/guru.svg
new file mode 100644
index 0000000..f82b72b
--- /dev/null
+++ b/static/images/guru.svg
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="350px" height="302px" viewBox="0 0 350 302" style="enable-background:new 0 0 350 302;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F9C758;}
+	.st1{fill:#FAFAFA;}
+	.st2{fill:#9B9B9B;}
+	.st3{fill:#B3B3B3;}
+	.st4{fill:#CFCFCF;}
+	.st5{fill:#FFFFFF;}
+	.st6{fill:#464646;}
+	.st7{fill:#FC86B4;}
+	.st8{fill:#D66DF7;}
+	.st9{fill:#D3D2D1;}
+	.st10{fill:#FBC39D;}
+	.st11{fill:#9DF9E1;}
+	.st12{fill:#565656;}
+</style>
+<g>
+	<path class="st0" d="M288.9,160.7h-16.1c-0.3,0-0.5,0.2-0.5,0.5v12.2c0,3.6,2.9,6.4,6.4,6.4h4.3c3.6,0,6.4-2.9,6.4-6.4v-12.2
+		C289.4,161,289.2,160.7,288.9,160.7z"/>
+	<path class="st0" d="M287,177.8c3.6-2,9.9-8.1,8.8-12.4c-0.3-1.1-1-2-2-2.5c-2.4-1.1-5.8,0.2-6.2,0.4l1.1,2.4
+		c0.8-0.3,2.9-0.9,3.8-0.4c0.2,0.1,0.4,0.2,0.5,0.7c0.6,2.5-4.3,7.7-7.5,9.5L287,177.8z"/>
+</g>
+<path class="st1" d="M213.4,165.1H77.9c-1.8,0-3.3-1.5-3.3-3.3V83.5c0-1.8,1.5-3.3,3.3-3.3h135.5c1.8,0,3.3,1.5,3.3,3.3v78.3
+	C216.7,163.6,215.2,165.1,213.4,165.1z"/>
+<path class="st2" d="M161.7,176.2c-0.5-1.4-0.7-2.8-0.7-4.3v-6.8h-15.3H145h-13.7v6.8c0,1.5-0.2,2.9-0.7,4.3c-0.7,1.9-2.1,4-4.6,4
+	h19h0.7h20.6C163.8,180.2,162.4,178.1,161.7,176.2z"/>
+<path class="st3" d="M300.3,189.3H65.8c-1.2,0-2.1-0.9-2.1-2.1v-4.9c0-1.2,0.9-2.1,2.1-2.1h234.4c1.2,0,2.1,0.9,2.1,2.1v4.9
+	C302.4,188.4,301.5,189.3,300.3,189.3z"/>
+<path class="st4" d="M213.4,151.6H77.9c-1.8,0-3.3-1.5-3.3-3.3V70c0-1.8,1.5-3.3,3.3-3.3h135.5c1.8,0,3.3,1.5,3.3,3.3v78.3
+	C216.7,150.1,215.2,151.6,213.4,151.6z"/>
+<rect x="80.1" y="71.3" class="st5" width="131.3" height="74.7"/>
+<path class="st5" d="M280.4,156.1c0.5-0.2,1.1-0.5,1.5-0.8c0.5-0.3,0.9-0.8,1.1-1.2c0.2-0.5,0.2-0.9-0.1-1.3c-0.3-0.4-0.7-0.7-1.1-1
+	c-0.5-0.3-1-0.5-1.5-0.7c-0.2-0.1-0.6-0.2-0.9-0.3s-0.6-0.3-0.9-0.5c-1.2-0.7-2.3-1.6-3.2-2.8c-0.9-1.1-1.6-2.5-2-3.9
+	c-0.4-1.5-0.6-3-0.3-4.7c0.2-0.8,0.4-1.7,0.9-2.6c0.4-0.9,1.1-1.7,1.9-2.4s1.8-1.2,2.8-1.5s2-0.4,3-0.5h1c2.3,0,4.3,1.8,4.3,4.2
+	c0,2.3-1.8,4.3-4.2,4.3c-0.7,0-1.3-0.2-1.9-0.4c-0.5-0.2-0.8-0.4-1.1-0.4c-0.3,0-0.8,0.3-1.2,0.9c-0.4,0.6-0.6,1.5-0.6,2.4
+	s0.1,1.9,0.5,2.8c0.4,0.9,0.9,1.8,1.6,2.6c0.2,0.2,0.4,0.4,0.6,0.5c0.2,0.2,0.4,0.3,0.7,0.5c0.5,0.4,1,0.8,1.5,1.3s0.9,1,1.2,1.8
+	c0.1,0.4,0.2,0.8,0.1,1.1c-0.1,0.4-0.2,0.7-0.4,1c-0.4,0.6-0.9,0.9-1.4,1.3c-0.5,0.3-1.1,0.6-1.6,0.9c-0.1,0.1-0.3,0-0.3-0.1
+	C280.2,156.3,280.3,156.1,280.4,156.1L280.4,156.1L280.4,156.1z"/>
+<path class="st6" d="M108.6,132.2c0.1,0.1,0.3,0,0.4-0.1l2.5-2.5l1.8,3.6c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0,0.1,0,0.2,0l1.5-0.8
+	c0.1,0,0.1-0.1,0.2-0.2c0-0.1,0-0.2,0-0.3l-1.7-3.3h3.3c0.1,0,0.3-0.1,0.3-0.2c0.1-0.1,0-0.3-0.1-0.4l-8.3-7.6
+	c-0.1-0.1-0.3-0.1-0.4-0.1c-0.1,0.1-0.2,0.2-0.2,0.3v11.1C108.4,132,108.5,132.1,108.6,132.2z"/>
+<rect x="92.8" y="87.5" class="st7" width="20.7" height="10.5"/>
+<rect x="118.5" y="87.5" class="st8" width="56.3" height="10.5"/>
+<rect x="92.8" y="105.4" class="st0" width="48.5" height="3"/>
+<rect x="92.8" y="113.2" class="st0" width="42.6" height="3"/>
+<g>
+	<path class="st9" d="M277,76.2c-13.7,0-24.8-11.1-24.8-24.8s11.1-24.8,24.8-24.8s24.8,11.1,24.8,24.8
+		C301.9,65.1,290.7,76.2,277,76.2z M277,30.1c-11.7,0-21.3,9.5-21.3,21.3s9.5,21.3,21.3,21.3s21.3-9.5,21.3-21.3
+		S288.7,30.1,277,30.1z"/>
+	<path class="st9" d="M277.6,52.9h-16.1c-0.5,0-0.9-0.4-0.9-0.9s0.4-0.9,0.9-0.9h15.2v-16c0-0.5,0.4-0.9,0.9-0.9s0.9,0.4,0.9,0.9
+		v16.8C278.5,52.4,278.1,52.9,277.6,52.9z"/>
+</g>
+<path class="st10" d="M186.1,176.2L111,181c-6.5,0.4-12-4.5-12.5-11l0,0c-0.4-6.5,4.5-12,11-12.5l75.1-4.8c3.9-0.3,7.3,2.7,7.6,6.7
+	l0.6,9.1C193,172.5,190,175.9,186.1,176.2z"/>
+<path class="st11" d="M138.2,131.5L101,157.7c-4.9,3.5-6.2,10.2-2.9,15.2l0,0c2.5,3.8,7.1,5.8,11.6,4.9c16.4-3.3,54-11,53.6-12.3
+	c-0.3-1-4.5-15.9-7.8-27.9C153.3,130.2,144.5,127.1,138.2,131.5z"/>
+<path class="st10" d="M163.4,176.2l75.1,4.8c6.5,0.4,12-4.5,12.5-11l0,0c0.4-6.5-4.5-12-11-12.5l-75.1-4.8c-3.9-0.3-7.3,2.7-7.6,6.7
+	l-0.6,9.1C156.5,172.5,159.5,175.9,163.4,176.2z"/>
+<path class="st11" d="M211.3,131.5l37.2,26.2c4.9,3.5,6.2,10.2,2.9,15.2l0,0c-2.5,3.8-7.1,5.8-11.6,4.9c-16.4-3.3-54-11-53.6-12.3
+	c0.3-1,4.5-15.9,7.8-27.9C196.2,130.2,205,127.1,211.3,131.5z"/>
+<g>
+	<ellipse class="st6" cx="145.6" cy="91.2" rx="7.3" ry="7.6"/>
+	<ellipse class="st6" cx="200.6" cy="91.2" rx="7.3" ry="7.6"/>
+	<path class="st6" d="M170.9,131.7L170.9,131.7c0.7,0.1,1.5,0.2,2.2,0.2l0,0c2.3,0,4.6-0.3,6.7-0.9c0,0,0,0,0-0.1
+		c11.9-3.1,20.7-14.3,20.7-27.7V69.8c0-15.8-12.3-13.3-27.5-13.3l0,0c-15.2,0-27.5-2.5-27.5,13.3v33.5
+		C145.6,118.2,156.7,130.5,170.9,131.7z"/>
+	<path class="st6" d="M195,92.2v9h-9.7c0,0-2.4-6.5-12.2-6.5s-12.2,6.5-12.2,6.5h-9.7v-9c0-3.6-3.3-4.7-5.5-5.1v16.1
+		c0,15,11.1,27.3,25.2,28.4l0,0c0.8,0.1,1.5,0.1,2.3,0.1s1.5,0,2.3-0.1l0,0c14.1-1.2,25.2-13.5,25.2-28.4V87.1
+		C198.4,87.5,195,88.7,195,92.2z"/>
+	<path class="st6" d="M193.3,45.5c-7.5-1.1-19.2-1.2-27.8,5.8c-0.2,0.2-0.4,0.4-0.5,0.5h-6.8c-7,0-12.6,4.9-12.6,11V69v14.2v17.4
+		c1.3,0,2.3-1.1,2.3-2.4V73.9c0,0,0.4-7.7,7.4-7.7h16h0.1h18.2c7.5,0,8.4,6.8,8.5,7.7v24.5c0,1.3,1,2.4,2.3,2.4V83.4V69.1v-5.5
+		l0.1-9.5C200.7,49.8,197.5,46.1,193.3,45.5z"/>
+</g>
+<rect x="147.1" y="62.1" class="st6" width="53.1" height="46"/>
+<path class="st12" d="M188,275.3h-30c-21,0-37.9-18.3-37.9-40.9l9.5-82c3.3-21.9,23.5-35.9,44-35.9l0,0c20.7,0,41.1,14.4,44.1,36.5
+	l8.3,81.4C226,256.9,209,275.3,188,275.3z"/>
+<path class="st4" d="M180,299.2h-13.6c-1.5,0-2.7-1.2-2.7-2.7V187.2c0-1.5,1.2-2.7,2.7-2.7H180c1.5,0,2.7,1.2,2.7,2.7v109.3
+	C182.7,298,181.5,299.2,180,299.2z"/>
+<path class="st6" d="M184.5,194.7H161c-2.9,0-5.2-2.3-5.2-5.2v-9.9c0-2.9,2.3-5.2,5.2-5.2h23.5c2.9,0,5.2,2.3,5.2,5.2v9.9
+	C189.8,192.4,187.4,194.7,184.5,194.7z"/>
+</svg>