Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/smakosh/next-portfolio-dev

A portfolio for developers (Next js version)
https://github.com/smakosh/next-portfolio-dev

nextjs portfolio typescript vercel

Last synced: 4 days ago
JSON representation

A portfolio for developers (Next js version)

Host: GitHub
URL: https://github.com/smakosh/next-portfolio-dev
Owner: smakosh
License: mit
Created: 2021-04-29T11:57:54.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-10-21T04:55:06.000Z (3 months ago)
Last Synced: 2024-10-21T07:46:54.205Z (3 months ago)
Topics: nextjs, portfolio, typescript, vercel
Language: TypeScript
Homepage: https://portfolio-next.smakosh.com
Size: 1.07 MB
Stars: 203
Watchers: 4
Forks: 44
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md

Awesome Lists containing this project

Awesome-NextJs - next-portfolio-dev - [demo](https://portfolio-next.smakosh.com/) (Nextjs Templates)

README

        # A basic portfolio for developers

[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsmakosh%2Fnext-portfolio-dev&env=GITHUB_TOKEN,NEXT_PUBLIC_PORTFOLIO_URL,NEXT_PUBLIC_PORTFOLIO_RECAPTCHA_KEY&envDescription=Get%20your%20GitHub%20token&envLink=https%3A%2F%2Fgithub.com%2Fsettings%2Ftokens%2Fnew%3Fscopes%3Dpublic_repo%26description%3Dportfolio-dev&demo-title=Next%20Portfolio%20Dev&demo-description=A%20simple%20portfolio%20for%20developers&demo-url=https%3A%2F%2Fportfolio-next.smakosh.com%2F&demo-image=https%3A%2F%2Fportfolio-next.smakosh.com%2Fassets%2Fthumbnail%2Fthumbnail.png&integration-ids=oac_SOUPsixV2TP6CkvfaB91Jhri)

[![Powered by Vercel](./powered-by-vercel.svg)](https://vercel.com?utm_source=smakosh&utm_campaign=oss)

## Gatsby version

[Gatsby-portfolio-portfolio](https://github.com/smakosh/gatsby-portfolio-dev)



## Features

- TypeScript

- Eslint/Prettier configured

- Scores 100% on a11y / Performance / PWA / SEO

- Easy to customize

- Nice project structure

- Amazing illustrations by [Undraw.co](https://undraw.co)

- Tablet & mobile friendly

- Continuous deployment with [Vercel](https://vercel.com/?utm_source=smakosh)

- A contact form protected by Google Recaptcha powered by Formspree

- Can be deployed with one click

- Fetches your Github pinned projects with most stars (You could customize this if you wish) using ISR

- One click deployment to Vercel

## Design

Project on [Behance](https://www.behance.net/gallery/74172961/Free-Gatsby-portfolio-for-developers)

## Prerequisites

### Online

1. Grab a Google recaptcha key from [Google Recaptcha](https://www.google.com/recaptcha/admin)

2. Grab your Github token from [GitHub](https://github.com/settings/tokens/new?scopes=public_repo&description=portfolio-dev)

3. Click [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsmakosh%2Fnext-portfolio-dev&env=GITHUB_TOKEN,NEXT_PUBLIC_PORTFOLIO_URL,NEXT_PUBLIC_PORTFOLIO_RECAPTCHA_KEY&envDescription=Get%20your%20GitHub%20token&envLink=https%3A%2F%2Fgithub.com%2Fsettings%2Ftokens%2Fnew%3Fscopes%3Dpublic_repo%26description%3Dportfolio-dev&demo-title=Next%20Portfolio%20Dev&demo-description=A%20simple%20portfolio%20for%20developers&demo-url=https%3A%2F%2Fportfolio-next.smakosh.com%2F&demo-image=https%3A%2F%2Fportfolio-next.smakosh.com%2Fassets%2Fthumbnail%2Fthumbnail.png&integration-ids=oac_SOUPsixV2TP6CkvfaB91Jhri) and pass in your:

- Github token

To Env variables section.

### Locally

1. Create an account at [Formspree](https://formspree.io/?utm_source=smakosh)

2. Install [PNPM](https://pnpm.io/)

3. Grab your Github token from [GitHub](https://github.com/settings/tokens/new?scopes=public_repo&description=portfolio-dev)

4. Run `cp .env.development.local.template .env.development.local`

   > If you'd like to build the website locally, you will need to run `cp .env.development.local.template .env.development.local` as well and provide your env variables.

5. Run `pnpm i && pnpm dev`

   > You could run `vercel env pull` to get your env variables from Vercel.

6. Make sure to edit the `src/data/config.ts` file

   ```ts

   const config = {

     defaultTitle: 'John Doe',

     url: process.env.NEXT_PUBLIC_PORTFOLIO_URL!,

     defaultDescription: 'I’m John Doe and I’m a Software Engineer!',

     googleAnalyticsID: 'G-xxxxxx',

     twitter: '@smakosh',

   };

   ```

### Deploying locally to Vercel

I highly recommend that you push to GitHub/GitLab and deploy your repository to Vercel instead or just hit the Deploy button.

## Built with

- Adobe XD

- Next js

- Tailwindcss

- TypeScript

- Formspree

- VSCode

- And these useful of JavaScript libraries [package.json](package.json)

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more details

## Contributors

  

    

      
_{José Fernando Höwer Barbosa}
📖

      
_{Elbarae Rguig}
💻 📖 🐛

      
_{Karl Horky}
💻 📖 🛡️

      
_{Moutawakkil Mohammed}
💻 🐛

      
_{Bharath Kalyan S}
🐛

    

  

## Support

If you love this Next js template and want to support me, you can do so through my GitHub profile.