NivaldoFarias / portfolio-template

🎨 Portfolio template based on user's Github

Portfolio Template

Testimonials

"A blazingly-fast and easy-to-use portfolio template for developers of any level AND FOR FREE?!!? 😱 " - Steve Jobs, probably

"I've never seen anything like this before. It's amazing!" - everyone that's ever used this template

Template vs regular repository

This repository is a template, which means that it can be used as a base for other repositories. This is useful for creating new repositories with the same files and directory structure as this one, whilst not maintaining the git history of the template repository. To create a new repository using this template, click on the Use this template button on the top of the page.

To learn more about template repositories, check out the GitHub documentation.

Summary

This project showcases a portfolio as a dashboard containing all public Github repositories of the user (myself, in this case). Built and generated using Astro, Tailwind CSS and DaisyUI. All pages inside the /repo subroute are rendered server-side and shipped with minimal JavaScript. Each page's content is fetched using the Github API and rendered using Astro's built-in server-side rendering and a Vercel SSR adapter for Astro Apps.

Getting Started

Prerequisites: Node.js (v16.20 or higher) or Yarn (v1.22 or higher)

The project's structure is malleable and can be easily adapted to your needs. To get started with your own version of this portfolio, follow these steps:

1. Create a new repository using this template by clicking on the Use this template button on the upper-right corner of the page or by running gh repo create <repository-name> --template nivaldofarias/portfolio-template.
2. Clone the new repository to your local machine and navigate to the project's directory.
3. Install the project dependencies by running npm install or yarn install.
4. Create a .env file and populate with the variables from the .env.example file.
   1. GITHUB_API_TOKEN: A personal access token. This is required to fetch your repositories and profile information from the Github API. Make sure to enable read access to your repositories.
   2. GITHUB_API_OWNER: Your Github username.
   3. GITHUB_API_URL: The Github API base URL. This is usually https://api.github.com.
   4. GITHUB_API_VERSION: The Github API version. This is usually 2022-11-28.
5. Run npm run dev or yarn dev to start the development server.
6. Open http://localhost:3000 with your browser.
7. Start editing the project.

Since Astro apps run on top of Vite, all changes are hot reloaded and reflected in the browser immediately.

Deploying

This project is configured to be deployed to Vercel with web analytics enabled. This can be easily configured to use any other platform of your choice, which all available options are listed in the Astro documentation. To deploy your own version of this portfolio to Vercel, follow these steps:

1. Create an account on Vercel.
2. On your dashboard, create a new project and link it to your forked repository.
3. Navigate to the settings tab and configure the project's environment variables by copying and pasting the variables from your .env file.
4. Deploy.