New Desing

DiegoDev2 · Dec 17, 2024 · 04b7892 · 04b7892
1 parent b29ebdb
commit 04b7892
Show file tree

Hide file tree

Showing 57 changed files with 2,031 additions and 775 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -14,22 +14,6 @@
   }
 }
 
-#nprogress .bar {
-  background: #1d4ed8; /* bg-blue-500 */
-  height: 4px;
-}
-
-#nprogress .peg {
-  box-shadow: 0 0 10px #1d4ed8, 0 0 5px #1d4ed8; /* Optional, for a glowing effect */
-}
-
-#nprogress .spinner {
-  border-top-color: #1d4ed8; /* bg-blue-500 */
-}
-
-#nprogress .spinner-icon {
-  border-top-color: #1d4ed8; /* bg-blue-500 */
-}
 
 @media (prefers-color-scheme: dark) {
   :root {
@@ -62,3 +46,13 @@
     --color-5: 90 100% 63%;
   }
 }
+.text-h {
+  transition: all 0.3s ease-in-out;
+}
+body {
+  scroll-behavior: smooth;
+}
+
+html {
+  scroll-behavior: smooth;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,10 +1,13 @@
 // app/layout.tsx
 import { Noto_Sans } from "next/font/google";
 import { Inter_Tight } from "next/font/google";
+import { Space_Mono } from "next/font/google";
+import { JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 
-const noto_sans = Noto_Sans({ subsets: ["latin"] });
-const inter = Inter_Tight({ subsets: ["latin"] });
+
+const jet = JetBrains_Mono({ subsets: ["latin"] });
+
 
 export const metadata = {
   title: "DiegoDev1",
@@ -21,7 +24,7 @@ export default function RootLayout({
       <head>
         <link rel="icon" href="/LOGOPNGG.png" />
       </head>
-      <body className={inter.className}>
+      <body className={jet.className}>
         {children}
       </body>
     </html>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,32 +1,30 @@
-
 "use client";
 import React, { useState } from 'react';
-import AnimatedBackground from "@/components/BackgroundAnimated";
+import AnimatedBackground from "@/components/Background";
 import Header from "@/components/Header";
 import Landing from "@/components/Landing";
-import { SkillsSection } from "@/components/Skills";
-import Work from "@/components/Work";
-import Meteors from "@/components/ui/meteors";
-import Languajes from "@/components/Languajes"
-import { ChevronRight } from "lucide-react";
-import { cn } from "@/lib/utils";
-import AnimatedGradientText from "@/components/ui/animated-gradient-text";
+import  Skills  from "@/components/Skills";
 import Projects from '@/components/Projects';
 import AboutMe from '@/components/AboutMe';
-import SocialSection from '@/components/Socials';
+
+
 
 const Home: React.FC = () => {
   const [isAnimating, setIsAnimating] = useState(true);
 
   return (
-    <AnimatedBackground >
 
+    <AnimatedBackground >
+
       <Header/>
       <Landing />
       <Projects />
-      <SkillsSection /> 
-      <SocialSection />
+      <AboutMe />
+      <Skills /> 
+
     </AnimatedBackground>
+
+
   );
 };
 

diff --git a/components/AboutMe.tsx b/components/AboutMe.tsx
@@ -1,41 +1,58 @@
-import NumberTicker from "./ui/number-ticker";
+"use client";
 
-export default function AboutMe() {
-    return (
-      <section
-        id="about-me"
-        data-section="about-me"
-        className="py-36 scroll-m-20 w-full mx-auto container lg:max-w-4xl md:max-w-2xl"
-      >
-        <h2 className="flex items-center justify-center mb-6 text-3xl font-semibold gap-x-3 text-white">
-          About Me
+import React, { useEffect } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import "gsap/dist/ScrollTrigger.min.js";
+
+// Importamos la fuente Inter desde Google Fonts
+import { Inter } from "next/font/google";
+const inter = Inter({ subsets: ["latin"] });
+
+const TextReveal = () => {
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+
+    // Agregar un pequeño retraso para asegurar que el DOM esté listo
+    gsap.delayedCall(0.1, () => {
+      gsap.fromTo(
+        ".reveal-text",
+        {
+          opacity: 0,
+          y: 100,
+        },
+        {
+          opacity: 1,
+          y: 0,
+          duration: 1.5,
+          ease: "power4.out",
+          scrollTrigger: {
+            trigger: ".reveal-text",
+            start: "top 80%", // Ajustar según lo que necesites
+            end: "top 30%",
+            scrub: 1, // Ajustar para mayor sincronización con el scroll
+            toggleActions: "play none none none",
+          },
+        }
+      );
+    });
+  }, []);
+
+  return (
+    <div
+      className={`w-full flex justify-center items-center min-h-screen bg-black ${inter.className}`}
+    >
+      <div className="text-center space-y-6 px-4">
+        <h2 className="reveal-text text-7xl font-extrabold uppercase tracking-wide text-white">
+          I’m 15yo, An Open Source Contributor at Google
         </h2>
-        <article className="flex flex-col items-center justify-center gap-8 md:flex-row">
-          <div className="[&>p]:mb-4 [&>p>strong]:text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-cyan-500 [&>p>strong]:font-extrabold text-pretty order-2 md:order-1">
-            <p className="text-xl text-white">
-              My name is Diego, but within the community, I'm known as diegodev. At <NumberTicker value={14}/> years old, I had the opportunity to join the world of programming
-              in late <NumberTicker value={2023}/> Since then, I have dedicated much of my time to{" "}
-              <strong>developing my skills</strong> by collaborating on large projects for companies like Google.
-            </p>
-            <p className="text-xl text-white">
-               particularly in areas like{" "}
-              <strong>
-                cybersecurity, ethical hacking, DevOps, and software development
-              </strong>
-              . My goal is to continue growing as a professional and to make a meaningful
-              contribution to the tech community.
-            </p>
-          </div>
-          <img
-            width="200"
-            height="200"
-            src="/favicon.ico"
-            alt="Diego"
-            className="order-1 object-cover w-64 h-full p-1 md:order-2 rotate-3 lg:p-2 lg:w-64 aspect-square rounded-2xl"
-            style={{ objectPosition: "50% 50%" }}
-          />
-        </article>
-      </section>
-    );
-  }
-
+        <p className="reveal-text text-3xl font-bold text-white">
+          Passionate about development, I specialize in full-stack, cloud, and
+          DevOps. Always learning, always building.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default TextReveal;
diff --git a/components/Background.tsx b/components/Background.tsx
@@ -0,0 +1,19 @@
+"use client";
+import React from "react";
+import ScrollEfect from "@/components/ui/ScrollEfect"
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="relative flex flex-col items-center justify-center bg-[#000000]">
+
+     <video autoPlay loop muted className="absolute top-0 left-0 w-full ">
+      <source src="/bg.mp4" type="video/mp4" />
+     </video>
+
+
+      <main className="relative z-10 flex flex-col items-center justify-center">
+        {children}
+      </main>
+
+    </div>
+  );
+}
diff --git a/components/BackgroundAnimated.tsx b/components/BackgroundAnimated.tsx
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,70 +1,84 @@
-import { useState, useEffect } from 'react';
-import Image from 'next/image';
+"use client";
+import { useState } from "react";
+import { Menu, X } from "lucide-react";
 
 export default function Header() {
-  const [activeSection, setActiveSection] = useState('#home');
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-  useEffect(() => {
-    const handleScroll = () => {
-      const sections = ['#home', '#projects', '#skills', '#socials'];
-      let currentSection = activeSection;
+  // Alternar menú
+  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
 
-      for (let i = 0; i < sections.length; i++) {
-        const sectionElement = document.querySelector(sections[i]);
-        if (sectionElement) {
-          const rect = sectionElement.getBoundingClientRect();
-          if (rect.top >= 0 && rect.top <= window.innerHeight / 2) {
-            currentSection = sections[i];
-            break;
-          }
-        }
-      }
-      setActiveSection(currentSection);
-    };
+  return (
+    <header className="fixed top-0 left-0 w-full z-50 border-b border-b-neutral-800 bg-black ">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center py-5">
 
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [activeSection]);
+        <div className="text-white font-mono text-lg">
+          <a href="/">DiegoDev1</a>
+        </div>
 
-  return (
-    <header className="fixed top-8 left-1/2 transform -translate-x-1/2 z-50 w-[100%] max-w-[1100px] border border-neutral-800 bg-[#1a1a1a] bg-opacity-70 backdrop-blur-lg rounded-3xl px-8 py-3 shadow-md flex justify-between items-center">
-      <div className="flex items-center">
-        <Image
-          src="/LOGOJAP.png"
-          alt="Logo"
-          width={100}
-          height={100}
-          className="rounded-lg hidden sm:block"
-        />
+
+        <nav className="hidden md:flex space-x-6">
+          <a
+            href="#work"
+            className="text-neutral-300 font-thin hover:text-gray-300 hover:underline text-sm transition-colors duration-300"
+          >
+            Work
+          </a>
+          <a
+            href="https://github.com/DiegoDev2"
+            className="text-neutral-300 font-thin hover:text-gray-300 hover:underline text-sm transition-colors duration-300"
+          >
+            GitHub
+          </a>
+          <a
+            href="mailto:diegodev2.proton.me"
+            className="text-gray-300 font-thin hover:underline text-sm transition-colors duration-300"
+          >
+            Start a project →
+          </a>
+        </nav>
+
+
+        <div className="md:hidden flex items-center">
+          <button
+            onClick={toggleMenu}
+            className="text-gray-300 hover:text-white focus:outline-none transition-transform duration-300"
+          >
+            {isMenuOpen ? <X size={28} /> : <Menu size={28} />}
+          </button>
+        </div>
       </div>
 
-      <nav className="flex gap-10 font-extralight text-base text-gray-400">
-        {[
-          { href: '#home', label: 'Home' },
-          { href: '#projects', label: 'Projects' },
-          { href: '#skills', label: 'Skills' },
-          { href: '#socials', label: 'Socials' },
-        ].map(({ href, label }) => (
+
+      <div
+        className={`${
+          isMenuOpen ? "max-h-screen opacity-100" : "max-h-0 opacity-0"
+        } md:hidden overflow-hidden transition-all duration-500 bg-black bg-opacity-95`}
+      >
+        <nav className="flex flex-col items-center space-y-6 py-6">
           <a
-            key={href}
-            href={href}
-            className={`relative group px-4 py-2 rounded-3xl transition-colors ${
-              activeSection === href
-                ? 'bg-neutral-700 text-white'
-                : 'hover:bg-neutral-700 hover:text-white'
-            }`}
+            href="#work"
+            onClick={() => setIsMenuOpen(false)}
+            className="text-neutral-300 hover:text-white text-lg font-thin transition-colors duration-300"
           >
-            <span>{label}</span>
-            <div
-              className={`absolute top-[-10px] sm:top-[-19px] left-1/2 transform -translate-x-1/2 w-[40px] h-[4px] bg-white shadow-[0_0_10px_#ffffff] transition-all ${
-                activeSection === href
-                  ? 'opacity-100'
-                  : 'opacity-0 group-hover:opacity-100'
-              }`}
-            ></div>
+            Work
           </a>
-        ))}
-      </nav>
+          <a
+            href="#linkedin"
+            onClick={() => setIsMenuOpen(false)}
+            className="text-neutral-300 hover:text-white text-lg font-thin transition-colors duration-300"
+          >
+            LinkedIn
+          </a>
+          <a
+            href="#start"
+            onClick={() => setIsMenuOpen(false)}
+            className="text-neutral-300 hover:text-white text-lg font-thin transition-colors duration-300"
+          >
+            Start a project →
+          </a>
+        </nav>
+      </div>
     </header>
   );
 }