The latest articles on DEV Community by Shruti Adhav (@adhavshruti12). https://dev.to/adhavshruti12 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%2F2702443%2F0b4f18e1-153f-45d3-974e-fdae2f93954d.jpg https://dev.to/adhavshruti12 en Shruti Adhav Sun, 06 Apr 2025 15:59:46 +0000 https://dev.to/adhavshruti12/wecoded-2025-landing-page-4ak5 https://dev.to/adhavshruti12/wecoded-2025-landing-page-4ak5 <p><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%2F5nen4mwwnum5be15dh0p.png" class="article-body-image-wrapper"><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%2F5nen4mwwnum5be15dh0p.png" alt="WeCoded 2025 Landing Page" width="800" height="368"></a></p> <h2> My WeCoded Landing Page </h2> <p>A dynamic and engaging landing page for the annual WeCoded celebration, showcasing diversity and innovation in tech. Built with React, TypeScript, and Tailwind CSS.</p> <h2> 🚀 Features </h2> <ul> <li> <strong>Dynamic Content</strong>: Real-time integration with DEV.to API to showcase WeCoded stories</li> <li> <strong>Modern Design</strong>: Beautiful, responsive interface with smooth animations</li> <li> <strong>Interactive Timeline</strong>: Visual journey through WeCoded's history</li> <li> <strong>Impact Metrics</strong>: Live statistics showcasing community growth</li> <li> <strong>Story Submission</strong>: Direct integration with DEV.to for new submissions</li> </ul> <h2> Demo </h2> <p><a href="https://we-coded-2025-landing-page.vercel.app/" rel="noopener noreferrer">https://we-coded-2025-landing-page.vercel.app/</a></p> <h2> GitHub repo </h2> <p><a href="https://github.com/adhavshruti12/WeCoded-2025-Landing-Page.git" rel="noopener noreferrer">https://github.com/adhavshruti12/WeCoded-2025-Landing-Page.git</a></p> <h2> How I Built It </h2> <h3> Colors </h3> <ul> <li>Primary Blue: <code>#4531EA</code> </li> <li>Accent Green: <code>#CCEA71</code> </li> <li>Secondary Purple: <code>#9D00E5</code> </li> </ul> <h3> Typography </h3> <ul> <li>Modern, clean typography using Tailwind's font system</li> <li>Responsive text sizing for all devices</li> </ul> <h3> Components </h3> <ul> <li>Interactive cards with hover effects</li> <li>Glassmorphic UI elements</li> <li>Responsive grid layouts</li> <li>Animated transitions</li> </ul> <h2> 📱 Responsive Design </h2> <ul> <li>Mobile-first approach</li> <li>Breakpoints: <ul> <li>Mobile: &lt; 768px</li> <li>Tablet: 768px - 1024px</li> <li>Desktop: &gt; 1024px</li> </ul> </li> </ul> <h2> 🔄 API Integration </h2> <p>The landing page integrates with the DEV.to API to fetch WeCoded stories:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="nf">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://dev.to/api/articles?tag=wecoded</span><span class="dl">'</span><span class="p">)</span> <span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="nx">response</span> <span class="o">=&gt;</span> <span class="nx">response</span><span class="p">.</span><span class="nf">json</span><span class="p">())</span> <span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="nx">data</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="c1">// Process articles</span> <span class="p">});</span> </code></pre> </div> devchallenge wecoded react webdev Shruti Adhav Sat, 18 Jan 2025 15:22:59 +0000 https://dev.to/adhavshruti12/momentum-start-with-5-minutes-3ap1 https://dev.to/adhavshruti12/momentum-start-with-5-minutes-3ap1 <p><em>This is a submission for the <a href="https://dev.to/challenges/github">GitHub Copilot Challenge </a>: New Beginnings</em></p> <h2> What I Built </h2> <p>Momentum is a productivity app designed to help users overcome procrastination by breaking down tasks into manageable 5-minute segments. By combining smart task suggestions, progress tracking, and gamification, Momentum makes productivity achievable and engaging.</p> <p><strong>Key Features</strong></p> <ul> <li>5-Minute Focus Sessions: Small, manageable time blocks to kickstart productivity.</li> <li>Smart Task Suggestions: Context-aware task recommendations based on user behavior and time of day.</li> <li>Automatic Task Breakdown: Simplifies complex tasks into actionable steps.</li> <li>Progress Tracking: Visual representation of accomplishments and streaks.</li> <li>Gamification: Level-up system and streaks to maintain motivation.</li> <li>Persistent Progress: Local data storage for seamless tracking across sessions.</li> <li>Category Management: Organize tasks into predefined categories like work, personal, and fitness.</li> </ul> <p><strong>Impact</strong>:</p> <ul> <li>Reduces overwhelm by breaking tasks into manageable chunks</li> <li>Builds confidence through visible progress</li> <li>Creates sustainable productivity habits</li> <li>Maintains motivation through gamification</li> </ul> <h2> Demo </h2> <p><a href="https://momentum-start-with-5-minutes.vercel.app/" rel="noopener noreferrer">https://momentum-start-with-5-minutes.vercel.app/</a></p> <h2> Repo </h2> <p><a href="https://github.com/adhavshruti12/Momentum-Start-with-5-Minutes.git" rel="noopener noreferrer">https://github.com/adhavshruti12/Momentum-Start-with-5-Minutes.git</a></p> <h2> Copilot Experience </h2> <p>GitHub Copilot was instrumental in developing this project:</p> <ol> <li> <p><strong>Code Generation</strong>:</p> <ul> <li>Component structure suggestions</li> <li>Animation implementations</li> <li>State management patterns</li> <li>Utility functions</li> </ul> </li> <li> <p><strong>Problem Solving</strong>:</p> <ul> <li>Task breakdown algorithms</li> <li>Storage management</li> <li>Time-based suggestions</li> <li>Progress calculations</li> </ul> </li> <li> <p><strong>Best Practices</strong>:</p> <ul> <li>Code organization</li> <li>Performance optimizations</li> <li>Error handling</li> <li>Component composition</li> </ul> </li> </ol> <h2> GitHub Models </h2> <p>The project leverages GitHub Models for:</p> <ol> <li> <p><strong>Task Analysis</strong>:</p> <ul> <li>Pattern recognition in task descriptions</li> <li>Breaking down complex tasks</li> <li>Categorizing user inputs</li> </ul> </li> <li> <p><strong>Suggestion Engine</strong>:</p> <ul> <li>Context-aware task recommendations</li> <li>Time-based task prioritization</li> <li>User pattern recognition</li> </ul> </li> </ol> <h2> Conclusion </h2> <p>Momentum demonstrates how small steps can lead to significant progress. The app's focus on 5-minute intervals, combined with smart suggestions and progress tracking, helps users overcome procrastination and build productive habits.</p> devchallenge githubchallenge webdev ai