pabloporto.me

Pablo's personal website built with React, TypeScipt, NextJS and Tailwind. You can check it live at pabloporto.me.

Motivation

I change the tech stack that use to build my personal website every few years. I started using Wordpress, then moved to Jekyll, then React/Redux and finally Next.js. I do this to have a playground where I can play around with new frontend and CI/CD technologies.

You can use this project as an example on how to create a continuous deployment pipeline with Github Actions for a website/webapp built with Next.js. The CI/CD pipeline includes automated code formatting, linting, dependecy checks and web vitals checks.

How To Use

First, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

To run the linter:

npm run lint
# or
npm run lint:fix

To run the code formatter:

npm run format
# or
npm run format:fix

Screenshots

TBC

Tech stack

Built with

• TypeScript
• React
• Next.js
• Tailwindcss
• Vercel
• GitHub Actions

Features & roadmap

• Code formatting with Prettier
• Linting with ESLint
• Trunk base development and Continuous deployment with Github Actions
• Dependency check and auto-update with Dependabot
• Web Vitals check with lighthouseci
• CDN hosting with Vercel
• Unit test with Jest/React testing library
• Acceptance test with Cypress.js
• Automated secret scanning
• Support for i18n

API Reference

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Tests

TBC

Contribute

Suggestions on new tools to try and things to add are welcome. 🙏

License

This project is open source and available under the MIT License.