/portfoliofy

A REST API to generate portfolio-ready screenshots of your awesome web projects

Primary LanguagePythonMIT LicenseMIT

Portfoliofy

A REST API to generate portfolio-ready screenshots of your awesome web projects

Description

Once a web project is done, it's time to document your hard work and show it off. Portfoliofy makes that process easier by doing all the screenshots for you and assembling them together into portfolio-ready files.

As of v3.0.0-beta.1, the following OUTPUT types can be requested from exposed endpoints (see below):

  • OUTPUT_MAIN
    • An image file of screenshots taken from a "desktop", a "laptop", a "tablet" and a "smartphone", overlaid on top of a schematic diagram and collaged together. (See below for an example ouput.)
  • OUTPUT_BROWSER
    • An image file of a screenshot taken from a "desktop", overlaid on top of a schematic diagram. (Scroll to the bottom for an example ouput.)
  • OUTPUT_MOBILES
    • An image file of screenshots from a "desktop" and a "laptop" overlaid on top of a schematic diagram and paired together. (Scroll to the bottom for an example ouput.)
  • OUTPUT_FULL
    • An image file of a full-page screenshot overlaid on top of a schematic diagram. (Scroll to the bottom for an example ouput.)
  • OUTPUT_MOVIE
    • A scroll animation video of a full-page screenshot. (Scroll to the bottom for an example ouput.)
  • OUTPUT_SCREENSHOTS
    • Plain screenshots taken from window sizes mimicking the viewport of a desktop (2160x1360), a laptop (1440x900), a tablet (768x1024) and a smartphone (230x490), requested separately.
    • Plain full-page screenshot.

More coming soon!

Portfoliofy

More screenshots below.

Disclaimer

ALL CONTENTS IN THIS REPO ARE FOR EDUCATIONAL PURPOSES ONLY.

Getting Started

Dependencies

  • CairoSVG==2.7.1
  • fastapi==0.105.0
  • moviepy==1.0.3
  • Pillow==10.1.0
  • pydantic==2.5.2
  • Requests==2.31.0
  • selenium==4.16.0

Usage

Clone it!

git clone https://github.com/ggeerraarrdd/portfoliofy.git

Go into the project directory and execute the following command to run the live server:

uvicorn app.main:app --reload

Documentations

The Portfoliofy REST API was built using FastAPI, which comes with two documentation user interfaces:

Portfoliofy The Swagger UI for Portfoliofy served at /docs

Endpoints

POST /main - handles requests for OUTPUT_MAIN.

POST /browser - handles requests for OUTPUT_BROWSER.

POST /mobiles - handles requests for OUTPUT_MOBILES.

POST /full - handles requests for OUTPUT_FULL.

POST /movie - handles requests for OUTPUT_MOVIE.

POST /screenshots/desktop - handles requests for screenshots from a desktop viewport (2160x1360).

POST /screenshots/laptop - handles requests for screenshots from a laptop viewport (1440x900).

POST /screenshots/tablet - handles requests for screenshots from a tablet viewport (768x1024).

POST /screenshots/smartphone - handles requests for screenshots from a smartphone viewport (230x490).

POST /screenshots/full - handles requests for a full-page screenshot.

Parameters

This is the request body schema for all endpoints.

Parameter Type Default value Value range Description
request bool False True, False If TRUE, requested output is processed.
remote_url string "https://ggeerraarrdd.github.io/" ... URL to portfoliofy.
wait int 2 1 - 100 Time in seconds to allow URL to load before taking screenshot.
format string "png" "png" File format of the final output.
doc_pad_h int 300 1 - 1000 Left and right padding in pixels of final output.
doc_pad_v int 200 1 - 1000 Top and bottom padding in pixels of final output.
doc_fill_color string "#FFFFFF" ... Background color of final output in 6-digit hex.
base_stroke_color string "#23445D" ... Stroke color of diagram in 6-digit hex.
base_fill_color string "#BAC8D3" ... Fill color of diagram in 6-digit hex.

Additional Notes

  • POST /movie will return 204 NO CONTENT if the height of the full-page screenshot is >= 20,000px after it is resized to a width of 1280px.
  • POST /movie currently only accepts the default png file format but will return an mp4 file.

Example Request

{
  "request": true,
  "remote_url": "https://ggeerraarrdd.github.io/",
  "wait": 2,
  "format": "png",
  "doc_pad_h": 300,
  "doc_pad_v": 200,
  "doc_fill_color": "#ffffff",
  "base_stroke_color": "#23445d",
  "base_fill_color": "#bac8d3"
}

Author(s)

Version History

Release Notes

Initial Release

The initial realease of Portfoliofy was submitted as the final project for CS50P: Introduction to Programming with Python (HarvardX, 2023). Read the project brief as of November 2023.

Future Work

Improvements and new features development are ongoing.

  • Develop a user-friendly web interface powered by the REST API
  • More OUTPUT types
  • More customizations
  • Support for jpg and pdf file format requests

License

Acknowledgments

  • Sanjeev Thiyagarajan's massive, 19-hour Python API Development course is the best online tutorial video I have watched not just on APIs but on any IT topic.

Screenshots

Portfoliofy

Portfoliofy

Portfoliofy

portfoliofy5.mp4