suyxhs / personal-portfolio

🌐 react next.js app for personal portfolio

Sal's Personal Portfolio Website

A modern Next.js portfolio website built with 💙 and ☕ by Sal Anvarov. Deployed with HotJar, GTM, and Formspree tools for analytics and form tracking.

Remark: Deploying on Vercel will FAIL as Nx has the output directory as dist on builds by default. To fix this - navigate to the Build and Development Settings and change the Output Directory to dist/apps/personal-portfolio/.next. Documentation: https://vercel.com/docs/deployments/configure-a-build#build-and-development-settings

Table of Contents:

1. Description
2. Prerequisites
3. Deployment
4. Environment Configuration
5. Repository Files and Folders
6. Testing

🔎 This repo was created with Nx.

📚 Description

Preview: https://www.sal-anvarov.com/

This portfolio website was built with ease of extensibility in mind. This app comes with MDX for case-studies and blog management and Bootstrap for styling. The app has redux state management via Redux Toolkit and React Hooks.

Remark: Given App Router is not fully stable, I opted to stay with Pages Router until further notice. The plan is to eventually migrate to App Router.

---

🛠️ Prerequisites

Tracking Tools

• HotJar
• Google Analytics
• Microsoft Clarity
• DebugBear RUM
• Vercel Analytics

Non Docker

• Please make sure to have Node.js (16+) locally by downloading the Javascript runtime via brew, choco, or apt-get.

Docker 🐳

• Please make sure to have Docker Desktop operational to quickly compose the required dependencies. Then follow the docker procedure outlined below.

---

🚀 Deployment

Manual Deployment without Docker

• Clone the repo via git clone https://github.com/msanvarov/personal-portfolio.

• Navigate to the root directory of repo via cd personal-portfolio.

• Download dependencies via npm i or yarn.

• Create a .env file via the cp apps/personal-portfolio/.env.example .env command and replace the example environment variables with valid ones.

• Start the app in development mode via npm run start (the app will be exposed on http://localhost:4200; not to conflict with the default React, Angular, or Vue ports).

Remark: In the docker deployment, the UI is automatically started and served by the API.

Deploying with Docker 🐳

Open in Docker Dev Environments

• Execute the following command in-app directory:

# creates and loads the docker container in detached mode with the required configuration
$ docker-compose up -d

• The following command will download dependencies and execute the web application on http://localhost:80 (deployed behind a Nginx reverse proxy).

---

🔒 Environment Configuration

By default, the application comes with a config module that can read in every environment variable from the .env file.

APP_ENV - the application environment to execute as, either in development or production. Determines the type of logging options to utilize. Options: development or production.

ENABLE_TRACKING - enables tracking tools. Options: true or false.

HOTJAR_WEBSITE_UID - hotjar website uid, requires a HotJar account (free)

HOTJAR_VERSION - hotjar version

GOOGLE_TAG_MANAGER_UID - google tag manager uid, requires google analytics to be onboarded.

MICROSOFT_CLARITY_UID - microsoft clarity uid, manages heatmaps and events. requires a Microsoft account (free)

Remark: DebugBear can be easy onboarded via Vercel

DEBUGBEAR_RUM_UID - debugbear real user monitoring (RUM) uid, requires DebugBear to be onboarded (free).

---

📁 Repository Files and Folders

.
├── Dockerfile
├── README.md
├── apps
│   ├── personal-portfolio
│   │   ├── case-studies
│   │   ├── index.d.ts
│   │   ├── jest.config.ts
│   │   ├── next-env.d.ts
│   │   ├── next.config.js
│   │   ├── pages
│   │   ├── posts
│   │   ├── project.json
│   │   ├── public
│   │   ├── tests
│   │   ├── tsconfig.json
│   │   ├── tsconfig.spec.json
│   │   └── utils
│   └── personal-portfolio-e2e
│       ├── cypress.config.ts
│       ├── project.json
│       ├── src
│       └── tsconfig.json
├── assets
│   └── open-link.svg
├── compose.yaml
├── dist
│   └── apps
│       └── personal-portfolio
├── jest.config.ts
├── jest.preset.js
├── libs
│   ├── core-components
│   │   ├── README.md
│   │   ├── project.json
│   │   ├── src
│   │   ├── tsconfig.json
│   │   └── tsconfig.lib.json
│   └── store
│       ├── README.md
│       ├── project.json
│       ├── src
│       ├── tsconfig.json
│       └── tsconfig.lib.json
├── nx.json
├── package-lock.json
├── package.json
├── tools
│   └── tsconfig.tools.json
└── tsconfig.base.json

---

✅ Testing

Docker 🐳

# Start the docker container if it's not running
$ docker start frontend

# unit tests
$ docker exec -it frontend npm run test

Non-Docker

# execute test
$ npm run test

---

🏗️ Progress

Branches	Status
main	✅
feat/*	🚧

---

👥 Help

PRs are appreciated, I fully rely on the passion ❤️ of the OS developers.

---

License

This personal portfolio website is MIT licensed.

Author