DEV Community: Nikola Mitic

Making your CV talk 🤖 Possible improvements 🚀

Nikola Mitic — Wed, 05 Jun 2024 10:34:25 +0000

We can always do better! Little (or not so little) pessimist in me also want to say "We can also always do worse!"

But do not listen to him! Let's see how we might make this better.

Best code is the one you do not write!

You can actually totally remove Backend service and have client make all the calls, problem is that you will have your API keys exposed and there is no other way to authenticate api calls as of now for Open AI and Eleven Labs.

Cache 💵 because all cool kids are doing it!

Cache! We are making call to fetch our CMS data on each request, this might not be needed as our data for CV does not change often if at all. This can also save costs because in the example I am using Hygrpah which has a free tier but can eventually reach its free quota.

Maybe if we use please word more in our prompt? 🤓 (do not fail to note sarcasm in the quote)

Better prompting, if you explore LlamaIndex there are ways how one can make their promoting yield better and more accurate responses. You can create custom Prompt template, or make have clear instructions about how system should behave.

Outro 👋

This was a lot, please feel free to look at the code base and ask any question you might have.
I would also welcome any improvements that one is willing to share.

And lastly, if you make all the way, thank you so much I hope you had some fun and learn something in the process.

❤️If you would like to stay it touch please feel free to connect❤️

Making your CV talk 🤖 How to use express JS routes to listen for Web socket API?

Nikola Mitic — Wed, 05 Jun 2024 10:34:20 +0000

All you need to do is to open web socket towards web socket api inside Express JS route. streamAudioAnswer func is doing exactly that.

Here is the flow:

Client request api path
Express Js Open web socket connection
Express JS sends message to web socket api
Web socket api responds
Express JS takes response and returns it to the Client

🔗🔗🔗 For full implementation click here

Example of streamAudioAnswer usage.

  streamAudioAnswer({
    question: question,
    onChunkReceived: (chunk) => {
      const buffer = Buffer.from(chunk, "base64");
      res.write(buffer);
    },
    onChunkFinal: () => {
      res.end();
    },
    onError: (error) => {
      console.error(`WebSocket Error: ${error}`);
      res.status(500).send(`WebSocket Error: ${error}`);
    },
    onClose: (event) => {
      if (event.wasClean) {
        console.info(
          `Connection closed cleanly, code=${event.code}, reason=${event.reason}`
        );
      } else {
        console.warn("Connection died");
      }
      res.end();
    },
  });

Function implementation:

export const streamAudioAnswer = ({
  question,
  onChunkReceived,
  onChunkFinal,
  onError,
  onClose,
}: {
  question: string;
  onChunkReceived: (audioChunk: string) => void;
  onChunkFinal: () => void;
  onError: (error: ErrorEvent) => void;
  onClose: (event: CloseEvent) => void;
}) => {
  const voiceId = "IcOKBAbsVAB6WkEg78QO";
  const model = "eleven_turbo_v2";
  const wsUrl = `wss://api.elevenlabs.io/v1/text-to-speech/${voiceId}/stream-input?model_id=${model}`;
  const socket = new WebSocket(wsUrl);

  socket.onopen = async function (_event) {
    console.log("OPEN SOCKET");

    const answerSource = await getAnswerSource();
    const answerChunks = await getAnswerChunks(answerSource, question);

    const bosMessage = {
      text: " ",
      voice_settings: {
        stability: 0.5,
        similarity_boost: 0.5,
      },
      xi_api_key: process.env.ELEVEN_LABS_API_KEY,
    };

    socket.send(JSON.stringify(bosMessage));

    for await (const text of textChunker(answerChunks)) {
      socket.send(JSON.stringify({ text: text, try_trigger_generation: true }));
    }

    const eosMessage = {
      text: "",
    };

    socket.send(JSON.stringify(eosMessage));
  };

  socket.onmessage = function (event) {
    const response = JSON.parse(event.data.toString());

    if (response.audio) {
      onChunkReceived(response.audio);
    } else {
      console.log("No audio data in the response");
    }

    if (response.isFinal) {
      console.log("Audio stream chunks final");
      onChunkFinal();
    }
  };

  socket.onerror = onError;

  socket.onclose = onClose;
};

❤️If you would like to stay it touch please feel free to connect❤️

Making your CV talk 🤖 How to combine Open AI text stream response with Eleven Lab Web socket streaming in TypeScript?

Nikola Mitic — Wed, 05 Jun 2024 10:34:15 +0000

Let's briefly refer back to this part of our system design.

We have three parts:

Fetch Relevant CMS data
Fetch stream from Open AI
Feed Web socket audio stream api with text stream from Open AI

Eleven Labs uses web socket api to enable for audio stream, open AI uses rest api to return text stream.

What is important here to achieve is that we do not want to wait for the open AI response before we can start streaming audio from eleven labs.

This means we need a way to send first chunk of Open AI stream as soon as possible to eleven labs.

But we have a problem, Open AI or any other LLM api (Groq as well) returns chunks which do not represent any meaningful words which eleven labs requires in order to work as intended.

This means that we need to buffer chunks into words from Open AI and only when we have our first word buffered we send a message to web socket of Eleven Labs and start streaming audio.

For this purpose I wrote textChunker which is TS version of Python example Eleven Labs has in their docs. 🔗🔗🔗 Click here to see Python version

🔗🔗🔗 Click here for TextChunker code

Example of Text Chunker usage.



  socket.onopen = async function (_event) {
    console.log("OPEN SOCKET");

    const answerSource = await getAnswerSource();
    const answerChunks = await getAnswerChunks(answerSource, question);

    const bosMessage = {
      text: " ",
      voice_settings: {
        stability: 0.5,
        similarity_boost: 0.5,
      },
      xi_api_key: process.env.ELEVEN_LABS_API_KEY,
    };

    socket.send(JSON.stringify(bosMessage));

    for await (const text of textChunker(answerChunks)) {
      socket.send(JSON.stringify({ text: text, try_trigger_generation: true }));
    }

    const eosMessage = {
      text: "",
    };

    socket.send(JSON.stringify(eosMessage));
  };

🔗🔗🔗 For full implementation of Open AI with Eleven Labs click here

❤️If you would like to stay it touch please feel free to connect❤️

Making your CV talk 🤖 How to read audio stream on client using Next JS?

Nikola Mitic — Wed, 05 Jun 2024 10:34:11 +0000

Considering that our backend exposes url which streams audio solution is rather simple, we make use of html Audio element and use the correct path.

Nothing about this is Next JS related, this is pure React JS TS solution, so you can use it in your React JS code base as well.

For this purpose I created React component that can be re used.
Code here: https://github.com/nmitic/nikola.mitic.dev/blob/745b103829874d0bb7b19d1668d793b99e23653b/components/InterviewerAITalk/components/AudioAnswer.tsx

export const AudioAnswer = ({
  question,
  onAnswerDone,
  onAnswerStart,
}: {
  question: string;
  onAnswerDone: () => void;
  onAnswerStart: () => void;
}) => {
  const demo = process.env.NEXT_PUBLIC_AI_DEMO === "true";

  return (
    <audio autoPlay onPlay={onAnswerStart} onEnded={onAnswerDone}>
      <source
        src={`${process.env.NEXT_PUBLIC_AI_INTERVIEWER_SERVICE}/api/talk?question=${question}&demo=${demo}`}
        type="audio/mp3"
      />
    </audio>
  );
};

❤️If you would like to stay it touch please feel free to connect❤️

Making your CV talk 🤖 How to read text stream on client using Next JS?

Nikola Mitic — Wed, 05 Jun 2024 10:34:07 +0000

I have wrote a function which takes answer and callbacks to which UI can listen to and react as it finds fit.

Nothing about this is Next JS related, this is pure React JS TS solution, so you can use it in your React JS code base as well.

Here are the steps:

Make request to fetch stream - code here: https://github.com/nmitic/nikola.mitic.dev/blob/745b103829874d0bb7b19d1668d793b99e23653b/components/InterviewerAI/InterviewerAI.func.ts#L15-L34
Get stream reader - code here:https://github.com/nmitic/nikola.mitic.dev/blob/745b103829874d0bb7b19d1668d793b99e23653b/components/InterviewerAI/InterviewerAI.func.ts#L52-L58
Iterate over he stream and call a function on each iteration so UI can listen and react to it - code here: https://github.com/nmitic/nikola.mitic.dev/blob/745b103829874d0bb7b19d1668d793b99e23653b/components/InterviewerAI/InterviewerAI.func.ts#L64-L76

Full implementation of answerQuestionWithStream:



export const answerQuestionWithStream = async ({
  onStreamStart,
  onStream,
  onStreamDone,
  onError,
  question,
}: {
  onStreamStart: () => void;
  onStream: (chunk: string) => void;
  onStreamDone: (answer: string) => void;
  onError: () => void;
  question: string;
}) => {
  try {
    const demo = process.env.NEXT_PUBLIC_AI_DEMO === "true";

    const reader = await getStreamReader(demo, question);

    if (!reader) {
      console.error("Stream reader undefined");

      return;
    }

    const textDecoder = new TextDecoder();

    onStreamStart();

    // Keeps track of streamed answer and will evaluate to full once streaming is done
    let fullDecodedAnswer = "";

    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      const decodedText = textDecoder.decode(value);

      fullDecodedAnswer = fullDecodedAnswer + decodedText;
      onStream(decodedText);
    }
    onStreamDone(fullDecodedAnswer);
  } catch (error) {
    console.error(error);
    // indicated to the user the error has happen
    onError();
  }
};

---

❤️If you would like to stay it touch please feel free to connect❤️

1. [X](https://x.com/mitic_dev)
2. [Linkedin](https://www.linkedin.com/in/nikola-mitic-6a5b11119/)
3. nikola.mitic.dev@gmail.com

---

Making your CV talk 🤖 How to send audio stream from Express JS?

Nikola Mitic — Wed, 05 Jun 2024 10:34:03 +0000

For our case this part was easy, as all we need to do is:

Get buffered chunk
Write to response object

And it looks like this.

    onChunkReceived: (chunk) => {
      const buffer = Buffer.from(chunk, "base64");
      res.write(buffer);
    },

I will talk more about onChunkReceived method in the next section. Long story short, it it accepts a callback with chunk that come from web socket api. This is implementation details of how to work with Eleven Labs API.

Each time web socket sends an event that chunk is received it will write to response object and return chunk to the client.

This is the simplest way to combine express js with web socket api.

❤️If you would like to stay it touch please feel free to connect❤️

Making your CV talk 🤖 How to send text stream from Express JS?

Nikola Mitic — Wed, 05 Jun 2024 10:33:59 +0000

Here we have stream coming from Open AI. We need to read chunks and stream it back as soon as chunk is ready. In a way we are streaming a stream.

One can make a case that this is not needed, however I am doing this in order to hide API keys for Groq, Open AI and Hygraph headless CMS. As I do not want them to be exposed to the client.

Route handler for /api/ask route:

export const route = async (req: Request, res: Response) => {
  const { question } = req.query;

  if (typeof question !== "string") {
    return res
      .status(400)
      .send(`Client error: question query not type of string`);
  }
  try {
    const answerSource = await getAnswerSource();

    const answerChunks = await getAnswerChunks(answerSource, question, false);

    for await (const chunk of answerChunks) {
      console.log(chunk.response);
      if (req.closed) {
        res.end();
        return;
      }
      res.write(chunk.response);
    }

  } catch (error) {
    return res.status(500).send(`Server error: ${error}`);
  }

  res.end();
};

Let's dissect it a bit:

const answerSource = await getAnswerSource();

Here we are getting all our relevant data, CV, blog posts plus any pages you would like your AI clone to be aware of.

const answerChunks = await getAnswerChunks(answerSource, question, false);

Here we are feeding out LLM with our custom data and question. And getting stream back as a response.

    for await (const chunk of answerChunks) {
      console.log(chunk.response);
      if (req.closed) {
        res.end();
        return;
      }
      res.write(chunk.response);
    }

Here we simply iterate over chunks and make sure we close connection in case client do so as well.

And our streamception is done! 🎏

❤️If you would like to stay it touch please feel free to connect❤️

Making your CV talk 🤖 How to have Open AI api answer based on your custom data?

Nikola Mitic — Wed, 05 Jun 2024 10:33:55 +0000

I used https://ts.llamaindex.ai/.

As somebody who is just starting out with generative AI, I have found LlamaIndex to be of a huge help.

They help you cut the corners and reduce need for a deep understanding about how LLM work in order to be productive. Which is something I need as a beginner.

One thing to note is that TS version tend to be unstable in terms of API at the time of writing, versions keep introducing new functions and classes signatures and their docs sometimes fails to follow up.

So be patient, I believe TS version will reach maturity soon. They are doing a great job.

Code is rather simple:

export const getAnswerChunks = async (
  source: string,
  question: string,
  useGroq: boolean = false
) => {
  if (useGroq) {
    // Update llm to use Groq
    Settings.llm = new Groq({
      apiKey: process.env.GROQ_API_KEY,
      model: "llama3-8b-8192",
    });
  }
  // Create Document object
  const document = new Document({
    text: `Nikola Mitic - life story: ${JSON.stringify(source)}`,
  });
  // Create storage from local file
  const storageContext = await storageContextFromDefaults({
    persistDir: "./index-storage",
  });
  // Split text and create embeddings. Store them in a VectorStoreIndex
  const index = await VectorStoreIndex.fromDocuments([document], {
    storageContext,
  });
  // gets retriever
  const retriever = index.asRetriever({ similarityTopK: 5 });

  const chatEngine = new ContextChatEngine({
    retriever,
    chatModel: Settings.llm,
  });
  // Get stream chunks
  const chunks = await chatEngine.chat({
    message: `
      You are Nikola Mitic AI clone.
      You answer the question as if you are Nikola Mitic.
      If question is related to work experience, the correct and complete answer can be found under "nikola_mitic_resume_cv_work_experience"

      Bellow id the question:
      -------------------------------------------------
       ${question}
      -------------------------------------------------
    `,
    stream: true,
  });

  return chunks;
};

Let's dissect it a bit:

  if (useGroq) {
    // Update llm to use Groq
    Settings.llm = new Groq({
      apiKey: process.env.GROQ_API_KEY,
      model: "llama3-8b-8192",
    });
  }

Here we are adding a flag that will instruct LlamaIndex to use Groq instead of Open AI which is its default settings. Important to note, regardless of Groq usage, we will still need to use Open AI as Groq does offer embeddings models at the time of writing.

However, Groq API seems to be free as of time of this writing, so one can save a lot.

  // Create Document object
  const document = new Document({
    text: `Nikola Mitic - life story: ${JSON.stringify(source)}`,
  });
  // Create storage from local file
  const storageContext = await storageContextFromDefaults({
    persistDir: "./index-storage",
  });
  // Split text and create embeddings. Store them in a VectorStoreIndex
  const index = await VectorStoreIndex.fromDocuments([document], {
    storageContext,
  });
  // gets retriever
  const retriever = index.asRetriever({ similarityTopK: 5 });

Here we are creating our document, creating file system storage context for future retrievals.
Creating our vector store and finally retriever. Please note, playing with similarityTopK is important here, it is choice between faster response time and more accurate and content rich full answer.

 const chatEngine = new ContextChatEngine({
    retriever,
    chatModel: Settings.llm,
  });
  // Get stream chunks
  const chunks = await chatEngine.chat({
    message: `
      You are Nikola Mitic AI clone.
      You answer the question as if you are Nikola Mitic.
      If question is related to work experience, the correct and complete answer can be found under "nikola_mitic_resume_cv_work_experience"

      Bellow id the question:
      -------------------------------------------------
       ${question}
      -------------------------------------------------
    `,
    stream: true,
  });

Finally we make use of LlamaIndex chat interface and construct our prompt. You should play with the prompt, I find out this to be very tricky and results very on which LLM is used.

So have fun with it. ✌️

❤️If you would like to stay it touch please feel free to connect❤️

Making your CV talk 🤖 Explaining the concept and system design👨‍💻

Nikola Mitic — Wed, 05 Jun 2024 10:33:50 +0000

Explaining the concept (in non technical terms)

Here are where things finally gets to be more interesting. To make it very simple to understand I will simplify concept so that we can understand it easier and build on top of it later.

Imagine we have a house with 3 floors, each flow unlocks something new.

First flor is called Question floor.
Second flor knowledge flor.
Third flor Speech flor.

Question floor ❓

Now let's imagine you enter the first flow. Here you can ask your question. This represents our web page with chat and audio interface.

Knowledge floor 📚

You can take a piece of paper and write you question down. But you want an answer. Getting the answer requires knowledge. Problem is, you do not have time to wait. You tried to enter next flow, knowledge room but it takes so long for you to find an answer write it down and go back to you question room, where you can ask more.

So instead, you bring a friend with you, this friend will take your question look for the answer and as soon it has something that might be an answer to you question he will write it down, on multiple papers, each containing part of the answer, and will give it to you so that you can read one by one and not wait until he write the complete answer.

Knowledge floor is our Interview AI backend service leveraging Open AI (or Groq or any other LLM service of your choice) being aware of our CV data.

But wait there is one more flow to unlock! Speech floor. This is because you got tired of reading and talking, you want to ask using questions using your voice and you want answer to be voice as well!

Speech floor 🗣️

Speech floor is where we have our cloned voice! And all it does is take paper with text written on it and start talking whatever is written. And here, just as in knowledge floor, you want to hear the voice as soon as answer is available!

So you have a third friend who is very loud and can speak in volume that you from the first floor can hear. You friend in knowledge room is now giving papers with chunked answer (text stream in tech term) to your friend in speech room, who start reading them to you part by part (paper by paper) as soon as he gets the first paper. (Audio stream in tech terms) Speech floor is our Eleven Labs voice clone API.

System design - How it all comes together?

Click here for link to diagram

Ok back to our world of ones and zeros. You can get yourself familiar with our system design using the diagram above.

It looks more complicated than it actually is.

We have 5 main components:

Client - Next JS
Express JS - server with two routes (/api/talk and api/ask)
Headless CMS - Hygraph
Open AI API (and Groq API as a second choice for reduced costs)
Eleven AI api

The name of the game here is STREAM. 🏄‍♂️

Express JS always return stream of either text chunks or audio chunks. Both Eleven AI and Open AI support streaming which are in a way just proxied through our custom Express JS server.

One tricky part here is how to feed Eleven Lab web socket with stream from Open AI. We will talk about that in the following chapters.

Here is what happens when user type question in chat interface:

Client makes an API call to Backend service via /api/ask path
Backend service makes a call to headless CMS to get latest data
Once CMS data is returned Backend makes another request towards Open AI to get answer in a form of stream.
and finally Backend returns stream to the client.

Here is what happens when user type ask question using audio interface:

Client converts audio into text using client speech recognitions API.
Client makes an API call to Backend service via /api/talk path.
Backend service makes a call to headless CMS to get latest data.
Once CMS data is returned Backend makes another request towards Open AI to get answer in a form of stream.
As soon as first chunk of streamed data is returned, backend will create a buffer, represents array of words needed for Elevent labs web socket api.
Backend makes request towards Eleven Labs web socket API as soon as first buffered word is ready.
Eleven Labs returns audio stream to Backend.
Backend returns the stream and exposes a route which can be played in client using audio web api.

I won't go in to details about each part of the system and how to implement, however there are certain problems you will face regardless of tech stack of choice, and would like to share how I went about solving them.

How to have Open AI api answer based on your custom data?
How to send text stream from Express JS?
How to send audio stream from Express JS?
How to read text stream on client using Next JS?
How to read audio stream on client using Next JS?
How to combine Open AI text stream response with Eleven Lab Web socket streaming in TypeScript?
How to use express JS routes to listen for Web socket API?

❤️If you would like to stay it touch please feel free to connect❤️

Making your CV talk 🤖 Product mindset first 🧠 Defining features

Nikola Mitic — Wed, 05 Jun 2024 10:33:36 +0000

Getting our hands dirty 🏋️‍♂️

First things first. How does this even work? Higher level concept is actually very simple, but it is important to be understood before jumping into the actually implementation. As understanding it better, means one will able to challenge it, come up with something better and it means actual implementation will be streamed from a place of understanding allowing us to avoid hitting road blocks where we really should not.

I like to approach designing concepts from well defined requirements. I also like to distinguish 3 main type of requirements:

I call it Semaforoments (My wife will understand 😂)

Business requirements (What I want) 🔴 STOP
Product requirements (What I need) 🟡 READY
Engineering requirements (What I must) 🟢 GO

One is streamed from the another. Just like in traffic light, order must be respected. It is simple flow of information.

Business requirements

I WANT to save time and be able to take more interviews with higher possibility of a potential match!

Product requirements

I NEED a frictionless user interface which will allow hiring manager and recruiters to bypass initial candidate interview.
I need interface to be as human as possible to imitate real interview, thus responses and tone of it needs to be genuine, real and absolutely authentic.

Engineering requirements

I MUST build a responsive web app, working across device sizes and computing power. I must stream the information and interview responses in chunks in order have frictionless experience.
I must be able to develop and release continuously. I must dedicated service for each one respectively:

Content data

Handling of interview responses

Web app hosting

In my humble opinion (which lately is become less and less humble 🤪), exact features to be built are a marriage between product and engineering requirements, as I believe building great software product is possible where developers and product owners are working WITH each other not FOR each other.

Features

I can see online CV using the link I can share.
I can edit the content of CV without having to write any code.
I can feed CV content data to any consumer that is interested in it.
I can chat with CV and responses will be streamed so that waiting time is reduced.
I can talk to CV and it will respond me in candidate real human authentic voice.
I can see tweet like blog post from candidate to get more insights about their thinking.
I can ask question related to candidate views outside of work experience getting to know the candidate personality and way of thinking.
I can save PDF document of chat conversation.
I can save PDF document of CV.

From here we will focus on the following two:

Chat interface

I can chat with CV and responses will be streamed so that waiting time is reduced.

Audio / Talk interface

I can see tweet like blog post from candidate to get more insights about their thinking

❤️If you would like to stay it touch please feel free to connect❤️

Making your CV talk 🤖 Easy into the development

Nikola Mitic — Wed, 05 Jun 2024 10:33:23 +0000

What we will be building? 🏠

Online CV https://nikola-mitic.dev/cv/patient21
Blog / Tweet like interface https://nikola-mitic.dev/tiny_thoughts
Chat interface to let people chat to your CV https://nikola-mitic.dev/ai_clone_interview/chat
And finally audio interface to give your CV voice and let people talk to your CV https://nikola-mitic.dev/ai_clone_interview/talk

Entire source code:

Preamble

It's the year 2024 and tech word is going crazy. Somehow you find yourself in a need for a new job. You start applying for jobs. And you keep applying, and you apply some more, and more, and even more.

But that right job offers does not come!

And you start asking yourself what are you doing wrong, and how can you optimise your job search, since by now your figure it out it is a numbers game! As market is saturated with us developers (especially us web frontend developers).

This is where I am at the moment, and where I was for the past 2 years.

There is much I can say about this topic, and hopefully help others, as well as get off my chest all the unfairness going around job market at the moment. But I won't.

Instead I want to share what help me optimise and reduce the amount of interviews I am having which otherwise should not even happen as they bring no job opportunities.

Simply put I want to clear out all the processes which are not a match, while also increasing amount of processes which are more likely to be a match.

By now you already experiences automatic CV filtering, where some sort of AI will scan your CV and you would be marked as match or not. You might not like it, I know I do not, but it makes sense. I wanted to do the same with companies.

Ex coworker of mine, said.

This is like playing uno reverse card on companies using AI to filter our job applications, we should just let their AI bots talk to our AI bots.

To make it clear, that was never a goal. But it does sounds funny. Tech interviews are known to be ridiculously long. 6 rounds seems to be the norms nowadays. So let's do some basic math (the only one I know), if you have 10 interviews a week (which has been a norm for me), and half of it is first round where they ask basic questions, and if one interview as such lasts 30 minutes, you just save yourself 7.5 hours per week! You got almost a full work day back.

Not too bad!

Solution is rather simple:

Have an AI be aware of you resume, build a simple chat interface, where hiring managers and recruiters can ask questions which they usually asked on first initial calls.

Before we start

I won't be explaining line by line, after all how you do things is up to you. However, I will explain the concept, give you the blueprint, give you detailed solution to a common problems you will encounter and share the whole repo to the relevant code for guidance.

I believe you can learn a lot and have fun in the process.

Prerequisites

For the concept itself nothing, you do not even need to be a developer. If you are not a developer and fail to understand, it is up to me! I did a bad job explaining it.
For implementation you can choose your own stack, I went with

NextJS with TS - For CV implementation
Tailwind CSS - For styling
Node JS - For the one and only BE service we will be writing
Llamaindex TS - To easy out working with LLM
Open AI api - For both LLM and embedding model
Groq API - For LLM, optimal, but at the time of writing it is free
Eleven labs API - For voice cloning and streaming
Hygraph - For content hosting
Vercel - For deployment CV hosting / deployment
Renderer for Node JS service hosting / deployment

But wait how much will I have to pay for this? 💸

Almost nothing! Except for Open AI all of the tools have generous free tiers, limits you will hardly surpass, considering that this is your online CV it really should not be getting a tone of visitors

❤️If you would like to stay it touch please feel free to connect❤️