DEV Community

VoiceDeveloper
VoiceDeveloper

Posted on

Building a Voice AI Portfolio Site That Gets You Hired

#webdev #ai #tutorial #beginners

Why a Voice‑AI Portfolio is a Game‑Changer

If you’re a developer looking to land a role in the booming voice‑AI space, a polished portfolio that demonstrates real‑world voice synthesis and cloning capabilities is essential. Recruiters want to see that you can turn raw audio into natural, expressive speech and that you can build end‑to‑end systems that scale. A simple website that hosts a handful of demos, showcases your code, and explains your workflow is a powerful way to prove your chops.

Below, I’ll walk you through building a lightweight, production‑ready site that showcases voice‑AI demos, from setting up the TTS engine to deploying the finished product on a reliable host. I’ll also sprinkle in practical code snippets so you can hit the ground running.

1. Choose the Right TTS Engine: ElevenLabs

ElevenLabs has become the go‑to platform for high‑quality text‑to‑speech and voice cloning. Its API is straightforward, the voices sound natural, and it offers a generous free tier that’s perfect for a portfolio.

Tip: Sign up for ElevenLabs today via my affiliate link: https://try.elevenlabs.io/kr07zfuqn1bp

Getting Started

  1. Create an account on ElevenLabs.
  2. Generate an API key in the dashboard.
  3. Explore the voice catalog – you’ll find dozens of base voices and the ability to clone custom samples.

2. Set Up Your Project Structure

For this demo, we’ll use a minimal stack: a Node.js backend to proxy the ElevenLabs API, a simple React front‑end, and Docker for easy deployment. The folder layout looks like this:

voice-portfolio/
├─ backend/
│  ├─ index.js
│  └─ package.json
├─ frontend/
│  ├─ src/
│  ├─ public/
│  └─ package.json
├─ docker-compose.yml
└─ README.md
Enter fullscreen mode Exit fullscreen mode

3. Backend – Proxying ElevenLabs

Why a Proxy?

Calling ElevenLabs directly from the browser exposes your API key. Instead, keep the key on the server and expose a small, authenticated endpoint.

// backend/index.js
const express = require('express');
const fetch = require('node-fetch');
require('dotenv').config();

const app = express();
app.use(express.json());

const ELEVENLABS_API = 'https://api.elevenlabs.io/v1';
const API_KEY = process.env.ELEVENLABS_API_KEY;

app.post('/api/synthesize', async (req, res) => {
  const { text, voice_id } = req.body;

  try {
    const response = await fetch(`${ELEVENLABS_API}/text-to-speech/${voice_id}`, {
      method: 'POST',
      headers: {
        'xi-api-key': API_KEY,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        text,
        voice_settings: {
          stability: 0.5,
          similarity_boost: 0.75,
        },
      }),
    });

    if (!response.ok) throw new Error('ElevenLabs error');
    const audioBuffer = await response.buffer();
    res.set('Content-Type', 'audio/mpeg');
    res.send(audioBuffer);
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: 'Synthesis failed' });
  }
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on ${PORT}`));
Enter fullscreen mode Exit fullscreen mode

Run the backend:

cd backend
npm install express node-fetch dotenv
node index.js
Enter fullscreen mode Exit fullscreen mode

4. Frontend – Demo UI

A lightweight React app lets visitors type text, pick a voice, and hear the result.

// frontend/src/App.js
import React, { useState } from 'react';

const voices = [
  { id: 'en-US-Standard-A', name: 'Standard A' },
  { id: 'en-US-Standard-B', name: 'Standard B' },
];

function App() {
  const [text, setText] = useState('');
  const [voice, setVoice] = useState(voices[0].id);
  const [audioUrl, setAudioUrl] = useState(null);

  const handleSynthesize = async () => {
    const res = await fetch('/api/synthesize', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text, voice_id: voice }),
    });

    if (res.ok) {
      const blob = await res.blob();
      setAudioUrl(URL.createObjectURL(blob));
    }
  };

  return (
    <div style={{ padding: 20 }}>
      <h1>Voice AI Demo</h1>
      <textarea
        rows="4"
        cols="60"
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="Type something to speak…"
      />
      <br />
      <select value={voice} onChange={e => setVoice(e.target.value)}>
        {voices.map(v => (
          <option key={v.id} value={v.id}>{v.name}</option>
        ))}
      </select>
      <br />
      <button onClick={handleSynthesize}>Speak</button>
      {audioUrl && <audio controls src={audioUrl} />}
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Run the frontend with:

cd frontend
npm install
npm start
Enter fullscreen mode Exit fullscreen mode

The app will proxy requests to the backend, keep your API key hidden, and provide an interactive demo.

5. Add Voice‑Cloning Demo (Optional)

If you want to showcase cloning, use ElevenLabs’ “Create new voice” endpoint. Upload a few minutes of clear audio, and the platform will generate a new voice model. Then expose a similar /api/clone-synthesize endpoint that accepts a voice ID and text.

6. Dockerise for Consistency

Create docker-compose.yml to run both services together:

version: '3.8'

services:
  backend:
    build: ./backend
    environment:
      - ELEVENLABS_API_KEY=${ELEVENLABS_API_KEY}
    ports:
      - "5000:5000"
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
Enter fullscreen mode Exit fullscreen mode

Build and start:

docker-compose up --build
Enter fullscreen mode Exit fullscreen mode

7. Deploy with Bluehost – Easy, Affordable Hosting

Once you’ve tested locally, it’s time to go live. Bluehost offers a straightforward setup for Node.js and static sites, plus a free SSL certificate. Their pricing is competitive, and the control panel is beginner‑friendly.

Pro tip: Deploying your Docker containers or just the Node.js backend on Bluehost is as simple as uploading your files via the cPanel file manager or using Git integration.

If you’re ready to move to production, check out Bluehost’s plans: https://bluehost.sjv.io/5k0d52

8. Polish Your Portfolio

  • Add a “Project Overview” page explaining the tech stack and your design decisions.
  • Showcase multiple voices and a quick‑start guide on how to use the demo.
  • Include your résumé or a link to your LinkedIn/GitHub.
  • Add a contact form or a link to your email for recruiters.

A clean, functional site that demonstrates real voice‑AI capability will set you apart from the crowd.

9. Next Steps

  1. Experiment with voice parameters (pitch, speed) to show mastery over the TTS engine.
  2. Add a real‑time transcription using Web Speech API or Whisper to build a full voice‑assistant prototype.
  3. Integrate voice‑cloning so visitors can upload their own samples and hear a personalized voice.

These extra layers make your portfolio a living showcase of your skills.

Call to Action

Ready to make a voice‑AI portfolio that gets you hired? 🚀

Build, demo, and land that dream role. Happy coding!

Top comments (0)