mirror of
https://github.com/danielmiessler/Fabric.git
synced 2026-01-09 14:28:01 -05:00
Deleted: Moved Components from /home to respective dirs
This commit is contained in:
John
@@ -1,141 +0,0 @@
|
||||
<!-- Note: This can be deleted. It is now in components/ui/connections/Connections.svelte -->
|
||||
|
||||
<!-- <script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { ParticleSystem } from './ParticleSystem';
|
||||
import { createParticleGradient } from '$lib/utils/canvas';
|
||||
|
||||
export let particleCount = 100;
|
||||
export let particleSize = 3;
|
||||
export let particleSpeed = 0.5;
|
||||
export let connectionDistance = 100;
|
||||
|
||||
let canvas: HTMLCanvasElement;
|
||||
let ctx: CanvasRenderingContext2D;
|
||||
let animationFrame: number;
|
||||
let particleSystem: ParticleSystem;
|
||||
let isMouseOver = false;
|
||||
let browser = false;
|
||||
|
||||
function handleMouseMove(event: MouseEvent) {
|
||||
if (!isMouseOver) return;
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const x = event.clientX - rect.left;
|
||||
const y = event.clientY - rect.top;
|
||||
particleSystem?.updateMousePosition(x, y);
|
||||
}
|
||||
|
||||
function handleMouseEnter() {
|
||||
isMouseOver = true;
|
||||
}
|
||||
|
||||
function handleMouseLeave() {
|
||||
isMouseOver = false;
|
||||
const centerX = canvas.width / 2;
|
||||
const centerY = canvas.height / 2;
|
||||
particleSystem?.updateMousePosition(centerX, centerY);
|
||||
}
|
||||
|
||||
function handleResize() {
|
||||
if (!browser) return;
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||
particleSystem?.updateDimensions(canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
function drawConnections() {
|
||||
const particles = particleSystem.getParticles();
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
for (let i = 0; i < particles.length; i++) {
|
||||
for (let j = i + 1; j < particles.length; j++) {
|
||||
const dx = particles[i].x - particles[j].x;
|
||||
const dy = particles[i].y - particles[j].y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < connectionDistance) {
|
||||
const alpha = 1 - (distance / connectionDistance);
|
||||
ctx.strokeStyle = `rgba(255, 255, 255, ${alpha * 0.15})`; // Slightly reduced opacity
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(particles[i].x, particles[i].y);
|
||||
ctx.lineTo(particles[j].x, particles[j].y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawParticles() {
|
||||
const particles = particleSystem.getParticles();
|
||||
|
||||
particles.forEach(particle => {
|
||||
const gradient = createParticleGradient(
|
||||
ctx,
|
||||
particle.x,
|
||||
particle.y,
|
||||
particle.size,
|
||||
particle.color
|
||||
);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
function animate() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
particleSystem.update();
|
||||
drawConnections();
|
||||
drawParticles();
|
||||
|
||||
animationFrame = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
browser = true;
|
||||
if (!browser) return;
|
||||
|
||||
ctx = canvas.getContext('2d')!;
|
||||
handleResize();
|
||||
|
||||
particleSystem = new ParticleSystem(
|
||||
particleCount,
|
||||
particleSize,
|
||||
particleSpeed,
|
||||
canvas.width,
|
||||
canvas.height
|
||||
);
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
animationFrame = requestAnimationFrame(animate);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (!browser) return;
|
||||
window.removeEventListener('resize', handleResize);
|
||||
cancelAnimationFrame(animationFrame);
|
||||
});
|
||||
</script>
|
||||
|
||||
<canvas
|
||||
bind:this={canvas}
|
||||
on:mousemove={handleMouseMove}
|
||||
on:mouseenter={handleMouseEnter}
|
||||
on:mouseleave={handleMouseLeave}
|
||||
class="particle-wave"
|
||||
/>
|
||||
|
||||
<style>
|
||||
.particle-wave {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
</style> -->
|
||||
@@ -1,112 +0,0 @@
|
||||
// Note: This can be deleted. It is now in components/ui/connections/ParticleSystem.ts
|
||||
|
||||
//import type { Particle } from '$lib/types/interfaces/particle';
|
||||
//import { generateGradientColor } from '$lib/utils/colors';
|
||||
//
|
||||
//export class ParticleSystem {
|
||||
// private particles: Particle[] = [];
|
||||
// private width: number;
|
||||
// private height: number;
|
||||
// private mouseX: number = 0;
|
||||
// private mouseY: number = 0;
|
||||
// private targetMouseX: number = 0;
|
||||
// private targetMouseY: number = 0;
|
||||
//
|
||||
// constructor(
|
||||
// private readonly count: number,
|
||||
// private readonly baseSize: number,
|
||||
// private readonly speed: number,
|
||||
// width: number,
|
||||
// height: number
|
||||
// ) {
|
||||
// this.width = width;
|
||||
// this.height = height;
|
||||
// this.mouseX = width / 2;
|
||||
// this.mouseY = height / 2;
|
||||
// this.targetMouseX = this.mouseX;
|
||||
// this.targetMouseY = this.mouseY;
|
||||
// this.initParticles();
|
||||
// }
|
||||
//
|
||||
// private initParticles(): void {
|
||||
// this.particles = [];
|
||||
// for (let i = 0; i < this.count; i++) {
|
||||
// // Distribute particles across the entire width
|
||||
// const x = Math.random() * this.width;
|
||||
// // Distribute particles vertically around the middle with some variation
|
||||
// const yOffset = (Math.random() - 0.5) * 100;
|
||||
//
|
||||
// this.particles.push({
|
||||
// x,
|
||||
// y: this.height / 2 + yOffset,
|
||||
// baseY: this.height / 2 + yOffset,
|
||||
// speed: (Math.random() - 0.5) * this.speed * 0.5, // Reduced base speed
|
||||
// angle: Math.random() * Math.PI * 2,
|
||||
// size: this.baseSize * (0.8 + Math.random() * 0.4),
|
||||
// color: generateGradientColor(this.height / 2 + yOffset, this.height),
|
||||
// velocityX: (Math.random() - 0.5) * this.speed // Reduced initial velocity
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// public updateDimensions(width: number, height: number): void {
|
||||
// this.width = width;
|
||||
// this.height = height;
|
||||
// this.mouseX = width / 2;
|
||||
// this.mouseY = height / 2;
|
||||
// this.targetMouseX = this.mouseX;
|
||||
// this.targetMouseY = this.mouseY;
|
||||
// this.initParticles();
|
||||
// }
|
||||
//
|
||||
// public updateMousePosition(x: number, y: number): void {
|
||||
// this.targetMouseX = x;
|
||||
// this.targetMouseY = y;
|
||||
// }
|
||||
//
|
||||
// public update(): void {
|
||||
// // Smooth mouse movement
|
||||
// this.mouseX += (this.targetMouseX - this.mouseX) * 0.05; // Slower mouse tracking
|
||||
// this.mouseY += (this.targetMouseY - this.mouseY) * 0.05;
|
||||
//
|
||||
// this.particles.forEach(particle => {
|
||||
// // Update horizontal position with constant motion
|
||||
// particle.x += particle.velocityX;
|
||||
//
|
||||
// // Wave motion
|
||||
// particle.angle += particle.speed;
|
||||
// const waveAmplitude = 30 * (this.mouseY / this.height); // Reduced amplitude
|
||||
// const frequencyFactor = (this.mouseX / this.width);
|
||||
//
|
||||
// // Calculate vertical position with wave effect
|
||||
// particle.y = particle.baseY +
|
||||
// Math.sin(particle.angle * frequencyFactor + particle.x * 0.01) * // Slower wave
|
||||
// waveAmplitude;
|
||||
//
|
||||
// // Update particle color based on position
|
||||
// particle.color = generateGradientColor(particle.y, this.height);
|
||||
//
|
||||
// // Screen wrapping with position preservation
|
||||
// if (particle.x < 0) {
|
||||
// particle.x = this.width;
|
||||
// particle.baseY = this.height / 2 + (Math.random() - 0.5) * 100;
|
||||
// }
|
||||
// if (particle.x > this.width) {
|
||||
// particle.x = 0;
|
||||
// particle.baseY = this.height / 2 + (Math.random() - 0.5) * 100;
|
||||
// }
|
||||
//
|
||||
// // Very subtle velocity adjustment to maintain spread
|
||||
// if (Math.abs(particle.velocityX) < 0.1) {
|
||||
// particle.velocityX += (Math.random() - 0.5) * 0.02;
|
||||
// }
|
||||
//
|
||||
// // Gentle velocity dampening
|
||||
// particle.velocityX *= 0.99;
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// public getParticles(): Particle[] {
|
||||
// return this.particles;
|
||||
// }
|
||||
//}
|
||||
@@ -1,184 +0,0 @@
|
||||
<!-- This file can be deleted. It is now in ui/components/terminal/Terminal.svelte -->
|
||||
|
||||
<!-- <script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
// import { fade } from 'svelte/transition';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let mounted = false;
|
||||
let currentCommand = '';
|
||||
let commandHistory: string[] = [];
|
||||
let showCursor = true;
|
||||
|
||||
let terminalContent = '';
|
||||
let typing = false;
|
||||
|
||||
const pages = {
|
||||
home: 'Welcome to Fabric\n\nType `help` to see available commands.',
|
||||
about: 'About Fabric',
|
||||
chat: 'Enter `chat` to start a chat session.',
|
||||
posts: 'Enter `posts` to view blog posts.',
|
||||
tags: 'Enter `tags` to view tags.',
|
||||
contact: 'Enter `contact` to view contact info.',
|
||||
help: `Available commands:
|
||||
- help: Show this help message
|
||||
- about: Navigate to About page
|
||||
- chat: Start a chat session
|
||||
- posts: View all blog posts
|
||||
- tags: Browse content by tags
|
||||
- contact: Get in touch
|
||||
- clear: Clear the terminal
|
||||
- ls: List available pages`,
|
||||
};
|
||||
|
||||
// Simulate typing effect
|
||||
async function typeContent(content: string) {
|
||||
typing = true;
|
||||
terminalContent = '';
|
||||
for (const char of content) {
|
||||
terminalContent += char;
|
||||
await new Promise(resolve => setTimeout(resolve, 20));
|
||||
}
|
||||
typing = false;
|
||||
}
|
||||
|
||||
function handleCommand(cmd: string) {
|
||||
commandHistory = [...commandHistory, cmd];
|
||||
|
||||
switch (cmd) {
|
||||
case 'clear':
|
||||
terminalContent = '';
|
||||
break;
|
||||
case 'help':
|
||||
typeContent(pages.help);
|
||||
break;
|
||||
case 'about':
|
||||
goto('/about');
|
||||
break;
|
||||
case 'chat':
|
||||
goto('/chat');
|
||||
break;
|
||||
case 'posts':
|
||||
goto('/posts');
|
||||
break;
|
||||
case 'tags':
|
||||
goto('/tags');
|
||||
break;
|
||||
case 'contact':
|
||||
goto('/contact');
|
||||
break;
|
||||
case 'ls':
|
||||
typeContent(Object.keys(pages).join('\n'));
|
||||
break;
|
||||
default:
|
||||
const page = cmd.slice(3);
|
||||
if (pages[page]) {
|
||||
typeContent(pages[page]);
|
||||
} else {
|
||||
typeContent(`Error: Page '${page}' not found`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (typing) return;
|
||||
|
||||
if (event.key === 'Enter') {
|
||||
handleCommand(currentCommand.trim());
|
||||
currentCommand = '';
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
mounted = true;
|
||||
setInterval(() => {
|
||||
showCursor = !showCursor;
|
||||
}, 500);
|
||||
|
||||
// Initial content
|
||||
typeContent(pages.home);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="pt-2 pb-8 px-4">
|
||||
<div class="container mx-auto max-w-4xl">
|
||||
<div class="terminal-window backdrop-blur-sm">
|
||||
<!-- Terminal header
|
||||
Comment Continued -->
|
||||
<!-- <div class="terminal-header flex items-center gap-2 px-4 py-2 border-b border-gray-700/50">
|
||||
<div class="flex gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-500/80"></div>
|
||||
</div>
|
||||
<span class="text-sm text-gray-400 ml-2">me@localhost</span>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="mb-4 whitespace-pre-wrap terminal-text leading-relaxed">{terminalContent}</div>
|
||||
|
||||
<!-- Command input
|
||||
Comment Continued -->
|
||||
<!-- {#if mounted}
|
||||
<div class="flex items-center command-input">
|
||||
<span class="mr-2 terminal-prompt font-bold">$</span>
|
||||
<!-- {#if showCursor}
|
||||
<span class="animate-blink terminal-text">▋</span>
|
||||
{/if} -->
|
||||
<!-- <input
|
||||
type="text"
|
||||
bind:value={currentCommand}
|
||||
on:keydown={handleKeydown}
|
||||
class="flex-1 bg-transparent border-none outline-none terminal-text caret-primary-500"
|
||||
placeholder="Type a command..."
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.terminal-window {
|
||||
@apply rounded-lg border border-gray-700/50 bg-gray-900/95 shadow-2xl;
|
||||
box-shadow: 0 0 60px -15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.terminal-text {
|
||||
@apply font-mono text-green-400/90;
|
||||
}
|
||||
|
||||
.terminal-prompt {
|
||||
@apply text-blue-400/90;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
@apply text-gray-600;
|
||||
}
|
||||
|
||||
/* .animate-blink {
|
||||
animation: blink 1s step-end infinite;
|
||||
flex-col: 1;
|
||||
|
||||
}*/
|
||||
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
@apply w-2;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-gray-800/50 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-600/50 rounded-full hover:bg-gray-500/50 transition-colors;
|
||||
}
|
||||
</style> -->
|
||||
Reference in New Issue
Block a user