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!

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:

• Swagger UI: served at /docs.
• ReDoc: served at /redoc.

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)

• @ggeerraarrdd

Version History

Release Notes

• See https://github.com/ggeerraarrdd/portfoliofy/releases

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

• MIT 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

portfoliofy5.mp4