Launch Portals is a dynamic web app for developers, marketers, and project managers to showcase and track digital projects. It provides quick links to projects, repositories, websites, apps, and social media while verifying metadata for SEO optimization.
Easily check Open Graph tags and ensure consistent project presentation across platforms. Whether launching a new app or managing an existing portfolio, Launch Portals keeps your work visible and well-organized.
Fork the repo and customize your Portal Cards with text, markdown, images, files, or links. Expand columns as needed—the sky isn't even the limit with Launch Portals!
- Visit the application to see it in action here.
Fully customizable "Portals".
Error handling if content cannot be rendered.
- Features
- Background Story
- Getting Started
- Portals
- Closing
- What's Next?
- Project
- Contributing
- Resources
- License
- Credit
- Fully customizable
- Mobile friendly
- Easy navigation
- Quick to get up and running with your own variation
- Up arrow for easy page scrolling
- Free to host and deploy using Netlify and GitHub
I wanted to create a website that showcased my projects without adding my product designs to my repository. I decided to use an API to call and render my product images using the <meta> tags in the <head> tag of my websites. This way, I could verify I correctly set up each meta tag to ensure SEO optimization. I also wanted to add photos, files, social profiles, and other content to my website to make it more personal.
-
Install the Gatsby CLI
npm install -g gatsby-cli
-
Run the development server
gastby develop
-
View the website at
http://localhost:8000
-
Generate a full static production build
gatsby build
-
Preview the site as it will appear once deployed
gatsby serve
-
View the website at
http://localhost:9000 -
Commit to GitHub
-
Create a new site on Netlify
-
Connect your GitHub account
-
Select your repository
-
Click
Deploy Site -
View your website at
https://<your-site-name>.netlify.app -
Optionally, you can also setup a custom domain name for your website
-
If you plan on deploying to Netlify, you can optionally download Netlify CLI to run Netlify functions on your local to ensure proper integration come deployment time.
You can easily configure this website to your liking by following the steps below, changing it from a full website to a preview landing page for your product or app:
-
Open the
src/components/config.jsfile -
Update the
configobject with your informationexport const CONFIG = { localTesting: false, // Set to true to use Netlify's Server Caching showPortalIcons: true, // Set to true to show the Portal type icon in the upper left hand corner of the portal };
Note
I used Microlink API to pull the meta tags from my websites into structured data to be displayed in each Portal.
Because the free tier is subject to a soft limit of 50 unauthenticated requests a day, I decided to use Netlify functions to cache the data server side. If you're testing on local, I cache it in the browser. So be sure to set localTesting to true if you're developing on your local, otherwise it should be set to false for Netlify depoloyment.
Below is a list of the main files you can customize to your liking:
src/components/config.js- contains the site configuration (see above).src/components/custom- custom portal styles and code goes here.src/components/PortalGrid.js- the main driving logic of the website.src/components/layout.css- the mainCSSfile of the website.src/components/seo.js- contains the site SEO. You can easily customize the SEO by editing thesiteMetadatatree.src/images- directory contains thehome-icon.pngused for the site favicon and other places a small icon is needed.src/pages/index.js- site index file.src/portals- place your portals here, eachmarkdownfile will be a card/block inside the overall grid.src/styles/global.css- globalCSSstyles, adjust the color and font in this file for overall customization to fit your needs.src/templates/portalTemplate.js- template file used withPortalGrid.js.static/files- place your files for your file portal types here.static/images- place your images for your photo portal types here.netlify/functions/fetchMetadata.js- server side function for requesting site metadata using Microlink API.netlify.toml- used to setup the Netlify directory above for the server side.- In the root directory, you can also edit the
gatsby-config.jsfile to change the site metadata, colors, titles, and other information.
A Portal is what I refer to as a dynamic card that goes inside the overall Launch Portals column/row based grid. There are a few different types of Portals you can utilize out of the box, more on that below.
Inside the src/portals directory, you can add markdown files with information about each of your portals.
- I like to name the file using the following naming convention:
A-B-C-D.md-A= Portal Order -B= Portal Type -C= Project Type -D= Project Name- Examples: -
1-Photo-Banner.md-9-Custom-Clock.md-10-File-Resume.md-11-Markdown-Example.md-32-Link-Social-GitHub.md
Tip
This naming convention is of course optional, the application does not care what the name of the files are, just that its a .md extension and that its properly formatted to pick up your Portal information (following Portal Config below).
Add as many Portals you like and the application will loop through this folder to display each one.
Utilize the following query parameters for GraphQL to render your Portal content.
type: String- see the breakdown of Portal Types below.order: Int- this is the order you want your Portals to appear in the overall Launch Portals grid.text: String- text used fortextPortal types, this also supportsHTMLformatting/tags.markdown: String- write markdown in this field for themarkdownPortal type.photo: String- put your url path (pointing towardsstatic/images) of your photo you'd like to use for aphotoPortal type.file: String- put your url path (pointing towardsstatic/files) of your file you'd like to use for afilePortal type.fileTitle : String- the title you would like to use to display yourfilePortal type.link: String- put your url path (external) to your website you would like to display using alinkPortal type.custom: String- use a keyword here to describe yourcustomPortal type. You will need to adjust the logic in thesrc/components/PortalGrid.jsfile to handle this.vportals: Int- adjust how many Portals your single Portal will expand vertically.hportals: Int- adjust how many Portals your single Portal will expand horizontally.
- Example:
---
type: link
order: 43
link: https://www.buymeacoffee.com/scottgriv
vportals: 1
hportals: 2
---
Important
Regarding vportals above, there is no limit on how many Portals your content can take up, but keep in mind, it may give off a strange appearance if you're crossing too many Portals at once so you may need to tinker around with it.
Regarding hportals above, the max is 3 across on Desktop, and 2 across on mobile.
Portals that expand 3 across will automatically be rendered to 2 on mobile, so please keep this in mind. It's important to check both Desktop and Mobile layouts to ensure you're satisfied with the layout.
Regarding #1 above, type, there are 6 different Portal types you can utilize.
- Place the type you want to use in
typequery parameter.
| Icon | Type | Usage |
|---|---|---|
  |
text | display text or HTML |
  |
markdown | display markdown |
  |
image | display an image |
  |
file | host a downloadable file |
  |
link | link to an external website or project |
  |
custom | use a keyword here to use inside the custom switch statement logic in the renderPortalContent function inside the src/components/PortalGrid.js file. |
  |
unknown | this is not an actual type, but a placeholder will be used if a valid type is not found above. |
Note
Each Portal type has an icon indicator associated with it, located in the upper left hand corner of each Portal.
You can disable this indicator by setting showPortalIcons to false in the config.js file if you do not want to display it.
Warning
If you utilize as custom type, make sure to add the keyword for the custom tag inside the following switch statement so that it's handled properly.
{node.frontmatter.custom === "animation" ? (
<PortalAnimation />
) : node.frontmatter.custom === "clock" ? (
<ClockWidget />
)Thank you for taking the time to read through this document and I hope you find it useful! If you have any questions or suggestions, please feel free to reach out to me.
Please reference the SUPPORT file in this repository for more details
I'm looking forward to seeing how this project evolves over time and how it can help others with their GitHub Portfolio.
Please reference the CHANGELOG file in this repository for more details.
Please reference the GitHub Project tab inside this repository to get a good understanding of where I'm currently at with the overall project.
- Issues and Enhancements will also be tracked there as well.
Feel free to submit a pull request if you find any issues or have any suggestions on how to improve this project. You can also open an issue with the tag "bug" or "enhancement".
- How to contribute:
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/Business-Website) - Commit your Changes (
git commit -m 'Add new feature') - Push to the Branch (
git push origin feature/Business-Website) - Open a Pull Request
Please reference the CONTRIBUTING file in this repository for more details.
- Gatsby - A framework for building static websites and web applications using React.
- Gatsby - SEO Component - A guide for adding SEO optimizations to Gatsby projects.
- Netlify - A platform for hosting static sites with automatic deployment from Git repositories.
- Netlify CLI - Netlify’s command line interface (CLI) lets you configure continuous deployment straight from the command line. You can use Netlify CLI to run a local development server that you can share with others, run a local build and plugins, and deploy your site.
- React - A JavaScript library for building dynamic user interfaces.
- Font Awesome - A toolkit for web icons and social logos, customizable via CSS.
- Meta Tags - A tool for previewing and generating meta tags for better SEO and social media sharing.
- Microlink API - An API for turning websites into structured data.
- Microlink API - Rate Limits - Documentation on the usage limits of the Microlink API.
- Meta Tags: What They Are & How to Use Them for SEO - Meta Tag for SEO Guide.
- SEO Basics: How to Do SEO for Beginners - Search Engine Optimization Guide.
- LogWork - Time and Clock Widgets - Free Time and Clock Widgets using LogWork (currently being used for a
customportal in the app demo). - LogWork - Free Tools - Free Widgets and Themes for Your Website or Blog using LogWork.
This project is released under the terms of the GNU General Public License, version 3 (GNU GPLv3), which ensures that derivatives of the software remain open source.
- The GNU GPLv3 is a "copyleft" license, ensuring that derivatives of the software remain open source and under the GPL.
- For more details and to understand all requirements and conditions, see the LICENSE file in this repository.
Author: Scott Grivner
Email: [email protected]
Website: scottgrivner.dev
Reference: Main Branch
