DEV Community: Suvojit Modak

Meme

Suvojit Modak — Tue, 16 Sep 2025 15:41:52 +0000

🧑‍💻 CSS Art: Quiet Office Culture – A Minimal Tribute to Focus

Suvojit Modak — Sun, 20 Jul 2025 09:01:55 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

🎨 Inspiration

This piece captures the quiet solitude of modern office life. It’s not about chaos or open-floor buzz—it’s about those personal, focused moments that define real productivity.

From the desk and laptop to a motivational quote on the wall, every element reflects a calm and goal-driven workspace. It’s a nod to the idea that success is built quietly—in those long, uninterrupted hours at your desk, with nothing but your laptop and your goals for company.

🧘 It’s a tribute to the peaceful side of productivity, built entirely with pure CSS.

🔗 Live Demo

https://codepen.io/Suvojit-Modak/pen/xbwZWOo

💡 Tech Stack

HTML
CSS

No JavaScript, no images—just creativity and code.

🛠️ Journey

This project started with a basic idea: show "office culture" in its simplest form. I began with a water cooler and whiteboard, then gradually evolved the scene into a personalized workspace through iterative design.
As I refined the layout, I replaced early elements with:

A desk, chair, and laptop for a focused vibe
A motivational quote to reflect mental energy
A water bottle for realism and subtle personality Each change brought the scene closer to something that feels authentic, relatable, and calm—like a moment of quiet ambition in the workday.

🏁 Takeaways

CSS alone can convey mood and meaning
Minimal details make a big difference
Every office space tells a story—this one tells mine

🙏 Thank You

Big thanks to the Dev community and the challenge organizers for encouraging creativity in CSS. This was a rewarding experiment in expressing emotion and environment with nothing but frontend code. Looking forward to creating more visual stories through code!

🌐 Frontend Challenge: Office Edition — 3D Interactive Desk with Three.js

Suvojit Modak — Sun, 20 Jul 2025 07:42:21 +0000

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

💼 What I Built

I created a fully interactive 3D office desk scene using HTML, CSS, JavaScript, and Three.js. The scene includes draggable camera controls, zoom functionality, clickable elements, and animated textures—designed to feel modern, minimal, and immersive right in the browser.

🔹 Features:

Camera controls (rotate, zoom, pan)
A clickable lamp that toggles light
Animated laptop screen showing a typing effect
Clean and modular design, including a customizable keyboard layout

🔗 Live Demo:

👉 https://codepen.io/Suvojit-Modak/pen/RNWrQjX

💡 Tech Stack:

HTML
CSS
JavaScript
Three.js
WebGL
OrbitControls
Raycasting

🛠️ Journey

This project started with the goal of building something more immersive than a traditional 2D web layout. Using Three.js, I constructed a virtual office environment complete with a desk, laptop, lamp, and wall decor.

The keyboard was particularly fun to design—I used a data-driven approach that lets you change the layout by editing a single array. For added realism, I animated the laptop screen with a looping code-typing effect and added interactive lighting.

I gathered feedback and refined the design with a focus on balance and symmetry—especially in the keyboard layout. Each iteration brought more polish and better performance.

🚀 Takeaways

Three.js is incredibly powerful for creating interactive scenes on the web
Interactivity (like toggles and animations) brings static 3D objects to life
Modular code pays off when making updates or adding features

🏷️ Tags

#threejs, #creativecoding, #webgl, #frontendchallenge, #javascript, #css, #html, #3dweb, #interactiveui, #webdevelopment

🙏 Thank You

Thanks to the Dev community and challenge organizers for the opportunity to explore creative coding with a real-world theme. It was a great learning experience, and I’m excited to keep building even more interactive 3D experiences on the web! 🚀

Secure Data Encryption in JavaScript with CryptoSwiftJS

Suvojit Modak — Thu, 03 Apr 2025 18:37:14 +0000

Introduction

In today's digital world, securing sensitive information is more crucial than ever. Whether you're handling user data, API keys, or private messages, encryption plays a vital role in maintaining confidentiality. This is where CryptoSwiftJS comes into play—an easy-to-use AES-256-GCM encryption/decryption library with Argon2 password hashing.

In this blog, we’ll explore how to use **CryptoSwiftJS **to encrypt and decrypt data securely in JavaScript.

🚀Why Use CryptoSwiftJS?

CryptoSwiftJS provides a robust encryption mechanism by combining AES-256-GCM (a highly secure encryption algorithm) with Argon2id (a powerful password-based key derivation function). Here’s why it stands out:

✅ Uses AES-256-GCM for high security 🔒
✅ Argon2id for strong password-based key derivation 🔑
✅ Utilizes random salts and IVs for added protection 🛡️
✅ Lightweight and easy to use 📦

Now, let’s get started!

📚 Installation

You can install CryptoSwiftJS using npm or yarn:

npm install cryptoswiftjs

yarn add cryptoswiftjs

🔧 Encrypting Data

To encrypt a message, you need to import the encrypt function from CryptoSwiftJS and provide a password:

const { encrypt } = require('cryptoswiftjs');

const message = "Hello, Secure World!";
const password = "mySuperStrongPassword123";

(async () => {
    const encrypted = await encrypt(message, password);
    console.log("Encrypted:", encrypted);
})();

🔹 The encryption function generates a random salt and IV to enhance security.
🔹 AES-256-GCM ensures the data remains protected against attacks.

🔓 Decrypting Data

Decrypting an encrypted message is just as easy. Use the decrypt function and provide the same password:

const { decrypt } = require('cryptoswiftjs');

(async () => {
    const encryptedData = "your_encrypted_data_here";
    const decrypted = await decrypt(encryptedData, "mySuperStrongPassword123");
    console.log("Decrypted:", decrypted);
})();

✔ Decryption is only possible with the correct password since the key is derived from it using Argon2.
✔ The authentication tag ensures data integrity and prevents tampering.

🛠️ How CryptoSwiftJS Works

1️⃣ Password-Based Key Derivation

Uses Argon2id to generate a 32-byte encryption key.
Includes random salts for extra protection.

2️⃣ AES-256-GCM Encryption

Uses a random IV (Initialization Vector) for every encryption.
Generates an authentication tag to ensure data integrity.

3️⃣ Secure Decryption

The same password is used to derive the key and decrypt the data.
The authentication tag is validated to prevent tampering.

🔥 Security Best Practices

🔹 Never reuse salts & IVs for the same password.
🔹 Avoid hardcoding passwords in your application.
🔹 Use long and strong passwords (random and unique).
🔹 Consider additional encryption layers for highly sensitive data.

By following these security practices, you can ensure maximum protection for your data.

📜 Conclusion

CryptoSwiftJS is a powerful yet lightweight solution for secure encryption in JavaScript applications. Whether you're building a Node.js backend, a React app, or a secure API, this library simplifies the encryption process while maintaining strong security.

🔗 Try it out today! Install CryptoSwiftJS and start encrypting your sensitive data in just a few lines of code.

For more information, visit the GitHub Repository 🚀.

📌 Have questions or suggestions? Drop them in the comments! Let's make security a priority in our applications. 💡

Happy coding! ✨

CSSmas Magic: Santa 🎅 Delivering Code, Sleighing Bugs & Tree 🎄-mendous Vibes

Suvojit Modak — Thu, 05 Dec 2024 19:10:28 +0000

This is a submission for Frontend Challenge: December Edition, CSS Art: Space.

Inspiration

Today, I'm highlighting the festive magic of Jingle Bells 🎄🎶! This iconic Christmas song brings joy and warmth, spreading holiday cheer wherever it plays. Whether you're decorating the tree, enjoying some hot cocoa, or just relaxing with loved ones, the upbeat rhythm of Jingle Bells reminds us of the merriment of the season. Play it loud, spread the vibes, and let the season’s spirit fill your heart. Here's to the magic of Christmas, the lights, and the music that makes this time of year unforgettable! 🌟

Demo

https://codepen.io/Suvojit-Modak/pen/pvzgVQK

Journey

In my journey, I focused on creating an engaging, festive interface featuring elements like Santa, a Christmas tree, and a holiday-themed design. I learned how to integrate animations, CSS styling, and interactive features such as music controls to bring the page to life. I'm particularly proud of achieving smooth transitions and a cohesive design that brings the holiday spirit to the user's screen. Next, I hope to refine the user interactions and explore adding more dynamic content for an even more immersive experience.

"Thank you for checking it out! I'd love to hear your feedback and thoughts ❤"

Audio to Text Application using AssemblyAi

Suvojit Modak — Sun, 17 Nov 2024 06:57:53 +0000

This is a submission for the AssemblyAI Challenge : Sophisticated Speech-to-Text.

Project Overview:

I built a platform using AssemblyAI that allows users to upload an audio file or provide a URL to get a transcription. The system processes the audio and delivers accurate transcriptions in a user-friendly interface. Users can easily access and view the transcriptions, enhancing both accessibility and convenience. The platform supports a wide range of audio formats and ensures quick processing for seamless user experience.

Features:

Responsive Design: Built with Angular, SCSS and Bootstrap to ensure usability across all devices.
Downloadable Transcriptions: Users can download transcriptions directly from the interface.
Toast Notifications: Integrated toast messages to provide instant feedback to users for actions such as transcription downloads, errors, or successful uploads, enhancing user interaction.
Progressive Web App (PWA): Implemented as a PWA, allowing users to install the application on their devices, work offline, and experience faster load times through caching and service workers. This feature ensures enhanced accessibility and reliability.

Demo

https://text-to-audio-assemblyai-challenge.vercel.app/

Screenshots

Main Interface (Live Transcription)

Journey

I utilized AssemblyAI's advanced speech-to-text model to convert audio files into accurate transcriptions, presenting the results in a clean, user-friendly format for enhanced readability and ease of access.

Acknowledgments

This project is part of the AssemblyAI Challenge hosted on DEV Community. Special thanks to the organizers for providing the opportunity to build and showcase this application.

About Me
Suvojit Modak
Mean / Mern Stack Developer
Visit my Dev.to profile: https://dev.to/suvojimodak

Thank you for reading, everyone.

Cup Cake

Suvojit Modak — Fri, 29 Mar 2024 20:28:57 +0000

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

What I Built

I created a stylish cupcake design using HTML and CSS, aiming to achieve a visually appealing and dynamic representation of a cupcake. The design features detailed elements such as frosting, cherry, and sprinkle effects, enhanced with animations and shadow effects to create a lifelike and charming presentation.

Demo

https://codepen.io/ecces4/pen/QWPqmpa

Journey

I enjoyed crafting a visually dynamic cupcake design with HTML and CSS, learning new techniques and enhancing my skills.