Build Your Own GPT-Powered Portfolio Site That Talks

 

Have you ever wanted a standout portfolio website? Imagine a portfolio site that interacts with visitors and shows your work. Sounds futuristic, right? GPT can make this dream come true! This post will help you develop a GPT-powered portfolio site that interacts with users in real time. Let's use AI and your creativity to create an impactful website!

 

What You'll Need

Let's quickly cover project requirements before diving into the coding. Setting up your website requires basic HTML, CSS, and JavaScript knowledge. React will add dynamic functionality to the app.

To use GPT, you need to use OpenAI's API to send queries from users and retrieve answers from GPT. Setting up the API is simple, and we will help you do it. Node.js is needed to run the server.

Sign up on the OpenAI website to get an API key. We can start building the interactive portfolio page after you have these tools!

Setting Up Your React App

Start by building a small React app for your portfolio. Install create-react-app in your terminal to rapidly build up the project:

npx create-react-app gpt-portfolio
cd gpt-portfolio

Now, let's run the app to make sure everything is working:

npm start

This opens your app in the browser with the default React page. Install the dependencies now that we have a basic React project. HTTP queries to the GPT API require axios.

npm install axios

After installing the app and dependencies, we can build the interactive portfolio!

Integrating GPT-3 API

Now we must add GPT to our app. GPT will respond to user input such enquiries and messages from OpenAI's API.

Create a .env file in your project directory and enter your OpenAI API key:

REACT_APP_OPENAI_API_KEY=your-api-key-here

Set up API call code now. Import axios and build up the function to send user input to OpenAI's GPT-3 in App.js:

import React, { useState } from 'react';
import axios from 'axios';

const App = () => {
  const [userInput, setUserInput] = useState('');
  const [response, setResponse] = useState('');

  const handleUserInput = (event) => {
   setUserInput(event.target.value);
  };

  const fetchGPTResponse = async () => {
    try {
      const result = await axios.post(
       'https://api.openai.com/v1/completions',
        {
          model: "text-davinci-003",
          prompt: userInput,
          max_tokens: 100,
        },
        {
          headers: {
           'Authorization': `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`,
          },
        }
      );
     setResponse(result.data.choices[0].text.trim());
    } catch (error) {
     console.error("Error fetching GPT response:", error);
    }
  };

  return (
    <div>
     <h1>Welcome to My GPT-Powered Portfolio</h1>
      <input
       type="text"
       value={userInput}
       onChange={handleUserInput}
       placeholder="Ask me anything!"
      />
      <button onClick={fetchGPTResponse}>Ask</button>
      {response && <p>GPT Says: {response}</p>}
    </div>
  );
};

export default App;

Here’s an elaboration of the code:

• Takes care of user input and GPT response through UseState.
• You can change the status of a response by sending user feedback to OpenAI's API through the fetchGPTResponse function.
• The person who wants to ask a question clicks the "Ask" button. GPT then answers the question.

Styling Your Portfolio

Now that the interactive element works, let us improve the portfolio. Your GPT-powered site will have a clean, professional layout using basic CSS.

In your App.css, add some simple styles:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

input {
  width: 80%;
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

p {
  text-align: center;
  color: #555;
}

It gives your portfolio a clean, modern style and centered layout. You can also make designs even more unique to fit your business or style.

Adding More Interactive Features

Let's make GPT even better because it is in working state now! You can add additional utilities in it like

1. Portfolio Showcase: Dynamically display projects based on user queries. Set up predetermined responses like "Show me your projects" to display your work.
2. Voice Interaction: Use a basic speechRecognition API to make your portfolio interactive. Users can talk to their assistant instead of typing.

Here's a quick example of SpeechRecognition voice input integration:

npm install react-speech-recognition

Then, use it in your app like this:

import SpeechRecognition from 'react-speech-recognition';

// Inside the component
const { transcript, resetTranscript } = useSpeechRecognition();

const startListening = () => {
 SpeechRecognition.startListening();
};

const stopListening = () => {
 SpeechRecognition.stopListening();
 setUserInput(transcript);
};

Voice integration makes your portfolio interactive and users can ask questions and engage without typing!

Conclusion

Finally, your portfolio site, which is powered by GPT, shows off your work and impresses visitors. Because now you've made a modern, interactive portfolio using OpenAI's API and speech recognition. Moreover, portfolio websites can help developers, designers, and content creators stand out and impress. Now is the time for you, my fellow developers, to try out different ideas and add your own features to make it your own.