https://github.com/yiegin/portfolio-new

I've designed and developed a new portfolio leveraging Next.js 14 and TypeScript to showcase my skills and projects effectively.
https://github.com/yiegin/portfolio-new

Last synced: 5 days ago
JSON representation

I've designed and developed a new portfolio leveraging Next.js 14 and TypeScript to showcase my skills and projects effectively.

• Host: GitHub
• URL: https://github.com/yiegin/portfolio-new
• Owner: YieGin
• Created: 2024-04-02T05:17:52.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-06-06T21:58:59.000Z (5 months ago)
• Last Synced: 2024-06-06T23:09:36.781Z (5 months ago)
• Language: TypeScript
• Homepage: https://portfolio-new-self-sigma.vercel.app
• Size: 37 MB
• Stars: 8
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  





  Portfolio





  Welcome to my newly designed portfolio! This site is a vibrant showcase of my professional journey, including recent projects, experiences, and certifications. It reflects the diverse aspects of my skills and the milestones that have shaped my career. Dive in and get inspired!



## ✨ Highlights

- ⚡️ **Next.js with App Router (Turbo)** - Harnessing the latest in routing technology for React applications.

- 🛡 **TypeScript** - Ensures robust type-checking and enhances developer productivity.

- 🎨 **Tailwind CSS** - For stylish and responsive design.

- 🖥 **Shadn/UI** - A modern UI framework for building visually appealing interfaces.

- 🔒 **Auth0** - Provides a secure and scalable authentication solution.

- 📊 **React Query** - Manages efficient data fetching and state within React.

- 🌅 **Cloudinary** - Advanced cloud service for media asset management.

- 🚪 **Authentication** - Implements robust security features to protect user data.

- 📝 **Guestbook with Post Views** - Adds interactive features to engage visitors.

- 🎭 **Animation** - Integrates Framer Motion/GSAP for smooth, compelling animations.

- 💄 **Prettier** - Automatically formats code to maintain a consistent style.

- 🌗 **Light/Dark Mode** - Enhances user experience with theme flexibility.

- 📱 **Responsive Design** - Ensures a great user experience across all devices.

- 🌟 **React Icons** - Uses a diverse icon library for visually intuitive interfaces.

- 📑 **Zod** - Provides strong type safety for form validation.

- 🗄 **Mongoose/MongoDB** - Handles efficient data storage and retrieval with a NoSQL database.

- 📧 **Nodemailer** - Manages reliable email sending for communication and notifications.

## ✨ Requirements

- **Node.js**: Recommended version 20.x, which supports all current dependencies and features.

- **pnpm**: Recommended version 8.14.0 for efficient package management.

- **Visual Studio Code**: Recommended IDE for its extensive support for JavaScript and TypeScript. Essential extensions include:

  - **ESLint** - Helps enforce coding standards and identify problematic patterns.

  - **Prettier** - Ensures consistent code formatting.

  - **TypeScript** - Enhances code quality and developer productivity.

  - **React Developer Tools** - Optional, for inspecting the React component hierarchy.

- **MongoDB**: Required for database operations as indicated by the Mongoose dependency.

- **Nodemailer**: Essential for handling outgoing emails within the application.

- **React Query**: Necessary for efficient data fetching, caching, and state management.

- **Zod**: Important for robust data validation in forms.

## 👋 Getting Started

To get the project up and running on your local machine, follow these steps:

```bash

git clone (https://github.com/YieGin/portfolio-new.git)

cd portfolio-new

npm install

```

Create a .env file based on the provided .env.example file and fill in the necessary variables.

```bash

NEXT_PUBLIC_AUTH0_DOMAIN=

NEXT_PUBLIC_AUTH0_CLIENT_ID=

NEXT_PUBLIC_AUTH0_CALLBACK_URL=

NEXT_PUBLIC_API_BASE_URL=

NEXT_PUBLIC_AUDIENCE=

```

To run the app in development mode:

```bash

npm run dev

```

Visit http://localhost:3000 to view the app in your browser.