GPortfolio

screenshot of GPortfolio
scss

GPortfolio

Creating an automatic portfolio based on Github profile

Overview

The GPortfolio is an automatic portfolio creation tool that generates a portfolio based on the user's Github profile. It offers a default theme and allows customization of data, templates, and settings. The portfolio can be accessed as a Progressive Web App (PWA) with offline access. Daily page builds are automatically performed using Github Actions.

Features

  • All settings are in one file: The configuration settings for the portfolio are stored in a single config.ts file, making it easy to manage and customize.
  • Vanilla JS, no frameworks: The GPortfolio is built with vanilla JavaScript, without the use of any frameworks, ensuring simplicity and lightweight code.
  • Dynamic data updating: In development mode, data can be changed and updated on the fly by simply refreshing the page.
  • Adding new services: The GPortfolio allows the addition of new services, such as the Github API, to retrieve data and populate the portfolio template.
  • Configuring, sorting, and filtering data: Users have the ability to configure, sort, and filter the data received from services to customize the display of their portfolio.
  • Multiple templates support: GPortfolio supports the use of multiple templates, allowing users to switch between different portfolio layouts.
  • Progressive Web Apps (PWA) support: The portfolio can be accessed as a Progressive Web App, providing offline access and a seamless user experience.
  • The Open Graph protocol support: GPortfolio supports The Open Graph protocol for social sharing of the portfolio.
scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

personal
Personal

A personal website is an online platform that showcases an individual's work, interests, and personality. It can include a range of content, such as a bio, resume, portfolio, blog, and contact information, and is often used to promote one's personal brand or professional services.

portfolio
Portfolio

A portfolio website is a type of website that showcases an individual's or a company's work, skills, and accomplishments. It typically includes a gallery of images or videos, case studies, and client testimonials to provide potential clients or employers with a comprehensive overview of their experience and expertise.

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

github-pages
GitHub Pages

Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.