Interactive Portfolio Web App: Merging Personal Branding with AI Technology

Portfolio Web App: Overview & Purpose

This portfolio web application is designed to reflect my professional journey, showcasing the projects I’ve worked on, the skills I’ve acquired, and my continuous growth as a developer. The primary goal is to establish a reputable digital presence that not only highlights my technical expertise but also engages users in an interactive way. What sets this portfolio apart is the integration of an AI chatbot, powered by Google AI Studio, which allows visitors to ask personalized questions about me (Shaq). The AI responds based on the specific data I’ve provided, ensuring accurate, tailored information. Additionally, the chatbot can answer questions related to topics I’m passionate about, such as Artificial Intelligence (AI), Machine Learning (ML), and engineering.

What Was Used

To build and host this project, I used a modern tech stack and various cloud services, including:

• Next.js: A React-based framework that simplifies the development of fast, server-rendered web applications.

• TailwindCSS: For flexible and efficient styling, allowing me to create a responsive and visually appealing user interface.

• JavaScript: For interactive elements and client-side functionality.

• Azure App Service: To host the web app, providing scalability and security.

• Azure Blob Storage: For hosting images used on the site.

• GitHub: For source control, versioning, and deploying the web app via GitHub Actions.

• Google AI Studio: For integrating a customizable AI chatbot that interacts with users.

Challenges

This project was not without its challenges, and they contributed to significant learning experiences:

• AI Chatbot Deployment: My initial plan was to use Azure OpenAI Service to power the chatbot. However, deploying the web app as a static web app created some compatibility issues with integrating the AI service. Azure's OpenAI integration required more advanced configurations that weren’t feasible with the static hosting setup.

After researching alternatives, I shifted to Google AI Studio, which provided cutting-edge AI models at no cost. This decision not only resolved the technical issues but also helped me avoid the high costs associated with Azure OpenAI.

• GitHub Deployment: As it was my first time deploying a web application through GitHub Actions, I encountered some difficulties in setting up continuous deployment. The learning curve involved understanding how to configure the workflow files and troubleshoot errors during the automated deployment process. In the end, I successfully implemented a CI/CD pipeline, which allowed smooth, automated deployments.

Key Features

• AI Chatbot: The AI chatbot is the standout feature of this portfolio. Users can interact with the bot to ask questions about me, my experience, and my skills. The chatbot pulls from the personal information I provided, ensuring accurate and relevant responses. It can also engage in conversations about my interests, such as AI, ML, and engineering, offering a unique and interactive experience for visitors.

• Project Showcase: The portfolio showcases my key projects, with detailed explanations of the technologies used, the challenges faced, and the outcomes achieved. This helps potential employers or collaborators understand my expertise and the impact of my work.

• Responsive Design: The web app is fully responsive, ensuring a seamless user experience across different devices and screen sizes.

Future Enhancements

• New Projects: I plan to regularly update the portfolio with new projects as I continue to grow in my career and explore more advanced technologies.

• AI Expansion: I am considering adding a second AI chatbot to cover different use cases, although I’m still exploring the best direction for this addition. It could potentially focus on answering technical queries or assisting other developers who visit my site.

• Tech Entry Guide: A future feature could be a step-by-step guide for individuals who are new to tech. This section would offer practical advice and resources for those looking to get started in fields like web development and cloud engineering.

Learning & Growth

This project pushed me out of my comfort zone several times, particularly when integrating the AI and managing the deployment process. At several points, especially when I encountered issues with the AI implementation and the GitHub deployment, I considered abandoning the project. However, persistence paid off, and I came away with a deeper understanding of web development and cloud engineering.

One of the most valuable lessons was learning how to troubleshoot and overcome deployment obstacles. The practical knowledge I gained from working with Azure and cloud technologies far exceeds what I learned through certifications alone. This project has not only expanded my technical skills but also instilled a sense of confidence that I can tackle even more complex projects in the future.