asAS

_includes/video/youtube.html

@@ -0,0 +1,40 @@
+<!-- youtube.html -->
+<figure class="image {% if include.aspect_ratio %} is-{{ include.aspect_ratio }}{% else %} is-16by9{% endif %}">
+    <iframe
+        class="has-ratio"
+        src="https://www.youtube.com/embed/{{ include.id }}?start={{ include.start_time | default: '0' }}&end={{ include.end_time | default: '0' }}&autoplay={{ include.autoplay | default: 'false' }}&controls={{ include.controls | default: 'true' }}&mute={{ include.muted | default: 'false' }}&showinfo={{ include.showinfo | default: 'true' }}&loop={{ include.loop | default: 'false' }}"
+        frameborder="0"
+        allowfullscreen
+    ></iframe>
+</figure>
+
+<!-- JSON-LD Structured Data -->
+<script type="application/ld+json">
+    {
+        "@context": "http://schema.org",
+        "@type": "VideoObject",
+        "name": "{{ include.title }}",
+        "description": "{{ include.description }}",
+        "thumbnailUrl": "https://img.youtube.com/vi/{{ include.id }}/hqdefault.jpg",
+        "uploadDate": "{{ page.date | date_to_xmlschema }}",
+        "publisher": {
+            "@type": "Organization",
+            "name": "{{ site.author }}"
+        },
+        "author": {
+            "@type": "Person",
+            "name": "{{ include.author }}"
+        },
+        "contentUrl": "https://www.youtube.com/watch?v={{ include.id }}",
+        "embedUrl": "https://www.youtube.com/embed/{{ include.id }}",
+        "hasPart": [
+            {
+                "@type": "Clip",
+                "name": "Full Video",
+                "startOffset": "{{ include.start_time }}",
+                "endOffset": "{{ include.end_time }}",
+                "url": "https://www.youtube.com/watch?v={{ include.id }}&start={{ include.start_time }}&end={{ include.end_time }}"
+            }
+        ]
+    }
+</script>

_sass/_main.scss

@@ -22,6 +22,7 @@
 
 // Bulma Extension Created by Swarnil
 @import "../_sass/extensions/sticky";
+@import "../_sass/extensions/blockquotes";
 
 
 

_sass/extensions/_blockquotes.scss

@@ -0,0 +1,32 @@
+blockquote {
+    position: relative;
+    font-size: 1.25rem; // Adjust font size as needed
+    color: $grey-dark; // Use Bulma's default dark grey color for text
+    overflow: hidden; // Ensure the typewriter animation stays within the blockquote
+
+    &::before {
+      content: "\201C"; // Left double quotation mark
+      font-size: 3rem; // Adjust font size of quotation mark as needed
+      position: absolute;
+      top: -1rem; // Adjust vertical position of quotation mark as needed
+      left: -1.5rem; // Adjust horizontal position of quotation mark as needed
+      color: $primary; // Use Bulma's primary color for quotation mark
+      transition: transform 0.5s; // Add transition for hover effect
+    }
+
+    border-left: 4px solid $primary; // Use Bulma's primary color for left border
+    padding: 0 1.25rem; // Adjust padding as needed
+    margin: 1.5rem 0; // Adjust margin as needed
+
+    // Hover animation for double quotes
+    &:hover::before {
+      transform: translateY(-3px); // Move the quotation mark upwards on hover
+    }
+  }
+
+  blockquote footer {
+    margin-top: 0.5rem; // Adjust margin between quote and attribution
+    font-size: 0.875rem; // Adjust font size for attribution as needed
+    color: $grey-dark; // Use Bulma's default dark grey color for attribution text
+  }
+

assets/js/app.js

@@ -40,3 +40,29 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
 
+  document.addEventListener("DOMContentLoaded", () => {
+    const blockquote = document.querySelector("blockquote");
+
+    const observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          typewriterEffect(entry.target.querySelector("p"));
+          observer.unobserve(entry.target);
+        }
+      });
+    });
+
+    observer.observe(blockquote);
+  });
+
+  function typewriterEffect(element) {
+    const text = element.innerText;
+    element.innerHTML = "";
+    let i = 0;
+    const typing = setInterval(() => {
+      element.innerHTML += text[i];
+      i++;
+      if (i === text.length) clearInterval(typing);
+    }, 100); // Adjust typing speed as needed
+  }
+

pages/about.md

@@ -0,0 +1,31 @@
+---
+layout: page
+title: About
+permalink: /about/
+sidebar : true
+---
+
+## Start
+Hello, I'm Swarnil, a 27-year-old software engineer currently based in Bangalore. My journey began in the town of Mahroni, Uttar Pradesh, in July 1996. In pursuit of quality education, I spent my childhood in a boarding school, setting the stage for my academic path. The Kota chapter was quite the rollercoaster – attempts to crack IIT/JEE might not have gone as planned, but fear not, I found my way to LNCT Bhopal, where I pursued Computer Science Engineering.
+
+{% include video/youtube.html id="uV3eTXpEBOg" title="Your Video Title" description="Your Video Description" start_time="30" end_time="60" autoplay="true" aspect_ratio="16by9" %}
+
+
+## Discovery Of My Passion For Youtube
+Despite graduating without a job offer, In college, I stumbled upon my passion for YouTube. 'Imswarnil' became my creative outlet, a channel where each video not only shared tech insights but also reflected my love for creativity. This newfound passion added a positive twist to my journey.
+
+## Job Seeker Me
+the next chapter unfolded in Bangalore, I spent seven months navigating the challenges of job hunting, determined to land my first job. It was a journey filled with learning and resilience, and it all paid off when I finally got the job.
+
+## My First Job, Stream and Salesforce
+Started as a web developer in a startup, later at Accenture, my focus unexpectedly shifted to Salesforce. Assigned to the Salesforce stream, I blended technical skills with a creative touch, finding a unique way to make things beautiful within this new domain.
+
+In this tech world, I discovered a newfound interest in UX design, combining my love for art and design. Life in Bangalore is an ongoing adventure, and through 'Imswarnil,' I document both my tech journey and personal experiences.
+
+Join #teamswarnil as, at 27, there's much more to explore and achieve.
+
+Quote: "The only limit to our realization of tomorrow will be our doubts of today." - Franklin D. Roosevelt
+> Somewhere, something incredible is waiting to be known
+
+
+> Quote here OKLAY