UPDATE:

- Mudança do portifolio para React

app/src/App.tsx

@@ -0,0 +1,11 @@
+import HeroMain from './components/heroSection/HeroMain';
+import NavbarMain from './components/navbar/NavbarMain';
+
+export default function App() {
+  return (
+    <main className="font-display">
+      <NavbarMain />
+      <HeroMain />
+    </main>
+  );
+}

app/src/components/heroSection/HeroGradient.tsx

@@ -0,0 +1,12 @@
+const HeroGradient = () => {
+  return (
+    <div>
+      <div className="shadow-cyanmediumshadow absolute top-0 right-[400px] -z-10 animate-pulse"></div>
+      <div className="shadow-orangeMediumShadow absolute top-0 right-0 -z-10 animate-pulse"></div>
+      <div className="shadow-cyanmediumshadow absolute top-[300px] left-0 -z-10 opacity-50"></div>
+      <div className="shadow-orangeMediumShadow absolute top-[500px] left-0 -z-10 opacity-50"></div>
+    </div>
+  );
+};
+
+export default HeroGradient;

app/src/components/heroSection/HeroMain.tsx

@@ -0,0 +1,17 @@
+import HeroGradient from './HeroGradient';
+import HeroPic from './HeroPic';
+import HeroText from './HeroText';
+
+const HeroMain = () => {
+  return (
+    <div className="pt-40 pb-16">
+      <div className="flex md:flex-row sm:flex-col max-w-[1200px] mx-auto justify-between items-center relative px-4">
+        <HeroText />
+        <HeroPic />
+        <HeroGradient />
+      </div>
+    </div>
+  );
+};
+
+export default HeroMain;

app/src/components/heroSection/HeroPic.tsx

@@ -0,0 +1,14 @@
+import { PiHexagonThin } from 'react-icons/pi';
+
+const HeroPic = () => {
+  return (
+    <div className="h-full flex items-center justify-center">
+      <img src="../../public/img/Perfil.jpg" alt="Christian Falcão" className="max-h-[450px] w-auto" />
+      <div className="absolute -z-10 flex justify-center items-center animate-pulse">
+        <PiHexagonThin className="md:h-[90%] sm:h-[120%] min-h-[600px] w-auto text-cyan-300 blur-md animate-[spin_20s_linear_infinite]" />
+      </div>
+    </div>
+  );
+};
+
+export default HeroPic;

app/src/components/heroSection/HeroText.tsx

@@ -0,0 +1,13 @@
+const HeroText = () => {
+  return (
+    <div className="flex flex-col gap-4 h-full justify-center md:text-left sm:text-center">
+      <h2 className="lg:text-2xl sm:text-xl uppercase text-cyan-300">Full Stack Web Developer</h2>
+      <h1 className="md:text-[2.8rem] lg:text-6xl sm:text-4xl font-bold font-mono text-orange-300">Christian Falcão</h1>
+      <p className="text-lg mt-4 text-white">
+        A passionate Web Developer <br /> with 5+ years of experience
+      </p>
+    </div>
+  );
+};
+
+export default HeroText;

app/src/components/navbar/NavbarBtn.tsx

@@ -0,0 +1,13 @@
+import { LuArrowDownRight } from 'react-icons/lu';
+
+const NavbarBtn = () => {
+  return (
+    <button className="px-4 py-2 rounded-full text-xl font-bold text-white border-cyan flex items-center gap-1 bg-gradient-to-r from-cyan-400 to-orange-400 hover:border-orange-300 hover:scale-110 transition-all durantion-500 hover:shadow-cyan">
+      Hire Me
+      <div className="sm:hidden md:block">
+        <LuArrowDownRight />
+      </div>
+    </button>
+  );
+};
+export default NavbarBtn;

app/src/components/navbar/NavbarLinks.tsx

@@ -0,0 +1,24 @@
+const links = [
+  { Link: 'About Me', Section: 'about' },
+  { Link: 'Skills', Section: 'skills' },
+  { Link: 'Experience', Section: 'experience' },
+  { Link: 'Projects', Section: 'project' },
+  { Link: 'Contact', Section: 'contact' },
+];
+const NavbarLinks = () => {
+  return (
+    <ul className="flex gap-6 text-white font-bold text-center lg:flex-row sm:flex-col lg:relative sm:absolute sm:top-[120%] left-[50%] -translate-x-[50%] lg:text-md sm:text-xl sm:bg-cyan-300/30 backdrop-blur-lg lg:bg-black sm:w-full py-4">
+      {links.map((link, index) => {
+        return (
+          <li key={index} className="group">
+            <a href="#" className="cursor-pointer text-white hover:text-cyan-300 transition-all duration-500">
+              {link.Link}
+            </a>
+            <div className="mx-auto bg-cyan-300 w-0 group-hover:w-full h-[1px] transition-all duration-500"></div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+export default NavbarLinks;

app/src/components/navbar/NavbarLogo.tsx

@@ -0,0 +1,9 @@
+const NavbarLogo = () => {
+  return (
+    <div>
+      <h1 className="text-white text-2xl sm:hidden md:block">Christian Falcão</h1>
+      <h1 className="text-white font-mono font-extrabold text-4xl sm:block md:hidden">CH</h1>
+    </div>
+  );
+};
+export default NavbarLogo;

app/src/components/navbar/NavbarMain.tsx

@@ -0,0 +1,29 @@
+import { GiHamburgerMenu } from 'react-icons/gi';
+import NavbarBtn from './NavbarBtn';
+import NavbarLinks from './NavbarLinks';
+import NavbarLogo from './NavbarLogo';
+import { useState } from 'react';
+
+const NavbarMain = () => {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const toggleMenu = () => {
+    setMenuOpen(!menuOpen);
+  };
+  return (
+    <nav className="max-w-[1300px] mx-auto px-4 w-full fixed left-[50%] -translate-x-[50%] z-20 flex gap-4 mt-2">
+      <div className="flex justify-between w-full max-w-[1200px] bg-black items-center p-6 rounded-r-full rounded-l-full border-[0.5px] border-orange-50">
+        <NavbarLogo />
+        <div className={`${menuOpen ? 'SM:block' : 'sm:hidden'} lg:block`}>
+          <NavbarLinks />
+        </div>
+        <NavbarBtn />
+      </div>
+      <div className="flex lg:hidden sm:block p-6 bg-black items-center justify-center rounded-full border-[0.5px] border-orange-300">
+        <button className="text-2xl p-3 border border-orange-300 rounded-full text-white" onClick={toggleMenu}>
+          <GiHamburgerMenu />
+        </button>
+      </div>
+    </nav>
+  );
+};
+export default NavbarMain;

app/src/index.css

@@ -0,0 +1,19 @@
+@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+@import 'tailwindcss';
+
+@theme {
+  --font-serif: 'Josefin-Sans';
+  --font-mono: 'Roboto';
+  --shadow-cyan: 0 0 20px 0 rgba(94, 286, 220, 0.5);
+  --shadow-cyanmediumshadow: 10px 10px 200px 150px rgba(94, 285, 220, 0.5);
+  --shadow-orangeMediumShadow: 10px 10px 200px 150px rgba(240, 189, 94, 0.5);
+  --breakpoint-sm: 350px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+}
+body {
+  @apply bg-amber-950;
+}

app/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

app/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />