The Talking Portfolio is not your typical portfolio website. It is an innovative approach to self-presentation, incorporating interactive guided tours that bring your profile to life. With multiple tabs covering various aspects of your background and achievements, this portfolio offers a comprehensive view of who you are and what you've accomplished.
- Multiple Tabs: The portfolio is divided into multiple tabs, each focusing on a specific aspect such as education, experience, skills, certifications, volunteer work, recognition, projects, and contact information. This ensures that visitors can explore different facets of your profile effortlessly.
- "Hear Me Out" Button: At the heart of the Talking Portfolio is the "Hear Me Out" button. When clicked, it triggers an automated Shepherd tour of your entire profile. You don't need to click next or back; instead, the tour progresses seamlessly, providing insights into each section as if you were personally narrating your story.
-
Audio Narration: What sets this portfolio apart is the inclusion of audio narration for each step of the tour. As visitors navigate through your profile, they hear your voice or an AI-generated voice agent from the Web Speech API, delivering a personalized and engaging experience. Whether you're highlighting your educational background, detailing your work experience, or showcasing your projects, the audio narration adds a human touch, making the interaction more immersive.
-
Custom Navigation: A custom navigation bar allows visitors to explore different tabs manually if they prefer to delve into specific sections of your portfolio independently.
-
Engaging User Experience: Unlike traditional portfolios, the Talking Portfolio offers a dynamic and interactive user experience. Visitors feel like they are having a conversation with you as they navigate through your profile, enhancing engagement and retention.
-
Memorable Presentation: By incorporating audio narration, the Talking Portfolio leaves a lasting impression on visitors. It is not just another static webpage; it is an opportunity to connect with your audience on a deeper level and leave them with a memorable experience.
-
Accessibility: The use of audio narration ensures accessibility for all visitors, including those with visual impairments. Everyone can enjoy and engage with your portfolio content seamlessly.
The Talking Portfolio is more than just a showcase of your achievements; it is a storytelling platform that allows you to convey your personality, passion, and expertise effectively. Whether you are a job seeker, freelancer, entrepreneur, or creative professional, this innovative approach to self-presentation can set you apart in a competitive landscape. So, why settle for a boring portfolio when you can create an immersive and memorable experience for your visitors?
- React
- Shepherd
TheTalkingPortfolio.mp4
To get started with this project, follow these steps:
git clone https://github.com/AJ1904/portfoliocd portfolioNavigate into the directory where you cloned the repository.
Make sure you have Node.js and npm installed on your machine. Then, install the project dependencies using npm:
npm installOnce the dependencies are installed, you can start the development server:
npm startThis command will run the app in development mode. Open http://localhost:3000 in your web browser to view it.
To build the app for production, use:
npm run buildThis command will create an optimized production build of your app in the build folder.
Save your audio files in src/audios folder.
Customize your tour by updating src/components/TourShepherd.js file.
Save your images and logo files in src/assets folder.
Update your information in the files of src/components folder.
For more detailed instructions on using Create React App, React, Shepherd, and other dependencies, refer to their respective documentation: