UPDATE:

- Mudança do portifolio para React

app/.eslintignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.prettierrc.js
+.eslintrc.js
+env.d.ts

app/.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+  extends: [
+    // By extending from a plugin config, we can get recommended rules without having to add them manually.
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:@typescript-eslint/recommended",
+    // This disables the formatting rules in ESLint that Prettier is going to be responsible for handling.
+    // Make sure it's always the last config, so it gets the chance to override other configs.
+    "eslint-config-prettier",
+  ],
+  settings: {
+    react: {
+      // Tells eslint-plugin-react to automatically detect the version of React to use.
+      version: "detect",
+    },
+    // Tells eslint how to resolve imports
+    "import/resolver": {
+      node: {
+        paths: ["src"],
+        extensions: [".js", ".jsx", ".ts", ".tsx"],
+      },
+    },
+  },
+  rules: {
+    // Add your own rules here to override ones from the extended configs.
+  },
+};

app/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

app/.prettierignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.prettierrc.js

app/.prettierrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  trailingComma: 'all',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  printWidth: 120,
+  bracketSpacing: true,
+};

app/README.md

@@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

app/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

app/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/ico" href="" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Porfolio</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

app/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext .ts,.tsx",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.11",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0",
+    "tailwindcss": "^4.1.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.29.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.35.1",
+    "@typescript-eslint/parser": "^8.35.1",
+    "@vitejs/plugin-react-swc": "^3.10.2",
+    "eslint": "^9.30.1",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.2.0",
+    "prettier": "^3.6.2",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.34.1",
+    "vite": "^7.0.0"
+  }
+}

app/public/img/code-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>

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" />

app/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

app/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

app/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

app/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});