Forem: Praneet Biswal

“Transforming Office Culture with a Vibrant Intranet Homepage — My Axero Challenge Build”

Praneet Biswal — Wed, 09 Jul 2025 18:11:10 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I created a modern, responsive intranet homepage for a fictional company called NovaTech Solutions. My goal was to design a clean and accessible digital workspace where employees can quickly access essential resources, stay updated on announcements, participate in internal polls, and view important information like upcoming events and weather updates.

The intranet layout includes:

📢 An animated announcement ticker
📅 Upcoming events listing
🎉 Employee of the month spotlight
📌 Quick links to HR documents and directories
📊 A live voting poll widget (with localStorage persistence)
🌦️ A real-time weather widget powered by a public API
📱 Fully responsive design for desktop and mobile devices
🎨 Smooth button animations and transitions for a polished UX

My focus was on delivering a workspace that’s lightweight, intuitive, and functional — using vanilla HTML, CSS, and JavaScript without frameworks.

Demo

🔗 Live Demo on CodePen (replace with your actual CodePen or Netlify link)

Github Link- https://github.com/Praneetb2929/novatech-intranet

Journey

This was a fun and valuable challenge where I revisited fundamental frontend skills without relying on frameworks like React or Vue. Here’s a bit about my process:

I first mapped out the desired components for the intranet homepage and created a text-based wireframe.

Developed the base HTML structure for layout clarity.
Styled the layout using flexbox and CSS media queries for responsive behavior.
Added an animated announcement ticker using CSS keyframes to enhance the dynamic feel of the page.
Built a poll widget that stores votes using the browser’s localStorage, ensuring data persists across page refreshes.
Integrated a weather widget fetching real-time temperature data via the Open-Meteo API — no API key required.
Applied smooth hover animations and button transitions for a polished user experience.
Focused on clean, readable, and modular code to make future enhancements easier.

What I learned:

The power of simple, modern vanilla CSS and JS for building lightweight apps.
Integrating public APIs for dynamic content without frameworks.
Handling localStorage-based state management in plain JS.
Reinforcing accessibility and responsive design patterns from scratch.

Highlight:
The real-time poll system with live vote count display and persistent storage was particularly satisfying to build using simple event listeners and localStorage.

⚙️ Technologies Used:

HTML5
CSS3 (Flexbox, media queries, keyframes animation)
Vanilla JavaScript (fetch API, localStorage)
Open-Meteo API (for live weather data)

📖 License
This project is open for use under the MIT License.

💼 AI-Powered Job Hunt Automator & Tracker using Runner H 🚀

Praneet Biswal — Thu, 03 Jul 2025 11:00:43 +0000

This is a submission for the Runner H "AI Agent Prompting" Challenge

What I Built

I created a Job Hunt Automator & Tracker using Runner H, an AI agent workflow designed to simplify and speed up the job application process.
This automation:

Searches for job listings on LinkedIn and Indeed based on given job titles and keywords.

Logs job details (title, company, location, and job link) into a Google Sheet.

Sends an email summary of applied/saved jobs to the user.

👉 The goal was to eliminate repetitive job-hunting tasks and turn them into a single AI-powered prompt.

Demo

https://runner.hcompany.ai/chat/16ece13f-18d2-4171-9e87-7e056887f86e/share

This is the actual link that ran on Runner h website. You can check the prommpt and all the proceeding steps of the prompt and how it managed to get the output.

Here is the Prompt :
Search for 10 remote Cloud Engineer jobs on LinkedIn and Indeed with keywords 'AWS', 'Docker', and 'Kubernetes' in the description. For each job found, extract the Job Title, Company Name, Location, and Job Link. Log these details into the Google Sheet at [Google Sheet URL]. After logging, send an email summary listing all 10 jobs with their titles and links to [Your Email]. Mark each job entry's date collected as today's date and status as 'Saved'.

And the RESULTS I got are:

IN MAIL:

IN GOOGLE SHEETS:

You can try this for other job searches by changing just the job category.

How I Used Runner H

I leveraged Runner H’s AI agent capabilities by:

Writing a single detailed prompt to automate multi-step workflows.

The agent:

Accessed LinkedIn and Indeed
Filtered job listings based on Cloud Engineer with keywords: AWS, Docker, Kubernetes
Extracted job details
Updated my Google Sheet via a shareable link
Sent a summary email to my Gmail inbox

Use Case & Impact

Who benefits?

Job seekers, students, freelancers, and anyone actively applying for positions online.

Impact:

Saves hours of manual job searching
Ensures no good job listings are missed
Helps track applications neatly in one place
Makes job-hunting stress-free and AI-driven

Future Scope:

Auto-apply for ‘Easy Apply’ jobs
Integrate with Slack or Telegram for instant notifications
Extend to other job boards like Glassdoor and Naukri

Social Love

Shared on Twitter (X):
https://x.com/praneet_biswal/status/1940727635497439740

✅ Thanks to Runner H and H Company for making autonomous workflows this accessible — excited to explore more!

🎉 Pride Month 2025: A Colorful Landing Page for June Celebrations

Praneet Biswal — Fri, 20 Jun 2025 17:03:04 +0000

This is a submission for Frontend Challenge - June Celebrations, Perfect Landing: June Celebrations

What I Built

For this challenge, I created a responsive and cheerful Pride Month 2025 Landing Page that highlights upcoming events, shares a brief history of Pride Month, and links to important LGBTQIA+ support resources.
Pride Month is close to my heart for its emphasis on love, identity, and equality. I wanted to design a page that felt warm, welcoming, and informative — celebrating community while encouraging visitors to get involved.

Demo

🔗 Live Demo (replace with your Netlify/CodePen/Vercel link)

✨ Preview:

Journey

Process:
I started by sketching a simple layout: a vibrant gradient header, a hero section with a call-to-action, event cards, and a resource list.
Focused on clean, responsive layout using CSS Grid and Flexbox.
Added soft pastel backgrounds and hover interactions to keep it modern and friendly.
Prioritized readability and accessibility in font choices, color contrast, and link behaviors.

What I Learned:
How minor UI details like spacing, color gradients, and button hovers can greatly improve the user experience.
Practical CSS Grid for adaptive card layouts.
Clean semantic HTML structure paired with modular CSS.

What I'm Proud Of:
The soft, inviting vibe of the page.
Keeping it fully frontend and lightweight while informative.
The quick-loading, mobile-responsive design.

Next Steps:
Add animated elements (like confetti or fade-ins on scroll)
Maybe expand this into a micro Pride event aggregator app later.

Team Submissions: praneet_biswal_d355dcff3c

This project is open for use under the MIT License.

Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Praneet Biswal — Wed, 18 Jun 2025 09:43:07 +0000

This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Inspiration

June is a month packed with diverse and meaningful celebrations — from honoring Father’s Day and Juneteenth to the vibrant spirit of Pride Month. I wanted to capture a cheerful scene that brings together these events with a playful, CSS-only art piece featuring a waving Pride flag, a Father's Day card, a delicious hazelnut cake, a Juneteenth calendar date, and a tiny donut with colorful sprinkles for National Donut Day.

All of it is set under a bright sun to represent the warmth and joy of the month.

Demo

🔗 Live Demo on CodePen (replace with your actual CodePen or Netlify link)

Github Link- https://github.com/Praneetb2929/june-css-art/tree/main

✨ Preview:

Journey

This was a fun exercise in creative, semantic CSS positioning and animations:
I started by sketching out the scene layout in my head, then translated it element by element.
The Pride flag uses a simple linear-gradient background with a waving animation via @keyframes.
The sun features a soft pulse animation for subtle liveliness.
The donut was the trickiest but most fun — using border-radius, radial-gradient sprinkles, and a clever pseudo-element hole.
Each item was labeled using cleanly styled speech-bubble-like divs.

What I learned:
How small animations like subtle transforms and pulses can add life to a static CSS scene.
Reinforced the power of pseudo-elements (::before, ::after) to create layered details without extra markup.
CSS radial-gradient tricks for sprinkles and textures.

📌 Next Steps
I'd love to try adding:
Some animated confetti particles falling across the scene.
A button to toggle between day and night mode with CSS transitions.
Thanks to the DEV community for hosting this creative space!
Happy June Celebrations to all 🎉🌈🍰

<! Team Submissions: praneet_biswal_d355dcff3c -->

📖 License
This project is open for use under the MIT License.

Postmark Challenge: Inbox Innovators.

Praneet Biswal — Tue, 27 May 2025 09:23:27 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

📌 What I Built
I built MailTasker, a lightweight Flask-based task manager for email-driven tasks.
This tool lets users:
1) View incoming task requests from emails.
2)Mark tasks as Done.
3)Delete tasks.
4)Filter tasks by status (Pending / Done).
5)Search tasks by subject or body content.

MailTasker is designed to help people efficiently manage action items from their inboxes.

Demo

Since this is a local-only demo for now, y0u can clone the repo and run:
Run on cmd prompt python logic.py
Visit: http://127.0.0.1:5000/view-tasks in your browser.

🖼️ Screenshots:

Test Instructions:
Click ✔ Done to mark a task completed.
Click 🗑 Delete to remove a task.
Use the Search and Filter tools to manage your task view.

**** Code Repository
Check out the full source code here:
https://github.com/Praneetb2929/MailTasker-GitHub-Repository/tree/main

How I Built It

Tech Stack:

Python (Flask)
SQLite (local database)
Bootstrap 5 (UI styling)
Jinja2 (for templates)
Postmark (for future email integration — placeholder for now)

Development Process:

Created a local SQLite database to store email-derived tasks.
Developed CRUD functionality via Flask routes.
Integrated Bootstrap for a clean and modern interface.
Added filtering and search features for efficient task management.
Packaged the app for local deployment.
I plan to add Postmark email parsing and automated task creation in the next version.

Special thanks to the Postmark Challenge: Inbox Innovators community for the inspiration.

First Contributions: learn how to contribute to open source projects

Praneet Biswal — Sat, 24 May 2025 03:43:47 +0000

I followed the hands-on tutorial in the Readme of first contributions and made my first pull request to the same repo.

firstcontributions / first-contributions

🚀✨ Help beginners to contribute to open source projects

Read this in other languages.

First Contributions

This project aims to simplify and guide the way beginners make their first contribution. If you are looking to make your first contribution, follow the steps below.

If you're not comfortable with command line, here are tutorials using GUI tools.

If you don't have git on your machine, install it.

Fork this repository

Fork this repository by clicking on the fork button on the top of this page. This will create a copy of this repository in your account.

Clone the repository

Now clone the forked repository to your machine. Go to your GitHub account, open the forked repository, click on the code button, then on SSH tab and then click the copy url to clipboard icon.

Open a terminal and run the following git command:

git clone "url you just copied"

where "url you just copied" (without the…

View on GitHub