Skip to content

msanvarov/personal-portfolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

bba82bb Β· Jan 25, 2025
Aug 28, 2023
Aug 28, 2023
Aug 27, 2023
Feb 7, 2024
Aug 28, 2023
Jan 25, 2025
Aug 27, 2023
Aug 28, 2023
Aug 27, 2023
Aug 27, 2023
Aug 27, 2023
Dec 7, 2023
Aug 31, 2023
Dec 7, 2023
Aug 27, 2023
Aug 28, 2023
Nov 16, 2023
Aug 28, 2023
Aug 27, 2023
Aug 27, 2023
Dec 7, 2023
Dec 7, 2023
Dec 7, 2023
Dec 7, 2023
Aug 31, 2023

Repository files navigation

Sal's Personal Portfolio Website

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.

Deploy with Vercel

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

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 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