├── components ├── index.js ├── sections │ ├── landingSections │ │ ├── About.jsx │ │ ├── Hero.jsx │ │ ├── Contact.jsx │ │ ├── Services.jsx │ │ ├── Portfolio.jsx │ │ └── Skills.jsx │ └── portfolioSections │ │ └── Tabs.jsx ├── Layout.jsx ├── Footer.jsx ├── LeftCard.jsx ├── Menu.jsx └── RightNav.jsx ├── public ├── favicon.ico ├── cv │ └── resume.pdf ├── images │ └── me.jpg ├── vercel.svg ├── thirteen.svg ├── next.svg └── json │ └── projects.js ├── jsconfig.json ├── next.config.js ├── src ├── pages │ ├── api │ │ └── hello.js │ ├── _document.js │ ├── _app.js │ └── index.js └── styles │ └── globals.css ├── .gitignore ├── package.json ├── context └── StateContext.jsx └── README.md /components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Layout } from './Layout' -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebPerformer/next-new-portfolio/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/cv/resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebPerformer/next-new-portfolio/HEAD/public/cv/resume.pdf -------------------------------------------------------------------------------- /public/images/me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebPerformer/next-new-portfolio/HEAD/public/images/me.jpg -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@/*": ["./src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /src/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /src/pages/_app.js: -------------------------------------------------------------------------------- 1 | import { Layout } from 'components' 2 | import { StateContext } from 'context/StateContext' 3 | 4 | // Styles 5 | import '../styles/globals.css' 6 | 7 | export default function App({ Component, pageProps }) { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-new-portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@next/font": "13.1.6", 13 | "gsap": "^3.11.4", 14 | "next": "13.1.6", 15 | "react": "18.2.0", 16 | "react-countup": "^6.4.1", 17 | "react-dom": "18.2.0", 18 | "react-icons": "^4.7.1", 19 | "react-scroll-trigger": "^0.6.14" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/sections/landingSections/About.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | // icons 4 | import { AiOutlineUser } from 'react-icons/ai' 5 | 6 | function About() { 7 | return ( 8 |
9 |
About
10 |
11 |
My name is Gabriel Silva Araujo. I'm here to show you all of my projects and my evolution has a programmer.
12 |

Graduated in Computer Science from Universidade Paulista, with extensive experience in Front-End development, specializing in applications using Javascript and improving my knowledge in React.js and Next.js Frameworks.

13 |
14 |
15 | ) 16 | } 17 | 18 | export default About -------------------------------------------------------------------------------- /context/StateContext.jsx: -------------------------------------------------------------------------------- 1 | import React, { createContext, useContext, useRef, useState } from "react" 2 | import { data } from '../public/json/projects' 3 | 4 | const Context = createContext() 5 | 6 | export const StateContext = ({ children }) => { 7 | 8 | const menuRef = useRef(null) 9 | const navRef = useRef(null) 10 | const [menu, setMenu] = useState(false) 11 | const [allProjects, setAllProjects] = useState(false) 12 | const [totalProjects, setTotalProjects] = useState(data.projects.length) 13 | 14 | return ( 15 | 27 | {children} 28 | 29 | ) 30 | } 31 | 32 | export const useStateContext = () => useContext(Context) -------------------------------------------------------------------------------- /public/thirteen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Layout.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react' 2 | import Head from 'next/head' 3 | 4 | // components 5 | import LeftCard from './LeftCard' 6 | import RightNav from './RightNav' 7 | import Menu from './Menu' 8 | import Footer from './Footer' 9 | 10 | // Context 11 | import { useStateContext } from 'context/StateContext' 12 | 13 | function Layout({ children }) { 14 | 15 | const { allProjects } = useStateContext() 16 | 17 | const layoutRef = useRef(null) 18 | 19 | useEffect(() => { 20 | allProjects ? document.body.style.overflowY = "hidden" : document.body.style.overflowY = "auto" 21 | }, [allProjects]) 22 | 23 | return ( 24 |
25 | 26 | Gabriel Silva Araujo 27 | 28 |
29 | 30 |
31 |
32 | 33 | {children} 34 | 35 |
36 |
37 |
38 |
39 |
40 | ) 41 | } 42 | 43 | export default Layout -------------------------------------------------------------------------------- /components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from 'next/link' 3 | 4 | // Icons 5 | import { GrLinkedinOption } from 'react-icons/gr' 6 | import { FaGithub } from 'react-icons/fa' 7 | import { SiWhatsapp } from 'react-icons/si' 8 | 9 | function Footer() { 10 | return ( 11 |
12 |
13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
© 2023 Gabriel. All Rights Reserved.
25 |
Developed By Gabriel
26 |
27 |
28 | ) 29 | } 30 | 31 | export default Footer 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Meu novo portfolio 2023 2 | 3 | ![FireShot Capture 004 - Gabriel Silva Araujo - localhost 2](https://user-images.githubusercontent.com/110235876/218331098-419057bc-c903-4f8d-8a15-497c55cfe413.png) 4 | 5 | ## Meu Portfolio Pessoal 2023 6 | 7 | **Este portfolio foi criado para mostrar a minha capacidade como desenvolvedor Front-End. Dentro do meu portfolio você poderá me conhecer melhor, então o que está esperando? Acesse o site no Link abaixo.** 8 | 9 | ## Features Usadas 10 | **Next.js** - **Compontents** - **Hooks** - **HTML** - **CSS** - **Javascript** - **Figma** 11 | 12 | ## Como Instalar 13 | **1.** Baixe o Visual Studio Code 14 | 15 | **2.** Baixe o Node.js 16 | 17 | **3.** Baixe os arquivos do meu Github 18 | 19 | **4.** Abre os arquivos no seu Visual Studio Code 20 | 21 | **5.** Abra o terminal apertando ***Ctrl + `*** 22 | 23 | **6.** Escreva ou copie o seguinte código ***npm install*** 24 | 25 | **5.** Assim que as dependencias terminarem de instalar, execute o código ***npm run dev*** 26 | 27 | **Fique a vontade para fazer alterações.** 28 | 29 | ## Site Online 30 | (https://next-new-portfolio.vercel.app/) 31 | 32 | ![FireShot Capture 004 - Gabriel Silva Araujo - localhost](https://user-images.githubusercontent.com/110235876/218330927-49b6b936-8bfb-4827-9570-ed64041ed0da.png) 33 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect } from 'react' 2 | 3 | // sections 4 | import Hero from "components/sections/landingSections/Hero" 5 | import About from "components/sections/landingSections/About" 6 | import Services from "components/sections/landingSections/Services" 7 | import Skills from "components/sections/landingSections/Skills" 8 | import Portfolio from "components/sections/landingSections/Portfolio" 9 | import Contact from "components/sections/landingSections/Contact" 10 | import Tabs from "components/sections/portfolioSections/Tabs" 11 | 12 | // Context 13 | import { useStateContext } from 'context/StateContext' 14 | 15 | // GSAP 16 | import { gsap } from 'gsap' 17 | 18 | export default function Main() { 19 | 20 | const { allProjects } = useStateContext() 21 | 22 | let tl = useRef() 23 | 24 | useEffect(() => { 25 | tl.current = gsap.timeline({ paused: true }) 26 | tl.current.fromTo('.tabs-wrapper', { 27 | duration: 0, 28 | "top": "-200%" 29 | }, 30 | { 31 | duration: 1, 32 | "top": "0", 33 | ease: "power4.inOut" 34 | } 35 | ) 36 | }, []) 37 | 38 | useEffect(() => { 39 | allProjects ? tl.current.play() : tl.current.reverse() 40 | }, [allProjects]) 41 | 42 | return ( 43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | ) 53 | } -------------------------------------------------------------------------------- /components/sections/landingSections/Hero.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import CountUp from 'react-countup' 3 | import ScrollTrigger from 'react-scroll-trigger' 4 | 5 | // icons 6 | import { AiOutlineHome } from 'react-icons/ai' 7 | 8 | // Context 9 | import { useStateContext } from 'context/StateContext' 10 | 11 | function Hero() { 12 | 13 | const [counterOn, setCounterOn] = useState(false) 14 | 15 | const { totalProjects } = useStateContext() 16 | 17 | return ( 18 |
19 |
Introduce
20 |
21 |
22 |

Say Hi from Gabriel,
Web Developer & UI/UX Design

23 |
24 |
25 |

I'm Front-End developer and I love what I do. Take a time and explore my works. Hope you enjoy and don't forget to give a feedback on Linkedin.

26 |
27 | setCounterOn(true)} onExit={() => setCounterOn(false)}> 28 |
29 |
30 |
{counterOn && }+
31 |

Years Of Experience

32 |
33 |
34 |
{counterOn && }+
35 |

Projects Completed

36 |
37 |
38 | 39 |
40 |
41 | ) 42 | } 43 | 44 | export default Hero 45 | -------------------------------------------------------------------------------- /components/LeftCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from 'next/link' 3 | 4 | // icons 5 | import { FaLinkedinIn, FaGithub, FaWhatsapp } from 'react-icons/fa' 6 | import { HiOutlineArrowTopRightOnSquare } from 'react-icons/hi2' 7 | 8 | function LeftCard() { 9 | return ( 10 |
11 |
12 | 13 |
Gabriel Silva Araujo
14 |
Web Developer & UI/UX Design
15 |
16 | 17 |
18 | 19 |
20 | 21 | 22 |
23 | 24 |
25 | 26 | 27 |
28 | 29 |
30 | 31 |
32 |
33 | webperformerz@gmail.com 34 |
35 | 36 | 37 | 38 |
© 2023 Gabriel. All Rights Reserved.
39 |
40 |
41 | ) 42 | } 43 | 44 | export default LeftCard 45 | -------------------------------------------------------------------------------- /components/sections/landingSections/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | 3 | // icons 4 | import { BsEnvelope } from 'react-icons/bs' 5 | import { AiOutlineCheckCircle } from 'react-icons/ai' 6 | 7 | function Contact() { 8 | 9 | const [success, setSuccess] = useState(false) 10 | 11 | const successFunc = () => { 12 | setSuccess(true) 13 | 14 | setTimeout(() => { 15 | setSuccess(false) 16 | }, 2500) 17 | } 18 | 19 | return ( 20 |
21 |
Contact
22 |
23 | {success ? 24 |
25 |
26 |
Email Successfully Sent
27 | 30 |
: null} 31 |
Let's Work Together!
32 |

webperformerz@gmail.com

33 |
34 | 35 | 36 |
37 |
38 | 39 | First Name 40 |
41 |
42 | 43 | Last Name 44 |
45 |
46 |
47 | 48 | Subject 49 |
50 |
51 |