feat:initial commit

GuilhaoF · Jun 24, 2023 · 6f4e5d8 · 6f4e5d8
1 parent 38e6f65
commit 6f4e5d8
Show file tree

Hide file tree

Showing 13 changed files with 1,419 additions and 224 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@phosphor-icons/react": "^2.0.10",
     "@types/node": "20.3.1",
     "@types/react": "18.2.13",
     "@types/react-dom": "18.2.6",
@@ -18,5 +19,10 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.1.3"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.24",
+    "tailwindcss": "^3.3.2"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/assets/Hero.jpg b/src/assets/Hero.jpg
diff --git a/src/components/ContactLinks.tsx b/src/components/ContactLinks.tsx
@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+interface LinksProps {
+  pathName: string;
+  children: React.ReactNode
+}
+
+
+export function ContactLinks({ pathName, children }: LinksProps) {
+  return (
+    <Link href={pathName}>
+      <div>
+        {children}
+      </div>
+    </Link>
+  )
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -0,0 +1,64 @@
+import { CaretRight, XCircle } from "@phosphor-icons/react";
+import { useEffect, useState } from "react";
+import { NavigationComponent } from "./Navigation";
+
+export function NavbarComponent() {
+  const [isOpenMenu, setIsOpenMenu] = useState(false);
+
+  useEffect(() => {
+    document.body.style.overflowY = isOpenMenu ? "hidden" : "auto";
+  }, [isOpenMenu]);
+
+  return (
+    <div>
+      <div
+        className={`flex items-center justify-center fixed z-[1] bg-ocean-blue-900 h-full w-full ${isOpenMenu ? "translate-x-0" : "translate-x-full"
+          } transition  duration-150`}
+      >
+        <div className=" absolute top-10 right-16">
+          <XCircle
+            className="text-gray-100 h-12 w-12 cursor-pointer transition-all hover:text-orange-300"
+            size={28}
+            weight="bold"
+            onClick={() => setIsOpenMenu(false)}
+          />
+        </div>
+
+        <div className=" text-4xl " onClick={() => setIsOpenMenu(false)}>
+          <NavigationComponent
+            direction="col"
+            gap="8"
+            color="gray-100"
+            borderColor="border-ocean-blue"
+          />
+        </div>
+
+        {/* Navbar */}
+        <header className=" py-4 px-6 bg-gray-300 drop-shadow-md md:px-20">
+          <nav className="flex items-center justify-between py-3 px-4">
+            <h3>Luis Felipe</h3>
+
+            {/* Icone Mobile */}
+            <div className="md:hidden">
+              <CaretRight
+                size={28}
+                weight="bold"
+                className="h-8 w-7 text-ocean-blue cursor-pointer transition-all hover:text-orange-300"
+              />
+            </div>
+
+            {/* Navbar Desktop */}
+            <div className=" hidden md:block">
+              <NavigationComponent
+                direction="row"
+                gap="8"
+                color="ocean-blue-700"
+                borderColor="border-gray-300"
+              />
+            </div>
+          </nav>
+        </header>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -0,0 +1,59 @@
+interface NavigationProps {
+  direction: string;
+  gap: string;
+  color: string;
+  borderColor: string;
+}
+export function NavigationComponent({
+  direction,
+  gap,
+  color,
+  borderColor,
+}: NavigationProps) {
+  return (
+    <div
+      className={` flex flex-${direction} items-center justify-evenly gap-${gap} font-medium text-${color} lg:text-lg lg:justify-center lg:gap-12`}
+    >
+      {/* Home */}
+      <a href="#">
+        <p className="">Inicio</p>
+      </a>
+      {/* Techs */}
+      <a href="#techs">
+        <p className="">Tecnologias</p>
+      </a>
+      {/* Opção Sobre */}
+      <a href="#about">
+        <p
+          className={`border-b ${borderColor} transition hover:border-orange-300`}
+        >
+          Sobre
+        </p>
+      </a>
+      {/* Opção Projetos */}
+      <a href="#projects">
+        <p
+          className={`border-b ${borderColor} transition hover:border-orange-300`}
+        >
+          Projetos
+        </p>
+      </a>
+      {/* Curriculo */}
+      <a href="#projects">
+        <p
+          className={`border-b ${borderColor} transition hover:border-orange-300`}
+        >
+          Curriculo
+        </p>
+      </a>
+      {/* Opção Contato */}
+      <a href="#contact">
+        <p
+          className={`border-b ${borderColor} transition hover:border-orange-300`}
+        >
+          Contato
+        </p>
+      </a>
+    </div>
+  );
+}
diff --git a/src/components/ProfileHero.tsx b/src/components/ProfileHero.tsx
@@ -0,0 +1,55 @@
+import Image from "next/image";
+import ProfileImage from '../assets/Hero.jpg';
+import Link from "next/link";
+import { ContactLinks } from "./ContactLinks";
+import { DiscordLogo, GithubLogo, LinkedinLogo } from "@phosphor-icons/react";
+
+export function ProfileHeroComponent() {
+  return (
+    <div className="bg-neutral-50">
+      <div className="flex flex-col gap-8 min-h-[calc(100vh-80px)] items-center justify-center py-16 px-12 my-0 mx-auto text-center lg:flex-row lg:text-left md:max-w-6xl lg:gap-40">
+
+
+        {/* Card Info */}
+        <div className="flex flex-col gap-3 order-2 lg:order-1 md:max-w-lg md:gap-16">
+          <div className="flex flex-col gap-4">
+            <h1 className="font-alt text-ocean-blue-700 text-3xl md:text-5xl lg:text-6xl">
+              Desenvolvedor Front-End e Mobile
+            </h1>
+
+            <p className=" text-ocean-blue-700 text-sm md:text-base">
+              Olá! me chamo Luís Felipe e sou desenvolvedor front-end e mobile, a baixo você irá ver minhas tecnologias e projetos que desenvolvi.
+            </p>
+          </div>
+        </div>
+
+        {/* Card Contact Links e Image */}
+        <div className='flex flex-col items-center justify-center gap-4 order-1 lg:order-2' >
+          <Image className="rounded-full  border-4 border-[#113657]" src={ProfileImage} alt='Profile' height={350} quality={80} priority />
+
+          <div className='flex gap-4 items-center'>
+
+            <ContactLinks pathName="https://www.linkedin.com/in/luis-felipe-silv/">
+              <LinkedinLogo size={56} className='cursor-pointer text-ocean-blue-700 transition-all duration-200 hover:text-navy-blue-300' />
+            </ContactLinks>
+
+            <ContactLinks pathName="https://github.com/GuilhaoF">
+              <GithubLogo size={56} className='cursor-pointer text-ocean-blue-700 transition-all duration-200 hover:text-navy-blue-300' />
+            </ContactLinks>
+
+            <ContactLinks pathName="/">
+              <DiscordLogo size={56} className='cursor-pointer text-ocean-blue-700 transition-all duration-200 hover:text-navy-blue-300' />
+            </ContactLinks>
+
+          </div>
+
+
+        </div>
+
+
+      </div>
+
+
+    </div>
+  );
+}
diff --git a/src/components/teste.tsx b/src/components/teste.tsx
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (
-    <Html lang="en">
+    <Html lang="pt-Br">
       <Head />
       <body>
         <Main />

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,123 +1,21 @@
+import { NavbarComponent } from '@/components/Navbar'
+import { ProfileHeroComponent } from '@/components/ProfileHero'
 import Head from 'next/head'
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-import styles from '@/styles/Home.module.css'
 
-const inter = Inter({ subsets: ['latin'] })
+
+
 
 export default function Home() {
   return (
     <>
       <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
+        <title>Luis Felipe G</title>
+        <meta name="description" content="Portifolio Luis" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className={styles.main}>
-        <div className={styles.description}>
-          <p>
-            Get started by editing&nbsp;
-            <code className={styles.code}>src/pages/index.tsx</code>
-          </p>
-          <div>
-            <a
-              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              By{' '}
-              <Image
-                src="/vercel.svg"
-                alt="Vercel Logo"
-                className={styles.vercelLogo}
-                width={100}
-                height={24}
-                priority
-              />
-            </a>
-          </div>
-        </div>
-
-        <div className={styles.center}>
-          <Image
-            className={styles.logo}
-            src="/next.svg"
-            alt="Next.js Logo"
-            width={180}
-            height={37}
-            priority
-          />
-          <div className={styles.thirteen}>
-            <Image
-              src="/thirteen.svg"
-              alt="13"
-              width={40}
-              height={31}
-              priority
-            />
-          </div>
-        </div>
-
-        <div className={styles.grid}>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Docs <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Find in-depth information about Next.js features and&nbsp;API.
-            </p>
-          </a>
-
-          <a
-            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Learn <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Learn about Next.js in an interactive course with&nbsp;quizzes!
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Templates <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Discover and deploy boilerplate example Next.js&nbsp;projects.
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Deploy <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Instantly deploy your Next.js site to a shareable URL
-              with&nbsp;Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
+      <NavbarComponent />
+      <ProfileHeroComponent />
     </>
   )
 }