javascript – Page 1019 – Blancer.com Tutorials and projects

Deploy of a reveal.js presentation using github pages its not loading the html

I’m trying to deploy a Reveal.js presentation using the external plugin, https://github.com/janschoepke/reveal_externa.
The thing is that when deployed, it shows the following error:

To my low understanding, this means it’s not being able to find my html sources, I’ve tried some basic suggestions, like changing the way i wrote my paths and such but nothing has worked so far.

I’ll add a link to my repo just in case. HERE

Also, here is the distribution of my folders, the html files are in the presentation folder.

And this is my index html:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <title>Curso OpenGL</title>

        <link rel="stylesheet" href="dist/reset.css">
        <link rel="stylesheet" href="dist/reveal.css">
        <link rel="stylesheet" href="dist/theme/serif.css">

        <!-- Theme used for syntax highlighted code -->
        <link rel="stylesheet" href="plugin/highlight/monokai.css">
        
    </head>
    <body>
        <div class="reveal">
            <div class="slides">
                <section data-external="presentation/title.html"></section>

                <section data-external="presentation/content.html"></section>

                <section data-external-replace="presentation/basics/introduction.html"></section>

                <section data-external-replace="presentation/development enviroment/DE.html"></section>
                
                <section data-external-replace="presentation/fundaments/fundamentals.html"></section>

                <section data-external-replace="presentation/basicFigures/BF.html"></section>
                
                <section data-external-replace="presentation/geometricTransformations/gt.html"></section>
                
                <section data-external-replace="presentation/camara/pc.html"></section>

                <section data-external-replace="presentation/shadows/is.html"></section>

                <section data-external-replace="presentation/texture/texture.html"></section>

                <section data-external-replace="presentation/animation/animation.html"></section>

                <section data-external-replace="presentation/user/userInteraction.html"></section>
                
            </div>
        </div>

        <script src="dist/reveal.js"></script>
        <script src="plugin/notes/notes.js"></script>
        <script src="plugin/markdown/markdown.js"></script>
        <script src="plugin/highlight/highlight.js"></script>
        <script src="plugin/zoom/zoom.js"></script>
        
        
        <script>
            // More info about initialization & config:
            // - https://revealjs.com/initialization/
            // - https://revealjs.com/config/
            Reveal.initialize({
                hash: true,

                dependencies: [
                    {
                        src: 'node_modules/reveal_external/external/external.js',
                        condition: function() {
                            return !!document.querySelector( '[data-external],[data-external-replace]' );
                        }
                    },

                ],

                plugins: [ RevealZoom, RevealNotes, RevealMarkdown, RevealHighlight ],

                // Learn about plugins: https://revealjs.com/plugins/
                

            });
        </script>
    </body>
</html>

I’ve tried changing path format, deploying branch with only the dist folder, maybe the solution or answer is quite obvious but I’ve been unable to ckack it.

I am quite new to all this, specially the concept of a deploy so it’s quite the predicament.

UPDATE:
I tried deploying with the external plugin in the plugins folder, also changing the path to avoid the path to node_modules, locally in the development server works fine, deployed shows the same error, therefore i assume in all attempts the plugin is at least included.

Is `Intl` object still expensive to create?

Several years ago, I read somewhere in MDN that creating Intl object like NumberFormat is expensive, and we should only create one then reuse. One benchmark in 2014 also agrees.

However, I can’t find that recommendation anymore in MDN for Intl. Is it still true? Or the creating of such object is so fast now we no longer need reusing?

Why does my function run twice after calling it on page rendering with useEffect?

When I render the page my function handleInitialSearch should run once, but it runs twice. I assume this is because react renders the page twice, but this will break my gitlab pipeline.

Therefore I am trying to prevent it from running again, but it has to run again on a re-render, therefore I cant just run it at the beginning of the session.

"use client"; import { useEffect, useState } from "react";

//bunch of variables

export default function Home() {
useEffect(() => {
    handleInitiateSearch();
  }, []);
}

async function handleInitiateSearch() {
    setLoading(true);
    try {
      const roadsResponse = await fetch(`/api?road=all`);
      const roadsData = await roadsResponse.json();
      console.log("Fetch response:", roadsData);
      setRoads(roadsData.roads);
      if (roadsResponse.status == 201) {
        setError(true);
        setErrorMessage(roadsResponse.statusText);
      }
    } finally {
      setLoading(false);
    }
  }

I tried to disable double rendering by react, but that doesn’t work.

How to Stubbing Azure Client Using Mocha and chai

const { EventHubConsumerClient, earliestEventPosition } = require("@azure/event-hubs");
const { ContainerClient } = require("@azure/storage-blob");
const { BlobCheckpointStore } = require("@azure/eventhubs-checkpointstore-blob");
const FIGmdLogger = require(process.cwd() + "/utility/logger").logger;
const secretManagerConfig = require(process.cwd() + '/utility/secretmanagerhandler');
const secretValue = secretManagerConfig.secretValue;
const { publisher } = require(process.cwd() + "/publisher/publisherbusiness");
const moment = require('moment');
 /* main function sets up the Event Hub consumer, processes filtered events, publishes messages to Google Pub/Sub, 
   updates checkpoints, and logs events and errors.
 */
async function main() {
  try {
    // Create a blob container client to interact with the Azure Blob container.
    const containerClient = new ContainerClient(secretValue?.AZURE_STORAGE_CONNECTION_STRING, secretValue?.AZURE_CONTAINER_NAME);

    // Initialize a blob checkpoint store using the container client for event checkpointing. 
    const checkpointStore = new BlobCheckpointStore(containerClient);

    // Create a consumer client for the event hub by specifying the checkpoint store.
    const consumerClient = new EventHubConsumerClient(secretValue?.AZURE_EV_CONSUMER_GROUP, secretValue?.AZURE_EH_CONNECTION_STRING, process.env.AZURE_EVENT_HUB_NAME, checkpointStore);

    // Subscribe to the events, and specify handlers for processing the events and errors.
    consumerClient.subscribe({
      processEvents: async (aevents, context) => {

        if (events.length === 0) {
          FIGmdLogger.info("ReceiveEvent processEvents:No events received within wait time. Waiting for next interval.");
          return;
        }
      // Filter events based on subscription key and ensure EventName is 'TaskCompleted' and Status is 'completed'
        const filteredEvents = events.filter((event) => (event?.body?.SubscriptionKey === secretValue?.CDXP_SUBSCRIPTION_KEY) && (event?.body?.EventName.toLowerCase() === process?.env?.CDXP_READY_FOR_DOWNLOAD_EVENT_NAME) && (event?.body?.Status.toLowerCase() === process.env.CDXP_COMPETED_EVENT_STATUS));

   
        const lastEvent = events[events.length - 1];
        await context.updateCheckpoint(lastEvent);
        FIGmdLogger.info(`ReceiveEvent processEvents:Checkpoint updated for partition: '${context.partitionId}'`, { eventId: lastEvent?.body?.EventId, taskId: lastEvent?.body?.TaskId, subscriptionKey: lastEvent?.body?.SubscriptionKey, eventName: lastEvent?.body?.EventName, eventStatus: lastEvent?.body?.Status });
      },

      processError: async (err, context) => {
        FIGmdLogger.error(`ReceiveEvent processError:Error processing events from partition: '${context.partitionId}. Error: ${err.message}`, { consumerGroup: context.consumerGroup, partitionId: context.partitionId, errorMessage: err.message, errStack: err.stack });
      }
    },
    // Configure the consumer to start from the earliest event position and set the maximum batch size for event processing.
      { startPosition: earliestEventPosition, maxBatchSize: process.env.MAX_BATCH_SIZE }
    );
  } catch (error) {
    throw error;
  }
}

main().catch((err) => {
  const { message, stack } = err;
  FIGmdLogger.error(`ReceiveEvent error occurred: ${message}`, { stackTrace: stack });
});`your text`

I need to write unit tests for the provided code using Mocha, Chai, and Sinon. Could you please help me? Below are the scenarios that need to be tested:

Container Client Connection
Verify that the container client connects with the given credentials (AZURE_STORAGE_CONNECTION_STRING, AZURE_CONTAINER_NAME).
Blob Checkpoint Store Connection
Check if the Azure Blob checkpoint store is connected with the received containerClient.
EventHubConsumerClient Connection
Ensure that the EventHubConsumerClient connects with the provided credentials (AZURE_EV_CONSUMER_GROUP, AZURE_EH_CONNECTION_STRING, AZURE_EVENT_HUB_NAME) and the checkpointStore.
ConsumerClient Subscribe Method
Test if the subscribe method of the consumer client works as expected.
processEvents Method
Verify that the processEvents method functions correctly when events are received.
processError Method
Ensure that the processError method works properly when an error occurs.
Event Filtering
Confirm that the event filtering mechanism is working as intended.
Ignore Logs
You can ignore testing the logs.

Want to create a button to show answer and hide answer

I want to create a webpage like this one..
https://www.placementpreparation.io/quantitative-aptitude/average/questions-and-answers/
I am creating website in WordPress using divi builder. I have tried following ajax code to display only a section of a webpage from different web page on button click..

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
    </script> 
</head> 

<body> 
    <h2 style="color: green;"> 
        just trial
    </h2> 
    <h3> 
        fetch only sections of specific HTML areas 
        from an external page using AJAX 
    </h3> 

    <button onclick="event_occur()"> 
        Click Here 
    </button><br><br> 

    <h3>External.html page</h3> 
    <div id="display"
        style="border: 1px solid black; 
                width:max-content; 
                padding:0.5rem"> 
        fetched Content will display here. 
    </div> 

    <script> 
        event_occur = () => { 
            // Load the Section with .first class and display 
            $("#display").load("index.html .first"); 
        }; 
    </script> 
</body> 

</html>

And the index.html page is as below…

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <title>webpage from wherer content is loaded</title> 
</head> 

<body> 
    <section class="first"> 
        <h3> 
            Index.html - Section - class = "first" 
        </h3> 
        <h2 style="color: green;"> 
            content from here will be loaded 
        </h2> 
        <h3>Web Development</h3> 
        <ul> 
            <li>HTML</li> 
            <li>CSS</li> 
            <li>JAVA SCRIPT</li> 
            <li>JQUERY</li> 
        </ul> 
    </section> 

    <section class="second"> 
        <h2 style="color: green;"> 
            this will not load 
        </h2> 
        <h3>Machine Learning</h3> 
        <ul> 
            <li>Python</li> 
        </ul> 
    </section> 

    <section class="third"> 
        <h2 style="color: green;"> 
            this will not load
        </h2> 
        <h3>Courses</h3> 
        <ul> 
            <li>Interview Preparation</li> 
            <li>DSA</li> 
            <li>DBMS</li> 
        </ul> 
    </section> 
</body> 

</html>

When I click on button click here then the code is neither loading the full page index.html nor loading the desired section of page index .html in WordPress building using divi page builder using divi theme
What should I do so that the code works..thanx

I tried the above logic and expection that the section of a web page will be loaded on ajax call.

How to stop websites from seeing specific events? [closed]

I don’t want websites to be able to know when I cut, copy, paste, switch window etc.

It seems that it is possible to use specific js scripts using Tampermonkey add-on such as the following:

document.addEventListener('EVENT', function(event) {
    event.stopImmediatePropagation();
}, true);

But it seems that it only works for existing events. As soon as I re-add events, they work again.

Is there a way to stop all existing and future events of a specific kind, it seems weird that we have no control over the events websites have access to ?

Responsive DataTable won’t fit window after show() called

I’m hiding a table on the page with style=”display: none” and showing the table using the initComplete api.

Here is the relevant JS code:

    <script>
        $(document).ready(function () {
            var table = new DataTable('#ResultsTable', {
                responsive: true,
                pageLength: 25,
                initComplete: function () {
                    $('#ResultsTable').show();
                    $('#ResultsTable').DataTable().columns.adjust().responsive.recalc();
                }
            });

        });
        $('#ResultsTable')
            .on('init.dt', function () {
                console.log('Table initialisation complete: ' + new Date().getTime());
                $('#ResultsTable').DataTable().columns.adjust().responsive.recalc();
            })
            .DataTable
    </script>

Neither method either in the initComplete funciton or in the .on(‘init.d’) function will redraw the table. But if I resize the window after it’s loaded the table will adjust to the window size as expected.

Using these versions of datatables:

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap5.js"></script>
    <!-- Responsive Tables -->
    <script src="https://cdn.datatables.net/responsive/3.0.3/js/dataTables.responsive.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.3/js/responsive.bootstrap5.js"></script>

It’s a flask app with only a few pages and each page shows a different data table, I just want to be able to jump between pages and have the tables sized to the window properly instead of sending off the end.

ElectronJs require is not defined

I am trying to make an video recording software following tutorial https://youtu.be/3yqDxhR2XxE?si=vL0Se4LtEw0nkzkR

<!--index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <title>Hello World!</title>
</head>

<body>
  <h1>Hello World!</h1>


  
  <script defer src="./renderer.js"></script>
</body>

</html>

// index.js
const { app, BrowserWindow } = require('electron');
const path = require('node:path');

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
  app.quit();
}

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration:true,
    },
  });

  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow();

  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

const { desktopCapturer } = require('electron')

async function getVideoSources() {
    const inputSources = await desktopCapturer.getSources({
        types: ['window', 'screen']
    })

    console.log(inputSources);
}
getVideoSources()

// the error i am getting on console

Uncaught ReferenceError: require is not defined
    at renderer.js:1:29

why the require is not defined, i also switched the renderer.js code into preload.js then i am getting this error.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getSources')
    at getVideoSources (VM116 C:UsersDaveDesktopmy-projectssoftwaremy-appsrcpreload.js:4:48)
    at Object.<anonymous> (VM116 C:UsersDaveDesktopmy-projectssoftwaremy-appsrcpreload.js:10:1)
    at Object.<anonymous> (VM116 C:UsersDaveDesktopmy-projectssoftwaremy-appsrcpreload.js:11:3)
    at Module._compile (VM56 loader:1484:14)
    at Module._extensions..js (VM56 loader:1564:10)
    at Module.load (VM56 loader:1295:32)
    at Module._load (VM56 loader:1111:12)
    at c._load (VM69 node_init:2:16955)
    at s._load (VM112 renderer_init:2:30981)
    at VM112 renderer_init:2:33050

can anyone help, why there is getSources is undefined i did not understand it, its my first time on electron.

PDF.js – pdfjs-dist : Warning: loadFont – translateFont failed: “TypeError: e.peekBytes is not a function”

I am using PDF.js (pdfjs-dist v4.7.76 (latest)) in a Angular18 project,
The pdf viewer is working well for all PDF I uploaded, except with one:

Almost all the text of the PDF is not showing :

(What I should see)

And I have this warning in the console :

Warning: loadFont – translateFont failed: “TypeError: e.peekBytes is not a function”.

So I debugged the pdf.worker.min.mjs file, and I found that the error come from the getFontFileType function.

Here’s the function code:

function getFontFileType(e, {type: t, subtype: i, composite: a}) {
    let s, r;
    if (function isTrueTypeFile(e) {
        const t = e.peekBytes(4);
        return 65536 === readUint32(t, 0) || "true" === bytesToString(t)
    }(e) || isTrueTypeCollectionFile(e))
        s = a ? "CIDFontType2" : "TrueType";
    else if (function isOpenTypeFile(e) {
        return "OTTO" === bytesToString(e.peekBytes(4))
    }(e))
        s = a ? "CIDFontType2" : "OpenType";
    else if (function isType1File(e) {
        const t = e.peekBytes(2);
        return 37 === t[0] && 33 === t[1] || 128 === t[0] && 1 === t[1]
    }(e))
        s = a ? "CIDFontType0" : "MMType1" === t ? "MMType1" : "Type1";
    else if (function isCFFFile(e) {
        const t = e.peekBytes(4);
        return t[0] >= 1 && t[3] >= 1 && t[3] <= 4
    }(e))
        if (a) {
            s = "CIDFontType0";
            r = "CIDFontType0C"
        } else {
            s = "MMType1" === t ? "MMType1" : "Type1";
            r = "Type1C"
        }
    else {
        warn("getFontFileType: Unable to detect correct font file Type/Subtype.");
        s = t;
        r = i
    }
    return [s, r]
}

And here’s where the error come from (line 3 of the function):

The error is due to the type of the “e” variable, that should be a Stream, but is a “Dict” instead.
This is probably due to a weird font file, so I tried to open the pdf file with these options:

 pdfjs.getDocument({
   url: 'the file url',
   disableFontFace: true, // this option
   disableStream: true, // or this option
   cMapUrl: 'https://cdn.jsdelivr.net/npm/[email protected]/cmaps/', // or these two options
   cMapPacked: true,
 });

or I added this option when I render the page :

page.render({
  canvasContext: context,
  viewport: viewport,
  renderingMode: 'svg',  // this line
})

But no one seemed to change anything. So please, did anyone already have this issue? Can you think of a way to fix it?

How to change CSS property inside a descendant selector

How do I change or remove style “width” property for img?

HTML:

<div class="main_box_img">
    <img src="...">
</div>

CSS:


.main_box_img img{
    width: 100%;
}

document.getElementsByClassName("main_box_img")[0].getElementsByTagName('img')[0].style is empty.

I can get width value using getComputedStyle(), but it’s read-only.

Seems to be a simple question but I’ve found nothing.

Tabulator column grouping – seperator on all cells vertically

Hi I was working on tabulator and came across column grouping is it possible to have a separator over all the rows to indicate from where column grouping starts ? is this feature available in tabulator ?

Iterate nested array of objects and get result as array of object [closed]

I am stuck at a problem and i would really need some guidance on the solution.
I have an object like this shown below

{
  "count": 3,
  "tree": [
    {
      "name": "Parent1a",
      "children": [
        {
          "name": "Child1a",
          "children": [
            {
              "name": "Child2a",
              "children": [
                {
                  "name": "Child3a",
                  "children": [
                    {
                      "name": "Child4a",
                      "children": []
                    }
                  ]
                }
              ]
            }
          ]
        }
    ]
    },
    {
      "name": "Parent1b",
      "children": [
        {
          "name": "Child1b",
          "children": []
        }
      ]
    }
  ]
}

as you can see in this object above, tree is an array of objects. the above tree consists of 2 objects with name Parent1a and Parent1b. Each of these objects will have children, it will be array of objects too and each children object will further have children array of objects and it can continue n number of times inside each.

we want to get all the name property from all these parent object and all nested array of objects named children and then put those values in a new array of objects.

The final output should look like this.

[
  {
    "id": "Parent1a",
    "label": "Parent1a",
    "level": 0,
  },
  {
    "id": "Child1a",
    "label": "Child1a",
    "parentId": "Parent1a",
    "level": 1,
  },
  {
    "id": "Child2a",
    "label": "Child2a",
    "parentId": "Child1a",
    "level": 2,
  },
  {
    "id": "Child3a",
    "label": "Child3a",
    "parentId": "Child2a",
    "level": 3,
  },
  {
    "id": "Child4a",
    "label": "Child4a",
    "parentId": "Child3a",
    "level": 4,
  },
  {
    "id": "Parent1b",
    "label": "Parent1b",
    "level": 0,
  },
  {
    "id": "Child1b",
    "label": "Child1b",
    "parentId": "Parent1b",
    "level": 1,
  },
  
]

As you can see in above output, Parent1a, Parent1b are the first level. i.e. those are the top level array of objects, hence level been assigned 0 to those. As we dig in deeper through the tree, each children object is assigned next level 1,2,3 and so on as we dig deeper into the children array of objects. similary each children array of object is assigned an id which is the name of its parent tree. Hence Child1a is assigned Parent1a as its parentId.

Can someone let me know how to achieve this as i am really bad at recursion and i checked out few stackoverflow posts but it felt slightly different than what i wanted to achieve.
for e.g. Recursive iteration over dynamically nested object array

How can I return a single button?

The following code sucessfully targets all elements with .btn class.

$(".btn").toggleClass("pressed");

Meanwhile, this returns the first element with .btn class.

$(".btn")[0];

But why $(".btn")[0].toggleClass("pressed"); doesn’t work and return “.toggleClass is not a function in console.”?

How would I get my javascript to choose the correct radio button in a php dynamically generated radio button list?

function statequery (theabbrev,thestate) {

    if (abbrev.value.length > 0) {
        enabledataentry();
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function(){
        var x = 0;
        var statearray = JSON.parse(this.responseText);
        if (statearray.length > 0){
            stateabbrev.innerHTML=statearray[x].abbrev;
            statename.innerHTML=statearray[x].statename;
            pci.value=statearray[x].pci;
            pop.value=statearray[x].pop;

        radiobuttons = document.getElementsByName('stateradio');
        for (var x=0; x < radiobuttons.length; x++){
            if (radiobuttons[x].id === statearray.region) {
                radiobuttons[x].checked=true;
                break;
            }
        }
      }
    }
    xhttp.open("GET", "statesearch.php?abbrev="+theabbrev, true);
    xhttp.send();
      
  }
}

So this is my javascript above trying to select the correct radio button. The reason I have it this way is because the radio button list is dynamically created with a php query.

<?php foreach ($result as $row){ ?>
  <input type="radio" id="<?php echo $row['region'];?>" disabled name="stateradio"/>
  <label for="<?php echo $row['region'];?>">
  <?php echo $row['region'];?></label><br />
<?php } ?>

This is the php that generates the radio button list. However I can’t get it to actually select the right button. There’s no errors in the console so something is happening but not the way I want it to. Anyone know how to get this working?

Problems with react-vertical-timeline-component

`I have been working on a 3d portifolio everything was going well until i introduced the react vertical component into the system i am getting a 504 error stating that (Outdated Optimize Dep) while using React vite

I was expecting to get the normal react vertical component out look since i had install it and imported the necessary components`

import { skills , experiences } from "../constants"
import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';

const About = () => {
return (
<section className="max-container">
    <h1 className="head-text">Hello</h1>
      Hello , I am <span className="blue_gradient_text
      font-semibold drop-shadow">John Doe</span>
      <div className="mt-5 flex flex-col gap-3 
      text-slate-500">
        <p>Incomming Software Engineer </p>
      </div>
      <div className="py-10 flex flex-col "> 
          <h3 className="subhead-text">My Skills</h3>
          <div className="mt-16 flex flex-wrap gap-12">
               {skills.map((skills)=>(
                  <div className="block-container w-20 h-20">
                    <div className="btn-back rounded-xl"/>
                    <div className="btn-front rounded-xl flex justify-center
                    items-center">
                      <img 
                      src={skills.imageUrl}
                      alt={skills.name}
                      className="w-1/2 h-1/2 object-contain"
                        />
                    </div>
                  </div>
               ) )} 
          </div>
      </div>

      <div className="py-16">
          <h3 className="subhead-text">Work Experince</h3>
          <div className="mt-5 flex flex-col gap-3 
      text-slate-500">
        <p>I have had the opportunity to work with a few companies and here is the list </p>
      </div>
      <div className="mt-12 flex"> 
          <VerticalTimeline>
            {experiences.map((experiences)=>(
              <VerticalTimelineElement>
                <div>
                  <h3>
                    {experiences.title}
                  </h3>
                </div>
              </VerticalTimelineElement>
            ))}
          </VerticalTimeline>
      </div>
      </div>
</section>
 )
}

export default About