One of my recent projects leverages GPT models to create an AI-driven portfolio builder. The idea behind it was to help individuals, especially those without HTML/CSS experience, build a professional website portfolio without the time commitment required by other solutions like Wix or custom page builders.
You can check out the tool and read more about the project at AI Portfolio Builder – Project Queen
The Concept
This project was inspired by faculty members at universities, many of whom have biographical paragraphs used for various purposes—applying for jobs, submitting papers, or presenting at conferences. These bios are great for print or email, but they’re not always suited for the web, which benefits from more structured content like sections, lists, and headings.
Transforming a plain biography into a well-organized web portfolio can be time-consuming, even for those experienced with web development. My goal was to automate this process, converting long paragraphs into a digestible format for the web.
How It Works
The process is simple: users paste their biography into the portfolio builder. There’s also a free-form area where they can add notes or instructions in plain English, such as:
- “Add a section for hobbies and call it ‘Life Outside of Work.'”
- “Combine all my data science experience into one section.”
These notes help guide the AI to better format the content.
After clicking “Submit,” the content is uploaded to the OpenAI model for processing. The key differentiator with this tool is that it doesn’t just generate text—it structures the content into a standardized format that can be exported as HTML. The result is a website-ready portfolio that can be easily tweaked, even by users with no HTML experience.
Editor.js Integration
To make this possible, I integrated Editor.js, a block-style editor designed for rich media stories. Unlike traditional WYSIWYG editors, Editor.js outputs clean data in JSON instead of cluttered HTML markup. It also allows for an API-extendable and pluggable interface, perfect for building custom content generation workflows.
Some key features of Editor.js include:
- Clean data output: No unnecessary HTML tags.
- API pluggable: Extendable with additional features.
- Block-styled editing: Intuitive content creation with a block-based approach, preventing common issues like misaligned images or erratic formatting seen in traditional content editors.
Using Editor.js, users can further tweak their portfolios after the initial AI generation, adding sections or adjusting layouts without worrying about breaking the design. While the current version doesn’t allow for further AI-driven adjustments once the portfolio is in the editor, this feature is in development.
Future Enhancements
Currently, once the portfolio is finalized in the editor, users can download the website in HTML format, which is accessible, standards-compliant, and easy to upload to their preferred hosting platform. I’m also working on providing instructions for deploying to GitHub or other cloud services, as well as the option to host the site directly within the builder itself.
One upcoming feature I’m excited about is image support. I want users to be able to upload an image (like a profile photo) and have it included in their portfolio. However, since my server has limited storage and the service is free, I’m investigating cost-effective hosting options for the images.
In the future, I plan to implement user accounts so people can store their progress, manage updates to their portfolio, and even deploy their site to different platforms with ease.
Behind the Scenes
Developing this project was a fascinating technical challenge. When a user uploads their text to the OpenAI API, the AI has to reformat it, converting long paragraphs into lists, headings, and sections suitable for a web layout. The AI then returns this content in a standardized format that integrates with our block editor.
One challenge I faced was finding the right AI model. Initially, I used the GPT-4 model, but it quickly became cost-prohibitive, with each portfolio generation costing several cents. After experimenting with different models, I settled on the 4o-mini model, which has proven to be incredibly cost-efficient. I’ve generated over 50 portfolios so far, and the cost hasn’t even reached a penny.
Conclusion
This project aims to make website portfolio creation accessible to anyone, regardless of technical experience. By combining AI-driven content generation with a user-friendly block editor, I’ve created a tool that not only builds beautiful portfolios but also simplifies the editing and export process. Stay tuned for more updates as I continue to enhance the tool with image support and additional deployment options!
