9 | {projects?.map(({ image, title, about, link, sourcelink }, index) => (
10 |
11 |
12 | {title}
13 | {about}
14 |
15 |
16 |
17 | Visit →
18 |
19 |
20 | Source
21 |
22 |
23 |
24 |
25 |
26 | ))}
27 |
28 | >
29 | );
30 | };
31 | export default PortfolioItems;
32 |
--------------------------------------------------------------------------------
/src/components/UI/Portfolio/projects.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "project_name": "Dogs",
4 | "project_description": "This project consists of a social network inspired by Instagram, made especially for dogs. Consume an API and return the data. We can log in, register as a new user, post a new photo, delete photos, recover passwords, etc. all through an API. Developed with React.js.",
5 | "project_url": "https://dogs-eta.vercel.app/",
6 | "project_git": "https://github.com/CaioAugustoo/dogs",
7 | "project_image": "https://i.gyazo.com/0313d90079239704611501f4557d91e1.png"
8 | },
9 | {
10 | "project_name": "PickPallet",
11 | "project_description": "This project is a clone of ColorHunt. Both web apps have the same intentions: to gather different palettes in order to help designers and artists. Any user can view / create any palette and copy each color from each palette. What's more, it contains an infinite scroll. An API is consumed in which I developed. Developed with React.js.",
12 | "project_url": "https://pick-pallet.vercel.app/",
13 | "project_git": "https://github.com/CaioAugustoo/pick_pallet",
14 | "project_image": "https://i.gyazo.com/f5d963e93d930ed900ffe580b5849b09.png"
15 | },
16 | {
17 | "project_name": "Blog",
18 | "project_description": "This project consists of a personal blog, where in the future I will make posts giving tips and passing on knowledge that I acquired and that I will acquire throughout my career. In this project I learned how to use new libraries and I was able to try Next.js. It was my first project with Next.js. Developed with Next.js, GraphQL and TypeScript.",
19 | "project_url": "https://caio-blog.vercel.app/",
20 | "project_git": "https://github.com/CaioAugustoo/nextjs_blog",
21 | "project_image": "https://i.gyazo.com/850d588d2e4d24f33a1a5b74ffb1af42.png"
22 | },
23 | {
24 | "project_name": "CV19Tracker",
25 | "project_description": "This was my first project with React.js. This project consumes a Brazilian API that returns the data in real time of the coronavirus situation in Brazil and in the world. I was able to learn a lot from this project. I learned how to consume API's in React and how to use functional components.",
26 | "project_url": "https://cv19tracker.netlify.app",
27 | "project_git": "https://github.com/CaioAugustoo/cv19tracker",
28 | "project_image": "https://i.gyazo.com/ad7a6db28ac6352ace7f1c99cdc52622.png"
29 | },
30 | {
31 | "project_name": "Gitfinder",
32 | "project_description": "This project consists of consuming the Github API. You enter a Github user and the application will return data from the profile you are looking for. Data such as: User profile picture, name, and more. The repositories with the most stars are also filtered. Developed with React.js.",
33 | "project_url": "https://git-overview.netlify.app",
34 | "project_git": "https://github.com/CaioAugustoo/git_finder",
35 | "project_image": "https://i.gyazo.com/8be64821c462661185745e7d8db60166.png"
36 | }
37 | ]
38 |
--------------------------------------------------------------------------------
/src/components/UI/Portfolio/styles.tsx:
--------------------------------------------------------------------------------
1 | import styled, { css } from "styled-components";
2 |
3 | export const Wrapper = styled.div`
4 | ${({ theme }) => css`
5 | padding: 1rem 8rem 1rem 0rem;
6 |
7 | @media (max-width: ${theme.media.lg}) {
8 | padding: 2rem 0rem;
9 | text-align: center;
10 | }
11 | `}
12 | `;
13 |
14 | export const WorkItem = styled.div`
15 | ${({ theme }) => css`
16 | display: flex;
17 | justify-content: space-between;
18 | margin: 5rem 0 10rem 0;
19 | transform: translateY(100px);
20 | opacity: 0;
21 |
22 | @media (max-width: ${theme.media.lg}) {
23 | flex-direction: column-reverse;
24 | max-width: 600px;
25 | margin: 5rem auto;
26 | text-align: center;
27 | }
28 | `}
29 | `;
30 |
31 | export const WorkItemTitle = styled.h3`
32 | ${({ theme }) => css`
33 | margin-bottom: 20px;
34 | font-size: ${theme.font.sizes.small};
35 | font-weight: ${theme.font.medium};
36 |
37 | @media (max-width: ${theme.media.md}) {
38 | font-size: ${theme.font.sizes.xxsmallx2};
39 | margin: 10px 0;
40 | }
41 | `}
42 | `;
43 |
44 | export const WorkItemDescription = styled.p`
45 | ${({ theme }) => css`
46 | font-weight: ${theme.font.light};
47 | font-size: ${theme.font.sizes.xxxsmall};
48 | line-height: 1.8;
49 |
50 | margin: 30px 0 10px 0;
51 |
52 | @media (max-width: ${theme.media.md}) {
53 | font-size: ${theme.font.sizes.xxxsmall2};
54 | margin: 20px 0 0 0;
55 | }
56 | `}
57 | `;
58 |
59 | export const WorkItemButton = styled.div`
60 | ${({ theme }) => css`
61 | font-weight: ${theme.font.medium};
62 | font-size: ${theme.font.sizes.xxxsmall};
63 | padding-top: 3rem;
64 |
65 | a {
66 | color: ${theme.colors.white};
67 |
68 | &:hover {
69 | text-decoration: underline;
70 | }
71 | }
72 |
73 | display: flex;
74 | justify-content: space-between;
75 |
76 | cursor: pointer;
77 | transition: color 0.3s ease;
78 |
79 | @media (max-width: ${theme.media.md}) {
80 | font-size: ${theme.font.sizes.xxxsmall2};
81 | justify-content: space-around;
82 | }
83 | `}
84 | `;
85 |
86 | export const WorkItemImage = styled.img`
87 | ${({ theme }) => css`
88 | max-width: 100%;
89 | width: 640px;
90 | display: flex;
91 | border-radius: 5px;
92 |
93 | @media (max-width: ${theme.media.lg}) {
94 | margin: 0 auto;
95 | }
96 | `}
97 | `;
98 |
--------------------------------------------------------------------------------
/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 |