Authentication, Security, and Editor Enhancements

Authentication & Session Management

• A new interface allows user to securely register and login to M2H.
• Authentication is handled via JSON Web Tokens (JWT) stored at local-storage, making sure user sessions are secure.
• The Nav Bar have been updated with interaction based on whether the user is logged in or not.

Enhanced Security & Backend

• HTML scrubbing via bleach to prevent XSS attacks
• Added flask-limiter and CSP/HSTS for API protection

Deployment

• The app is now deployed and accessible live on vercel. Check the App

Authentication, Security, and Editor Enhancements

Authentication & Session Management

• A new interface allows user to securely register and login to M2H.
• Authentication is handled via JSON Web Tokens (JWT) stored at local-storage, making sure user sessions are secure.
• The Nav Bar have been updated with interaction based on whether the user is logged in or not.

Enhanced Security & Backend

• HTML scrubbing via bleach to prevent XSS attacks
• Added flask-limiter and CSP/HSTS for API protection

Deployment

• The app is now deployed and accessible live on vercel. Check the App

UI & Markdown Upgrades

UI Refinement and Alignment Fixes

• Fixed padding and margin inconsistencies between the editor and toolbar.
• Changed the layout to be balanced and more comfortable for dual writing and previewing.
• Improved spacing to make the editor look good in light and dark modes, reducing eyestrain.

New Formating Toolbar

• Bold, italicise, or strike-through text without the hassle of syntax typing.
• Now you can create document hierarchy and quickly highlight snippets with new Heading, quotes, etc.
• Organize ur throughts with the new bulleted and numbered list option all with one click.

UI & Markdown Upgrades

UI Refinement and Alignment Fixes

• Fixed padding and margin inconsistencies between the editor and toolbar.
• Changed the layout to be balanced and more comfortable for dual writing and previewing.
• Improved spacing to make the editor look good in light and dark modes, reducing eyestrain.

New Formating Toolbar

• Bold, italicise, or strike-through text without the hassle of syntax typing.
• Now you can create document hierarchy and quickly highlight snippets with new Heading, quotes, etc.
• Organize ur throughts with the new bulleted and numbered list option all with one click.

Building Live Preview

• Added a synchronized real-time preview rendering so MD Formats immediately get a preview HTML Content
• Automatic ID Assignment for headings such as # This is HI which render with anchor tags like {#17} automatically.
• Implemented real-time line, word, character and counts alongside an estimated reading time.
• The Document progress automatically store in localStorage to prevent data loss.

Building Live Preview

• Added a synchronized real-time preview rendering so MD Formats immediately get a preview HTML Content
• Automatic ID Assignment for headings such as # This is HI which render with anchor tags like {#17} automatically.
• Implemented real-time line, word, character and counts alongside an estimated reading time.
• The Document progress automatically store in localStorage to prevent data loss.

Building M2H UI

• Developed a clean split view layout with line numbering, a real-time input canvas for MD, and a synchronized live preview panel, which will be implemented in a feature.
• Added quick buttons to copy HTML code, download the code, clean this MD, and finally switch between themes.
• Added a line, word, character counter and estimated reading time (future backend implementation is required)

Building M2H UI

• Developed a clean split view layout with line numbering, a real-time input canvas for MD, and a synchronized live preview panel, which will be implemented in a feature.
• Added quick buttons to copy HTML code, download the code, clean this MD, and finally switch between themes.
• Added a line, word, character counter and estimated reading time (future backend implementation is required)

Just start off the build for Token Dock! 🚀

Spent the first couple of hours setting up the project foundation and getting the initial code structure in place. Check out the screenshot for a quick sneak peek!

Just start off the build for Token Dock! 🚀

Spent the first couple of hours setting up the project foundation and getting the initial code structure in place. Check out the screenshot for a quick sneak peek!

NebulaOS Navigation Bar Implemented

• Created a clean, space themed sidebar navigation menu.

• Created a responsive architecture that transitions seamlessly from desktop displays to mobile screens.

• Made the navigation bar fixed at the top of the viewport so it is always available while scrolling and keeps the user orientated.

• When the page loaded the navigation bar looked fine, but as soon as I started scrolling elements of the main page content started rendering over the top of it, making a complete chaos.Spent like twenty minutes futzing with margins and padding before discovering it was a basic stacking context issue.

NebulaOS Navigation Bar Implemented

• Created a clean, space themed sidebar navigation menu.

• Created a responsive architecture that transitions seamlessly from desktop displays to mobile screens.

• Made the navigation bar fixed at the top of the viewport so it is always available while scrolling and keeps the user orientated.

• When the page loaded the navigation bar looked fine, but as soon as I started scrolling elements of the main page content started rendering over the top of it, making a complete chaos.Spent like twenty minutes futzing with margins and padding before discovering it was a basic stacking context issue.

Building NebulaOS

• Built the “About” window successfully. This is an important step to build core desktop environment and to make sure window can be opened and displayed correctly.

• Figuring out the window layering and responsiveness is tricky, but I learned a lot about how to manage object positioning in the desktop space.

Building NebulaOS

• Built the “About” window successfully. This is an important step to build core desktop environment and to make sure window can be opened and displayed correctly.

• Figuring out the window layering and responsiveness is tricky, but I learned a lot about how to manage object positioning in the desktop space.

New Project Section Added # New Project Section Added

I grew my page and completely updated the visual look of the website.

• Project Showcase: Added a separate section to show the things I’ve built with nice project cards with clear tech stack badges like Python, Flask, Docker and JavaScript.

• Better Responsiveness: We’ve tweaked the mobile and desktop grid systems to provide a more fluid layout that scales to different screen sizes.

New Project Section Added # New Project Section Added

I grew my page and completely updated the visual look of the website.

• Project Showcase: Added a separate section to show the things I’ve built with nice project cards with clear tech stack badges like Python, Flask, Docker and JavaScript.

• Better Responsiveness: We’ve tweaked the mobile and desktop grid systems to provide a more fluid layout that scales to different screen sizes.

Built a Minimalist Developer Portfolio

Today I exapanded my page and changed the whole look of the webpage.

Content: -

• Who am I : Created punchy intro with bold typography hierarchy (Veda S M) accompanied by inline sub-tags (backend, AI/ML) to quickly declare my specialization. Added primary action buttons linking to skills, contact info, and GitHub.
• Tech Arsenal Grid : Showcase my improtant skills
• Contact info : for people to find and connect with me!fix if there is any mistakes