On branch master

Your branch is up to date with 'origin/master'.

 Changes to be committed:
	modified:   .vscode/settings.json
	modified:   README.md
	modified:   app/(root)/loading.jsx
	modified:   app/(root)/page.jsx
	modified:   package.json
	modified:   pnpm-lock.yaml
	new file:   vite-to_VS/.gitignore
	new file:   vite-to_VS/README.md
	new file:   vite-to_VS/eslint.config.js
	new file:   vite-to_VS/index.html
	new file:   vite-to_VS/package.json
	new file:   vite-to_VS/public/vite.svg
	new file:   vite-to_VS/src/App.css
	new file:   vite-to_VS/src/App.tsx
	new file:   vite-to_VS/src/assets/react.svg
	new file:   vite-to_VS/src/index.css
	new file:   vite-to_VS/src/main.tsx
	new file:   vite-to_VS/src/vite-env.d.ts
	new file:   vite-to_VS/tsconfig.app.json
	new file:   vite-to_VS/tsconfig.json
	new file:   vite-to_VS/tsconfig.node.json
	new file:   vite-to_VS/vite.config.ts
This commit is contained in:
parent 09c5d5ca28
commit ad5c4d92c9
22 changed files with 1072 additions and 541 deletions

View file

@ -1,26 +1,24 @@
# Alvalens Porto 2
# RepkoRepo на основе Alvalens Porto 2
This is my debut project utilizing Next.js, a portfolio website featuring four primary sections: Home, About, Projects, and Contact. The site is brought to life with animations powered by Framer Motion, enhanced page transitions with Fullpage.js, and styled using elements of Tailwind CSS. This project also read list of project data from a JSON file. It serves as a showcase of my web development skills and represents my initial foray into web development with Next.js.
Проект построен на базе шаблона Alvalens Porto 2. Изменения будут перечислены в соответствующем разделе.
## Features
## Фишки
* **Smooth Animation:** Smooth page scroll and scroll trigger animation.
* **Smooth Page Transition:** Smooth page transition with prefetching feature of next js.
* **Dynamic Data:** Read the project data from JSON file instead of directly implemented the data.
* **Intelliticks chat widget:** Chat with owner of the web realtime.
* **Spotify realtime widget:** Show what song youre playing in this web.
* **Плавная анимация:** Сквозная прокрутка страниц и прокрутка анимации.
* **Плавный переход страниц:** Плавный переход страницы с предварительной выборкой функции NEXTJS.
* **Динамические данные:** Получает данные проекта из файла JSON.
## Installation
1. Ensure you have [pnpm](https://pnpm.io/) installed. If not, you can install it using:
## Установка
1. Убедитесь, что у вас установлен [PNPM](https://pnpm.io/). Если нет, вы можете установить его, используя:
```shell
npm install -g pnpm
```
2. Clone the repository:
2. Склонируйте репозиторий:
```shell
git clone https://github.com/Alvalens/Alvalens-porto-2-nextJs.git
git clone https://dev.gossys.dev/v.korobtsev/Alvalens-porto-2-nextJs.git
```
3. Navigate to the project directory:
@ -37,33 +35,6 @@ This is my debut project utilizing Next.js, a portfolio website featuring four p
```shell
pnpm next dev
```
6. Update the Intelliticks chat widget script in components/Chat.jsx, with your own
```javascript
"use client"
import { useEffect } from "react";
// Component for Intelliticks chat widget
const Chat = () => {
useEffect(() => {
// Replace the Intelliticks script here
}, []);
return null;
};
export default Chat;
```
7. Set env.local by copying env.example and fill the variable
```
NEXT_PUBLIC_SPOTIFY_CLIENT_ID=
NEXT_PUBLIC_SPOTIFY_CLIENT_SECRET=
NEXT_PUBLIC_SPOTIFY_REFRESH_TOKEN=
```
for further reference on how to setup spotify api you can check this [link ](https://leerob.io/blog/spotify-api-nextjs "leerob blog")
## Usage