Portfolio

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

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:

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.