add image hero

rayatiga · Oct 28, 2023 · 6da12ee · 6da12ee
1 parent fcdb534
commit 6da12ee
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 25 deletions.
diff --git a/public/404.html b/public/404.html
@@ -102,8 +102,8 @@
       <!-- Section: not-found -->
       <section id="not-found" class="mt-5 py-5">
         <div class="container d-flex flex-column gap-2">
-          <h1 class="display-4 animate__animated animate__fadeInUp animate__faster">404 Not Found</h1>
-          <p class="lead animate__animated animate__fadeInUp animate__faster animate__delay-1s">We couldn't find the page you're looking for. Maybe you typed the wrong URL or the page has been moved or deleted. Click the button below to go to the home page or back to the previous page.</p>
+          <h1 class="fw-bold animate__animated animate__fadeInUp animate__faster">404 Not Found</h1>
+          <p class="animate__animated animate__fadeInUp animate__faster animate__delay-1s">We couldn't find the page you're looking for. Maybe you typed the wrong URL or the page has been moved or deleted. Click the button below to go to the home page or back to the previous page.</p>
           <div class="d-flex flex-wrap gap-2">
             <a class="btn btn-dark animate__animated animate__fadeInUp animate__faster animate__delay-2s" href="/"><i class="bi-house-door me-2"></i>Go to Homepage</a>
             <a class="btn btn-outline-dark animate__animated animate__fadeInUp animate__faster animate__delay-3s" href="#" onclick="window.history.back()"><i class="bi-arrow-left me-2"></i>Go Back</a>

diff --git a/public/about.html b/public/about.html
@@ -102,10 +102,10 @@
       <!-- Section: about -->
       <section id="about" class="mt-5 py-5">
         <div class="container d-flex flex-column gap-2">
-          <h1 class="display-4 animate__animated animate__fadeInUp animate__faster">The Introduction</h1>
-          <p class="lead animate__animated animate__fadeInUp animate__faster animate__delay-1s">I don't define myself by the work I've done; I define myself by the work I want to do.</p>
-          <p class="lead animate__animated animate__fadeInUp animate__faster animate__delay-2s">Skills can be taught; personality is inherent. My personality is what sets me apart from others. I don't chase awards, status, or accolades. Instead, I continuously challenge myself, engage in meaningful pursuits, and write about them.</p>
-          <p class="lead animate__animated animate__fadeInUp animate__faster animate__delay-3s">I am the culmination of many skills and talents. I collaborate with clients who invest in their businesses, aspire to growth and profitability, and aim to make a lasting impact. The value of my work is reflected in the impact I have on my clients businesses.</p>
+          <h1 class="fw-bold animate__animated animate__fadeInUp animate__faster">The Introduction</h1>
+          <p class="animate__animated animate__fadeInUp animate__faster animate__delay-1s">I don't define myself by the work I've done; I define myself by the work I want to do.</p>
+          <p class="animate__animated animate__fadeInUp animate__faster animate__delay-2s">Skills can be taught; personality is inherent. My personality is what sets me apart from others. I don't chase awards, status, or accolades. Instead, I continuously challenge myself, engage in meaningful pursuits, and write about them.</p>
+          <p class="animate__animated animate__fadeInUp animate__faster animate__delay-3s">I am the culmination of many skills and talents. I collaborate with clients who invest in their businesses, aspire to growth and profitability, and aim to make a lasting impact. The value of my work is reflected in the impact I have on my clients businesses.</p>
           <div class="d-flex flex-wrap gap-2">
             <a class="btn btn-dark animate__animated animate__fadeInUp animate__faster animate__delay-4s" href="/resource.html"><i class="bi-folder2-open me-2"></i>Resource</a>
             <a class="btn btn-outline-dark animate__animated animate__fadeInUp animate__faster animate__delay-5s" href="/contact.html"><i class="bi-envelope-at me-2"></i>Contact</a>

diff --git a/public/asset/css/main.css b/public/asset/css/main.css
@@ -69,12 +69,12 @@ footer {
   background-size: calc(0.75em + 0.375rem) calc(0.55em + 0.375rem);
 }
 
-/* Adjust fade in up translate 3d to 35 percent */
+/* Adjust fade in up translate 3d to 0.5em */
 @-webkit-keyframes fadeInUp {
   from {
     opacity: 0;
-    -webkit-transform: translate3d(0, 35%, 0);
-    transform: translate3d(0, 35%, 0);
+    -webkit-transform: translate3d(0, 0.5em, 0);
+    transform: translate3d(0, 0.5em, 0);
   }
 
   to {
@@ -86,8 +86,8 @@ footer {
 @keyframes fadeInUp {
   from {
     opacity: 0;
-    -webkit-transform: translate3d(0, 35%, 0);
-    transform: translate3d(0, 35%, 0);
+    -webkit-transform: translate3d(0, 0.5em, 0);
+    transform: translate3d(0, 0.5em, 0);
   }
 
   to {
@@ -114,3 +114,17 @@ footer {
   --bs-btn-disabled-border-color: #f8f9fa;
   --bs-gradient: none;
 }
+
+/* Form control focus change color */
+.form-control:focus {
+  border-color: #aaaaaa;
+  box-shadow: 0 0 0 0.25rem rgba(153, 153, 153, 0.333);
+}
+
+/* Image fluid when in md size */
+@media (max-width: 991px) {
+  .img-fluid {
+    width: 100%;
+    max-width: 240px;
+  }
+}
diff --git a/public/asset/svg/hero.svg b/public/asset/svg/hero.svg
diff --git a/public/contact.html b/public/contact.html
@@ -102,8 +102,8 @@
       <!-- Section: contact -->
       <section id="contact" class="mt-5 py-5">
         <div class="container d-flex flex-column gap-2">
-          <h1 class="display-4 animate__animated animate__fadeInUp animate__faster">Get in Touch</h1>
-          <p class="lead animate__animated animate__fadeInUp animate__faster animate__delay-1s">I'm always open to discussing product design work or partnership opportunities. If you have a project that you want to get started, think you need my help with something or just fancy saying hey, then get in touch.</p>
+          <h1 class="fw-bold animate__animated animate__fadeInUp animate__faster">Get in Touch</h1>
+          <p class="animate__animated animate__fadeInUp animate__faster animate__delay-1s">I'm always open to discussing product design work or partnership opportunities. If you have a project that you want to get started, think you need my help with something or just fancy saying hey, then get in touch.</p>
           <form action="https://formspree.io/f/xgejenzn" class="needs-validation row g-3 animate__animated animate__fadeIn animate__faster animate__delay-2s" method="post" target="_blank" novalidate>
             <div class="col-md-6 col-sm-12">
               <label for="name">Name</label>

diff --git a/public/index.html b/public/index.html
@@ -101,12 +101,19 @@
     <main class="d-flex justify-content-center align-items-center sultan-kautsar-main-height">
       <!-- Section: index -->
       <section id="index" class="mt-5 py-5">
-        <div class="container d-flex flex-column gap-2">
-          <h1 class="display-4 animate__animated animate__fadeInUp animate__faster">Technology and Business Enthusiast</h1>
-          <p class="lead animate__animated animate__fadeInUp animate__faster animate__delay-1s">Hello! I'm Sultan Kautsar, the founder of <a href="https://rayatiga.com" target="_blank">Rayatiga</a>, a business agency that provides web services such as domain name registration, static website hosting, WordPress hosting, any cloud environment services, and similar. I'm also a web developer at <a href="https://breefstudio.com" target="_blank" rel="nofollow noindex noopener">PT Breef Digital Indonesia</a>, and a technology enthusiast.</p>
-          <div class="d-flex flex-wrap gap-2">
-            <a class="btn btn-dark animate__animated animate__fadeInUp animate__faster animate__delay-2s" href="/resource.html#resume"><i class="bi-file-earmark-richtext me-2"></i>Resume</a>
-            <a class="btn btn-outline-primary animate__animated animate__fadeInUp animate__faster animate__delay-3s" href="https://linkedin.com/in/sultankautsar/" target="_blank" rel="nofollow noindex noopener"><i class="bi-linkedin me-2"></i>LinkedIn</a>
+        <div class="row g-lg-4 row-cols-1 row-cols-lg-2 align-items-center">
+          <div class="col-lg-8 order-2 order-lg-1">
+            <div class="container d-flex flex-column gap-2">
+              <h1 class="fw-bold animate__animated animate__fadeInUp animate__faster">Technology and Business Enthusiast</h1>
+              <p class="animate__animated animate__fadeInUp animate__faster animate__delay-1s">Hello! I'm Sultan Kautsar, the founder of <a href="https://rayatiga.com" target="_blank">Rayatiga</a>, a business agency that provides web services such as domain name registration, static website hosting, WordPress hosting, any cloud environment services, and similar. I'm also a web developer at <a href="https://breefstudio.com" target="_blank" rel="nofollow noindex noopener">PT Breef Digital Indonesia</a>, and a technology enthusiast.</p>
+              <div class="d-flex flex-wrap gap-2">
+                <a class="btn btn-dark animate__animated animate__fadeInUp animate__faster animate__delay-2s" href="/resource.html#resume"><i class="bi-file-earmark-richtext me-2"></i>Resume</a>
+                <a class="btn btn-outline-primary animate__animated animate__fadeInUp animate__faster animate__delay-3s" href="https://linkedin.com/in/sultankautsar/" target="_blank" rel="nofollow noindex noopener"><i class="bi-linkedin me-2"></i>LinkedIn</a>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-4 order-1 order-lg-2">
+            <img src="/asset/svg/hero.svg" alt="Hero" class="img-fluid animate__animated animate__fadeInUp animate__faster animate__delay-4s" />
           </div>
         </div>
       </section>

diff --git a/public/resource.html b/public/resource.html
@@ -102,11 +102,11 @@
       <!-- Section: resource -->
       <section id="resource" class="mt-5 py-5">
         <div class="container d-flex flex-column gap-2" data-bs-spy="scroll" data-bs-target="#sultan-kautsar-navigation">
-          <h1 class="display-4 animate__animated animate__fadeInUp animate__faster">Resource and Project</h1>
-          <p class="lead animate__animated animate__fadeInUp animate__faster animate__delay-1s">I'm always open to discussing product design work or partnership opportunities. If you have a project that you want to get started, think you need my help with something or just fancy saying hey, then get in touch.</p>
+          <h1 class="fw-bold animate__animated animate__fadeInUp animate__faster">Resource and Project</h1>
+          <p class="animate__animated animate__fadeInUp animate__faster animate__delay-1s">I'm always open to discussing product design work or partnership opportunities. If you have a project that you want to get started, think you need my help with something or just fancy saying hey, then get in touch.</p>
           <!-- Section: achievement -->
           <section id="achievement" class="my-3 animate__animated animate__fadeIn animate__delay-2s">
-            <h1 class="fw-light fs-3 mb-3"><i class="bi-award me-2"></i>Achievement</h1>
+            <h1 class="fs-5 p-2 bg-dark border text-white rounded mb-3"><i class="bi-award me-2"></i>Achievement</h1>
             <p>Here are some of my top certification that I use to learn and improve my skills. I hope you find them useful too.</p>
             <div class="row row-cols-1 row-cols-md-2 g-4">
               <div class="col">
@@ -177,7 +177,7 @@ <h5 class="card-title">Website on Google Cloud Certified</h5>
           </section>
           <!-- Section: uiux -->
           <section id="uiux" class="my-3 animate__animated animate__fadeIn animate__delay-3s">
-            <h1 class="fw-light fs-3 mb-3"><i class="bi-layout-text-window-reverse me-2"></i>UI/UX Design</h1>
+            <h1 class="fs-5 p-2 bg-dark border text-white rounded mb-3"><i class="bi-layout-text-window-reverse me-2"></i>UI/UX Design</h1>
             <p>Here are some of my favorite UI/UX design project that I use to learn and improve my skills. I hope you find them useful too.</p>
             <div class="row row-cols-1 row-cols-md-2 g-4">
               <div class="col">
@@ -252,7 +252,7 @@ <h5 class="card-title">Velppy</h5>
           </section>
           <!-- Section: project -->
           <section id="website" class="my-3 animate__animated animate__fadeIn animate__delay-3s">
-            <h1 class="fw-light fs-3 mb-3"><i class="bi-globe-americas me-2"></i>Website Project</h1>
+            <h1 class="fs-5 p-2 bg-dark border text-white rounded mb-3"><i class="bi-globe-americas me-2"></i>Website Project</h1>
             <p>Here are some of my favorite website projects that I use to learn and improve my skills. I hope you find them useful too.</p>
             <div class="row row-cols-1 row-cols-md-2 g-4">
               <div class="col">
@@ -361,7 +361,7 @@ <h5 class="card-title">Rayatiga Store</h5>
           </section>
           <!-- Section: resume -->
           <section id="resume" class="mt-3 animate__animated animate__fadeIn animate__delay-3s">
-            <h1 class="fw-light fs-3 mb-3"><i class="bi-person-check me-2"></i>Personal Resume</h1>
+            <h1 class="fs-5 p-2 bg-dark border text-white rounded mb-3"><i class="bi-person-check me-2"></i>Personal Resume</h1>
             <p>Here are my personal resume that I use to describe all my experience, skills, and other information. I hope you find them useful too.</p>
             <div class="card">
               <div class="card-body p-0">