Skip to content

README.md

Latest commit

 

History

History
166 lines (119 loc) · 4.69 KB

README.md

File metadata and controls

166 lines (119 loc) · 4.69 KB

Strangeways.dev

Modern, fast, and minimal portfolio site built with React, TypeScript, Vite, and Tailwind CSS. This repo contains the source for software development company strangeways.dev, including a responsive layout, themed UI, and example components for pages like About, Contact, and a portfolio grid.

Features

  • React + TypeScript for a robust developer experience
  • Vite for lightning-fast dev server and builds
  • Tailwind CSS (v4) for utility-first styling and typography
  • ESLint with React rules for consistent code quality
  • Ready-to-run scripts for development, build, preview, and lint

Tech Stack

  • Framework: React, React DOM
  • Build Tool: Vite
  • Language: TypeScript
  • Styling: Tailwind CSS, PostCSS, Autoprefixer
  • Linting: ESLint (+ React hooks, React Refresh, etc.)

See package.json for exact versions.

Prerequisites

  • Node.js 18+ (recommended) or 20+
  • A package manager: npm, pnpm, or yarn

This repository specifies packageManager: pnpm in package.json, but you can use npm or yarn just fine. Examples for all three are below.

Getting Started

Clone the repository:

git clone https://github.com/alifeinbinary/strangeways.dev.git
cd strangeways.dev

Install dependencies:

pnpm install

Run the development server:

pnpm dev

Then open the printed local URL (usually http://localhost:5173/) in your browser.

Scripts

The following scripts are defined in package.json:

  • dev — Start the Vite dev server
  • build — Type-check (tsc -b) and build production assets via Vite
  • preview — Preview the production build locally
  • lint — Run ESLint on the project
  • prepare — Setup Husky Git hooks

Run them with your preferred package manager, e.g.:

# pnpm
pnpm dev
pnpm build
pnpm preview
pnpm lint

Project Structure

strangeways.dev/
├─ public/                      # Static assets served as-is
│  ├─ favicon/                  # Favicons
│  ├─ hero/                     # Hero images
│  ├─ portfolio/                # Portfolio images
│  ├─ tesseract-dark.svg
│  ├─ tesseract-light.svg
│  └─ vite.svg
├─ src/
│  ├─ assets/                   # Local SVGs, icons, etc.
│  ├─ components/               # UI components (About, Contact, etc.)
│  ├─ data/                     # Data sources (FAQ, services, tools, portfolio)
│  ├─ routes/                   # Route components (e.g., PostPage, Error)
│  ├─ theme/                    # Theming provider, hooks, utilities
│  ├─ utils/                    # Helpers (e.g., loaders)
│  ├─ App.css                   # App styles
│  ├─ App.tsx                   # Root app component
│  ├─ index.css                 # Global styles (Tailwind)
│  ├─ main.tsx                  # App entry (React DOM bootstrap)
│  ├─ routes.ts                 # Route definitions
│  └─ types.d.ts                # Global TypeScript types
├─ index.html                    # App entry HTML
├─ vite.config.ts                # Vite configuration
├─ tailwind.config.js            # Tailwind configuration
├─ postcss.config.js             # PostCSS configuration
├─ prettier.config.js            # Prettier configuration
├─ eslint.config.js              # ESLint configuration
├─ tsconfig.json                 # Root TypeScript config
├─ tsconfig.app.json             # TS app config
├─ tsconfig.node.json            # TS Node/build config
├─ package.json
├─ pnpm-lock.yaml
├─ robots.txt
└─ sitemap.xml

Building for Production

# pnpm
pnpm build

Preview the production build locally:

# pnpm
pnpm preview

Contributing

Contributions, issues, and feature requests are welcome! Please:

  • Open an issue to discuss significant changes before submitting a PR.
  • Follow the existing code style and run lint before pushing.

License

This project is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0).

You are free to:

  • Share — copy and redistribute the material in any medium or format
  • Adapt — remix, transform, and build upon the material

Under the following terms:

  • Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made.
  • NonCommercial — You may not use the material for commercial purposes.
  • ShareAlike — If you remix, transform, or build upon the material, you must distribute your contributions under the same license.

For more details, see the full license text in LICENSE.