Portfoliofy

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

Description

Note

ALL CONTENTS IN THIS REPO ARE FOR EDUCATIONAL PURPOSES ONLY.

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.

Table of Contents

• Description
• Features
• Project Structure
• Prerequisites
• Getting Started
  • Dependencies
  • Installation
  • Usage
• Author(s)
• Version History
  • Release Notes
  • Initial Release
• Future Work
• License
• Acknowledgments
• Screenshots

Features

• TBD

Project Structure

• TBD

Prerequisites

• TBD

Getting Started

Dependencies

• See requirements.txt

Installation

1. Clone the repository

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

2. Navigate into the project directory

   cd portfoliofy # For example

3. Create and activate a virtual environment

   python -m venv venv
   source venv/bin/activate  # On Windows use `venv\Scripts\activate`

4. Install the dependencies

   pip install -r requirements.txt

Configuration

• TBD

Usage

1. Start the live server

   uvicorn app.main:app --reload

2. Access the documentation user interfaces

   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

3. Choose an endpoint for your needs

   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.

4. Configure your request 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.

   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"
   }

   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.

Author(s)

• @ggeerraarrdd

Version History

Release Notes

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

Initial Release

The initial realease of Portfoliofy was submitted as a 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

Contributing

• TBD

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

Frontispiece

• TBD