create-neon-flux 1.0.0

package/components/hooks/useParallax.ts

@@ -0,0 +1,23 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useParallax(speed: number = 0.5) {
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      const x = (e.clientX - window.innerWidth / 2) * speed;
+      const y = (e.clientY - window.innerHeight / 2) * speed;
+      setOffset({ x, y });
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [speed]);
+
+  return offset;
+}

package/components/ui/CyberNav.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export default function CyberNav() {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 50);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const navItems = [
+    { name: 'Home', href: '#home' },
+    { name: 'Portfolio', href: '#portfolio' },
+    { name: 'Skills', href: '#skills' },
+    { name: 'Blog', href: '#blog' },
+    { name: 'About', href: '#about' },
+  ];
+
+  const scrollToSection = (id: string) => {
+    const element = document.getElementById(id);
+    element?.scrollIntoView({ behavior: 'smooth' });
+    setIsMenuOpen(false);
+  };
+
+  return (
+    <nav
+      className={`fixed top-4 left-4 right-4 z-50 transition-all duration-300 rounded-xl ${
+        isScrolled ? 'glass backdrop-blur-md shadow-lg shadow-neon-cyan/10' : 'bg-transparent'
+      }`}
+    >
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-20">
+          {/* Logo */}
+          <a
+            href="#home"
+            onClick={(e) => {
+              e.preventDefault();
+              scrollToSection('home');
+            }}
+            className="font-orbitron text-2xl font-bold text-neon-cyan cursor-pointer"
+          >
+            <span className="neon-text-cyan">NEON</span>
+            <span className="neon-text-pink ml-2">FLUX</span>
+          </a>
+
+          {/* Desktop Menu */}
+          <ul className="hidden md:flex space-x-8">
+            {navItems.map((item, index) => (
+              <li key={index}>
+                <a
+                  href={item.href}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    scrollToSection(item.href.substring(1));
+                  }}
+                  className="font-rajdhani text-lg text-neon-cyan hover:text-neon-pink transition-colors duration-300 neon-glow-hover cursor-pointer focus:outline-none focus:text-neon-pink"
+                >
+                  {item.name}
+                </a>
+              </li>
+            ))}
+          </ul>
+
+          {/* CTA Button */}
+          <button
+            className="hidden md:block neon-button text-sm"
+            onClick={() => scrollToSection('portfolio')}
+          >
+            View Portfolio
+          </button>
+
+          {/* Mobile Menu Button */}
+          <button
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            className="md:hidden text-neon-cyan cursor-pointer focus:outline-none focus:ring-2 focus:ring-neon-cyan focus:ring-offset-2 focus:ring-offset-cyber-black rounded-md p-1"
+            aria-label="Toggle menu"
+          >
+            <div className="w-6 h-5 flex flex-col justify-between">
+              <span
+                className={`block h-0.5 w-full bg-current transform transition-all duration-300 ${
+                  isMenuOpen ? 'rotate-45 translate-y-2' : ''
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-full bg-current transition-all duration-300 ${
+                  isMenuOpen ? 'opacity-0' : 'opacity-100'
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-full bg-current transform transition-all duration-300 ${
+                  isMenuOpen ? '-rotate-45 -translate-y-2' : ''
+                }`}
+              />
+            </div>
+          </button>
+        </div>
+
+        {/* Mobile Menu */}
+        {isMenuOpen && (
+          <div className="md:hidden glass rounded-lg mt-2 mb-4 p-4">
+            <ul className="space-y-4">
+              {navItems.map((item, index) => (
+                <li key={index}>
+                  <a
+                    href={item.href}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      scrollToSection(item.href.substring(1));
+                    }}
+                    className="block font-rajdhani text-lg text-neon-cyan hover:text-neon-pink transition-colors duration-300 cursor-pointer focus:outline-none focus:text-neon-pink"
+                  >
+                    {item.name}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}

package/components/ui/HologramCard.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ReactNode, useState } from 'react';
+import Image from 'next/image';
+
+interface HologramCardProps {
+  title: string;
+  description: string;
+  image?: string;
+  tags?: string[];
+  link?: string;
+  children?: ReactNode;
+  delay?: number;
+}
+
+export default function HologramCard({
+  title,
+  description,
+  image,
+  tags = [],
+  link,
+  children,
+  delay = 0,
+}: HologramCardProps) {
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 50 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6, delay }}
+      viewport={{ once: true }}
+      className="group relative glass rounded-lg p-6 cursor-pointer hover:shadow-neon-cyan hover:border-neon-cyan/50 transition-all duration-300"
+    >
+      {/* Hologram border effect - single cyan glow */}
+      <div className="absolute inset-0 rounded-lg bg-neon-cyan/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-md" />
+
+      <div className="relative z-10">
+        {/* Image */}
+        {image && (
+          <div className="relative w-full h-48 mb-4 rounded-lg overflow-hidden bg-cyber-dark">
+            {/* Skeleton loader */}
+            {!imageLoaded && (
+              <div className="absolute inset-0 bg-cyber-dark animate-pulse">
+                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-neon-cyan/5 to-transparent animate-[shimmer_2s_infinite]" />
+              </div>
+            )}
+            <Image
+              src={image}
+              alt={title}
+              fill
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              className={`object-cover transition-opacity duration-500 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+              onLoad={() => setImageLoaded(true)}
+              loading="lazy"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-cyber-black/80 to-transparent" />
+          </div>
+        )}
+
+        {/* Title */}
+        <h3 className="text-2xl font-orbitron font-bold text-neon-cyan mb-3 group-hover:text-neon-pink transition-colors">
+          {title}
+        </h3>
+
+        {/* Description */}
+        <p className="text-neon-cyan/80 mb-4 leading-relaxed">{description}</p>
+
+        {/* Tags */}
+        {tags.length > 0 && (
+          <div className="flex flex-wrap gap-2 mb-4">
+            {tags.map((tag, index) => (
+              <span
+                key={index}
+                className="px-3 py-1 text-xs font-space-mono bg-cyber-dark border border-neon-cyan/30 text-neon-cyan rounded-full"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Custom children */}
+        {children}
+
+        {/* Link */}
+        {link && (
+          <a
+            href={link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-block mt-4 text-neon-pink hover:text-neon-yellow transition-colors font-space-mono cursor-pointer focus:outline-none focus:ring-2 focus:ring-neon-pink focus:ring-offset-2 focus:ring-offset-cyber-black rounded"
+          >
+            View Project →
+          </a>
+        )}
+      </div>
+
+      {/* Corner accents */}
+      <div className="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-neon-cyan" />
+      <div className="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-neon-cyan" />
+      <div className="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-neon-cyan" />
+      <div className="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-neon-cyan" />
+    </motion.div>
+  );
+}

package/components/ui/NeonButton.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { ButtonHTMLAttributes } from 'react';
+
+interface NeonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary';
+  children: React.ReactNode;
+}
+
+export default function NeonButton({
+  variant = 'primary',
+  children,
+  className = '',
+  ...props
+}: NeonButtonProps) {
+  const baseClasses = 'neon-button neon-pulse';
+  const variantClasses = variant === 'primary' ? '' : 'neon-border-pink text-neon-pink';
+
+  return (
+    <button
+      className={`${baseClasses} ${variantClasses} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/components/ui/Terminal.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+const commands = [
+  { cmd: '$ initializing_neon_flux...', delay: 0 },
+  { cmd: '> Loading cyberpunk assets...', delay: 800 },
+  { cmd: '> Compiling shaders... [OK]', delay: 1600 },
+  { cmd: '> Establishing neural link... [OK]', delay: 2400 },
+  { cmd: '> System ready. Welcome to the future.', delay: 3200 },
+];
+
+export default function Terminal() {
+  const [visibleCommands, setVisibleCommands] = useState<number>(0);
+
+  useEffect(() => {
+    if (visibleCommands < commands.length) {
+      const timer = setTimeout(() => {
+        setVisibleCommands((prev) => prev + 1);
+      }, commands[visibleCommands].delay);
+
+      return () => clearTimeout(timer);
+    }
+  }, [visibleCommands]);
+
+  return (
+    <div className="glass rounded-lg p-6 font-space-mono text-sm">
+      {/* Terminal header */}
+      <div className="flex items-center gap-2 mb-4 pb-3 border-b border-neon-cyan/20">
+        <div className="w-3 h-3 rounded-full bg-neon-pink" />
+        <div className="w-3 h-3 rounded-full bg-neon-yellow" />
+        <div className="w-3 h-3 rounded-full bg-neon-cyan" />
+        <span className="ml-2 text-neon-cyan/60">terminal.jsx</span>
+      </div>
+
+      {/* Terminal content */}
+      <div className="space-y-2">
+        {commands.slice(0, visibleCommands).map((item, index) => (
+          <div
+            key={index}
+            className="text-neon-cyan animate-pulse"
+            style={{ animationDuration: '1s' }}
+          >
+            {item.cmd}
+          </div>
+        ))}
+        {visibleCommands === commands.length && (
+          <div className="flex items-center gap-2 mt-4">
+            <span className="text-neon-pink">$</span>
+            <span className="text-neon-cyan animate-pulse">_</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/next.config.ts

@@ -0,0 +1,16 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ["gsap"],
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+    ],
+  },
+};
+
+export default nextConfig;

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "create-neon-flux",
+  "version": "1.0.0",
+  "description": "Cyberpunk Neon themed Next.js template with rich 3D animations",
+  "keywords": [
+    "nextjs",
+    "template",
+    "cyberpunk",
+    "neon",
+    "gsap",
+    "animation",
+    "canvas",
+    "glitch",
+    "hologram"
+  ],
+  "author": "kpab",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kpab/neon-flux-template.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kpab/neon-flux-template/issues"
+  },
+  "homepage": "https://github.com/kpab/neon-flux-template#readme",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "create-app": "node ./bin/create-app.js"
+  },
+  "bin": {
+    "create-neon-flux": "./bin/create-app.js"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "framer-motion": "^11.0.0",
+    "gsap": "^3.12.0",
+    "lucide-react": "^0.562.0",
+    "next": "^15.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.0",
+    "eslint": "^8.0.0",
+    "eslint-config-next": "^15.0.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.3.0"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

package/styles/animations.css

@@ -0,0 +1,204 @@
+/* Scan Lines Effect */
+.scan-lines {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.scan-lines::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(0, 255, 240, 0.8) 50%,
+    transparent 100%
+  );
+  animation: scan-line 8s linear infinite;
+  box-shadow: 0 0 10px var(--neon-cyan);
+}
+
+.scan-lines::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+    to bottom,
+    transparent 0px,
+    rgba(0, 255, 240, 0.03) 1px,
+    transparent 2px
+  );
+}
+
+@keyframes scan-line {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(100vh);
+  }
+}
+
+/* Floating Animation */
+.float-animation {
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+/* Fade In Animations */
+.fade-in {
+  animation: fade-in 1s ease-in forwards;
+}
+
+.fade-in-up {
+  animation: fade-in-up 1s ease-out forwards;
+}
+
+.fade-in-down {
+  animation: fade-in-down 1s ease-out forwards;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Slide In Animations */
+.slide-in-left {
+  animation: slide-in-left 1s ease-out forwards;
+}
+
+.slide-in-right {
+  animation: slide-in-right 1s ease-out forwards;
+}
+
+@keyframes slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Typewriter Effect */
+.typewriter {
+  overflow: hidden;
+  border-right: 2px solid var(--neon-cyan);
+  white-space: nowrap;
+  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+}
+
+@keyframes typing {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes blink-caret {
+  from, to {
+    border-color: transparent;
+  }
+  50% {
+    border-color: var(--neon-cyan);
+  }
+}
+
+/* Loading Animation */
+.cyber-loader {
+  width: 50px;
+  height: 50px;
+  border: 3px solid var(--cyber-dark);
+  border-top-color: var(--neon-cyan);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Delay utilities */
+.delay-100 {
+  animation-delay: 0.1s;
+}
+
+.delay-200 {
+  animation-delay: 0.2s;
+}
+
+.delay-300 {
+  animation-delay: 0.3s;
+}
+
+.delay-400 {
+  animation-delay: 0.4s;
+}
+
+.delay-500 {
+  animation-delay: 0.5s;
+}