├── .env.example ├── next-env.d.ts ├── prettierrc.json ├── public ├── img │ ├── favicon.ico │ ├── logo144.png │ ├── logo192.png │ ├── logo256.png │ ├── logo384.png │ ├── logo48.png │ ├── logo512.png │ ├── logo72.png │ ├── logo96.png │ ├── back_top.svg │ ├── logo.svg │ └── hands.svg ├── fonts │ ├── poppins-v15-latin-300.woff2 │ ├── poppins-v15-latin-500.woff2 │ ├── poppins-v15-latin-700.woff2 │ └── poppins-v15-latin-regular.woff2 ├── manifest.json ├── sw.js └── workbox-019999f6.js ├── generators ├── templates │ ├── styles.ts.hbs │ └── index.tsx.hbs └── plopfile.js ├── .vscode └── settings.json ├── .editorconfig ├── src ├── config │ └── links.ts ├── components │ ├── UI │ │ ├── Button │ │ │ ├── index.tsx │ │ │ └── styles.tsx │ │ ├── Title │ │ │ ├── index.tsx │ │ │ └── styles.tsx │ │ ├── ScrollTop │ │ │ ├── index.tsx │ │ │ └── styles.tsx │ │ ├── Footer │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── Portfolio │ │ │ ├── index.tsx │ │ │ ├── styles.tsx │ │ │ └── projects.json │ │ └── Header │ │ │ ├── index.tsx │ │ │ └── styles.tsx │ └── Sections │ │ ├── Portfolio │ │ ├── styles.tsx │ │ └── index.tsx │ │ ├── About │ │ ├── index.tsx │ │ └── styles.tsx │ │ ├── Contact │ │ ├── index.tsx │ │ └── styles.ts │ │ └── Home │ │ ├── styles.ts │ │ └── index.tsx ├── styles │ ├── styled-components.d.ts │ ├── theme │ │ └── theme.ts │ ├── keyframes │ │ └── keyframes.ts │ └── globals.ts ├── graphql │ ├── client.ts │ └── queries.ts ├── hooks │ ├── useScroll.tsx │ └── useAnimateOnScroll.tsx ├── pages │ ├── index.tsx │ ├── _document.tsx │ └── _app.tsx ├── Templates │ └── Home │ │ └── index.tsx └── types │ └── types.ts ├── next.config.js ├── .github ├── workflows │ └── ci.yml └── dependabot.yml ├── .gitignore ├── .babelrc ├── tsconfig.json ├── .eslintrc.json ├── package.json └── README.md /.env.example: -------------------------------------------------------------------------------- 1 | GRAPHQL_HOST= 2 | GRAPHQL_TOKEN= 3 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "all", 3 | "semi": true, 4 | "singleQuote": false 5 | } -------------------------------------------------------------------------------- /public/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CaioAugustoo/portfolio/HEAD/public/img/favicon.ico -------------------------------------------------------------------------------- /public/img/logo144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CaioAugustoo/portfolio/HEAD/public/img/logo144.png -------------------------------------------------------------------------------- /public/img/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CaioAugustoo/portfolio/HEAD/public/img/logo192.png -------------------------------------------------------------------------------- /public/img/logo256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CaioAugustoo/portfolio/HEAD/public/img/logo256.png -------------------------------------------------------------------------------- /public/img/logo384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CaioAugustoo/portfolio/HEAD/public/img/logo384.png -------------------------------------------------------------------------------- /public/img/logo48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CaioAugustoo/portfolio/HEAD/public/img/logo48.png -------------------------------------------------------------------------------- /public/img/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CaioAugustoo/portfolio/HEAD/public/img/logo512.png -------------------------------------------------------------------------------- /public/img/logo72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CaioAugustoo/portfolio/HEAD/public/img/logo72.png -------------------------------------------------------------------------------- /public/img/logo96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CaioAugustoo/portfolio/HEAD/public/img/logo96.png -------------------------------------------------------------------------------- /generators/templates/styles.ts.hbs: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Wrapper = styled.main``; -------------------------------------------------------------------------------- /public/fonts/poppins-v15-latin-300.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CaioAugustoo/portfolio/HEAD/public/fonts/poppins-v15-latin-300.woff2 -------------------------------------------------------------------------------- /public/fonts/poppins-v15-latin-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CaioAugustoo/portfolio/HEAD/public/fonts/poppins-v15-latin-500.woff2 -------------------------------------------------------------------------------- /public/fonts/poppins-v15-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CaioAugustoo/portfolio/HEAD/public/fonts/poppins-v15-latin-700.woff2 -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.codeActionsOnSave": { 4 | "source.fixAll.eslint": true 5 | } 6 | } -------------------------------------------------------------------------------- /public/fonts/poppins-v15-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CaioAugustoo/portfolio/HEAD/public/fonts/poppins-v15-latin-regular.woff2 -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = spaces 5 | indent_size = 2 6 | end_of_lines = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true -------------------------------------------------------------------------------- /src/config/links.ts: -------------------------------------------------------------------------------- 1 | export enum LinksEnum { 2 | "Email" = "hi@caioaugusto.dev", 3 | "Linktree" = "https://linktr.ee/caioaugustoo", 4 | "Blog" = "https://blog.caioaugusto.dev", 5 | } 6 | -------------------------------------------------------------------------------- /generators/templates/index.tsx.hbs: -------------------------------------------------------------------------------- 1 | import * as S from "./styles"; 2 | 3 | const {{pascalCase name}} = () => ( 4 | 5 |

{{pascalCase name}}

6 | 7 | ); 8 | 9 | export default {{pascalCase name}}; -------------------------------------------------------------------------------- /src/components/UI/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import * as S from "./styles"; 2 | 3 | import { ButtonProps } from "types/types"; 4 | 5 | const Button = ({ children }: ButtonProps) => { 6 | return {children}; 7 | }; 8 | 9 | export default Button; 10 | -------------------------------------------------------------------------------- /src/styles/styled-components.d.ts: -------------------------------------------------------------------------------- 1 | import theme from './theme/theme' 2 | 3 | type Theme = typeof theme 4 | 5 | declare module 'styled-components' { 6 | // eslint-disable-next-line @typescript-eslint/no-empty-interface 7 | export interface DefaultTheme extends Theme {} 8 | } 9 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const withPWA = require("next-pwa"); 2 | const isProd = process.env.NODE_ENV === "production"; 3 | 4 | module.exports = withPWA({ 5 | pwa: { 6 | dest: "public", 7 | disable: !isProd, 8 | }, 9 | images: { 10 | domains: ["media.graphcms.com"], 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /src/graphql/client.ts: -------------------------------------------------------------------------------- 1 | import { GraphQLClient } from 'graphql-request' 2 | 3 | const endpoint = process.env.GRAPHQL_HOST || '' 4 | 5 | const client = new GraphQLClient(endpoint, { 6 | headers: { 7 | authorization: `Bearer ${process.env.GRAPHQL_TOKEN}` 8 | } 9 | }) 10 | 11 | export default client 12 | -------------------------------------------------------------------------------- /src/components/UI/Title/index.tsx: -------------------------------------------------------------------------------- 1 | import useAnimateOnScroll from "hooks/useAnimateOnScroll"; 2 | import { TitlesProps } from "types/types"; 3 | 4 | import * as S from "./styles"; 5 | 6 | const Title = ({ children }: TitlesProps) => { 7 | const elementRef = useAnimateOnScroll(); 8 | 9 | return {children}; 10 | }; 11 | 12 | export default Title; 13 | -------------------------------------------------------------------------------- /src/components/Sections/Portfolio/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { fromBottom } from "styles/keyframes/keyframes"; 3 | 4 | export const Wrapper = styled.section` 5 | height: auto; 6 | max-width: 125rem; 7 | margin: 0 auto; 8 | padding: 10rem 3rem; 9 | transition: all 0.3s ease; 10 | 11 | &.active > div > * { 12 | animation: ${fromBottom} 0.5s forwards; 13 | } 14 | `; 15 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | on: [pull_request] 3 | 4 | jobs: 5 | build: 6 | runs-on: ubuntu-latest 7 | steps: 8 | - name: Checkout Repository 9 | uses: actions/checkout@v2 10 | 11 | - name: Setup Node 12 | uses: actions/setup-node@v1 13 | with: 14 | node-version: 14.x 15 | 16 | - name: Install dependencies 17 | run: yarn install 18 | 19 | - name: Build 20 | run: yarn build 21 | -------------------------------------------------------------------------------- /src/graphql/queries.ts: -------------------------------------------------------------------------------- 1 | import { gql } from "graphql-request"; 2 | 3 | export const GET_HOME_PAGE = gql` 4 | query getHome { 5 | homepages { 6 | hellotext 7 | introtext { 8 | html 9 | } 10 | introabout { 11 | html 12 | } 13 | about { 14 | html 15 | } 16 | } 17 | projects { 18 | title 19 | about 20 | sourcelink 21 | link 22 | image { 23 | url 24 | } 25 | } 26 | } 27 | `; 28 | -------------------------------------------------------------------------------- /public/img/back_top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/hooks/useScroll.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | const useScroll = (target: number = 600) => { 4 | const [scrolled, setScrolled] = useState(false); 5 | 6 | useEffect(() => { 7 | const handler = () => { 8 | window.pageYOffset > target ? setScrolled(true) : setScrolled(false); 9 | }; 10 | 11 | window.addEventListener("scroll", handler); 12 | return () => window.removeEventListener("scroll", handler); 13 | }, []); 14 | 15 | return { scrolled }; 16 | }; 17 | 18 | export default useScroll; 19 | -------------------------------------------------------------------------------- /.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 | 27 | # local env files 28 | .env 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | 34 | # vercel 35 | .vercel 36 | -------------------------------------------------------------------------------- /src/components/UI/ScrollTop/index.tsx: -------------------------------------------------------------------------------- 1 | import useScroll from "hooks/useScroll"; 2 | import { Link } from "react-scroll"; 3 | 4 | import * as S from "./styles"; 5 | 6 | const ScrollTop = () => { 7 | const { scrolled } = useScroll(); 8 | 9 | return ( 10 | 11 | 12 | Icone para voltar ao topo da imagem 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default ScrollTop; 22 | -------------------------------------------------------------------------------- /src/components/UI/Button/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { css } from "styled-components"; 2 | 3 | export const Button = styled.button` 4 | ${({ theme }) => css` 5 | background-color: ${theme.colors.primary}; 6 | color: ${theme.colors.white}; 7 | padding: 12px 40px; 8 | border-radius: 5px; 9 | border: none; 10 | font-family: ${theme.font.family}; 11 | font-size: 1.5rem; 12 | letter-spacing: 0.5px; 13 | cursor: pointer; 14 | transition: all 0.3s ease; 15 | 16 | &:hover { 17 | background-color: ${theme.colors.secondary}; 18 | transform: translateY(-3px); 19 | } 20 | `} 21 | `; 22 | -------------------------------------------------------------------------------- /src/components/Sections/Portfolio/index.tsx: -------------------------------------------------------------------------------- 1 | import * as S from "./styles"; 2 | 3 | import PortfolioItems from "components/UI/Portfolio"; 4 | import Title from "components/UI/Title"; 5 | 6 | import useAnimateOnScroll from "hooks/useAnimateOnScroll"; 7 | 8 | import { PortfolioDataProps } from "types/types"; 9 | 10 | const PortfolioSection = ({ data }: PortfolioDataProps) => { 11 | const elementRef = useAnimateOnScroll(0); 12 | 13 | return ( 14 | 15 | Portfolio 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default PortfolioSection; 22 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "development": { 4 | "plugins": [ 5 | [ 6 | "babel-plugin-styled-components", 7 | { "ssr": true, "displayName": true, "preprocess": false } 8 | ] 9 | ], 10 | "presets": ["next/babel"] 11 | }, 12 | "production": { 13 | "plugins": [ 14 | [ 15 | "babel-plugin-styled-components", 16 | { "ssr": true, "displayName": true, "preprocess": false } 17 | ] 18 | ], 19 | "presets": ["next/babel"] 20 | } 21 | }, 22 | "plugins": [ 23 | [ 24 | "babel-plugin-styled-components", 25 | { "ssr": true, "displayName": true, "preprocess": false } 26 | ] 27 | ] 28 | } -------------------------------------------------------------------------------- /src/components/Sections/About/index.tsx: -------------------------------------------------------------------------------- 1 | import Title from "components/UI/Title"; 2 | import useAnimateOnScroll from "hooks/useAnimateOnScroll"; 3 | import { AboutPageDataProps } from "types/types"; 4 | 5 | import { Container } from "styles/globals"; 6 | import * as S from "./styles"; 7 | 8 | const AboutSection = ({ data }: AboutPageDataProps) => { 9 | const elementRef = useAnimateOnScroll(); 10 | 11 | return ( 12 | 13 | 14 | About 15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default AboutSection; 22 | -------------------------------------------------------------------------------- /src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from "next"; 2 | 3 | import HomePage from "Templates/Home"; 4 | 5 | import { GET_HOME_PAGE } from "graphql/queries"; 6 | import client from "graphql/client"; 7 | 8 | import { HomePageProps } from "types/types"; 9 | 10 | const Index = ({ homepages, projects }: HomePageProps) => { 11 | return ; 12 | }; 13 | 14 | export default Index; 15 | 16 | export const getStaticProps: GetStaticProps = async () => { 17 | const { homepages, projects } = await client.request(GET_HOME_PAGE); 18 | 19 | return { 20 | props: { 21 | homepages, 22 | projects, 23 | }, 24 | revalidate: 600, 25 | }; 26 | }; 27 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "allowJs": true, 11 | "skipLibCheck": true, 12 | "strict": true, 13 | "forceConsistentCasingInFileNames": true, 14 | "noEmit": true, 15 | "esModuleInterop": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "jsx": "preserve" 21 | }, 22 | "include": [ 23 | "next-env.d.ts", 24 | "**/*.ts", 25 | "**/*.tsx", "src/pages/_app.js" 26 | ], 27 | "exclude": [ 28 | "node_modules" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /generators/plopfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (plop) { 2 | // controller generator 3 | plop.setGenerator("component", { 4 | description: "application component logic", 5 | prompts: [ 6 | { 7 | type: "input", 8 | name: "name", 9 | message: "controller name please", 10 | }, 11 | ], 12 | actions: [ 13 | { 14 | type: "add", 15 | path: "../src/components/{{pascalCase name}}/index.tsx", 16 | templateFile: "templates/index.tsx.hbs", 17 | }, 18 | { 19 | type: "add", 20 | path: "../src/components/{{pascalCase name}}/styles.tsx", 21 | templateFile: "templates/styles.ts.hbs", 22 | }, 23 | ], 24 | }); 25 | }; 26 | -------------------------------------------------------------------------------- /src/components/UI/ScrollTop/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { css } from "styled-components"; 2 | import { ScrollTopProps } from "types/types"; 3 | 4 | export const ScrollTop = styled.button` 5 | ${({ theme, scrolled }) => css` 6 | background: ${theme.colors.secondary}; 7 | position: fixed; 8 | right: 30px; 9 | bottom: 30px; 10 | border-radius: 100px; 11 | padding: 0.9rem; 12 | border: none; 13 | cursor: pointer; 14 | transition: all 0.3s ease; 15 | transform: translateY(0); 16 | opacity: ${scrolled ? 1 : 0}; 17 | pointer-events: ${scrolled ? "all" : "none"}; 18 | 19 | &:hover { 20 | background: ${theme.colors.primary}; 21 | transform: translateY(-2px); 22 | } 23 | `} 24 | `; 25 | -------------------------------------------------------------------------------- /src/styles/theme/theme.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | colors: { 3 | mainbg: "#0e1012", 4 | primary: "#007afc", 5 | secondary: "#3195ff", 6 | white: "#ffffff", 7 | }, 8 | media: { 9 | sm: "560px", 10 | md: "990px", 11 | lg: "1250px", 12 | }, 13 | font: { 14 | family: "Poppins, sans-serif", 15 | light: 300, 16 | normal: 400, 17 | medium: 500, 18 | bold: 700, 19 | sizes: { 20 | xxxsmall2: "1.4rem", 21 | xxxsmall: "1.6rem", 22 | xxsmall: "1.8rem", 23 | xxsmallx2: "2.0rem", 24 | xsmall: "2.2rem", 25 | xsmallx2: "2.4rem", 26 | small: "3.0rem", 27 | smallx2: "4.8rem", 28 | xlarge: "5.0rem", 29 | large: "8.0rem", 30 | }, 31 | }, 32 | } as const; 33 | -------------------------------------------------------------------------------- /src/components/UI/Footer/styles.ts: -------------------------------------------------------------------------------- 1 | import styled, { css } from "styled-components"; 2 | 3 | export const Wrapper = styled.footer` 4 | padding: 30px 0px; 5 | text-align: center; 6 | margin: 15rem auto 0 auto; 7 | `; 8 | 9 | export const Links = styled.nav` 10 | ${({ theme }) => css` 11 | a { 12 | font-size: 1.5rem; 13 | cursor: pointer; 14 | color: ${theme.colors.white}; 15 | 16 | &:hover { 17 | text-decoration: underline; 18 | } 19 | } 20 | `} 21 | `; 22 | 23 | export const LinksWrapper = styled.ul` 24 | display: flex; 25 | justify-content: center; 26 | 27 | li { 28 | margin: 10px; 29 | } 30 | `; 31 | 32 | export const Copyright = styled.p` 33 | ${({ theme }) => css` 34 | font-size: ${theme.font.sizes.xxxsmall2}; 35 | `} 36 | `; 37 | -------------------------------------------------------------------------------- /src/Templates/Home/index.tsx: -------------------------------------------------------------------------------- 1 | import Header from "components/UI/Header"; 2 | import Home from "components/Sections/Home"; 3 | import AboutSection from "components/Sections/About"; 4 | import PortfolioSection from "components/Sections/Portfolio"; 5 | import ContactSection from "components/Sections/Contact"; 6 | import ScrollTop from "components/UI/ScrollTop"; 7 | import Footer from "components/UI/Footer"; 8 | 9 | import { HomePageProps } from "types/types"; 10 | 11 | const HomePage = ({ homepages, projects }: HomePageProps) => { 12 | return ( 13 | <> 14 |
15 | 16 | 17 | 18 | 19 |