Important
Since the application is still under development, please note that topics not yet completed will be highlighted by a message like that
Welcome to my personal portfolio, a platform built with Next.js and TailwindCSS, specifically designed for developers who want to showcase their work in a dynamic and 100% integrated way with GitHub.
- Direct Connection with GitHub: All my posts and projects are linked to my GitHub repositories. Any updates made to my repositories will automatically be reflected in the portfolio.
- Dynamic Portfolio/Blog: Each repository becomes a post on my portfolio/blog. Information is extracted directly from the README.md files of my repositories, displaying details about projects, challenges, and studies.
- "About Me" and "CV" Sections: Includes an "About Me" section where you can learn more about me, and a "CV" section where you can view my skills and experiences!
- No Database or API: No database or API needed. All content displayed on the website is hosted directly on GitHub, eliminating the need for additional databases or APIs. Simple and efficient!
- Next.js: The React framework used to build the portfolio, providing server-side rendering and static site generation.
- TypeScript: The primary programming language for the project, ensuring type safety and enhancing code quality.
- TailwindCSS: Utility-first CSS framework used for styling the portfolio quickly and efficiently.
- Vercel: Platform used to host the portfolio, providing seamless deployment and serverless functions.
- GitHub: Version control system used to fetch and display data directly from repositories, keeping the portfolio content updated.
- Zustand: A small, fast, and scalable state management library for React applications. It is used to create a global state to manage user information in the app.
Important
We are currently assessing the need for standardizing the README.md files of projects so that they can be read by the application...
To start using our app, you need to make some changes and follow standard README.md formatting, which can be found here
It's important that your github username is the same as the one you use on your social media, as this is built into the default icon link URL Another point is that the api will consider that the main branch of your project is the MAIN, to change that, change the .env file
If you like and want to customize your own portfolio, you can run the application locally for code generation purposes or contributions. Follow the steps below to get started
Pre-requisites
To be able to start development the application make sure that you have the following pre-requisites installed:
- Pnpm
npm install -g pnpm
- Node.js (versão LTS)
Running the app
To setup a local development environment the following steps can be followed:
- Clone the repository and install dependencies:
git clone https://github.com/vsantos1711/portfolio.git && cd portfolio && pnpm install- Change the env file :
rename the .evn.example to .env
change the GITHUB_USER value to your user
change the DEFAULT_BRANCH value.
// the default branch needs to be the same in all of your projects
change the GITHUB_TOKEN value to a token generated by github
// this will prevent problems like Rate Limit on Github API
- Run the app:
pnpm run dev- Create CV page
- Create "About me" page
- Create a global state using zustand
- Add errors functions
- Add internationalization
Licensed under the MIT license.