/portfolio

░▒▓ Max Caplan ▓▒░

Primary LanguageTypeScript

Netlify Status

==================================================================
     __    __  ______  __  __
    /\ "-./  \/\  __ \/\_\_\_\
    \ \ \-./\ \ \  __ \/_/\_\/_
     \ \_\ \ \_\ \_\ \_\/\_\/\_\
      \/_/  \/_/\/_/\/_/\/_/\/_/__  __      ______  __   __
           /\  ___\/\  __ \/\  == \/\ \    /\  __ \/\ "-.\ \
           \ \ \___\ \  __ \ \  _-/\ \ \___\ \  __ \ \ \-.  \
            \ \_____\ \_\ \_\ \_\   \ \_____\ \_\ \_\ \_\\"\_\
             \/_____/\/_/\/_/\/_/    \/_____/\/_/\/_/\/_/ \/_/

======================= Developer/Designer =======================

>_ Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm run dev Starts local dev server at localhost:5173
npm run build Builds the client and server as an SSR application to dist/
npm run build:client Builds the client side files for SSR to dist/client/
npm run build:server Builds the server side files for SSR to dist/server
npm run generate Generates a static version of the site to dist/static
npm run serve Serves the production built SSR application
npm run serve-static Serves the production built static site
npm run preview Preview your build locally, before deploying

Setup

To setup the site for local development, clone the repo and install the dependencies with the following commands:

git clone https://github.com/maxcaplan/portfolio.git
cd portfolio
npm install

Start the local development server with the following command:

npm run dev

You can then view the local site at localhost:5173 Optionally, you can run the following command instead to have the site available to any device on your network:

npm run dev -- --host

The local site will now be available at <your-local-ip>:5173

File Structure

The file structure of the project is as follows:

.
├── public <-- Static files
│   └── assets
│       ├── favicons
│       ├── fonts
│       └── images
└── src
    ├── assets <-- Asset files
    ├── components <-- React components
    │   ├── common <-- Generic components
    │   ├── Home <-- Home page components
    ├── content <-- Content to be displayed
    │   └── Work <-- Work page content
    ├── css
    ├── pages <-- Site pages
    │   └── Work
    │       └── [title] <-- Dynamic page param
    └── utils <-- Utility functions
        └── hooks <-- Custom react hooks

Sub directories of either src/components or src/pages with names in PascalCase have an index.tsx file that is a component or page respectivly.

.tsx files with PascalCase names in src/components denote a component file

Content in src/content to be displayed on dynamic pages must have a parent directory name equal to the parent directory of the dynamic page. Example src/pages/Work gets it's content from src/content/Work

Deploying

To deploy a static version of the site first create a .env file at the root of the repository. Make sure the following fields are defined with the appropriate information in this file:

# .env
VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_PUBLIC_KEY=your_public_key

Next run the following command:

npm run generate

This will generate a static version of the production site to dist/static/ Upload the contents of this directory to the static site host of your choosing.

Project Details

This site is proudly open source and made using Typescript with the following technologies: