Scribd
Upload
8 views2 pages

PortaCraft Project Guide Part1

PortaCraft is a web-based tool designed for users to create customizable online portfolios using pre-designed templates, targeting students and professionals without coding skills. The application utilizes a technology stack including React and Tailwind CSS, allowing real-time data entry and live previews of the portfolio. Users can download their portfolios as PDFs or export them as HTML/CSS files in a ZIP format, with the PDF capturing only the visual representation of the portfolio.

Uploaded by

Quake Tech
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views2 pages

PortaCraft Project Guide Part1

PortaCraft is a web-based tool designed for users to create customizable online portfolios using pre-designed templates, targeting students and professionals without coding skills. The application utilizes a technology stack including React and Tailwind CSS, allowing real-time data entry and live previews of the portfolio. Users can download their portfolios as PDFs or export them as HTML/CSS files in a ZIP format, with the PDF capturing only the visual representation of the portfolio.

Uploaded by

Quake Tech
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

PortaCraft - Project Overview & Implementation Guide

Project Name

PortaCraft - Online Portfolio Generator

Project Summary

PortaCraft is a web-based tool that allows users to generate professional, customizable portfolio websites
using pre-designed templates. It targets students and professionals who want to create impressive online
resumes or portfolios without coding. Users can fill out forms with their information, choose a design
template, see a live preview, and download or publish their portfolio.

Technology Stack

- Frontend: React, Vite


- Styling: Tailwind CSS
- State Management: useState (or useReducer/Redux if scaling)
- Optional: react-to-print (for PDF export), JSZip (for HTML zip export), Firebase (for hosting and login)

How User Enters Data

Users enter their information through a form: name, bio, skills, projects, and theme choice. Each input
updates a state variable (formData) in real-time using React's useState hook.

Live Preview Connection

React's state is passed as props to the selected template component. As formData updates, the template
component re-renders automatically with new data. This enables a real-time live preview.

Templates Implementation

Templates are created as React components and placed in 'src/components/templates/'. Each receives
formData as props and uses Tailwind for styling. Users can switch between templates using a dropdown that
updates [Link].

Where User Data is Stored

User-entered data is stored in a central useState object in [Link]. It looks like:


PortaCraft - Project Overview & Implementation Guide

const [formData, setFormData] = useState({ name: '', bio: '', skills: [], projects: [], theme: 'classic' });

How to Download Portfolio as PDF

Use react-to-print to generate a PDF of the live preview. It captures the exact visual look of the portfolio (not
the code). You wrap the template component in a ref and trigger print/download with a button.

Is Code Included in the PDF?

No. The PDF generated shows only the visual portfolio, like a resume. It does not include React code, state,
or internal logic. It looks like what the user sees in preview.

Alternative Export Option - ZIP with HTML/CSS

For exporting as code files (HTML/CSS), use JSZip and [Link]. This requires serializing the formData
into an HTML string, bundling it into a .zip file, and triggering a download. It's more complex but allows the
user to get the actual source files.

You might also like