Forem: Akshit Suthar

DevDNA — Turn Your GitHub Activity Into a Developer Personality

Akshit Suthar — Sun, 01 Mar 2026 11:17:37 +0000

What if your GitHub profile could explain how you code — not just what you code?

Every developer has a unique way of building software. Some ship fast. Some collaborate deeply. Some obsess over solving hard problems.

But GitHub profiles usually show only numbers — commits, repos, stars.

So I built DevDNA.

What is DevDNA?

DevDNA analyzes your real GitHub contribution history and transforms it into a futuristic Developer Personality Card — a dynamic SVG you can embed anywhere.

Instead of static stats, DevDNA derives developer traits and creates a visual identity representing how you actually build software.

Think of it as:

GitHub Stats × Developer Archetypes × Modern Visual Identity

Example

ScreenShot

Why I Built This

While browsing developer profiles, I noticed something:

All GitHub stats cards look similar. They show activity, but not personality.

I wanted something that answers:

Are you a Builder?
A Problem Solver?
A Consistent Shipper?
A Community Collaborator?

DevDNA converts raw contribution data into meaningful developer traits.

Live Example

Try generating your own DevDNA card:

👉 https://thedevdna.vercel.app

Embed directly into your README:

[![DevDNA](https://thedevdna.vercel.app/api/dev-dna?username=YOUR_USERNAME&theme=dark)](https://thedevdna.vercel.app)

How It Works (Under the Hood)

DevDNA uses the official GitHub GraphQL API to fetch accurate contribution data including:

Commit history
Pull requests
Issues
Repository stats
Language distribution

This data is processed into developer traits such as:

Builder
Collaborator
Impact
Problem Solver
Consistency

The final card is rendered dynamically as an SVG using Satori, allowing it to be embedded like an image while remaining fast and scalable.

Tech Stack

Next.js (App Router)
React
GitHub GraphQL API
Satori (SVG Rendering)
Edge-friendly caching

Themes

DevDNA currently supports multiple visual themes:

dark — Deep space aesthetic
light — Clean minimal layout
neon — Cyberpunk style

Example:

https://thedevdna.vercel.app/api/dev-dna?username=torvalds&theme=neon

Privacy & Security

DevDNA runs entirely server-side.

Your GitHub token is never exposed to the browser. Only public contribution data is analyzed.

What Makes DevDNA Different?

Most GitHub cards show metrics.

DevDNA tells a story.

It answers:

What kind of developer are you?

Try It Yourself

Generate your DevDNA now:

👉 https://thedevdna.vercel.app

If you like the project, consider starring the repository ❤️

👉 https://github.com/akshitsutharr/DevDNA

🛣 Roadmap

More themes
Compact card variants
Community & discussion traits
Rate-limit optimization

Feedback Welcome

I’d love feedback from the community. Ideas, suggestions, and contributions are always welcome!

Built by Akshit Suthar ❤️

If you found this interesting, feel free to connect or explore more of my work.

Presenting a Modern Markdown Viewer with Mermaid, MathJax, and PDF Export

Akshit Suthar — Thu, 19 Feb 2026 14:43:45 +0000

View the Live Demo
Check Repository

md-viewer: A Modern Markdown Renderer with Mermaid and Math Support

Markdown has become the standard format for documentation, README files, technical blogs, and knowledge sharing. However, most simple Markdown viewers only render text and basic formatting. They often lack support for diagrams, mathematical equations, advanced code blocks, and clean UI presentation.

To solve this, I built md-viewer — a modern, lightweight Markdown rendering application designed to support not only standard Markdown, but also Mermaid diagrams, mathematical expressions, syntax highlighting, and a polished reading experience.

In this article, I will walk through the motivation, architecture, core features, and technical decisions behind the project.

Why Build Another Markdown Viewer?

Most Markdown renderers handle headings, lists, tables, and code blocks. But in real-world development workflows, we often need more:

Technical diagrams for system design
Mathematical equations for academic content
Clean syntax highlighting for code
Consistent styling for documentation
A distraction-free reading interface

When working on documentation-heavy projects, I wanted a viewer that could render:

Complex Mermaid diagrams
LaTeX-style math equations
Beautifully highlighted code blocks
Responsive layout
Clean, modern UI

That requirement led to the development of md-viewer.

Core Features

1. Full Markdown Rendering

The application supports standard GitHub-flavored Markdown, including:

Headings
Lists
Tables
Blockquotes
Inline formatting
Code blocks

It ensures compatibility with typical README files and technical documentation.

2. Syntax Highlighting for Code Blocks

Code readability is essential for developers. The viewer integrates syntax highlighting for multiple programming languages, ensuring:

Clean formatting
Proper indentation rendering
Visual distinction between tokens

This makes it suitable for viewing documentation, tutorials, and code-heavy articles.

3. Mermaid Diagram Support

Modern documentation frequently includes architecture and flow diagrams. The viewer supports Mermaid, enabling rendering of:

Flowcharts
Sequence diagrams
Class diagrams
State diagrams
Gantt charts

This feature makes the tool especially useful for system design documentation and technical blogs.

4. Mathematical Expression Rendering

Technical and academic documentation often includes mathematical formulas. The project integrates math rendering support, allowing LaTeX-style equations to be displayed properly.

This is particularly useful for:

Algorithm explanations
Research documentation
Educational material

5. Clean, Minimal Interface

The UI is intentionally designed to be:

Minimal
Readable
Responsive
Distraction-free

The focus is on content presentation rather than UI complexity.

Technical Architecture

The project is structured with modular rendering logic to ensure maintainability and extensibility.

Rendering Pipeline

The typical flow follows:

Load raw Markdown content
Parse Markdown into HTML
Process extended features (Mermaid, Math)
Apply syntax highlighting
Render into the DOM

By separating parsing, transformation, and rendering, the architecture remains clean and easy to scale.

Extensibility

The viewer is designed in a way that additional plugins or enhancements can be added without rewriting the core logic.

Possible future enhancements include:

Theme switching (dark/light mode)
Export to PDF
Live editing mode
File upload support

Design Decisions

While building this project, I focused on:

Simplicity Over Complexity

Instead of creating a full-fledged Markdown editor, the goal was to create a powerful renderer that focuses purely on display quality.

Developer-Centric Features

Support for diagrams and math was prioritized because these are often missing in simple viewers but are essential in real-world documentation.

Performance and Clean Code

The codebase emphasizes clarity and modularity. Each rendering concern is handled separately to avoid tightly coupled logic.

Use Cases

The project can be used for:

Viewing README files locally
Rendering technical documentation
Previewing academic notes
Sharing system design diagrams
Demonstrating algorithm explanations with math

It is particularly helpful for students, developers, and technical writers who rely heavily on Markdown.

Lessons Learned

Building this project reinforced several important engineering principles:

Rendering pipelines must be modular
Documentation tools should prioritize readability
Supporting diagrams significantly improves documentation clarity
Clean UI enhances user experience more than complex UI

Conclusion

md-viewer is a focused solution for developers who need more than just basic Markdown rendering. By combining standard Markdown, syntax highlighting, Mermaid diagrams, and mathematical equation support, it provides a powerful yet minimal documentation viewer.

If you work with technical documentation frequently, this project may serve as a useful foundation or inspiration for your own documentation tools.

If you found this useful, feel free to explore the repository and suggest improvements. Contributions and feedback are always welcome.

I Built a Chrome Extension That Captures YouTube Screenshots at Custom Intervals (Even 10+ Hour Videos)

Akshit Suthar — Tue, 17 Feb 2026 18:49:10 +0000

Ever wanted to automatically capture screenshots from a YouTube video every 10 seconds?

Or extract frames from a 3-hour lecture without manually pausing and screenshotting hundreds of times?

I built a Chrome extension to solve exactly that.

YouTube Screenshot Capture
Give Star To My Repo
GitHub: https://github.com/akshitsutharr/Youtube-Screen-capture

The Problem

Capturing screenshots manually from long YouTube videos is extremely inefficient:

Pause → Screenshot → Play → Repeat
No batch export
No timestamp organization
Hard to manage large videos
Impossible to scale for 2–10 hour content

For students, researchers, analysts, and creators — this wastes hours.

So I built a solution.

What It Does

This Chrome Extension allows you to:

Capture screenshots from any custom time range
Set intervals from 1 second to 1 hour
Automatically chunk videos longer than 1 hour
Download all images as ZIP files
Track progress in real time
Choose screenshot quality (High / Medium / Low)

All processing happens locally inside your browser.

No servers.
No data collection.
No API keys.

Key Features

Custom Time Range

Supports both formats:

MM:SS
HH:MM:SS

Example:

Start: 00:01:20
End: 00:09:23

Flexible Intervals

Capture screenshots every:

1 second
5 seconds
10 seconds
30 seconds
1 minute
Up to 1 hour

Smart Chunking (Large Video Support)

For videos longer than 1 hour:

The extension automatically splits processing into 1-hour chunks to prevent:

Memory overflow
Browser crashes
Performance drops

This makes it capable of handling 10+ hour videos efficiently.

Bulk ZIP Download

Each capture session downloads:

All screenshots in JPEG format
Organized by timestamp
info.txt file with capture details

For long videos:
Multiple ZIP files are generated (one per hour chunk).

Real-Time Progress Tracking

You see:

Percentage completed
Screenshot count
Processing updates

No guessing. No silent processing.

How It Works (Technical Deep Dive)

Tech Stack

Manifest V3
Canvas API
JSZip
Chrome Storage API
Chrome Downloads API

Detecting the Video

The extension injects a content script that:

Detects the <video> element
Ensures it is playable
Controls playback programmatically

Seeking to Specific Timestamps

For each interval:

video.currentTime = timestamp;

The extension waits for the seeked event before capturing.

Capturing Frames via Canvas API

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, width, height);

Convert to JPEG:

canvas.toBlob(...)

Intelligent Chunking Logic

To avoid memory crashes:

const CHUNK_DURATION = 3600; // 1 hour

Each chunk:

Captures screenshots
Packages them into ZIP
Triggers download
Frees memory
Continues to next chunk

Performance Optimizations

During capture:

Video auto-mutes
Playback pauses for frame stability
UI updates are throttled
Object URLs are cleaned
Memory is released per chunk

Example benchmark:

360 screenshots ≈ 2–3 minutes

Privacy & Permissions

Permissions required:

activeTab
storage
downloads
host_permissions (only youtube.com)

Important:

No data leaves your browser
No tracking
No analytics
No external servers

Everything runs locally.

What I Learned Building This

This project helped me deeply understand:

Chrome Extension architecture (Manifest V3)
Content scripts vs background service workers
Canvas-based video frame rendering
Browser memory management
Large file processing inside the browser
Async UI state control

The hardest part?

Handling very large videos safely without crashing Chrome.

Chunking logic solved that.

Installation (Dev Mode)

Clone repository
Go to chrome://extensions
Enable Developer Mode
Click "Load Unpacked"
Select project folder

Done.

Future Improvements

Planned ideas:

Chrome Web Store release
Preset capture profiles
Automatic keyframe detection
Video metadata export
PDF storyboard export

🤝 Contributions Welcome

If you're interested in:

Chrome extension development
Performance optimization
UI improvements
Feature additions

PRs are welcome.

🔗 GitHub:
https://github.com/akshitsutharr/Youtube-Screen-capture

🌟 Final Thoughts

This started as a small productivity tool.

But it turned into a deep dive into:

Browser APIs
Video processing
Performance en

📸 Screenshots

Main Extension UI	Interval Selection

Downloading Start	Custom Button in Youtube for Single Capture

Data Science RoadMap

Akshit Suthar — Tue, 19 Aug 2025 15:05:23 +0000

🧭 Your Complete Data Science Roadmap (Beginner → Pro)

Hey everyone 👋,

If you’ve ever wondered “Where do I start learning Data Science?”, you’re not alone. Data Science is one of the most in-demand fields today, but the overwhelming amount of resources often confuses beginners.

That’s why I created a complete roadmap to guide you step by step.

🔹 Topics Covered

Here’s a quick overview of what you’ll learn in the roadmap:

Mathematics for Data Science (Linear Algebra, Probability, Statistics)
Programming (Python) – Numpy, Pandas, Matplotlib, Seaborn
Data Preprocessing & Cleaning
Exploratory Data Analysis (EDA)
Machine Learning Algorithms – Supervised & Unsupervised
Deep Learning Basics – Neural Networks, TensorFlow/PyTorch
Projects & Case Studies
Deployment & Real-world Applications

🔹 GitHub Repository

I’ve compiled everything neatly into a GitHub repository.

👉 Check it out here: Data Science Roadmap Repo
👉 Check it out Live Demo: Live Page

You’ll find:

Learning resources 📚
Code examples 💻
Suggested projects 🚀
Useful links & articles 🔗

🔹 Why I Built This

When I started learning Data Science, I often got lost between random tutorials and courses. To save others from the same struggle, I decided to document a clear path and make it open-source for everyone.

🔹 How You Can Use This Roadmap

Follow it step by step if you’re a beginner.
Use it as a checklist if you’re already learning.
Contribute by suggesting improvements (open for PRs 🙌).

💬 Final Thoughts

If you’re serious about becoming a Data Scientist, start today. Don’t wait for the “perfect resource” – instead, follow a roadmap and keep building projects along the way.

👉 Repo link again: Data Science Roadmap

I hope this helps you kickstart your journey 🚀

Let me know your thoughts, and feel free to contribute to the repo.

✍️ Written by Akshit Suthar