{
    "version": "https://jsonfeed.org/version/1",
    "title": "Algo Success Stories",
    "home_page_url": "https://ajay-dhangar.github.io/algo/story",
    "description": "Inspiring journeys of triumph and growth in the world of algorithms. Discover how learners overcame challenges, achieved milestones, and transformed their skills through dedication and perseverance.",
    "items": [
        {
            "id": "https://ajay-dhangar.github.io/algo/story/ajay-dhangar",
            "content_html": "<p><em>\"The true measure of open source isn't the code we write, but the community we build around it.\"</em> — <strong>Ajay Dhangar</strong></p>\n<div class=\"founder-header-badge\" style=\"padding:1rem;background:rgba(0, 180, 216, 0.1);border-radius:8px;border-left:4px solid #00b4d8;margin-bottom:2rem\"><p><strong>Current Mission:</strong> Transforming <strong>Algo</strong> from a repository into the world's most intuitive, living, breathing documentation ecosystem for mastering Data Structures and Algorithms.</p></div>\n<div style=\"display:flex;flex-wrap:wrap;gap:2.5rem;align-items:center;margin:2rem 0;justify-content:center\"><div style=\"flex:1 1 260px;max-width:280px;display:flex;justify-content:center\"><img src=\"https://ajay-dhangar.github.io/img/ajay-dhangar.png\" alt=\"Ajay Dhangar\" style=\"border-radius:16px;width:100%;height:auto;box-shadow:0 10px 30px rgba(0, 180, 216, 0.15);border:2px solid rgba(0, 180, 216, 0.25);transition:transform 0.3s ease\"></div><div style=\"flex:2 1 380px\"><p style=\"font-size:1.1rem;line-height:1.6\"></p><p>Hey! I'm <strong>Ajay Dhangar</strong>, a software engineer, full-stack developer, and open-source advocate fueled by a single core conviction: <em>technical learning shouldn't feel like an uphill battle against dry text.</em></p><p></p><p style=\"line-height:1.6\"></p><p>As the Founder &amp; CEO of <strong>CodeHarborHub</strong>, I spend my time building platforms that bridge the massive gap between academic computer science theory and actual, hands-on enterprise engineering. With a solid foundation in engineering systems, I quickly realized that the best software isn't just built to run efficiently—it's built to empower the people using it.</p><p></p><p style=\"line-height:1.6\"></p><p>I consider myself an educator at heart who speaks fluent code. When I'm not configuring complex automated CI/CD workflows, diving deep into React state architecture, or optimizing performance pipelines for <strong>Algo</strong>, you can find me reviewing community pull requests, crafting tech paths, and brainstorming how next-gen automation can make open source accessible to absolutely everyone.</p><p></p></div></div>\n<h2 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"the-genesis-staring-at-a-blank-screen\">The Genesis: Staring at a Blank Screen<a href=\"https://ajay-dhangar.github.io/algo/story/ajay-dhangar#the-genesis-staring-at-a-blank-screen\" class=\"hash-link\" aria-label=\"Direct link to The Genesis: Staring at a Blank Screen\" title=\"Direct link to The Genesis: Staring at a Blank Screen\">​</a></h2>\n<p>Every line of code in <strong>Algo</strong> comes from a place of deep personal frustration. When I first dove into the world of complex data structures and algorithms, I didn't find an open, welcoming landscape. Instead, I found myself staring at cold, academic jargon, hidden behind steep paywalls, or trapped inside isolated code snippets that offered zero context on how things actually worked in production.</p>\n<p>I remember spending countless late nights tracing recursion trees on scrap paper, wondering why technical documentation felt like it was written for compilers rather than human beings.</p>\n<div class=\"theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 14 16\"><path fill-rule=\"evenodd\" d=\"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z\"></path></svg></span>The realization was simple</div><div class=\"admonitionContent_BuS1\"><p>The developer community didn't need another dry, copy-paste cheat sheet. We needed a digital playground where logic could be seen, touched, and broken apart.</p></div></div>\n<p>Driven by a passion for full-stack engineering and building things that scale, I founded <strong>CodeHarborHub</strong>. But I knew we needed a dedicated space purely for algorithms—and that’s how <strong>Algo</strong> was born. It is my attempt to build the documentation platform I desperately wished I had when I was starting out.</p>\n<h2 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"the-architectural-vision-why-we-build-differently\">The Architectural Vision: Why We Build Differently<a href=\"https://ajay-dhangar.github.io/algo/story/ajay-dhangar#the-architectural-vision-why-we-build-differently\" class=\"hash-link\" aria-label=\"Direct link to The Architectural Vision: Why We Build Differently\" title=\"Direct link to The Architectural Vision: Why We Build Differently\">​</a></h2>\n<p>When we started mapping out Algo, I made a conscious decision to steer clear of traditional, static Markdown files. If we want to change how people learn, we have to change how we present information. By leveraging <strong>Docusaurus (React + MDX)</strong>, we treat documentation as a living application based on three core beliefs:</p>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"1-code-is-tactical-not-textual\">1. Code is Tactical, Not Textual<a href=\"https://ajay-dhangar.github.io/algo/story/ajay-dhangar#1-code-is-tactical-not-textual\" class=\"hash-link\" aria-label=\"Direct link to 1. Code is Tactical, Not Textual\" title=\"Direct link to 1. Code is Tactical, Not Textual\">​</a></h3>\n<p>Reading about a data structure without interacting with it is like reading a recipe without ever tasting the food. By integrating <strong>MDX</strong>, we empower contributors to embed live, interactive React components directly into the explanations. When you learn about a stack or a queue here, you won't just look at code—you will eventually watch elements slide in and out of memory in real-time.</p>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"2-we-think-in-shapes-not-syntax\">2. We Think in Shapes, Not Syntax<a href=\"https://ajay-dhangar.github.io/algo/story/ajay-dhangar#2-we-think-in-shapes-not-syntax\" class=\"hash-link\" aria-label=\"Direct link to 2. We Think in Shapes, Not Syntax\" title=\"Direct link to 2. We Think in Shapes, Not Syntax\">​</a></h3>\n<p>A raw script file doesn't teach you how an algorithm thinks; it only shows you the final result. To bridge this gap, we treat our UI like a canvas. We lean heavily on <strong>Mermaid.js</strong> for clear visual flowcharts and <strong>KaTeX</strong> to make the mathematical proofs behind time-complexity feel elegant rather than intimidating.</p>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"3-open-source-is-production-software\">3. Open Source is Production Software<a href=\"https://ajay-dhangar.github.io/algo/story/ajay-dhangar#3-open-source-is-production-software\" class=\"hash-link\" aria-label=\"Direct link to 3. Open Source is Production Software\" title=\"Direct link to 3. Open Source is Production Software\">​</a></h3>\n<p>I don't believe in \"beginner-grade\" code. At Algo, we treat our open-source project like enterprise software. From automated linting to strict semantic branching and rigorous CI/CD pipelines, we ensure that every contributor learns industry-standard habits from their very first pull request.</p>\n<h2 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"the-gssoc-26-chapter-lets-build-together\">The GSSoC '26 Chapter: Let’s Build Together<a href=\"https://ajay-dhangar.github.io/algo/story/ajay-dhangar#the-gssoc-26-chapter-lets-build-together\" class=\"hash-link\" aria-label=\"Direct link to The GSSoC '26 Chapter: Let’s Build Together\" title=\"Direct link to The GSSoC '26 Chapter: Let’s Build Together\">​</a></h2>\n<p>Having Algo selected as a featured project for the <strong>GirlScript Summer of Code (GSSoC) 2026</strong> is incredibly meaningful to me. It brings this entire journey full circle.</p>\n<p>As a Project Admin and mentor, my philosophy is deeply rooted in empathy: <strong>No contribution is too small, and no standard is too high.</strong></p>\n<p>I still remember the sheer intimidation of opening my very first pull request—the fear of a maintainer rejecting my code. Because of that, I promise you that Algo will always be a safe harbor for learners. Whether you are hunting for your very first <code>good first issue</code> to fix a typo, or you are an advanced engineer looking to optimize our Docusaurus pipeline rendering, there is a seat at the table with your name on it.</p>\n<h2 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"whats-next-on-the-horizon\">What’s Next on the Horizon?<a href=\"https://ajay-dhangar.github.io/algo/story/ajay-dhangar#whats-next-on-the-horizon\" class=\"hash-link\" aria-label=\"Direct link to What’s Next on the Horizon?\" title=\"Direct link to What’s Next on the Horizon?\">​</a></h2>\n<p>We are just getting started. We are aggressively pushing past simple text documentation to build a robust ecosystem, including:</p>\n<ul>\n<li><strong>Interactive Simulators:</strong> Drag-and-drop visualizers built completely in React to demystify complex graph and tree traversals.</li>\n<li><strong>Collaborative Learning Spaces:</strong> Real-time feedback tools right inside the docs to connect absolute beginners with core maintainers.</li>\n<li><strong>Global Inclusivity:</strong> Breaking down language barriers by localizing the Algo documentation into multiple native languages.</li>\n</ul>\n<p>Thank you for stopping by the repository, reading through our vision, and choosing to build the future of technical education alongside me. Take a look at our contribution guidelines, find an issue that excites you, and <strong>let's review some PRs!</strong></p>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"lets-connect--collaborate\">Let's Connect &amp; Collaborate<a href=\"https://ajay-dhangar.github.io/algo/story/ajay-dhangar#lets-connect--collaborate\" class=\"hash-link\" aria-label=\"Direct link to Let's Connect &amp; Collaborate\" title=\"Direct link to Let's Connect &amp; Collaborate\">​</a></h3>\n<ul>\n<li><strong>GitHub:</strong> <a href=\"https://github.com/ajay-dhangar\" target=\"_blank\" rel=\"noopener noreferrer\">@ajay-dhangar</a></li>\n<li><strong>Project Hub:</strong> <a href=\"https://ajay-dhangar.github.io/algo/\" target=\"_blank\" rel=\"noopener noreferrer\">Algo Live Docs</a></li>\n</ul>",
            "url": "https://ajay-dhangar.github.io/algo/story/ajay-dhangar",
            "title": "Meet the Founder: Ajay Dhangar",
            "summary": "The personal journey, philosophy, and open-source vision of Algo's founder.",
            "date_modified": "2026-06-08T17:11:09.000Z",
            "author": {
                "name": "Ajay Dhangar",
                "url": "https://ajay-dhangar.github.io/"
            },
            "tags": [
                "founder",
                "spotlight",
                "open-source",
                "tech-education"
            ]
        },
        {
            "id": "https://ajay-dhangar.github.io/algo/story/template",
            "content_html": "<p>At <strong>Algo</strong>, we believe every pull request has a human story behind it. Whether you are fixing your very first typo during GSSoC '26, building an intricate interactive React visualization, or optimizing our CI/CD pipelines, your journey can inspire thousands of developers who visit this platform daily.</p>\n<p>This page acts as both a <strong>step-by-step guide</strong> on how to submit your developer spotlight and a <strong>live blueprint</strong> showcasing the advanced layout features you can use to make your story look beautiful.</p>\n<h2 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"quick-start-guide\">Quick Start Guide<a href=\"https://ajay-dhangar.github.io/algo/story/template#quick-start-guide\" class=\"hash-link\" aria-label=\"Direct link to Quick Start Guide\" title=\"Direct link to Quick Start Guide\">​</a></h2>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"step-1-create-your-file\">Step 1: Create Your File<a href=\"https://ajay-dhangar.github.io/algo/story/template#step-1-create-your-file\" class=\"hash-link\" aria-label=\"Direct link to Step 1: Create Your File\" title=\"Direct link to Step 1: Create Your File\">​</a></h3>\n<p>Navigate to your local clone of the repository and create a new MDX file inside the stories directory:</p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_biex\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token comment\" style=\"color:#999988;font-style:italic\"># Naming convention: your-github-username.mdx</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">docs/stories/your-github-username.mdx</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span></code></pre><div class=\"buttonGroup__atx\"><button type=\"button\" aria-label=\"Copy code to clipboard\" title=\"Copy\" class=\"clean-btn\"><span class=\"copyButtonIcons_eSgA\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" class=\"copyButtonIcon_y97N\"><path fill=\"currentColor\" d=\"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z\"></path></svg><svg viewBox=\"0 0 24 24\" class=\"copyButtonSuccessIcon_LjdS\"><path fill=\"currentColor\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"></path></svg></span></button></div></div></div>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"step-2-add-your-profile-image\">Step 2: Add Your Profile Image<a href=\"https://ajay-dhangar.github.io/algo/story/template#step-2-add-your-profile-image\" class=\"hash-link\" aria-label=\"Direct link to Step 2: Add Your Profile Image\" title=\"Direct link to Step 2: Add Your Profile Image\">​</a></h3>\n<p>Upload a profile picture or a custom banner image to the <code>static/img/stories/</code> folder, or use your direct GitHub avatar URL (<code>https://github.com/your-username.png</code>).</p>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"step-3-fill-out-the-template--open-a-pr\">Step 3: Fill Out the Template &amp; Open a PR<a href=\"https://ajay-dhangar.github.io/algo/story/template#step-3-fill-out-the-template--open-a-pr\" class=\"hash-link\" aria-label=\"Direct link to Step 3: Fill Out the Template &amp; Open a PR\" title=\"Direct link to Step 3: Fill Out the Template &amp; Open a PR\">​</a></h3>\n<p>Copy the boilerplate template below, inject your unique human experience, and submit a PR with the tag <code>docs: added contributor story [your-username]</code>.</p>\n<h2 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"the-blueprint-boilerplate-copy--paste\">The Blueprint Boilerplate (Copy &amp; Paste)<a href=\"https://ajay-dhangar.github.io/algo/story/template#the-blueprint-boilerplate-copy--paste\" class=\"hash-link\" aria-label=\"Direct link to The Blueprint Boilerplate (Copy &amp; Paste)\" title=\"Direct link to The Blueprint Boilerplate (Copy &amp; Paste)\">​</a></h2>\n<p>Copy the code block below to start writing your story. We have fixed the broken component formats so you can deploy an enterprise-grade design layout effortlessly.</p>\n<div class=\"language-mdx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_biex\"><pre tabindex=\"0\" class=\"prism-code language-mdx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">---</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">title: \"My Open Source Journey: [Your Name]\"</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">authors: [your-name]</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">sidebar_label: \"[Your Name]\"</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">tags: [contributor-spotlight, gssoc26, open-source]</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">description: \"How [Your Name] contributed to Algo and overcame the fear of the first pull request.\"</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">---</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">import Tabs from '@theme/Tabs';</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">import TabItem from '@theme/TabItem';</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"># My Open Source Journey: [Your Name]</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&lt;!-- Quick Summary Profile Card --&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&lt;div style={{ </span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  padding: '1.5rem', </span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  background: 'linear-gradient(135deg, rgba(0, 180, 216, 0.08) 0%, rgba(0, 119, 182, 0.05) 100%)', </span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  borderRadius: '12px', </span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  border: '1px solid rgba(0, 180, 216, 0.2)', </span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  marginBottom: '2rem',</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  display: 'flex',</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  gap: '1.5rem',</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  alignItems: 'center',</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  flexWrap: 'wrap'</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">}}&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  &lt;img src=\"https://github.com/your-github-username.png\" alt=\"Profile\" style={{ width: '80px', height: '80px', borderRadius: '50%', border: '3px solid #00b4d8' }} /&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  &lt;div&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    &lt;h3 style={{ margin: '0 0 0.5rem 0', color: '#00b4d8' }}&gt;🚀 Developer Profile&lt;/h3&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    &lt;p style={{ margin: 0, fontSize: '0.95rem' }}&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      &lt;strong&gt;Role:&lt;/strong&gt; Frontend Contributor / Technical Writer &lt;br /&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      &lt;strong&gt;GitHub:&lt;/strong&gt; &lt;a href=\"https://github.com/your-github-username\" target=\"_blank\"&gt;@your-github-username&lt;/a&gt; &lt;br /&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      &lt;strong&gt;Impact:&lt;/strong&gt; Optimized 3 React visualizers &amp; Documented Graph Traversals</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    &lt;/p&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  &lt;/div&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&lt;/div&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">## The Spark: Finding Algo</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">*Replace this text with your real story. How did you discover Algo? What caught your attention? Speak genuinely about your initial thoughts, fears, or goals when entering the ecosystem.*</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">:::tip[My Advice to Beginners]</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">Don't wait until you feel like an \"expert\" to contribute. Grab a `good first issue` and start right now!</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">:::</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">## The Breakthrough (My Contributions)</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">Below is how I broken down my technical achievements during my time contributing to the repository:</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&lt;Tabs&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  &lt;TabItem default label=\"Code Contributions\" value=\"code\"&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    ### Features Built</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    * **Feature A:** Implemented an interactive sidebar component utilizing Tailwind CSS.</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    * **Feature B:** Fixed a state mutation bug in the Stack Visualizer component.</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    ```tsx</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    // Example of code you modified or were proud of writing!</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    const handleStackPush = (element) =&gt; {</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      setStack((prev) =&gt; [...prev, element]);</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    };</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    ```</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  &lt;/TabItem&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  &lt;TabItem label=\"Technical Writing &amp; Visuals\" value=\"docs\"&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    ### Documentation &amp; Layouts</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    * **Graph Algorithms:** Authored the comprehensive documentation for Breadth-First Search (BFS).</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    * **Diagrams:** Integrated custom **Mermaid.js** flowcharts to illustrate time complexities visually for newcomers.</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  &lt;/TabItem&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&lt;/Tabs&gt;</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">## My Milestone Timeline</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">```mermaid</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">graph LR</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    A[Discovered Algo] --&gt; B[First PR Merged]</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    B --&gt; C[Fixed Critical Bug]</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    C --&gt; D[Mentoring New Contributors]</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    style B fill:#00b4d8,stroke:#fff,stroke-width:2px,color:#fff</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    style D fill:#90e0ef,stroke:#0077b6,stroke-width:2px</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">```</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">## Reflections &amp; Thank Yous</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">*Share your thoughts on the Algo community environment. Did you interact with the founder, Ajay Dhangar, or the project maintainers? What did you learn about collaboration?*</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">:::info[Community Note]</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">\"Open source isn't just about shipping code features; it's about belonging to a community that elevates your growth.\"</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">:::</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span></code></pre><div class=\"buttonGroup__atx\"><button type=\"button\" aria-label=\"Copy code to clipboard\" title=\"Copy\" class=\"clean-btn\"><span class=\"copyButtonIcons_eSgA\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" class=\"copyButtonIcon_y97N\"><path fill=\"currentColor\" d=\"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z\"></path></svg><svg viewBox=\"0 0 24 24\" class=\"copyButtonSuccessIcon_LjdS\"><path fill=\"currentColor\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"></path></svg></span></button></div></div></div>\n<h2 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"ui--format-toolkit-for-a-better-look\">UI &amp; Format Toolkit for a Better Look<a href=\"https://ajay-dhangar.github.io/algo/story/template#ui--format-toolkit-for-a-better-look\" class=\"hash-link\" aria-label=\"Direct link to UI &amp; Format Toolkit for a Better Look\" title=\"Direct link to UI &amp; Format Toolkit for a Better Look\">​</a></h2>\n<p>To make your story look highly polished, interactive, and engaging, maximize these native Docusaurus styling tools:</p>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"1-highlight-callouts-admonitions\">1. Highlight Callouts (Admonitions)<a href=\"https://ajay-dhangar.github.io/algo/story/template#1-highlight-callouts-admonitions\" class=\"hash-link\" aria-label=\"Direct link to 1. Highlight Callouts (Admonitions)\" title=\"Direct link to 1. Highlight Callouts (Admonitions)\">​</a></h3>\n<p>Break up walls of text using clean markdown callout boxes to highlight critical turning points or struggles.</p>\n<div class=\"theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 14 16\"><path fill-rule=\"evenodd\" d=\"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z\"></path></svg></span>Context Info</div><div class=\"admonitionContent_BuS1\"><p>Use this for background information or details regarding your university or engineering background.</p></div></div>\n<div class=\"theme-admonition theme-admonition-danger admonition_xJq3 alert alert--danger\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 12 16\"><path fill-rule=\"evenodd\" d=\"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z\"></path></svg></span>The Challenge I Faced</div><div class=\"admonitionContent_BuS1\"><p>Use this to talk about a major roadblock, a terrifying merge conflict, or a failing CI/CD pipeline bug you had to crack!</p></div></div>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"2-live-flowcharts-mermaidjs\">2. Live Flowcharts (Mermaid.js)<a href=\"https://ajay-dhangar.github.io/algo/story/template#2-live-flowcharts-mermaidjs\" class=\"hash-link\" aria-label=\"Direct link to 2. Live Flowcharts (Mermaid.js)\" title=\"Direct link to 2. Live Flowcharts (Mermaid.js)\">​</a></h3>\n<p>Show off your learning curves or architecture fixes interactively with direct script parsing:</p>\n<div class=\"language-markdown codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_biex\"><pre tabindex=\"0\" class=\"prism-code language-markdown codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token code punctuation\" style=\"color:#393A34\">```</span><span class=\"token code code-language\">mermaid</span><span class=\"token code\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token code\"></span><span class=\"token code code-block language-mermaid\">graph TD</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token code code-block language-mermaid\">    A[Stuck on Recursion Loops] --&gt;|Read Algo Docs| B[Concept Clicked]</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token code code-block language-mermaid\">    B --&gt; C[Wrote Interactive MDX Visualizer]</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token code code-block language-mermaid\"></span><span class=\"token code\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token code\"></span><span class=\"token code punctuation\" style=\"color:#393A34\">```</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span></code></pre><div class=\"buttonGroup__atx\"><button type=\"button\" aria-label=\"Copy code to clipboard\" title=\"Copy\" class=\"clean-btn\"><span class=\"copyButtonIcons_eSgA\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" class=\"copyButtonIcon_y97N\"><path fill=\"currentColor\" d=\"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z\"></path></svg><svg viewBox=\"0 0 24 24\" class=\"copyButtonSuccessIcon_LjdS\"><path fill=\"currentColor\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"></path></svg></span></button></div></div></div>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"3-modern-glassmorphism-dashboard-cards\">3. Modern Glassmorphism Dashboard Cards<a href=\"https://ajay-dhangar.github.io/algo/story/template#3-modern-glassmorphism-dashboard-cards\" class=\"hash-link\" aria-label=\"Direct link to 3. Modern Glassmorphism Dashboard Cards\" title=\"Direct link to 3. Modern Glassmorphism Dashboard Cards\">​</a></h3>\n<p>Instead of generic headers, apply inline custom layout styles to build an striking introduction element:</p>\n<div class=\"language-html codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_biex\"><pre tabindex=\"0\" class=\"prism-code language-html codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag\" style=\"color:#00009f\">div</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag special-attr attr-name\" style=\"color:#00a4db\">style</span><span class=\"token tag special-attr attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag special-attr attr-value value css language-css punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag special-attr attr-value value css language-css punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag\" style=\"color:#00009f\"> </span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name namespace\" style=\"color:#00a4db;opacity:0.7\">padding:</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">'1.25rem',</span><span class=\"token tag\" style=\"color:#00009f\"> </span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name namespace\" style=\"color:#00a4db;opacity:0.7\">background:</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">'rgba(255,</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">255,</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">255,</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">0.03)',</span><span class=\"token tag\" style=\"color:#00009f\"> </span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name namespace\" style=\"color:#00a4db;opacity:0.7\">backdropFilter:</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">'blur(10px)',</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name namespace\" style=\"color:#00a4db;opacity:0.7\">borderRadius:</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">'8px',</span><span class=\"token tag\" style=\"color:#00009f\"> </span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name namespace\" style=\"color:#00a4db;opacity:0.7\">borderLeft:</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">'5px</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">solid</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">#0077b6',</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name namespace\" style=\"color:#00a4db;opacity:0.7\">boxShadow:</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">'0</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">4px</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">12px</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">rgba(0,0,0,0.1)'</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\"></span><span class=\"token tag attr-name\" style=\"color:#00a4db\">}}</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag\" style=\"color:#00009f\">strong</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\">💡 Pro-Tip:</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;/</span><span class=\"token tag\" style=\"color:#00009f\">strong</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"> Using inline React styling syntax inside MDX files unlocks seamless design control without editing your theme CSS.</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;/</span><span class=\"token tag\" style=\"color:#00009f\">div</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span></code></pre><div class=\"buttonGroup__atx\"><button type=\"button\" aria-label=\"Copy code to clipboard\" title=\"Copy\" class=\"clean-btn\"><span class=\"copyButtonIcons_eSgA\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" class=\"copyButtonIcon_y97N\"><path fill=\"currentColor\" d=\"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z\"></path></svg><svg viewBox=\"0 0 24 24\" class=\"copyButtonSuccessIcon_LjdS\"><path fill=\"currentColor\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"></path></svg></span></button></div></div></div>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"need-help-reviewing-your-story-layout\">Need Help Reviewing Your Story Layout?<a href=\"https://ajay-dhangar.github.io/algo/story/template#need-help-reviewing-your-story-layout\" class=\"hash-link\" aria-label=\"Direct link to Need Help Reviewing Your Story Layout?\" title=\"Direct link to Need Help Reviewing Your Story Layout?\">​</a></h3>\n<p>If you're unsure if your layout renders correctly, drop a message into the <strong>CodeHarborHub Discord</strong> channel or ping our founder, <strong><a href=\"https://github.com/ajay-dhangar\" target=\"_blank\" rel=\"noopener noreferrer\">@ajay-dhangar</a></strong>, directly on your pull request thread. We are always ready to help you optimize your layout!</p>",
            "url": "https://ajay-dhangar.github.io/algo/story/template",
            "title": "Contributor Story Guide & Template",
            "summary": "Learn how to share your open-source journey on Algo and use advanced MDX features to make your story stand out.",
            "date_modified": "2026-06-08T17:11:09.000Z",
            "author": {
                "name": "Ajay Dhangar",
                "url": "https://ajay-dhangar.github.io/"
            },
            "tags": []
        }
    ]
}