==================================================================
__ __ ______ __ __
/\ "-./ \/\ __ \/\_\_\_\
\ \ \-./\ \ \ __ \/_/\_\/_
\ \_\ \ \_\ \_\ \_\/\_\/\_\
\/_/ \/_/\/_/\/_/\/_/\/_/__ __ ______ __ __
/\ ___\/\ __ \/\ == \/\ \ /\ __ \/\ "-.\ \
\ \ \___\ \ __ \ \ _-/\ \ \___\ \ __ \ \ \-. \
\ \_____\ \_\ \_\ \_\ \ \_____\ \_\ \_\ \_\\"\_\
\/_____/\/_/\/_/\/_/ \/_____/\/_/\/_/\/_/ \/_/
======================= Developer/Designer =======================
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 |
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
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
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.
This site is proudly open source and made using Typescript
with the following technologies:
- Vite for SSR and SSG
- Express for HTTP server
- sirv for static file serving
- React for UI
- TailwindCSS for styling
- And several other libraries