add : new ui to projects

Author: vigneshsnaik

public/assets/works/ChainAsset/thumbnail.webp

@@ -8,14 +8,16 @@ interface Props {
 const { data, slug } = Astro.props.project;
 ---
 
-<a class="card" href={`/projects/${slug}`}>
+<a class="card" href={`/work/${slug}`}>
   <span class="title">{data.title}</span>
-  <img
-    src={data.img}
-    alt={data.img_alt || ""}
-    loading="lazy"
-    decoding="async"
-  />
+  <div class="image-container">
+    <img
+      src={data.img}
+      alt={data.img_alt || ""}
+      loading="lazy"
+      decoding="async"
+    />
+  </div>
 </a>
 
 <style>
@@ -33,30 +35,62 @@ const { data, slug } = Astro.props.project;
     font-size: var(--text-lg);
     font-weight: 500;
     transition: box-shadow var(--theme-transition);
+    position: relative;
   }
 
   .card:hover {
     box-shadow: var(--shadow-md);
   }
 
-  .title {
-    grid-area: 1 / 1 / 2 / 2;
-    z-index: 1;
-    margin: 0.5rem;
-    padding: 0.5rem 1rem;
-    background: var(--gray-999);
-    color: var(--gray-200);
-    border-radius: 0.375rem;
+  .image-container {
+    grid-area: 1 / 1 / 3 / 3;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
   }
 
   img {
-    grid-area: 1 / 1 / 3 / 3;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
 
+  @media (max-width: 50em) {
+    .title {
+      grid-area: 2 / 1 / 3 / 3;
+      z-index: 1;
+      margin: 0.5rem;
+      padding: 0.5rem 1rem;
+      background: var(--gray-999);
+      color: var(--gray-200);
+      border-radius: 0.375rem;
+      align-self: end;
+      justify-self: center;
+    }
+  }
+
   @media (min-width: 50em) {
+    .title {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--gray-900);
+      color: var(--gray-100);
+      border-radius: 0.375rem;
+      z-index: 1;
+      opacity: 0;
+      transition: opacity var(--theme-transition);
+    }
+
+    .card:hover .title {
+      opacity: 0.9;
+    }
+
     .card {
       height: 22rem;
       border-radius: 1.5rem;

public/assets/social-preview.jpg renamed to public/assets/works/Portfolio/thumbnail.webp

@@ -0,0 +1,98 @@
+---
+title: ChainAsset
+description: |
+  An application for tokenizing physical assets and trading them.
+period:
+  from: "September 2023"
+  to: "April 2024"
+priority: 4
+img: "/assets/works/ChainAsset/thumbnail.webp"
+tags:
+  - "https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB"
+  - "https://img.shields.io/badge/Supabase-3ECF8E?style=for-the-badge&logo=supabase&logoColor=white"
+  - "https://img.shields.io/badge/MUI-0081CB?style=for-the-badge&logo=mui&logoColor=white"
+  - "https://img.shields.io/badge/Solidity-363636?style=for-the-badge&logo=solidity&logoColor=white"
+  - "https://img.shields.io/badge/Web3-F16822?style=for-the-badge&logo=web3.js&logoColor=white"
+  - "https://img.shields.io/badge/Blockchain-121D33?style=for-the-badge&logo=blockchain&logoColor=white"
+---
+
+### Table of Contents
+
+- [Project Overview](#project-overview)
+- [Features](#features)
+- [Use Cases](#use-cases)
+- [System Architecture](#system-architecture)
+- [Key Functionalities](#key-functionalities)
+- [Screenshots/Visuals](#screenshotsvisuals)
+- [Collaborators](#collaborators)
+- [Future Enhancements](#future-enhancements)
+
+---
+
+#### Project Overview
+
+The **ChainAsset** project revolutionizes asset management by leveraging blockchain technology to tokenize physical assets like real estate and artwork. This system enables secure, transparent, and efficient digital representations of assets, promoting liquidity and democratizing ownership through fractional shares.
+
+#### Features
+
+- **Smart Contracts**: Automates processes like ownership transfer, dividend distribution, and transaction settlement.
+- **Transparency and Trust**: Blockchain ensures immutable ownership records, reducing fraud risks.
+- **Regulatory Compliance**: Regular asset valuations provide accurate assessments for tax and compliance purposes.
+- **Fractional Ownership**: Facilitates investment in assets by dividing them into smaller units.
+- **Decentralized Transactions**: Reduces intermediaries, transaction costs, and bureaucratic complexities.
+
+#### Use Cases
+
+- **Real Estate Tokenization**: Tokenize properties to enable fractional ownership and trading.
+- **Artwork Tokenization**: Securely trade shares of valuable artwork.
+- **Investment Diversification**: Allow investors to diversify portfolios with tokenized assets.
+
+#### System Architecture
+
+The architecture comprises three modules:
+
+1. **User Interface Module**:
+
+- Authentication
+- Asset browsing and transaction management
+- User account management
+
+2. **Backend Services Module**:
+
+- Asset listing and management
+- Transaction execution and database handling
+
+3. **Blockchain Integration Module**:
+
+- Interfacing with smart contracts
+- Token transfers and blockchain state updates
+
+#### Key Functionalities
+
+(_Coming Soon_)
+
+#### Screenshots/Visuals
+
+- **User Dashboard**: Manage assets and view ownership history.
+- **Asset Management Interface**: List, buy, and sell tokenized assets.
+- **Transaction Details**: Clear record of blockchain-based transactions.
+
+#### Collaborators
+
+- <a href="https://github.com/Arshad-3" target="_blank">Mohammed Arshad</a>
+- <a href="https://github.com/in/Mekhadev2025" target="_blank">Mekha L</a>
+- Srilakshmi R
+- **<a href="https://github.com/vigneshsnaik" target="_blank">Vignesh S Naik</a>**
+
+#### Future Enhancements
+
+- **Mobile Application**: Develop a mobile app for easier access and management.
+- **Advanced Analytics**: Integrate analytics for better investment insights.
+- **Multi-Chain Support**: Expand support to multiple blockchain networks for greater flexibility.
+
+<p align="center">
+<strong>Links:</strong> 
+  <a href="https://github.com/vigneshsnaik/dbms-miniproject-frontend" target="_blank">Front-End repo</a> |
+  <a href="https://github.com/vigneshsnaik/dbms-moralis-integration" target="_blank">Webhooks repo</a> |
+  <a href="https://github.com/Arshad-3/dbms-web3-contract" target="_blank">Smart Contract repo</a>
+</p>

public/assets/works/VizCode/thumbnail.webp

@@ -0,0 +1,29 @@
+---
+title: Portfolio Website
+description: |
+  A  portfolio website built using the Astro framework.
+period:
+  from: "June 2024"
+priority: 1
+img: "/assets/works/Portfolio/thumbnail.webp"
+tags:
+  - "https://img.shields.io/badge/Astro-FF5A1F?style=for-the-badge&logo=astro&logoColor=white"
+  - "https://img.shields.io/badge/GitHub%20Pages-181717?style=for-the-badge&logo=github&logoColor=white"
+  - "https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white"
+---
+
+Welcome to my super cool portfolio website! Built using the Astro framework and deployed on GitHub Pages, this site is here to show off my projects and interests in the most stylish way possible. It's like a digital resume, but way more fun.
+
+---
+
+<p align="center">
+  <strong>Links:</strong>
+  <a
+    href="https://github.com/vigneshsnaik/vigneshsnaik.github.io"
+    target="_blank"
+    >repo</a
+  > | 
+  <a href="https://vigneshsnaik.github.io" title="website" target="_blank"
+    >website</a
+  >
+</p>

public/assets/works/Zenith/thumbnail.webp

@@ -0,0 +1,105 @@
+---
+title: VizCode
+description: |
+  An online compiler system with real-time data structure visualization.
+period:
+  from: "July 2024"
+  to: "Present"
+priority: 2
+img: "/assets/works/VizCode/thumbnail.webp"
+tags:
+  - "https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB"
+  - "https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white"
+  - "https://img.shields.io/badge/Express.js-000000?style=for-the-badge&logo=express&logoColor=white"
+  - "https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white"
+  - "https://img.shields.io/badge/CodeMirror-000000?style=for-the-badge&logo=codemirror&logoColor=white"
+---
+
+#### Table of Contents
+
+- [Project Overview](#project-overview)
+- [Features](#features)
+- [Use Cases](#use-cases)
+- [System Architecture](#system-architecture)
+- [Key Functionalities](#key-functionalities)
+- [Screenshots/Visuals](#screenshotsvisuals)
+- [Collaborators](#collaborators)
+- [Future Enhancements](#future-enhancements)
+
+---
+
+#### **Project Overview**
+
+Understanding complex data structures is a significant challenge in computer science education. To address this, we developed the **Interactive Data Structure Visualizer**, a web-based platform that simplifies learning through real-time, Python-centric visualizations.
+
+This innovative tool bridges the gap between theoretical concepts and practical understanding by offering dynamic visual aids, step-by-step execution tracing, and secure, containerized code execution. It's designed for students, educators, and self-learners, fostering intuitive and hands-on exploration of data structures.
+
+#### **Features**
+
+- **Real-Time Visualization**  
+  Observe live transformations in data structures during code execution.
+- **Interactive Debugging**  
+  Step through operations like insertion, deletion, and searching to track variable changes.
+- **Browser-Based and Platform-Independent**  
+  Accessible on any device without installations.
+- **Secure Code Execution**  
+  Sandboxed environments ensure security for multi-user functionality.
+- **Educational Enhancements**  
+  Includes intuitive error handling and conceptual explanations for each data structure.
+
+#### **Use Cases**
+
+1. **For Students**  
+   Visualize operations on data structures to grasp concepts effectively.
+2. **For Educators**  
+   Demonstrate real-time transformations in classroom environments.
+3. **For Developers**  
+   Debug and analyze code behavior intuitively.
+
+#### **System Architecture**
+
+The application follows a modular architecture:
+
+- **Frontend:**
+  Interactive UI with visualization components.
+- **Code Preprocessor:**
+  Manages code parsing and preparation for execution.
+- **Code Executor:**
+  Handles code execution requests and returns results after safe execution within isolated environments.
+- **Visualization Engine:**
+  Renders real-time visualizations based on execution data.
+
+#### **Key Functionalities**
+
+- **Code Input and Execution**  
+  Submit Python code snippets and observe their execution.
+- **Visualization**  
+  Displays step-by-step transformations in data structures like arrays, trees, and graphs.
+- **Error Handling**  
+  Detects and highlights errors with detailed feedback.
+- **Integration**  
+  Easily embeddable in Learning Management Systems (LMS) or educational platforms.
+
+#### **Screenshots/Visuals**
+
+(_Coming Soon_)
+
+#### **Collaborators**
+
+- Jayanth R
+- <a href="https://github.com/in/Mekhadev2025" target="_blank">Mekha L</a>
+- Srilakshmi R
+- **<a href="https://github.com/vigneshsnaik" target="_blank">Vignesh S Naik</a>**
+
+#### **Future Enhancements**
+
+- Support for additional programming languages like Java and C++.
+- Integration with AI-driven feedback to suggest optimizations.
+- Advanced visualizations for algorithms like dynamic programming and graph traversals.
+
+---
+
+<p align="center">
+<strong>Links:</strong> 
+<a href="https://github.com/vigneshsnaik/final-year-project/" target="_blank">Front-End repo</a> 
+  </p>