Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/asbhogal/personal-portfolio-site

A personal portfolio site created for the repo owner to showcase his projects, created using TypeScript, Next.js, Payload CMS, SASS, Framer Motion & Playwright.
https://github.com/asbhogal/personal-portfolio-site

developer-portfolio es6 eslint framer-motion next nextjs portfolio portfolio-project portfolio-site portfolio-website projects react reactjs sass scss single-page-app single-page-application single-page-applications spa typescript

Last synced: about 8 hours ago
JSON representation

A personal portfolio site created for the repo owner to showcase his projects, created using TypeScript, Next.js, Payload CMS, SASS, Framer Motion & Playwright.

Awesome Lists containing this project

README

        

Personal Portfolio Site

![](https://api.checklyhq.com/v1/badges/checks/964be065-c7c8-4d2e-b4f4-6338ba80de87?style=for-the-badge&theme=dark) ![](https://api.checklyhq.com/v1/badges/checks/964be065-c7c8-4d2e-b4f4-6338ba80de87?style=for-the-badge&theme=dark&responseTime=true)

![GitHub deployments](https://img.shields.io/github/deployments/asbhogal/Personal-Portfolio-Site/production?label=DEPLOYMENT%20STATE&style=for-the-badge&labelColor=000) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/asbhogal/Personal-Portfolio-Site?style=for-the-badge&labelColor=000) ![GitHub repo size](https://img.shields.io/github/repo-size/asbhogal/Personal-Portfolio-Site?color=blueviolet&style=for-the-badge&labelColor=000)

![Project-Cover](https://github.com/asbhogal/Personal-Portfolio-Site/blob/main/public/images/GitHub%20Repo%20README%20Image%20-%20Personal%20Portfolio%20Site.png?raw=true)

A personal portfolio site created for the repo owner to showcase his projects, built using Next.js, TypeScript, SASS and Framer Motion and deployed via Vercel.

Features:

- TypeScript for type safety
- Next.js API routes for dynamic content
- Payload CMS and MongoDB for content management
- Mongoose for validation and schema
- SASS modules for styling
- Framer Motion for animations (custom component)
- Playwright for testing (incl. a11y)
- Husky to run linting and testing prior to commit
- Fully responsive
- Optimised for the web

Stacks & Tools Used:



nextjs logo
react logo
TypeScript logo
Payload CMS logo
sass logo
Framer Motion logo
ES Lint logo
Playwright logo

Links

- Portfolio Site