Light

smakosh / next-portfolio-dev Goto Github PK

View Code? Open in Web Editor NEW

192.0 4.0 41.0 1.01 MB

A portfolio for developers (Next js version)

Home Page: https://portfolio-next.smakosh.com

License: MIT License

TypeScript 99.73% CSS 0.12% JavaScript 0.15%

portfolio typescript nextjs vercel

next-portfolio-dev's Introduction

A basic portfolio for developers

Gatsby version

Gatsby-portfolio-portfolio

Features

TypeScript
Eslint/Prettier configured
Scores 100% on a11y / Performance / PWA / SEO
Easy to customize
Nice project structure
Amazing illustrations by Undraw.co
Tablet & mobile friendly
Continuous deployment with Vercel
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

Prerequisites

Online

Grab a Google recaptcha key from Google Recaptcha
Grab your Github token from GitHub
Click and pass in your:

Github token

To Env variables section.

Locally

Create an account at Formspree
Install PNPM
Grab your Github token from GitHub
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.
Run pnpm i && pnpm dev

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

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

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

License

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

Contributors

José Fernando Höwer Barbosa

_{José Fernando Höwer Barbosa}
📖

Elbarae Rguig

_{Elbarae Rguig}
💻 📖 🐛

Karl Horky

_{Karl Horky}
💻 📖 🛡️

Moutawakkil Mohammed

_{Moutawakkil Mohammed}
💻 🐛

Bharath Kalyan S

_{Bharath Kalyan S}
🐛

Support

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

next-portfolio-dev's People

Contributors

Stargazers

Watchers

next-portfolio-dev's Issues

Formium API Endpoint

I don't know if I misunderstood anything but I had an error posting the form in production mode.

The address of the Endpoint REST API looks like this on my end (I called my form "contact"):
https://api.formium.io/submit/XXXXXXXX/contact

However after indicating this address in the .env I realize that something is added: Check here

/api/contact

The contact form therefore did not work.

Did I misunderstand?
By replacing with this, everything works fine:

process.env.NODE_ENV !== 'development'
  ? `${process.env.NEXT_PUBLIC_PORTFOLIO_URL}`
  : 'http://localhost:3040/api/contact',

Thank you.

Can't build locally

I've been trying to locally build the app but it seems like I fall on a 401 (only when running yarn build - it works fine with yarn dev).

PS C:\git\hunteroi.github.io> yarn dev   
yarn run v1.22.10
$ next dev -p 3040
ready - started server on 0.0.0.0:3040, url: http://localhost:3040
info  - Loaded env from C:\git\hunteroi.github.io\.env.development.local
info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
info  - Using external babel configuration from C:\git\hunteroi.github.io\.babelrc
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully

PS C:\git\hunteroi.github.io> yarn build
yarn run v1.22.10
$ next build
info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types
info  - Creating an optimized production build
info  - Compiled successfully 
info  - Collecting page data  
[   =] info  - Generating static pages (0/3)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Request failed with status code 401
    at createError (C:\git\hunteroi.github.io\node_modules\axios\lib\core\createError.js:16:15)
    at settle (C:\git\hunteroi.github.io\node_modules\axios\lib\core\settle.js:17:12)
    at IncomingMessage.handleStreamEnd (C:\git\hunteroi.github.io\node_modules\axios\lib\adapters\http.js:260:11)
    at IncomingMessage.emit (events.js:327:22)
    at endReadableNT (internal/streams/readable.js:1327:12)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
info  - Generating static pages (3/3)

> Build error occurred
Error: Export encountered errors on following paths:
        /
    at C:\git\hunteroi.github.io\node_modules\next\dist\export\index.js:31:1106
    at async Span.traceAsyncFn (C:\git\hunteroi.github.io\node_modules\next\dist\telemetry\trace\trace.js:6:584)
    at async C:\git\hunteroi.github.io\node_modules\next\dist\build\index.js:43:49
    at async Span.traceAsyncFn (C:\git\hunteroi.github.io\node_modules\next\dist\telemetry\trace\trace.js:6:584)
    at async C:\git\hunteroi.github.io\node_modules\next\dist\build\index.js:25:1475
    at async Span.traceAsyncFn (C:\git\hunteroi.github.io\node_modules\next\dist\telemetry\trace\trace.js:6:584)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I've edited a bit the code to fit my template, you can check if the problem comes from the source code itself : https://github.com/hunteroi/hunteroi.github.io but I highly doubt about this.

Any idea? Thanks for any further response!

Move Formium to a Next API route

Navigation Issue

The page doesn't scroll to the required section on clicking.
See below for the demo

Screen.Recording.2023-06-30.at.3.24.13.PM.mov

Demo page broken?

https://next-portfolio-dev-liart.vercel.app/

Not working?

Missing information to run locally

I am trying to use the template but after trying to follow the development steps i can't make it work

Maybe can you please consider update the README.md with more clear setup information. The template is really cool

I already create the reCAPTCHA but i don't know how to fill this

do i need a real domain to run the template locally?

wich key do you need secret or public?

i guess is secret but is not specifyed

which scopes need the github token?

Ty so much in advance

where should i run this command?

vercel env pull

Upgrade to @formspree/[email protected], fix errors

Hi @smakosh 👋 hope things are going well!

If you upgrade to @formspree/[email protected], you'll notice some type errors:

Error: src/components/modules/Contact/ContactForm/index.tsx(39,26): error TS2339: Property 'forEach' does not exist on type 'SubmissionError<FieldValues>'.
Error: src/components/modules/Contact/ContactForm/index.tsx(39,35): error TS[7](https://github.com/upleveled/next-portfolio-dev/actions/runs/5776672630/job/15656043053?pr=81#step:7:8)006: Parameter 'error' implicitly has an 'any' type.
Error: Process completed with exit code 2.

This comes from the state.errors.forEach here:

next-portfolio-dev/src/components/modules/Contact/ContactForm/index.tsx

Lines 39 to 41 in 44a9b98

 state.errors.forEach((error) => { 

 setFieldError(error.field || 'email', error.message); 

 });

It seems that Formspree for React changed the data structure for state.errors, you can see that now there are two methods: state.errors.getFieldErrors(field) and state.errors.getFormErrors():

formspree/formspree-js@49730d9#diff-f43d7a0974df3e96da50460d0688f282e92d327bc53dd39ffc1a79ce16b10b94R18

Also state.errors.getAllFieldErrors(), which may be more useful than getFieldErrors(field):

formspree/formspree-js@49730d9#diff-1f9db01dd19d42e313a63f565d5ea2998a592f709e20fa1ec56f4a816f57ebdaR112

Migrate to TailwindCSS?

Use VERCEL_URL env var

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.