Spaces:

Yash-js
/

undefined

Running

App Files Files Community

undefined / portfolio.html

Yash-js

Create a full-stack developer portfolio website. like a hacker. use modern components or ui library for this

4040819 verified 6 months ago

raw

history blame contribute delete

26.1 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ByteWizard - Full Stack Developer</title>
	<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script>
	<script src="https://unpkg.com/lucide-react@0.263.1/dist/umd/lucide-react.js"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

	* {
	font-family: 'JetBrains Mono', monospace;
	}

	body {
	background: #0a0a0a;
	color: #00ff41;
	overflow-x: hidden;
	}

	.matrix-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	}

	.glitch-text {
	position: relative;
	display: inline-block;
	}

	.glitch-text::before,
	.glitch-text::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	.glitch-text::before {
	left: 2px;
	text-shadow: -1px 0 #ff0080;
	clip: rect(44px, 450px, 56px, 0);
	animation: glitch-anim 5s infinite linear alternate-reverse;
	}

	.glitch-text::after {
	left: -2px;
	text-shadow: -1px 0 #00ffff;
	clip: rect(44px, 450px, 56px, 0);
	animation: glitch-anim2 5s infinite linear alternate-reverse;
	}

	@keyframes glitch-anim {
	0% { clip: rect(42px, 9999px, 44px, 0); }
	5% { clip: rect(12px, 9999px, 59px, 0); }
	10% { clip: rect(48px, 9999px, 29px, 0); }
	15% { clip: rect(42px, 9999px, 38px, 0); }
	20% { clip: rect(15px, 9999px, 36px, 0); }
	25% { clip: rect(14px, 9999px, 40px, 0); }
	30% { clip: rect(50px, 9999px, 5px, 0); }
	35% { clip: rect(53px, 9999px, 27px, 0); }
	40% { clip: rect(31px, 9999px, 28px, 0); }
	45% { clip: rect(14px, 9999px, 53px, 0); }
	50% { clip: rect(35px, 9999px, 9px, 0); }
	55% { clip: rect(55px, 9999px, 40px, 0); }
	60% { clip: rect(46px, 9999px, 16px, 0); }
	65% { clip: rect(10px, 9999px, 2px, 0); }
	70% { clip: rect(5px, 9999px, 46px, 0); }
	75% { clip: rect(14px, 9999px, 39px, 0); }
	80% { clip: rect(14px, 9999px, 33px, 0); }
	85% { clip: rect(27px, 9999px, 29px, 0); }
	90% { clip: rect(48px, 9999px, 2px, 0); }
	95% { clip: rect(33px, 9999px, 17px, 0); }
	100% { clip: rect(36px, 9999px, 54px, 0); }
	}

	@keyframes glitch-anim2 {
	0% { clip: rect(65px, 9999px, 34px, 0); }
	5% { clip: rect(26px, 9999px, 50px, 0); }
	10% { clip: rect(85px, 9999px, 15px, 0); }
	15% { clip: rect(91px, 9999px, 58px, 0); }
	20% { clip: rect(85px, 9999px, 53px, 0); }
	25% { clip: rect(6px, 9999px, 85px, 0); }
	30% { clip: rect(16px, 9999px, 14px, 0); }
	35% { clip: rect(87px, 9999px, 94px, 0); }
	40% { clip: rect(23px, 9999px, 49px, 0); }
	45% { clip: rect(50px, 9999px, 6px, 0); }
	50% { clip: rect(64px, 9999px, 1px, 0); }
	55% { clip: rect(48px, 9999px, 77px, 0); }
	60% { clip: rect(14px, 9999px, 79px, 0); }
	65% { clip: rect(63px, 9999px, 81px, 0); }
	70% { clip: rect(23px, 9999px, 91px, 0); }
	75% { clip: rect(32px, 9999px, 48px, 0); }
	80% { clip: rect(66px, 9999px, 68px, 0); }
	85% { clip: rect(66px, 9999px, 88px, 0); }
	90% { clip: rect(83px, 9999px, 13px, 0); }
	95% { clip: rect(85px, 9999px, 97px, 0); }
	100% { clip: rect(72px, 9999px, 42px, 0); }
	}

	.terminal {
	background: rgba(0, 0, 0, 0.9);
	border: 1px solid #00ff41;
	border-radius: 8px;
	padding: 20px;
	font-family: 'Share Tech Mono', monospace;
	position: relative;
	overflow: hidden;
	}

	.terminal::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(transparent 50%, rgba(0, 255, 65, 0.1) 50%);
	background-size: 100% 4px;
	z-index: 1;
	pointer-events: none;
	}

	.command-line {
	color: #00ff41;
	}

	.cursor {
	display: inline-block;
	width: 8px;
	height: 16px;
	background: #00ff41;
	animation: blink 1s infinite;
	}

	@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
	}

	.hacker-card {
	background: rgba(0, 20, 0, 0.8);
	border: 1px solid #00ff41;
	border-radius: 8px;
	padding: 20px;
	position: relative;
	overflow: hidden;
	}

	.hacker-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, transparent 30%, rgba(0, 255, 65, 0.1));
	z-index: 0;
	}

	.skill-bar {
	height: 8px;
	background: #003300;
	border-radius: 4px;
	overflow: hidden;
	}

	.skill-progress {
	height: 100%;
	background: linear-gradient(90deg, #00ff41, #00cc33);
	transition: width 2s ease-in-out;
	}

	.matrix-char {
	position: absolute;
	color: #00ff41;
	font-family: 'Share Tech Mono', monospace;
	opacity: 0.8;
	animation: matrix-fall linear infinite;
	}

	@keyframes matrix-fall {
	0% { transform: translateY(-100px); opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { transform: translateY(100vh); opacity: 0; }
	}

	.typewriter {
	overflow: hidden;
	border-right: 2px solid #00ff41;
	white-space: nowrap;
	animation: typing 3.5s steps(40, end);
	}

	@keyframes typing {
	from { width: 0 }
	to { width: 100% }
	}

	.hacker-nav {
	background: rgba(0, 20, 0, 0.9);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid #00ff41;
	}

	.project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	}

	.project-card {
	background: rgba(0, 30, 0, 0.6);
	border: 1px solid #00ff41;
	border-radius: 8px;
	padding: 20px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	}

	.project-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
	}

	.project-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2), transparent);
	animation: scan 3s linear infinite;
	}

	@keyframes scan {
	0% { left: -100%; }
	100% { left: 100%; }
	}
	</style>
	</head>
	<body class="bg-black text-green-400">
	<!-- Matrix Background -->
	<div id="matrix-bg" class="matrix-bg"></div>

	<!-- Navigation -->
	<nav class="hacker-nav fixed w-full z-50">
	<div class="container mx-auto px-4 py-4">
	<div class="flex justify-between items-center">
	<div class="glitch-text text-xl font-bold" data-text="BYTEWIZARD">BYTEWIZARD</div>
	<div class="flex space-x-6">
	<a href="#about" class="hover:text-green-200 transition-colors">[ABOUT]</a>
	<a href="#skills" class="hover:text-green-200 transition-colors">[SKILLS]</a>
	<a href="#projects" class="hover:text-green-200 transition-colors">[PROJECTS]</a>
	<a href="#contact" class="hover:text-green-200 transition-colors">[CONTACT]</a>
	</div>
	</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<section class="min-h-screen flex items-center justify-center relative pt-16">
	<div class="container mx-auto px-4 text-center">
	<motion.div
	initial={{ opacity: 0, y: 50 }}
	animate={{ opacity: 1, y: 0 }}
	transition={{ duration: 1 }}
	class="terminal max-w-4xl mx-auto"
	>
	<div class="text-left">
	<div class="command-line mb-4">
	<span class="text-green-300">root@bytewizard:~$</span> whoami
	</div>
	<div class="text-4xl md:text-6xl font-bold mb-4 typewriter">
	<span class="glitch-text" data-text="BYTEWIZARD">BYTEWIZARD</div>
	<div class="command-line mb-4">
	<span class="text-green-300">root@bytewizard:~$</span> cat bio.txt
	</div>
	<div class="text-lg md:text-xl mb-6">
	<span class="text-green-200">></span> FULL STACK DEVELOPER & CYBER SECURITY ENTHUSIAST
	</div>
	<div class="command-line">
	<span class="text-green-300">root@bytewizard:~$</span> _
	<span class="cursor"></span>
	</div>
	</div>
	</motion.div>
	</div>
	</section>

	<!-- About Section -->
	<section id="about" class="py-20">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold mb-8 text-center">[ABOUT_ME]</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
	<div class="hacker-card">
	<h3 class="text-xl font-bold mb-4 text-green-300">SYSTEM_INFO</h3>
	<div class="space-y-2">
	<div><span class="text-green-200">NAME:</span> ByteWizard</div>
	<div><span class="text-green-200">ROLE:</span> Full Stack Developer</div>
	<div><span class="text-green-200">LOCATION:</span> Digital Realm</div>
	<div><span class="text-green-200">SPECIALTY:</span> Breaking & Building Systems</div>
	<div><span class="text-green-200">STATUS:</span> <span class="text-green-400">ACTIVE</span></div>
	</div>
	</div>
	<div class="hacker-card">
	<h3 class="text-xl font-bold mb-4 text-green-300">MISSION</h3>
	<p class="text-green-200 leading-relaxed">
	I specialize in creating robust, scalable applications while maintaining
	security-first principles. My code doesn't just work—it withstands.
	</p>
	</div>
	</div>
	</section>

	<!-- Skills Section -->
	<section id="skills" class="py-20 bg-gray-900">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold mb-8 text-center">[TECH_STACK]</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
	<div class="hacker-card">
	<h3 class="text-xl font-bold mb-4 text-green-300">FRONTEND_WEAPONS</h3>
	<div class="space-y-4">
	<div>
	<div class="flex justify-between mb-1">
	<span>React.js</span>
	<span>95%</span>
	</div>
	<div class="skill-bar">
	<div class="skill-progress" style="width: 95%"></div>
	</div>
	<div>
	<div class="flex justify-between mb-1">
	<span>TypeScript</span>
	<span>90%</span>
	</div>
	<div class="skill-bar">
	<div class="skill-progress" style="width: 90%"></div>
	</div>
	<div>
	<div class="flex justify-between mb-1">
	<span>Next.js</span>
	<span>88%</span>
	</div>
	</div>
	</div>
	<div class="hacker-card">
	<h3 class="text-xl font-bold mb-4 text-green-300">BACKEND_ARTILLERY</h3>
	<div class="space-y-4">
	<div>
	<div class="flex justify-between mb-1">
	<span>Node.js</span>
	<span>92%</span>
	</div>
	<div class="skill-bar">
	<div class="skill-progress" style="width: 92%"></div>
	</div>
	<div>
	<div class="flex justify-between mb-1">
	<span>Python</span>
	<span>85%</span>
	</div>
	<div class="skill-bar">
	<div class="skill-progress" style="width: 85%"></div>
	</div>
	<div>
	<div class="flex justify-between mb-1">
	<span>PostgreSQL</span>
	<span>88%</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Projects Section -->
	<section id="projects" class="py-20">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold mb-8 text-center">[OPERATIONS]</h2>
	<div class="project-grid">
	<div class="project-card">
	<h3 class="text-xl font-bold mb-2 text-green-300">CRYPTO_VAULT</h3>
	<p class="text-green-200 mb-4">
	Secure cryptocurrency wallet with multi-signature authentication
	and zero-knowledge proofs for enhanced privacy.
	</p>
	<div class="flex flex-wrap gap-2 mb-4">
	<span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
	React
	</span>
	<span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
	Node.js
	</span>
	<span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
	Blockchain
	</span>
	</div>
	<button class="px-4 py-2 bg-green-900 border border-green-700 rounded hover:bg-green-800 transition-colors">
	ACCESS_PROJECT
	</button>
	</div>

	<div class="project-card">
	<h3 class="text-xl font-bold mb-2 text-green-300">CYBER_DASH</h3>
	<p class="text-green-200 mb-4">
	Real-time cybersecurity dashboard monitoring network traffic,
	threat detection, and system vulnerabilities.
	</p>
	<div class="flex flex-wrap gap-2 mb-4">
	<span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
	Next.js
	</span>
	<span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
	TypeScript
	</span>
	<span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
	WebSocket
	</span>
	</div>
	<button class="px-4 py-2 bg-green-900 border border-green-700 rounded hover:bg-green-800 transition-colors">
	ACCESS_PROJECT
	</button>
	</div>

	<div class="project-card">
	<h3 class="text-xl font-bold mb-2 text-green-300">AI_CODER</h3>
	<p class="text-green-200 mb-4">
	Intelligent code assistant leveraging machine learning
	to suggest optimizations and detect security vulnerabilities.
	</p>
	<div class="flex flex-wrap gap-2 mb-4">
	<span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
	Python
	</span>
	<span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
	TensorFlow
	</span>
	<span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
	FastAPI
	</span>
	</div>
	<button class="px-4 py-2 bg-green-900 border border-green-700 rounded hover:bg-green-800 transition-colors">
	ACCESS_PROJECT
	</button>
	</div>
	</div>
	</section>

	<!-- Contact Section -->
	<section id="contact" class="py-20 bg-gray-900">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold mb-8 text-center">[ESTABLISH_CONNECTION]</h2>
	<div class="max-w-2xl mx-auto">
	<div class="hacker-card">
	<h3 class="text-xl font-bold mb-4 text-green-300">CONTACT_PROTOCOL</h3>
	<form class="space-y-4">
	<div>
	<label class="block text-green-200 mb-2">EMAIL:</label>
	<input type="email" class="w-full px-3 py-2 bg-black border border-green-700 rounded focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="user@domain.com">
	</div>
	<div>
	<label class="block text-green-200 mb-2">MESSAGE:</label>
	<textarea rows="4" class="w-full px-3 py-2 bg-black border border-green-700 rounded focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="BEGIN_TRANSMISSION..."></textarea>
	</div>
	<button type="submit" class="px-6 py-3 bg-green-900 border border-green-700 rounded hover:bg-green-800 transition-colors">
	SEND_PACKET
	</button>
	</form>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="py-8 border-t border-green-800">
	<div class="container mx-auto px-4 text-center">
	<div class="flex justify-center space-x-6 mb-4">
	<a href="#" class="hover:text-green-200 transition-colors">GITHUB</a>
	<a href="#" class="hover:text-green-200 transition-colors">LINKEDIN</a>
	<a href="#" class="hover:text-green-200 transition-colors">TWITTER</a>
	</div>
	<p class="text-green-600 text-sm">
	© 2024 BYTEWIZARD. ALL SYSTEMS OPERATIONAL.
	</p>
	</div>
	</footer>

	<script type="text/babel">
	const { useState, useEffect, useRef } = React;
	const { motion, AnimatePresence } = FramerMotion;
	const { Code, Cpu, Shield, Zap, Terminal, Mail, Github, Linkedin, Twitter } = LucideReact;

	// Matrix Background Effect
	function MatrixBackground() {
	const canvasRef = useRef(null);

	useEffect(() => {
	const canvas = canvasRef.current;
	const ctx = canvas.getContext('2d');

	// Set canvas size
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	const chars = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
	const charArray = chars.split('');
	const fontSize = 14;
	const columns = canvas.width / fontSize;
	const drops = Array(Math.floor(columns)).fill(1);

	function draw() {
	ctx.fillStyle = 'rgba(0, 0, 0, 0.05)";
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	ctx.fillStyle = '#00ff41';
	ctx.font = `${fontSize}px 'Share Tech Mono'`;

	drops.forEach((drop, i) => {
	const char = charArray[Math.floor(Math.random() * charArray.length)];
	ctx.fillText(char, i * fontSize, drops[i] * fontSize);

	if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
	drops[i] = 0;
	}
	drops[i]++;
	});
	}

	const interval = setInterval(draw, 33);

	return () => clearInterval(interval);
	}, []);

	return <canvas ref={canvasRef} className="matrix-bg" />;
	}

	// Typewriter Effect Component
	function Typewriter({ text, speed = 50 }) {
	const [displayText, setDisplayText] = useState('');

	useEffect(() => {
	let i = 0;
	const timer = setInterval(() => {
	if (i < text.length) {
	setDisplayText(text.slice(0, i + 1));
	i++;
	}, speed);

	return () => clearInterval(timer);
	}, [text, speed]);

	return <span>{displayText}</span>;
	}

	// Main App
	function App() {
	return (
	<div className="relative">
	<MatrixBackground />
	{/* Content is already in the HTML above */}
	</div>
	);
	}

	// Render the app
	const root = ReactDOM.createRoot(document.getElementById('root'));
	root.render(<App />);
	</script>
	</body>
	</html>