Note that the tool shown in your image is actually the Portfolio Project Card Previewer for Sri Lanka (a visual generator that builds clean HTML/CSS cards to showcase software engineering, web development, or data science projects on personal portfolios), rather than an image compressor tool.

A complete user manual for this exact developer utility on tjncareers.online is detailed below:

Portfolio Project Card Previewer: User Manual & Guide

When technical recruiters, engineering managers, and talent acquisition teams review software engineering resumes, they often look directly at a candidate’s live projects and source code. Simply pasting long URLs into a document or raw portfolio page looks unpolished and reduces engagement.

The Portfolio Project Card Previewer for Sri Lanka on tjncareers.online solves this by generating responsive, beautifully formatted project showcase cards in raw HTML code. This guide walks you through every configuration field, form control, and implementation method to help you present your technical work effectively.

1. Tool Overview & Key Advantages

The generator builds standalone visual markup components that display key project parameters: project titles, technology tags, descriptions, live deployment links, and public GitHub repository URLs.

Primary Tool Benefits:

• Professional Showcase: Transforms plain links into modern, interactive UI cards for your personal developer website or portfolio.

• Semantic & Clean HTML: Generates lightweight markup that integrates easily into WordPress, static site generators (Next.js, Hugo, Jekyll), or plain HTML files without performance overhead.

• Streamlined Developer Workflow: Eliminates the need to write custom CSS card layouts from scratch for every new project.

2. Navigating Section 1: Project Details Setup

The left pane collects essential details about your software project to populate the generated markup.

+-------------------------------------------------------------+
| 1. Project Details Setup                                    |
|                                                             |
| Project Title *                                             |
| [ InsertJobs.lk Job Board                                ]  |
|                                                             |
| Category / Tech Stack Tag *                                 |
| [ WordPress & PHP Plugin                                 ]  |
|                                                             |
| Project Description *                                       |
| +---------------------------------------------------------+ |
| | A high-performance job board platform optimized for     | |
| | the Sri Lankan tech and corporate market, featuring      | |
| | custom structured JSON-LD data and instant AJAX         | |
| | filtering.                                              | |
| +---------------------------------------------------------+ |
|                                                             |
| Live Demo URL *               GitHub Repo URL *             |
| [ https://insertjobs.lk ]    [ https://github.com/kasu... ]|
|                                                             |
| [ Reset ]  [ Load Demo ]                                    |
+-------------------------------------------------------------+

Input Field Breakdown:

1. Project Title:

   Enter the name of your application or software tool (e.g., InsertJobs.lk Job Board). Choose a clear, descriptive title that highlights what the project is.

2. Category / Tech Stack Tag:

   Specify the core technologies or frameworks used (e.g., WordPress & PHP Plugin, React & Node.js, Python & TensorFlow). Keeping tags concise helps reviewers quickly grasp your tech stack.

3. Project Description:

   Write a brief 2 to 3 sentence summary highlighting core functionality, technical architecture, and key performance achievements (e.g., “featuring custom structured JSON-LD data and instant AJAX filtering”).

4. Live Demo URL:

   Provide the live, web-accessible address where recruiters can interact with your application (e.g., [https://insertjobs.lk](https://insertjobs.lk)).

5. GitHub Repo URL:

   Include the public source code repository link (e.g., [https://github.com/kasunsilvadev](https://github.com/kasunsilvadev)) so engineering teams can review your code structure and commit history.

3. Form Control Actions

• Load Demo (Gray Button): Click Load Demo to populate the setup form with sample project parameters. This lets you inspect the resulting preview and code structure instantly.

• Reset (Gray Button): Click Reset to clear all input fields and prepare a blank slate for your next project showcase card.

4. Navigating Section 2: Live Preview & HTML Code

The right panel displays your real-time UI card preview along with the corresponding generated markup code box.

+-----------------------------------------------------------------------+
| 2. Live Preview & HTML Code                        [ Copy HTML ]      |
+-----------------------------------------------------------------------+
| [ Visual preview render of your custom project card ]                 |
|                                                                       |
| Generated Markup Code                                                 |
| +-------------------------------------------------------------------+ |
| | <div>                                        | |
| |   <h3>InsertJobs.lk Job Board</h3>                                | |
| |   <span>WordPress & PHP Plugin</span>            | |
| |   <p>A high-performance job board platform...</p>                 | |
| |   <a href="https://insertjobs.lk">Live Demo</a>                   | |
| |   <a href="https://github.com/kasunsilvadev">GitHub Repo</a>     | |
| | </div>                                                            | |
| +-------------------------------------------------------------------+ |
|                                                                       |
| Portfolio Tip: Clean, responsive project cards with direct GitHub     |
| links help recruiters quickly evaluate your technical depth and      |
| coding standards.                                                     |
+-----------------------------------------------------------------------+

Publishing Workflow:

• Live Inspection: Verify that the visual preview matches your desired text layout and link structure.

• Copy HTML (Blue Button): Click Copy HTML at the top right of Section 2 to save the markup block directly to your clipboard.

• Web Integration: Paste the generated snippet directly into your portfolio website editor (WordPress Custom HTML block, Webflow, React JSX component, or standard HTML file).

5. Strategic Portfolio Guidelines for Tech Applicants

6. Best Practices for Maximizing Project Card Impact

• Keep Live Demos Operational: Ensure all URLs listed in your live demo field remain online and active. Broken links create a negative impression during technical screening.

• Maintain Clean GitHub Repos: Pair your project cards with well-documented GitHub repositories containing clear installation steps, project structure details, and comprehensive README.md files.

• Highlight Quantifiable Results: Whenever possible, include performance metrics in your project description (e.g., “reduced load times by 35%” or “processed 10,000+ API requests daily”).

Need Technical Support or Have Feedback?

If you run into technical issues, need help with CSS styling adjustments, or wish to suggest new features for tjncareers.online, reach out to our support team at info@tjncareers.online.