landing-page

A modern, high-performance personal landing page built with SvelteKit, TypeScript, and Three.js. This project is highly customizable via environment variables and includes a production-ready Docker configuration.

Fork Information

This project is a fork of the original osumatrix.me by oSumAtrIX. It has been adapted to use the SvelteKit Node adapter for better support of runtime environment variables in Docker environments.

Features

• Interactive WebGL Cursor: Custom GPU-accelerated cursor trail using Three.js and GLSL.
• Dynamic Theming: Configuration of colors, fonts, and layouts via environment variables.
• Social Link Mapping: Automatic generation of social icons based on env var naming conventions.
• Responsive Design: Optimized for mobile, tablet, and desktop viewports.
• Visual Effects: Glassmorphism and blur effects with high-quality visual feedback.
• Docker Integration: Multi-stage Dockerfile and Docker Compose setup.

Tech Stack

• Framework: SvelteKit (Svelte 5)
• Styling: SCSS, CSS Custom Properties
• Graphics: Three.js (Custom Shaders)
• Icons: Font Awesome
• Deployment: Node.js (Adapter-Node), Docker

Getting Started

Prerequisites

• Node.js (>= 20.x, recommended: 25.9.0)
• npm

Local Development

1. Clone the repository:

   git clone https://github.com/Dimen7/landing-page.git
   cd landing-page
   

2. Install dependencies:

   npm install
   

3. Configure environment: Copy the example environment file and adjust the values:

   cp .env.example .env
   

4. Start the development server:

   npm run dev
   

   Access the site at http://localhost:5173.

iOS & Mobile Development

For local development on iOS (Safari), YouTube background videos are often blocked when using a local IP address (e.g., http://192.168.x.x). To test full functionality including auto-play and audio on mobile, it is recommended to use ngrok to provide a secure HTTPS tunnel and a valid domain.

1. Install ngrok and authenticate.
2. Start a tunnel to your local dev server:

   ngrok http 5173
   

3. Copy the https://... URL provided by ngrok and open it on your mobile device.

Note: The vite.config.ts is pre-configured to allow .ngrok-free.dev hosts.

Deployment Troubleshooting (Cloudflare)

If your YouTube background video shows "Video not available" after deploying with Cloudflare, you likely need to adjust your Referrer Policy. YouTube requires a valid referrer to verify the origin of the API request.

1. Go to your Cloudflare Dashboard.
2. Navigate to Rules -> Transform Rules -> Modify Response Header.
   • Direct Link
3. Create a new rule:
   • Name: YouTube Referrer Fix
   • Match: All incoming requests
   • Header: Set static Referrer-Policy to no-referrer-when-downgrade
4. Deploy the rule.

Docker Deployment

The project uses a multi-stage Docker build and the SvelteKit Node adapter.

1. Start the container:

   docker compose up -d
   

2. Access the application: The site is served at http://localhost:3000.

3. Updating the configuration: Since this project uses dynamic environment variables, you do not need to rebuild the Docker image when changing values in your .env file. Simply restart the container to apply the changes:

   docker compose up -d
   

Using Pre-built Docker Image

Instead of building locally, you can pull the pre-built image from GitHub Container Registry:

docker pull ghcr.io/dimen7/landing-page:latest
docker run -d -p 3000:3000 --env-file .env ghcr.io/dimen7/landing-page:latest

The image is automatically built and pushed on every push to the main branch.

Configuration

Personalization is handled exclusively through .env variables.

General Information

Theme & Colors (CSS)

Visual Effects & Cursor

Localization & Bio

Social Media Links

Define social links by using the PUBLIC_SOCIAL_ prefix followed by an icon name (e.g., GITHUB, DISCORD, X, ENVELOPE). Icons are automatically mapped via Font Awesome.

A full list of supported icon identifiers can be found in SOCIALS.md.

PUBLIC_SOCIAL_GITHUB="https://github.com/example"
PUBLIC_SOCIAL_DISCORD="https://discord.com"

Available Scripts

• npm run dev: Start development server.
• npm run build: Build the application for production.
• npm run preview: Preview the production build locally.
• npm run check: Run Svelte and TypeScript diagnostic checks.
• npm run lint: Run ESLint and Prettier checks.
• npm run format: Auto-format the codebase.

License

This project is licensed under the GNU General Public License.