Welcome

👋 Hi, my name is Terris and this is my portfolio website repository.
Visit the website at: https://terris-portfolio.vercel.app/ And documentation here: https://terristwj.github.io/Portfolio/

Introduction

This portfolio site was created using Next.js, and others.

(Main) Tech Stack

Next.js	Frontend	Backend
TailwindCSS	Styling
Framer Motion	Animations	Transitions
Vercel	Cloud Hosting	Website Provider
Vercel Postgres DB	Cloud Database	Database Provider

(Others) Tech Stack Dependencies

UI Components
React headlessUI	UI Library	Transitions
Framer Motion
@motionone/utils	Framer Motion	Utility
Icons
Hero Icons	Tailwind Icons	Hamburger Icon
React SVG Icons	React Icons	Social Media Icons
Fonts
Google Fonts	Fonts Library
react-simple-typewriter	Typewriter Effect
Guestbook Page
random-animal-name	Name generation	Used With Cookies
bad-words	Filter Flagged Words	First Filter Layer
OpenAI API	AI Sentimental Filter	Second Filter Layer
random-number	Random Number	Min/Max Integer/Float
Lorem Picsum	Random Images	URL API
Axios	API Connector	API Handler
Vercel Dependencies
Vercel Web Analytics	Web Analytics	Visitors Count
Vercel Speed Insights	Web Performance	Countries Performance
Vercel Postgres Database	Postgres Database	Cloud Database

Project's Vercel Postgres DB Documentation

In this project,

1. Ensure a Vercel Postgres Database (V-PG-DB) is created

2. Add every POSTGRES_<item> into .env to connect to V-PG-DB

3. In Vercel UI Dashboard, use the console commands to debug:

   • SELECT * FROM messages;
   • SELECT * FROM messages ORDER BY created_at DESC;
   • DELETE FROM messages;
   • Example
     • SELECT * FROM messages WHERE username = "Bossy Gnat" and (message !="fishy\\" and message != "omg" and message !="<h1>hey</h1>" and message !="<br/>");

4. In the backend, follow the documentation to use @vercel/postgres

   • https://github.com/vercel/storage/tree/main/packages/postgres#readme

Vercel Add-ons Documentation

• Speed Insights
  • npm i @vercel/speed-insights
• Web Analytics
  • npm i @vercel/analytics
• Postgres Database
  • npm i @vercel/postgres

OpenAI API Documentation

In this project,

1. Ensure a OpenAI API account is created and configured

2. Add your OPENAI_APIKEY into .env

3. In the backend, follow the documentation to use OpenAI API

   • https://platform.openai.com/docs/api-reference/introduction

References

1. Main Tutorial

   1. Build a modern Portfolio Website with NextJS - Youtube
   2. Github Reference

2. Portfolio References

   1. How to Create a Stunning Portfolio Website with Nextjs, Tailwind CSS and Framer-motion🌟

      1. Demo Website
      2. GitHub Starter Code

   2. On-Scroll Reveal Animation with React & Framer Motion

      1. Demo Website

   3. Brittany Chiang

3. Additional References

   1. Hover.dev
      • Animated UI Components for React & Tailwind
   2. Animated tabs

4. Technical References

   1. Window is not defined
   2. Unsplash image from keyword api
   3. NextJS meta data

Boilerplate Documentation

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.