VoiceDeveloper

Posted on Oct 8

Building a Voice AI Portfolio Site That Gets You Hired

#ai #tutorial #beginners #webdev

Why a Voice‑AI Portfolio Site Matters

If you’ve spent the last few years tinkering with text‑to‑speech (TTS) engines, voice cloning, or building conversational bots, you already know that a polished demo can be the difference between “nice work” and “hire me”. A static portfolio page is fine for a UI project, but voice AI shines when visitors can hear what you built. In this post I’ll walk you through creating a lightweight, production‑ready voice AI showcase that you can spin up in a weekend and that will impress recruiters and hiring managers.

What We’ll Build

A simple landing page that introduces you and lists a few voice‑AI projects.
An on‑demand TTS endpoint that takes a text string, runs it through ElevenLabs’ high‑quality neural voice, and returns an audio file.
A demo player that lets visitors type or select sample text and instantly hear the result.

All of this will be hosted on Bluehost, the easy, affordable way to deploy a Python‑Flask app (or a static site) without wrestling with complex server configs.

Choosing the Right Tools

Piece	Why It’s a Good Fit
ElevenLabs	Industry‑leading neural TTS with voice cloning, generous free tier, and a straightforward REST API.
Flask (Python)	Minimalist web framework; perfect for a single API endpoint and easy to deploy on shared hosting.
Bluehost	One‑click Python app setup, cheap plans, and built‑in SSL – you can get the site live with a few clicks.

Quick tip: If you don’t already have an ElevenLabs account, sign up through this affiliate link to get a bonus credit: ElevenLabs.

Step 1 – Set Up Your Hosting Environment

Create a Bluehost account using the link below. Their shared hosting plans start at just a few dollars a month and include a free domain for the first year.

👉 Bluehost
In the Bluehost dashboard, enable Python 3.10+ (or the version they provide) and create a new Flask app. Most plans let you do this with a single “Create Application” button.
Clone a starter repo (or create a new folder) for your project:

git clone https://github.com/yourusername/voice-ai-portfolio.git
cd voice-ai-portfolio

Install dependencies (Flask, requests, and python-dotenv for secret handling):

pip install -r requirements.txt

Step 2 – Wire Up ElevenLabs TTS

ElevenLabs offers a simple POST endpoint: https://api.elevenlabs.io/v1/text-to-speech/{voice_id}. You’ll need an API key, which you can fetch from your ElevenLabs dashboard.

2.1 Store Secrets Securely

Create a .env file (make sure it’s added to .gitignore) with:

ELEVENLABS_API_KEY=your_api_key_here
ELEVENLABS_VOICE_ID=your_voice_id_here   # you can use the default “Rachel” voice or a cloned voice

2.2 Flask Endpoint (Python)

# app.py
import os
import requests
from flask import Flask, request, send_file, jsonify
from dotenv import load_dotenv
from io import BytesIO

load_dotenv()
app = Flask(__name__)

ELEVEN_API_KEY = os.getenv("ELEVENLABS_API_KEY")
VOICE_ID = os.getenv("ELEVENLABS_VOICE_ID")
ELEVEN_ENDPOINT = f"https://api.elevenlabs.io/v1/text-to-speech/{VOICE_ID}"

HEADERS = {
    "xi-api-key": ELEVEN_API_KEY,
    "Content-Type": "application/json"
}

@app.route("/api/speak", methods=["POST"])
def speak():
    data = request.get_json()
    text = data.get("text", "")
    if not text:
        return jsonify({"error": "No text provided"}), 400

    payload = {
        "text": text,
        "voice_settings": {
            "stability": 0.75,
            "similarity_boost": 0.85
        }
    }

    response = requests.post(ELEVEN_ENDPOINT, json=payload, headers=HEADERS)
    if response.status_code != 200:
        return jsonify({"error": "TTS failed", "details": response.text}), 500

    audio_bytes = BytesIO(response.content)
    return send_file(audio_bytes, mimetype="audio/mpeg", as_attachment=False, download_name="speech.mp3")

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)

What’s happening?

The endpoint receives JSON { "text": "Your sentence here" }.
It forwards the request to ElevenLabs, using the voice_settings to tweak stability and similarity.
The raw MP3 bytes are streamed back to the client, so the front‑end can play them instantly.

2.3 cURL Quick Test

curl -X POST https://yourdomain.com/api/speak \
  -H "Content-Type: application/json" \
  -d '{"text":"Hello, I’m a voice AI demo built on ElevenLabs!"}' \
  --output demo.mp3

If everything is wired correctly, you’ll get a demo.mp3 file that sounds like the voice you selected.

Pro tip: Want to experiment with voice cloning? ElevenLabs lets you upload a few minutes of your own voice and generates a custom voice_id. Check out the docs via the same affiliate link: ElevenLabs.

Step 3 – Build the Front‑End Demo

A minimal HTML page with a textarea and a play button is enough to showcase your skill set. Here’s a snippet you can drop into templates/index.html (Flask will serve it automatically if you set app.route("/") to render the template).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Voice AI Portfolio</title>
  <style>
    body {font-family: Arial, sans-serif; max-width: 600px; margin: 2rem auto;}
    textarea {width: 100%; height: 80px;}
    button {margin-top: 0.5rem; padding: 0.5rem 1rem;}
  </style>
</head>
<body>
  <h1>Hey, I’m Alex – Voice AI Engineer</h1>
  <p>Type something below and hear it spoken by my custom voice.</p>

  <textarea id="text">Hello, world! This is my voice‑AI demo.</textarea><br>
  <button id="speakBtn">Speak</button>
  <audio id="player" controls style="display:none; margin-top:1rem;"></audio>

  <script>
    const btn = document.getElementById('speakBtn');
    const player = document.getElementById('player');
    btn.addEventListener('click', async () => {
      const txt = document.getElementById('text').value;
      const resp = await fetch('/api/speak', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({text: txt})
      });
      if (!resp.ok) {
        alert('Error generating speech');
        return;
      }
      const blob = await resp.blob();
      player.src = URL.createObjectURL(blob);
      player.style.display = 'block';
      player.play();
    });
  </script>
</body>
</html>

When a hiring manager lands on your site, they can instantly hear the quality of your TTS integration—no need to download files or watch a video.

Step 4 – Deploy with One Click

Push your code to the Git repository you linked in the Bluehost dashboard.
In the Bluehost control panel, click Deploy (or “Pull from Git”).
The platform will automatically install the requirements.txt, set up a virtual environment, and start the Flask app on a public URL like https://yourdomain.com.

Because Bluehost provides free SSL, your API calls stay secure, and the site looks professional out of the box.

Bonus: Adding a Voice‑Cloned Sample

If you’ve created a custom voice with ElevenLabs, replace ELEVENLABS_VOICE_ID in your .env with the new ID. Then add a dropdown of pre‑written scripts to showcase different tones (narrative, conversational, upbeat). Each selection can call the same /api/speak endpoint, giving recruiters a quick taste of your versatility.

TL;DR – What You Get

A live portfolio site hosted on a cheap, reliable host (thanks to Bluehost).
Real‑time TTS powered by the industry‑leading ElevenLabs API (sign up here).
Full source code you can fork, extend, and point to in your résumé or LinkedIn.

Call to Action

Ready to turn your voice‑AI experiments into a hiring magnet? Grab your ElevenLabs API key via the affiliate link and spin up the demo on Bluehost in under an hour.

🔗 Try ElevenLabs now: https://try.elevenlabs.io/kr07zfuqn1bp

🔗 Deploy instantly with Bluehost: https://bluehost.sjv.io/5k0d52

Happy coding, and may your next interview be as smooth as the voice you just built!

DEV Community