Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kielx/terminal-portfolio
Terminal-portfolio - ideal for showcasing software developer projects. Based on Gatsby and Markdown files with separate terminal windows powered by winbox.js.
https://github.com/kielx/terminal-portfolio
custom-portfolio gatsby gatsbyjs hacker-portfolio portfolio portfolio-site portfolio-website react terminal-based terminal-based-portfolio terminal-portfolio terminal-style terminal-style-website terminal-styled winbox winbox-js
Last synced: 3 days ago
JSON representation
Terminal-portfolio - ideal for showcasing software developer projects. Based on Gatsby and Markdown files with separate terminal windows powered by winbox.js.
- Host: GitHub
- URL: https://github.com/kielx/terminal-portfolio
- Owner: Kielx
- License: mit
- Created: 2021-05-20T18:58:57.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-09-25T20:14:54.000Z (4 months ago)
- Last Synced: 2025-01-19T14:12:24.930Z (3 days ago)
- Topics: custom-portfolio, gatsby, gatsbyjs, hacker-portfolio, portfolio, portfolio-site, portfolio-website, react, terminal-based, terminal-based-portfolio, terminal-portfolio, terminal-style, terminal-style-website, terminal-styled, winbox, winbox-js
- Language: JavaScript
- Homepage: https://pantak.net
- Size: 13.8 MB
- Stars: 119
- Watchers: 4
- Forks: 26
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💻 Terminal Portfolio
Terminal Portfolio is as the name suggests a terminal-themed portfolio showcasing a bit about myself and my projects.
It's lightning-fast featuring nearly perfect Lighthouse Scores and clean UI and good UX.
On Desktop the portfolio items will be displayed with Winbox instances allowing users to resize, move and treat them as separate instances of 'terminal'.
On Mobile, the portfolio items will be displayed as static sites generated by Gatsby for better User Experience and window controls of the device.
View Live
·
Found a Bug
·
Request Feature
Table of Contents
## Built With
* [React](https://reactjs.org/)
* [Gatsby](https://www.gatsbyjs.com/)
* [Winbox.js](https://github.com/nextapps-de/winbox)
* [Markdown](https://www.markdownguide.org/getting-started/)
* [AWS API Gateway / Lambda Functions](https://aws.amazon.com/)
## Getting Started
This repo was created and designed to serve as my personal portfolio. Hovewer you can clone and use it as you see fit.
To get a local copy up and running follow these simple steps.
### Prerequisites
* npm
```sh
npm install npm@latest -g
npm install --global yarn
```
### Installation
1. Clone the terminal portfolio
```sh
git clone https://github.com/Kielx/terminal-portfolio.git
```
2. Install NPM packages
```sh
yarn install
```
## Usage
Now that the portfolio is installed you can run it locally and make it your own. Where do you start?
### Projects
The list of projects and mini-projects are generated automatically by Gatsby from markdown files in this folder. Set up the list of your projects by opening ```/src/markdown-pages/``` projects folder. Next, you should delete all of my projects while leaving one .md file as a template. Then update it accordingly:
```markdown
/* src/markdown-pages/projects/your-project-name.md */
---
slug: "projects/country-quiz"
nameOfClass: "projects-items"
title: "Country Quiz"
listName: "🌎 /Country Quiz"
popupImageSrc: "country-quiz.webp"
popupImageAlt: "Country Quiz screenshot"
popupLiveLink: "https://country-quiz.pantak.net/"
popupGithubLink: "https://github.com/Kielx/country-quiz"
techIcons: [
"react",
"html5",
"css3",
"tailwindcss",
]
---
The project description goes here.
```
This is the frontmatter of the .md file. The rendered project will display information based on the contents of this part of .md file.
* Slug is the link that Gatsby will generate for the page.
* nameOfClass is the class name of the item in the project's lits. I've split projects into two lists - projects-items and mini-projects. If you would like to add a new project you can stick with projects-items if you want it to be a mini-project just add mini-project to the class name like this `nameOfClass: "projects-items miniProjects"`.
* title - The title of the project that will be displayed inside Window
* List name - the name that will be displayed in the main terminal window
* popupImageSrc - the image that will be displayed in the popup window. It should be an image that is inside the `/static` folder.
* techIcons - an array of tech icons that will be displayed in popup window. Just add slugs of technologies that you want from [Simple Icons Slugs](https://github.com/simple-icons/simple-icons/blob/develop/slugs.md)
The second part of .md file contains a description that you can provide for your project as you see fit.
### About
The same rules as for projects apply to the about page.
### Colors and styling
Changing colors couldn't be easier. Just adjust colors in `/src/styles/styles.scss` file.
The default theme is black so update the colors as you see fit.
```scss
/* src/styles/styles.scss */
:root {
--primaryText: #ffc600;
--secondaryText: #ccc;
--linkText: #047be3;
--bg: #1b2d3a;
--windowBg: #193549;
--focusBg: hsl(205, 51%, 16%);
--borderColor: black;
}
```
All colors should be self-explanatory except for:
* bg - this is the color of the outer background
* windowBg - this is the color of displayed windows
* focusBg - the color of focused window title bars
### Gatsby config
You should update file `/gatsby-config.js` to match your project. You should change `siteMetada` and `gatsby-plugin-manifest` where you should provide an icon for PWA that should be included in `src/images/your-image.jpg`. Finally be sure to change your GTAG in gatsby config - if you plan to use google analytics. Otherwise you are free to remove the plugin entireley by removing entry for `gatsby-plugin-google-gtag`
### Contact Form
There are many services that you can use to run your contact form.
In my example, I used AWS API Gateway + AWS Lambda Function + AWS SES because it's the cheapest of all the options and scales well. It isn't the easiest option to set up however.
For a detailed guide on how to set up and use the contact form you can use the following [link](
https://aws.amazon.com/blogs/architecture/create-dynamic-contact-forms-for-s3-static-websites-using-aws-lambda-amazon-api-gateway-and-amazon-ses/)
Alternatively, you can use Twilio Sendgrid or capture the form directly from Netlify forms if you host your version there.
### ENV Variables
You can set environment variables in `.env.development` file for local development, and `.env.production` for production.
Also you will need to set them up in netlify if you plan to deploy to their hosting.
```sh
GATSBY_AWS_CONTACT_FORM_API_URL = 'Your AWS API form url' - this is the url of the form that will be used to send emails from the contact form.
GATSBY_AWS_CONTACT_FORM_X_API_KEY = 'Your AWS API form key' - this is the key of the form that will be used to send emails from the contact form.
GATSBY_GOOGLE_GTAG = 'Your Google GTAG' - this is the GTAG that will be used to track your site if you decide to use google analytics.
NODE_VERSION = '14' - this is the node version that will be used to build your project. This variable is only needed when you are using netlify.
```
### Additional changes
Next you should update following components:
`/src/components/layout` - Insert your name.
`/src/components/header` - Change h1 with your own name.
Change typewriter `typeString` to your needs.
```javaScript
// src/components/header.js
{
typewriter
.typeString("Software Developer")
.pauseFor(2500)
.deleteAll()
.typeString("Problem solver")
.pauseFor(2500)
.deleteAll()
.typeString("Krzysztof Pantak")
.callFunction(() => {
setIsLoaded(true)
})
.start()
}}
```
## License
Distributed under MIT License. See `LICENSE` for more information.
## Acknowledgments
- Idea inspiration by [Brad Traversy Terminal Style Landing Page](https://www.youtube.com/watch?v=jQCk2yo10YY)
- Dark color theme inspired by [Cobalt2 Theme Official by Wes Bos](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)
- Light color theme inspired by [Solarized Light](https://en.wikipedia.org/wiki/Solarized_(color_scheme)2)
- Icons from [Simple Icons](https://github.com/simple-icons/simple-icons) and [Font Awesome](https://fontawesome.com/)
## Contact
## Star History
[](https://star-history.com/#Kielx/terminal-portfolio&Date)