feat: add base Postifolio page and components

mateusfg7 · Dec 21, 2022 · 538b246 · 538b246
1 parent e62c9e6
commit 538b246
Show file tree

Hide file tree

Showing 10 changed files with 683 additions and 0 deletions.
diff --git a/public/assets/portifolio/code-type.svg b/public/assets/portifolio/code-type.svg
diff --git a/src/components/portifolio/AboutSection.tsx b/src/components/portifolio/AboutSection.tsx
@@ -0,0 +1,103 @@
+import Link from 'next/link'
+
+export function AboutSection() {
+  return (
+    <div
+      id="about"
+      className="min-h-screen flex items-center justify-center bg-neutral-900"
+    >
+      <div className="content-w flex justify-between">
+        <div className="flex-1">
+          <img
+            src="https://github.com/mateusfg7.png"
+            className="w-96 h-[30rem] object-cover rounded-3xl shadow-2xl shadow-black/70"
+          />
+        </div>
+        <div className="flex-1">
+          <h1 className="text-4xl mb-8 text-blue-500">Sobre mim</h1>
+          <p className="text-xl mb-3">
+            Me chamo <span className="font-bold">Mateus Felipe Gonçalves</span>,
+            tenho 20 anos e moro em Pará de Minas - MG, Brasil.
+          </p>
+          <p className="text-xl mb-3">
+            <span className="font-semibold">Auto didata</span> full-stack.
+            Possuo conhecimento em{' '}
+            <a
+              className="text-neutral-50 hover:underline hover:cursor-pointer"
+              href="https://reactjs.org/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              ReactJS
+            </a>{' '}
+            e{' '}
+            <a
+              className="text-neutral-50 hover:underline hover:cursor-pointer"
+              href="https://nextjs.org/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              NextJS
+            </a>{' '}
+            no Front-end,{' '}
+            <a
+              className="text-neutral-50 hover:underline hover:cursor-pointer"
+              href="https://deno.land/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Deno
+            </a>{' '}
+            e{' '}
+            <a
+              className="text-neutral-50 hover:underline hover:cursor-pointer"
+              href="https://nodejs.org/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              NodeJS
+            </a>{' '}
+            no Back-end, e{' '}
+            <a
+              className="text-neutral-50 hover:underline hover:cursor-pointer"
+              href="https://reactnative.dev/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              React-native
+            </a>
+            /
+            <a
+              className="text-neutral-50 hover:underline hover:cursor-pointer"
+              href="https://expo.dev/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Expo
+            </a>{' '}
+            no Mobile com foco em Android. Possuo nível intermediário de inglês
+            em leitura e escrita, habilidade adquirida através da leitura de
+            várias documentações e artigos relacionados a tecnologias e outros
+            assuntos em inglês, e também escrevendo blog posts e documentações
+            de projetos pessoais.
+          </p>
+          <p className="text-xl">
+            Também tenho interesse na área de construção civil, elétrica e
+            automação residencial.
+          </p>
+          <div className="mt-6 flex items-center gap-10">
+            <a
+              className="text-blue-500 hover:text-blue-300"
+              href="/assets/portifolio/cv-mateus-felipe-gonçalves.pdf"
+            >
+              Baixar CV [X]
+            </a>
+            <Link className="text-blue-500 hover:text-blue-300" href="/">
+              Blog [X]
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/portifolio/ContactSection.tsx b/src/components/portifolio/ContactSection.tsx
@@ -0,0 +1,56 @@
+export function ContactSection() {
+  return (
+    <div
+      id="contact"
+      className="min-h-screen flex justify-center py-20 bg-neutral-900"
+    >
+      <div className="content-w">
+        <div className="w-full text-center mb-20">
+          <h1 className="text-blue-500 text-4xl">Entre em contato!</h1>
+        </div>
+        <div className="flex justify-center flex-wrap gap-10">
+          <div className="flex flex-col items-center gap-6 border border-neutral-800 rounded-3xl p-12">
+            <h2 className="text-xl text-green-300">[X] Whatsapp</h2>
+            <span className="text-lg">+55 (37) 99844-0073</span>
+            <a
+              href="#"
+              className="text-green-300 border border-green-300 p-3 rounded-xl hover:bg-green-300/10"
+            >
+              Enviar mensagem
+            </a>
+          </div>
+          <div className="flex flex-col items-center gap-6 border border-neutral-800 rounded-3xl p-12">
+            <h2 className="text-xl text-red-300">[X] Email</h2>
+            <span className="text-lg">[email protected]</span>
+            <a
+              href="#"
+              className="text-red-300 border border-red-300 p-3 rounded-xl hover:bg-red-300/10"
+            >
+              Enviar mensagem
+            </a>
+          </div>
+          <div className="flex flex-col items-center gap-6 border border-neutral-800 rounded-3xl p-12">
+            <h2 className="text-xl text-sky-500">[X] Linkedin</h2>
+            <span className="text-lg">linkedin.com/in/mateusfg</span>
+            <a
+              href="#"
+              className="text-sky-500 border border-sky-500 p-3 rounded-xl hover:bg-sky-500/10"
+            >
+              Visualizar perfil
+            </a>
+          </div>
+          <div className="flex flex-col items-center gap-6 border border-neutral-800 rounded-3xl p-12">
+            <h2 className="text-xl text-stone-200">[X] Github</h2>
+            <span className="text-lg">github.com/mateusfg7</span>
+            <a
+              href="#"
+              className="text-stone-200 border border-stone-200 p-3 rounded-xl hover:bg-stone-200/10"
+            >
+              Visualizar perfil
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/portifolio/Header.tsx b/src/components/portifolio/Header.tsx
@@ -0,0 +1,44 @@
+export function Header() {
+  return (
+    <div className="flex justify-center items-center fixed bg-neutral-1000/90 backdrop-blur-xl w-full">
+      <nav className="content-w flex items-center justify-center py-6 relative">
+        <div className=" absolute left-0">
+          <a className="text-blue-500 font-bold" href="#home">
+            Mateus Felipe
+          </a>
+        </div>
+        <div className="flex items-center gap-4">
+          <a
+            className="text-neutral-400 hover:text-neutral-50 hover:cursor-pointer"
+            href="#about"
+          >
+            Sobre mim
+          </a>
+          <a
+            className="text-neutral-400 hover:text-neutral-50 hover:cursor-pointer"
+            href="#projects"
+          >
+            Projetos
+          </a>
+          <a
+            className="text-neutral-400 hover:text-neutral-50 hover:cursor-pointer"
+            href="#knowledge"
+          >
+            Conhecimentos
+          </a>
+          <a
+            className="text-neutral-400 hover:text-neutral-50 hover:cursor-pointer"
+            href="#contact"
+          >
+            Contato
+          </a>
+        </div>
+        <div className="flex items-center gap-4 absolute right-0">
+          <div title="Linkedin">[X]</div>
+          <div title="Github">[X]</div>
+          <div title="Instagram">[X]</div>
+        </div>
+      </nav>
+    </div>
+  )
+}
diff --git a/src/components/portifolio/HomeSection.tsx b/src/components/portifolio/HomeSection.tsx
@@ -0,0 +1,22 @@
+export function HomeSection() {
+  return (
+    <div id="home" className="min-h-screen flex justify-center items-center">
+      <div className="content-w flex justify-between items-center gap-12">
+        <div className="flex flex-col gap-4">
+          <span className="text-neutral-50 text-7xl font-bold">
+            Eu sou Mateus,
+          </span>
+          <span className="text-neutral-400 text-3xl flex items-center ">
+            <span className="inline-block overflow-hidden whitespace-nowrap animate-typing">
+              <span>Desenvolvedor full-stack.</span>
+            </span>
+            <span className="animate-cursor">|</span>
+          </span>
+        </div>
+        <div className="flex-1">
+          <img src="/assets/portifolio/code-type.svg" className="w-full" />
+        </div>
+      </div>
+    </div>
+  )
+}