<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Harish Machha</title>
    <description>The latest articles on DEV Community by Harish Machha (@harish_05).</description>
    <link>https://dev.to/harish_05</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F832009%2F43bb4937-f736-4478-bbe3-216cbe9e93a5.jpg</url>
      <title>DEV Community: Harish Machha</title>
      <link>https://dev.to/harish_05</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/harish_05"/>
    <language>en</language>
    <item>
      <title>Cloud-Native AI Deployment Using Kubernetes: A Real-World Portfolio Implementation</title>
      <dc:creator>Harish Machha</dc:creator>
      <pubDate>Wed, 04 Mar 2026 17:59:43 +0000</pubDate>
      <link>https://dev.to/harish_05/portfolio-seamless-deployment-through-kuberns-ai-e72</link>
      <guid>https://dev.to/harish_05/portfolio-seamless-deployment-through-kuberns-ai-e72</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv5822phcj9qhl1s4t4gi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv5822phcj9qhl1s4t4gi.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff7oq43p6iik4a1c3dbwk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff7oq43p6iik4a1c3dbwk.png" alt=" "&gt;&lt;/a&gt;&lt;br&gt;
Why Kubernetes Is a Game-Changer for AI Deployments&lt;/p&gt;

&lt;p&gt;Deploying AI models into production is very different from building them. Training might happen once, but inference needs to be reliable, scalable, and cost-efficient — and that’s where Kubernetes shines.&lt;/p&gt;

&lt;p&gt;

&lt;/p&gt;
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://kuberns.com/" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;kuberns.com&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;




&lt;p&gt;Here is your content converted into &lt;strong&gt;simple text with clear paragraph points&lt;/strong&gt;:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Seamless Scalability for AI Workloads&lt;/strong&gt;&lt;br&gt;
AI applications often experience unpredictable traffic. At one moment, the system may handle only a few hundred requests, and at another moment it may need to handle thousands. Kubernetes helps manage this by providing Horizontal Pod Autoscaling (HPA), automatic scaling based on CPU or GPU usage, and built-in load balancing. For AI inference APIs, this means the model can automatically scale up during peak traffic and scale down when demand is lower, helping save infrastructure costs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. GPU and Resource Management Made Easy&lt;/strong&gt;&lt;br&gt;
AI workloads require a large amount of computing resources. Kubernetes makes resource management easier by supporting GPU scheduling through device plugins, allowing developers to define resource requests and limits, and efficiently distributing workloads across nodes. This ensures that expensive GPU infrastructure is used efficiently, which is especially important for deep learning models.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. High Availability and Self-Healing&lt;/strong&gt;&lt;br&gt;
Production AI systems must be reliable and resilient. Kubernetes provides several features to support this, including automatic restart of failed containers, health checks through liveness and readiness probes, replica management, and rolling updates with zero downtime. If a model container crashes, Kubernetes automatically replaces it, ensuring that AI services remain available without interruption.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Simplified CI/CD for ML Models&lt;/strong&gt;&lt;br&gt;
Kubernetes makes it easier to integrate MLOps pipelines. Developers can version their machine learning models, deploy them using GitOps workflows, and quickly roll back to a previous version if a new model fails. This makes experimentation safer and enables continuous delivery of improved AI models.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Powerful Ecosystem Integration&lt;/strong&gt;&lt;br&gt;
Kubernetes integrates well with many AI and machine learning tools. For example, Kubeflow can be used for managing machine learning workflows, MLflow helps track experiments, TensorFlow Serving supports production inference, and NVIDIA Triton Inference Server optimizes model serving. This strong ecosystem reduces the complexity of building and managing complete AI pipelines.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6. Multi-Cloud and Hybrid Flexibility&lt;/strong&gt;&lt;br&gt;
Kubernetes allows organizations to deploy applications across multiple cloud platforms such as Amazon EKS, Google Kubernetes Engine, and Azure Kubernetes Service. Because Kubernetes works consistently across these platforms, it provides portability and helps prevent vendor lock-in. This also enables organizations to run AI workloads in hybrid or on-premise environments if needed.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>devops</category>
      <category>kubernetes</category>
      <category>machinelearning</category>
    </item>
    <item>
      <title>Enhance the Ecosystem with Wallet Connector Plugin: Simplifying Secure Wallet Integration</title>
      <dc:creator>Harish Machha</dc:creator>
      <pubDate>Thu, 04 Sep 2025 15:09:15 +0000</pubDate>
      <link>https://dev.to/harish_05/wallet-connector-plugin-simplifying-secure-wallet-integration-abf</link>
      <guid>https://dev.to/harish_05/wallet-connector-plugin-simplifying-secure-wallet-integration-abf</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/midnight-2025-08-20"&gt;Midnight Network "Privacy First" Challenge&lt;/a&gt; - Enhance the Ecosystem prompt&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built a Wallet Connector Plugin, a simple developer tool that makes it easy to connect Midnight wallets to any Node.js-based application.&lt;/p&gt;

&lt;p&gt;For beginners, integrating wallets often feels too complex and low-level—involving cryptographic details, transaction signing, and security pitfalls. This plugin abstracts away that complexity and provides a plug-and-play solution so developers can focus on building their applications, not wrestling with integrations.&lt;br&gt;
Highlights&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No deep cryptography knowledge needed&lt;/li&gt;
&lt;li&gt;Works with any Node.js framework&lt;/li&gt;
&lt;li&gt;Safe, privacy-first wallet connections out of the box&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;With just a few lines of code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { connectWallet } from "midnight-wallet-connector";

const wallet = await connectWallet();
console.log("Connected wallet:", wallet.address);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That’s it—your app is wallet-ready.&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Used Midnight's Technology
&lt;/h2&gt;

&lt;p&gt;The plugin is designed specifically for Midnight’s privacy-first ecosystem. It ensures wallet connections respect Midnight’s security model while providing a developer-friendly interface.&lt;/p&gt;

&lt;p&gt;Instead of developers needing to manage sensitive calls or low-level API operations, the plugin wraps these securely with Midnight’s principles in mind.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why This Matters
&lt;/h2&gt;

&lt;p&gt;while enhancing the ecosystem in order to improves the experience of building on Midnight for other developers&lt;/p&gt;

&lt;p&gt;For beginners, integrating with the Midnight.js API can be complex. In order to efficiently and effectively implement and connect with @midnight-ntwrk, beginners can easily use the plugin. Understanding the use of the plugin connection, users can implement it at a higher level in the project without entering into the lower-level complexity of the Midnight network.&lt;/p&gt;

&lt;h2&gt;
  
  
  Developer Experience Improvements
&lt;/h2&gt;

&lt;p&gt;The main problem this solves: lowering the entry barrier for new developers.&lt;/p&gt;

&lt;p&gt;Developers don’t need to reinvent wallet integration from scratch&lt;/p&gt;

&lt;p&gt;Instead of reading through long docs, they can start with a simple API&lt;/p&gt;

&lt;p&gt;This accelerates experimentation, onboarding, and adoption of Midnight&lt;/p&gt;

&lt;p&gt;By providing this abstraction, it makes Midnight’s ecosystem more accessible, developer-friendly, and faster to build on.&lt;/p&gt;

&lt;h2&gt;
  
  
  Set Up Instructions / Tutorial
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Install the package
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install midnight-wallet-connector
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Import and use
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { connectWallet } from "midnight-wallet-connector";

const wallet = await connectWallet();
console.log(wallet.address);

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Start building privacy-first apps 🚀&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>devchallenge</category>
      <category>midnightchallenge</category>
      <category>web3</category>
      <category>blockchain</category>
    </item>
    <item>
      <title>I build an AI Career Navigator: Real-Time Internships/job , Hackathons &amp; Research data Powered by n8n + Bright Data</title>
      <dc:creator>Harish Machha</dc:creator>
      <pubDate>Mon, 01 Sep 2025 06:33:00 +0000</pubDate>
      <link>https://dev.to/harish_05/i-build-an-ai-career-navigator-real-time-internshipsjob-hackathons-research-data-powered-by-1mp2</link>
      <guid>https://dev.to/harish_05/i-build-an-ai-career-navigator-real-time-internshipsjob-hackathons-research-data-powered-by-1mp2</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/brightdata-n8n-2025-08-13"&gt;AI Agents Challenge powered by n8n and Bright Data&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  AI Career Navigator 🚀
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Real-Time Internships, Hackathons &amp;amp; Research Opportunities for Students&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built an &lt;strong&gt;AI-powered career and research assistant&lt;/strong&gt; designed especially for &lt;strong&gt;undergraduate, postgraduate, and research students&lt;/strong&gt;.  &lt;/p&gt;

&lt;p&gt;This agent provides:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;📌 &lt;strong&gt;Real-Time Internship &amp;amp; Job Updates&lt;/strong&gt; – pulling fresh data from platforms like LinkedIn.
&lt;/li&gt;
&lt;li&gt;🏆 &lt;strong&gt;Hackathon &amp;amp; Competition Feeds&lt;/strong&gt; – from sources like &lt;a href="https://dev.to/challenges"&gt;dev.to/challenges&lt;/a&gt;, Devpost, and more.
&lt;/li&gt;
&lt;li&gt;📰 &lt;strong&gt;Latest Tech Blogs &amp;amp; News&lt;/strong&gt; – delivering personalized content based on the student’s area of interest.
&lt;/li&gt;
&lt;li&gt;📑 &lt;strong&gt;Research Paper Access&lt;/strong&gt; – AI-curated information on trending research papers and topics.
&lt;/li&gt;
&lt;li&gt;📂 &lt;strong&gt;Consolidated Report&lt;/strong&gt; – all results are structured into a neat document (e.g., PDF/DOCX) for easy access and sharing.
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In short, it acts as a &lt;strong&gt;24/7 AI career guide&lt;/strong&gt; for students who don’t want to miss out on the latest opportunities.&lt;/p&gt;




&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;🎥 [Demo Video / Screenshots Placeholder]   &lt;/p&gt;




&lt;h3&gt;
  
  
  n8n Workflow
&lt;/h3&gt;

&lt;p&gt;You can check out the full n8n workflow setup here:&lt;br&gt;&lt;br&gt;
🔗 GitHub Gist with n8n Workflow JSON  &lt;/p&gt;




&lt;h2&gt;
  
  
  Technical Implementation
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;System Instructions:&lt;/strong&gt; Designed the AI agent with role instructions to behave like a &lt;em&gt;career counselor and research assistant&lt;/em&gt;.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Model Choice:&lt;/strong&gt; Integrated GPT-based models for summarization, classification, and content recommendation.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Memory:&lt;/strong&gt; Used n8n’s built-in data persistence to store user preferences (e.g., “interested in AI + cybersecurity”).
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tools:&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;🌐 &lt;strong&gt;Bright Data Verified Node&lt;/strong&gt; – for real-time, structured LinkedIn job data.
&lt;/li&gt;
&lt;li&gt;📡 &lt;strong&gt;Web Scraping + APIs&lt;/strong&gt; – fetching hackathon and competition listings.
&lt;/li&gt;
&lt;li&gt;📰 &lt;strong&gt;Content Filtering&lt;/strong&gt; – retrieving tech blogs, posts, and news.
&lt;/li&gt;
&lt;li&gt;📑 &lt;strong&gt;Document Generation&lt;/strong&gt; – compiling AI responses and opportunity feeds into shareable reports.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;




&lt;h3&gt;
  
  
  Bright Data Verified Node
&lt;/h3&gt;

&lt;p&gt;The &lt;strong&gt;Bright Data Verified Node&lt;/strong&gt; was key to making this project &lt;strong&gt;real-time&lt;/strong&gt;.  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It pulls &lt;strong&gt;fresh internship and job postings&lt;/strong&gt; from LinkedIn without delays.
&lt;/li&gt;
&lt;li&gt;Ensures students see &lt;strong&gt;opportunities the moment they go live&lt;/strong&gt;, giving them an edge.
&lt;/li&gt;
&lt;li&gt;The structured data feeds into the AI agent for filtering and personalization.
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Journey
&lt;/h2&gt;

&lt;p&gt;I started this project with the idea:  &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;"How can students stay updated on internships, hackathons, research, and tech news—all in one place, without endless searching?"&lt;/em&gt;  &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Challenges I Overcame
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;✅ Setting up &lt;strong&gt;real-time data pipelines&lt;/strong&gt; with Bright Data.
&lt;/li&gt;
&lt;li&gt;✅ Integrating &lt;strong&gt;multiple sources&lt;/strong&gt; (LinkedIn, dev.to, Devpost, research databases).
&lt;/li&gt;
&lt;li&gt;✅ Designing an &lt;strong&gt;AI workflow in n8n&lt;/strong&gt; that feels smooth and intelligent.
&lt;/li&gt;
&lt;li&gt;✅ Generating &lt;strong&gt;shareable docs&lt;/strong&gt; so students can save or forward opportunities.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  What I Learned
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;How &lt;strong&gt;n8n workflows&lt;/strong&gt; can connect data + AI seamlessly.
&lt;/li&gt;
&lt;li&gt;The power of &lt;strong&gt;Bright Data nodes&lt;/strong&gt; for verified, structured, and reliable job data.
&lt;/li&gt;
&lt;li&gt;How AI can serve as a &lt;strong&gt;student-focused assistant&lt;/strong&gt;, not just a chatbot.
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;This AI Career Navigator transforms how students discover opportunities:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Instead of browsing dozens of websites,
&lt;/li&gt;
&lt;li&gt;They get a &lt;strong&gt;personalized feed of internships, hackathons, tech news, and research papers—instantly&lt;/strong&gt;.
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I believe this project can scale into a &lt;strong&gt;must-have AI assistant for students&lt;/strong&gt; worldwide.  &lt;/p&gt;

&lt;p&gt;🙌 I’d love to hear feedback, ideas, or collaborations in the comments!  &lt;/p&gt;




</description>
      <category>devchallenge</category>
      <category>n8nbrightdatachallenge</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Radio Asteral Frontend Design</title>
      <dc:creator>Harish Machha</dc:creator>
      <pubDate>Mon, 05 Aug 2024 03:35:39 +0000</pubDate>
      <link>https://dev.to/harish_05/radio-asteral-frontend-design-c0m</link>
      <guid>https://dev.to/harish_05/radio-asteral-frontend-design-c0m</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for &lt;a href="https://dev.to/challenges/frontend-2024-07-24"&gt;Frontend Challenge v24.07.24&lt;/a&gt;, CSS Art: Recreation.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Inspiration
&lt;/h2&gt;

&lt;h2&gt;
  
  
  Description of Radio Asteral Design
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;radio wave animation is created utilizes HTML and CSS to simulate dynamic wave motions, visually representing the flow of energy through space. This animation captures the essence of universal design principles, making it engaging and accessible to all users, while effectively illustrating complex concepts in a simple and captivating manner.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  HTML Code
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;

&amp;lt;head&amp;gt;
    &amp;lt;meta charset="UTF-8"&amp;gt;
    &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp;gt;
    &amp;lt;title&amp;gt;Radio Wave&amp;lt;/title&amp;gt;
    &amp;lt;link rel="stylesheet" href="styles.css"&amp;gt;
&amp;lt;/head&amp;gt;

&amp;lt;body&amp;gt;
    &amp;lt;main&amp;gt;
        &amp;lt;div class="index"&amp;gt;
            &amp;lt;div class="logoname"&amp;gt;
                &amp;lt;h2&amp;gt;RadioAsteral&amp;lt;/h2&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div class="circles"&amp;gt;
            &amp;lt;div class="circles_circle circle1"&amp;gt;&amp;lt;/div&amp;gt;
            &amp;lt;div class="circles_circle circle2"&amp;gt;&amp;lt;/div&amp;gt;
            &amp;lt;div class="circles_circle circle3"&amp;gt;&amp;lt;/div&amp;gt;
            &amp;lt;div class="gradint-color"&amp;gt;
                &amp;lt;div class="innercolor1"&amp;gt;&amp;lt;/div&amp;gt;
                &amp;lt;div class="innercolor2"&amp;gt;&amp;lt;/div&amp;gt;
                &amp;lt;div class="innercolor3"&amp;gt;&amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;div class="circleshadow"&amp;gt;
                &amp;lt;div class="gradint-color"&amp;gt;
                    &amp;lt;div class="innercolor1"&amp;gt;&amp;lt;/div&amp;gt;
                    &amp;lt;div class="innercolor2"&amp;gt;&amp;lt;/div&amp;gt;
                    &amp;lt;div class="innercolor3"&amp;gt;&amp;lt;/div&amp;gt;
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
    &amp;lt;/main&amp;gt;
    &amp;lt;script src="script.js"&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;/body&amp;gt;

&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  CSS Code
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;body {
    font-family: NeueMontreal-Regular, sans-serif;
}

.index {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    z-index: 10;
    background: black;
    height: 100px;
    opacity: 1;
    align-items: center;
    justify-content: left;
    justify-items: center;
}

.logoname h2 {
    font-family: NeueMontreal-Regular, sans-serif;
    color: rgb(255, 255, 255);
    z-index: 11;
    font-size: 3.5rem;
    margin-left: 25px;
    align-items: center;
    justify-items: center;
    font-weight: 800;
    font-style: normal;
    letter-spacing: -2px;
    animation: texteffect 1.0s normal forwards ease-in-out;
    animation-delay: 1.6s;
    opacity: 0;
    height: 100%;
    transition: texteffect 1.9s;
}

@keyframes texteffect {
    0% {
        opacity: 0.150;
        transform: translateX(0%) translateY(-90%) scale(1);
    }

    100% {
        opacity: 1;
        transform: translateX(0%) translateY(0%) scale(1);
    }
}

.circles {
    border: none;
    background-color: #000;
    min-height: 100vh;
    left: 50%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100vw;
    z-index: 1;
}

.circles_circle {
    border: 2px solid #ffffff;
    border-radius: 50%;
    height: 100vw;
    left: 50%;
    opacity: 1;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0);
    width: 100vw;
    will-change: transform;
    animation-name: wave;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: wave 1.5s;
}

.circle1 {
    animation-delay: 0s;

}

.circle2 {
    animation-delay: 0.6s;

}

.circle3 {
    animation-delay: 1.4s;

}

@keyframes wave {
    0% {
        opacity: 0.150;
        transform: translateX(-50%) translateY(-50%) scale(0.2500);
    }

    50% {
        opacity: 0.7800;
        transform: translateX(-50%) translateY(-50%) scale(1.2000);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) scale(1.2500);
    }
}

.gradint-color {
    clip-path: circle(50%);
    height: 380px;
    width: 380px;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(#ed5701 73%, white);
    animation: circleColor 1.0s normal forwards ease-in-out;
    transition: circleColor 1.5s;
    animation-delay: 0.8s;
    opacity: 0;
}

@keyframes circleColor {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) scale(0);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
}

.circleshadow {

    display: block;
    height: 430px;
    width: 430px;
    left: 50%;
    border-radius: 300px;
    top: 50%;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    filter: blur(25px);
    z-index: -2;
}

.innercolor1 {

    background: radial-gradient(#cad23d 70%, white);
    height: 0px;
    width: 0px;
    left: calc(50% - 100px);
    top: 50%;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
    filter: blur(50px);
    animation-name: randomWiggle;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.innercolor2 {

    background: radial-gradient(#c6e9e0 70%, white);
    height: 0px;
    width: 0px;
    left: calc(50% - 100px);
    top: 50%;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
    filter: blur(50px);
    animation-name: randomWiggle;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.innercolor3 {

    background: radial-gradient(#d4add4 70%, white);
    height: 0px;
    width: 0px;
    left: calc(50% - 100px);
    top: 50%;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
    filter: blur(50px);
    animation-name: randomWiggle;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

@keyframes randomWiggle {
    0% {
        left: calc(50% - 250px);
        width: 0px;
        height: 0px;
    }

    50% {
        width: 550px;
        height: 550px;
    }

    100% {
        left: calc(50% + 250px);
        width: 0px;
        height: 0px;
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  OUTPUT
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpq6ojmhq2skcnonij5b0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpq6ojmhq2skcnonij5b0.png" alt="Image description" width="800" height="380"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6n8dvf3p4ugx95kiivz1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6n8dvf3p4ugx95kiivz1.png" alt="Image description" width="800" height="397"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>frontendchallenge</category>
      <category>devchallenge</category>
      <category>css</category>
    </item>
    <item>
      <title>Creating a Seamless Shopping Experience: My Wix eCommerce Website for the Dev.to Challenge</title>
      <dc:creator>Harish Machha</dc:creator>
      <pubDate>Mon, 15 Jul 2024 04:23:53 +0000</pubDate>
      <link>https://dev.to/harish_05/creating-a-seamless-shopping-experience-my-wix-ecommerce-website-for-the-devto-challenge-2bo1</link>
      <guid>https://dev.to/harish_05/creating-a-seamless-shopping-experience-my-wix-ecommerce-website-for-the-devto-challenge-2bo1</guid>
      <description>&lt;p&gt;&lt;strong&gt;This is submission for the Wix Studio Challenge&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What i build through the wix studio&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;wix website : &lt;a href="https://cahale2772.wixstudio.io/my-site-2" rel="noopener noreferrer"&gt;https://cahale2772.wixstudio.io/wixshop&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;wixshop&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Building my eCommerce website with Wix has been an incredible journey, leveraging the powerful Wix Studio library and APIs to enhance user experience. The platform's extensive customization options allowed me to create a visually stunning and highly functional online store, seamlessly integrating advanced features to streamline the shopping process. Utilizing Wix's APIs, I was able to add dynamic content and personalized user interactions, ensuring a smooth and engaging shopping experience for every visitor.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Key features&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Home page:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The home page is crafted to captivate visitors, utilizing the Wix Members API to display personalized content and dynamically update media sources. It features a sleek testimonial section with intuitive navigation, enhancing credibility and engagement.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Registration and Login Process:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The user authentication and management system is seamlessly integrated using the Wix Members API. This streamlined process ensures a smooth and efficient registration and login experience for users, enhancing both security and usability.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Catalog Page:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The Catalog Page is designed to display product information and pricing details, all maintained and updated through Wix APIs. This integration ensures that users always see the latest product offerings and accurate pricing, providing a reliable and engaging shopping experience.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Product Page:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The Product Page offers users the ability to customize their purchases, tailoring the products to their specific preferences. It also showcases unique and exclusive items, providing an enticing shopping experience. This page leverages Wix's powerful tools to ensure a smooth, personalized, and engaging journey from discovery to purchase.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cart Catalogue Page:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The Cart Catalogue Page provides users with a comprehensive view of their selected products, complete with detailed descriptions and pricing. This page ensures a seamless shopping experience by allowing users to review and modify their cart items before proceeding to checkout. The integration of Wix APIs guarantees that product information is always accurate and up-to-date.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;WIX API that utilize in the project&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;wix-auth:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I utilized the Wix Auth and Login API to implement an efficient and secure login system for visitors. This integration ensures quick access while maintaining robust security measures, providing a seamless and protected user experience.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;wix-animations:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I leveraged Wix Animations to create an engaging and dynamic user experience on the website. These animations enhance the visual appeal and interactivity of the site, drawing visitors' attention to key elements and ensuring a memorable browsing experience. The smooth, professional animations add a touch of sophistication, making the site both attractive and user-friendly.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;wix-window:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I utilized Wix Window to enhance dynamic user interactions on the website. This powerful tool allows for creating custom pop-ups, modals, and dialogs, improving user engagement and navigation. By providing context-sensitive information and actions, Wix Window ensures a more interactive and personalized browsing experience for visitors.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;wixshop website&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff0g9x35t0okrk91iby6z.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff0g9x35t0okrk91iby6z.jpg" alt="Home page" width="800" height="493"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcd0jr4nli9f3beqv87xf.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcd0jr4nli9f3beqv87xf.jpg" alt="Product catalogue" width="800" height="474"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsuvpi0o3ilyupu8hf7o8.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsuvpi0o3ilyupu8hf7o8.jpg" alt="Product page " width="800" height="487"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8o4v39ras1qfirrcrv94.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8o4v39ras1qfirrcrv94.jpg" alt="Product selection page " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3nw49qv8tpx03kakw5ns.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3nw49qv8tpx03kakw5ns.jpg" alt="Showcase top seller products" width="800" height="731"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>wixstudiochallenge</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>AES: The Power of Advanced Encryption Standard for Data Security</title>
      <dc:creator>Harish Machha</dc:creator>
      <pubDate>Mon, 17 Jun 2024 15:58:43 +0000</pubDate>
      <link>https://dev.to/harish_05/aes-the-power-of-advanced-encryption-standard-for-data-security-g6c</link>
      <guid>https://dev.to/harish_05/aes-the-power-of-advanced-encryption-standard-for-data-security-g6c</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flhrpm6da4zl7dtt0jped.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flhrpm6da4zl7dtt0jped.jpg" alt="Image description" width="771" height="417"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;## Advanced Encryption Standard&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;"AES (Advanced Encryption Standard) is a symmetric key encryption method crucial for secure data transmission. It uses 128, 192, or 256-bit keys to encrypt and decrypt data, ensuring robust protection against unauthorized access and cyber threats. "&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>cschallenge</category>
      <category>computerscience</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Cryptographic Security: Safeguarding Data</title>
      <dc:creator>Harish Machha</dc:creator>
      <pubDate>Mon, 17 Jun 2024 15:52:29 +0000</pubDate>
      <link>https://dev.to/harish_05/cryptographic-security-safeguarding-data-5aaj</link>
      <guid>https://dev.to/harish_05/cryptographic-security-safeguarding-data-5aaj</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flhrpm6da4zl7dtt0jped.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flhrpm6da4zl7dtt0jped.jpg" alt="Image description" width="771" height="417"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;## Cryptographic Security&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;"Cryptographic security ensures data confidentiality, integrity, and authenticity through encryption, hashing, and digital signatures, safeguarding against unauthorized access and tampering."&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>cschallenge</category>
      <category>computerscience</category>
      <category>beginners</category>
    </item>
    <item>
      <title>IPFS: The Decentralized Future of File Storage in 256 Characters</title>
      <dc:creator>Harish Machha</dc:creator>
      <pubDate>Mon, 17 Jun 2024 15:40:24 +0000</pubDate>
      <link>https://dev.to/harish_05/ipfs-the-decentralized-future-of-file-storage-in-256-characters-3lo1</link>
      <guid>https://dev.to/harish_05/ipfs-the-decentralized-future-of-file-storage-in-256-characters-3lo1</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flhrpm6da4zl7dtt0jped.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flhrpm6da4zl7dtt0jped.jpg" alt="Image description" width="771" height="417"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;##  IPFS Explained in 256 Characters&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;"IPFS (InterPlanetary File System) is a decentralized protocol for storing and sharing files. It uses content-addressing to uniquely identify files by their cryptographic hash, enabling efficient and secure data retrieval without relying on a central server. This ensures data integrity and resilience."&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>cschallenge</category>
      <category>computerscience</category>
      <category>beginners</category>
    </item>
    <item>
      <title>SHA-256: The Heartbeat of Cryptographic Security in 256 Characters</title>
      <dc:creator>Harish Machha</dc:creator>
      <pubDate>Mon, 17 Jun 2024 14:59:35 +0000</pubDate>
      <link>https://dev.to/harish_05/sha-256-the-heartbeat-of-cryptographic-security-in-256-characters-3i8d</link>
      <guid>https://dev.to/harish_05/sha-256-the-heartbeat-of-cryptographic-security-in-256-characters-3i8d</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmtdwp8gdmscaygnwz8nf.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmtdwp8gdmscaygnwz8nf.jpg" alt="Image description" width="771" height="417"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;## SHA-256(Secure Hash Algorithm 256-bit)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;"SHA-256 is a cryptographic hash function that converts input data into a fixed 256-bit hash. It's widely used for data integrity, digital signatures, and secure password storage. Each unique input produces a unique hash, making it crucial for verifying data authenticity and security."&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>cschallenge</category>
      <category>computerscience</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
