Portfolio-Website-Builder
The Portfolio-Website-Builder is a sophisticated application designed to streamline the creation of personalized portfolios for developers. By leveraging AI-assisted features and a user-friendly interface, it enables users to generate portfolios from their GitHub repositories and resumes, enhancing their professional visibility.
Architecture
The architecture of the Portfolio-Website-Builder is designed to be both scalable and reliable, utilizing a monolithic structure that separates the builder app from the portfolios it generates. This layered architecture allows for clear organization of components, pages, and APIs, ensuring maintainability and ease of updates.
Stack
The project utilizes a modern tech stack, including Next.js for its framework, which supports server-side rendering and static site generation. The choice of TypeScript enhances code quality and maintainability, while libraries like Tailwind CSS and Radix UI provide a robust foundation for building responsive and accessible user interfaces.
Deep dive
The project tackles the challenge of generating personalized portfolios by integrating AI capabilities that analyze GitHub repositories and resumes. This approach not only streamlines the creation process but also ensures that the portfolios are tailored to reflect the unique skills and experiences of each developer.
The Portfolio-Website-Builder is built as a monolithic application using Next.js, TypeScript, and a layered architecture pattern. It incorporates a range of technologies to facilitate AI-assisted portfolio generation and ensures a structured separation of concerns within the codebase.
Architecture
The Portfolio-Website-Builder employs a layered architecture pattern, which facilitates separation of concerns through distinct directories for components, pages, and APIs. This design choice enhances maintainability and scalability, while the integration of a verification pipeline ensures that claims made within the portfolios are backed by code evidence.
Stack
The tech stack for the Portfolio-Website-Builder includes TypeScript and JavaScript as primary programming languages, with Next.js serving as the framework. Key libraries such as Tailwind CSS and Radix UI are used for UI development, while Drizzle is employed as an ORM for database interactions. The application also integrates Auth.js for authentication and utilizes Playwright and Jest for comprehensive testing.
Deep dive
A key challenge in the Portfolio-Website-Builder was implementing the AI-assisted portfolio generation feature, which required the integration of various AI providers for analysis and chatbot functionality. The team also focused on creating a layout review agent to conduct accessibility and design checks, ensuring that the generated portfolios meet high standards of usability and aesthetics. The use of a verification pipeline for proof-backed claims further enhances the credibility of the portfolios.
Guided tour
01 AI-Assisted Portfolio Builder
This project creates a proof-backed portfolio by transforming a developer's GitHub repositories and resume into a cohesive website. It ensures that every claim made on the portfolio is verifiable through direct code evidence.
- !Uses AI for portfolio generation
02 Layered Monolithic Architecture
The application is structured as a single Next.js app that integrates various functionalities including ingestion, analysis, verification, and rendering. It utilizes a PostgreSQL database for data management and supports schema migrations.
- !Monolithic architecture with layered pattern
03 Database Initialization Script
The `scripts/init-db.sql` file initializes the PostgreSQL database and enables the `pgvector` extension, showcasing the developer's attention to database setup for AI features. This file is essential for setting up the database environment.
- ✓Includes database initialization script
scripts/init-db.sql-- This script initializes the database and enables pgvector CREATE EXTENSION IF NOT EXISTS pgvector;04 Well-Tested with Jest and Playwright
The project employs Jest for unit and integration tests, while Playwright is used for end-to-end testing. This ensures that the application is robust and reliable.
- !Tests with Jest framework
05 Deploys to Cloudflare Pages
The generated portfolios are deployed on Cloudflare Pages, providing a seamless hosting solution. This integration allows for easy sharing and accessibility of the portfolios.
- ✓Deploy target is Cloudflare Pages
06 Try It Out
To explore the project, clone the repository using the command below. Follow the setup instructions in the README to get started.
git clone https://github.com/shashankcm95/Portfolio-Website-Builder
graph TD;
A[Next.js App] --> B[Postgres DB];
A --> C[AI Providers];
A --> D[Cloudflare R2];
A --> E[Cloudflare Pages];Diagram source rendered with mermaid.js.
Verified facts
- The project uses TypeScript as a programming language.from code
Evidence
Runtime: Node.js 22 (via `nvm`), Next.js 14 App Router, TypeScript
Source:
README - The project uses JavaScript as a programming language.from code
Evidence
Runtime: Node.js 22 (via `nvm`), Next.js 14 App Router, TypeScript
Source:
README - The project uses Next.js as a framework.from code
Evidence
Runtime: Node.js 22 (via `nvm`), Next.js 14 App Router, TypeScript
Source:
README - The project uses Tailwind CSS as a library.from code
Evidence
UI: Tailwind CSS + Radix UI primitives
Source:
README - The project uses Radix UI as a library.from code
Evidence
UI: Tailwind CSS + Radix UI primitives
Source:
README - The project uses Drizzle as an ORM.from code
Evidence
ORM: Drizzle (schema + migrations in `src/lib/db/`)
Source:
README - The project uses Auth.js v5 for authentication.from code
Evidence
Auth: Auth.js v5 (NextAuth) with GitHub OAuth
Source:
README - The project uses Playwright for testing.from code
Evidence
Testing: Jest (unit + integration), Playwright (e2e + layout review)
Source:
README