├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── src ├── assets │ ├── bbb.png │ ├── bird.png │ ├── git.png │ ├── wpp.png │ ├── darkGit.png │ ├── darkWpp.png │ ├── flappy-2023-01-22_17.24.18.mp4 │ ├── darkHouse.svg │ ├── house.svg │ ├── mail.svg │ ├── darkMail.svg │ ├── check.svg │ ├── darkCheck.svg │ ├── sun.svg │ ├── moon.svg │ ├── phone.svg │ └── darkPhone.svg ├── components │ ├── MainContainer │ │ └── MainContainer.js │ ├── CardsContactContainer │ │ └── CardsContactContainer.js │ ├── AboutExperienceContainer │ │ └── AboutExperienceContainer.js │ ├── Card │ │ └── Card.js │ ├── Cards │ │ └── Cards.js │ ├── About │ │ └── About.js │ ├── Header │ │ └── Header.js │ ├── WhoIM │ │ └── WhoIM.js │ ├── Contact │ │ └── Contact.js │ └── MyExperience │ │ └── MyExperience.js ├── index.js ├── index.css └── App.js ├── tailwind.config.js ├── .gitignore ├── LICENSE ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andradeigor/punpuns-portfolio/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andradeigor/punpuns-portfolio/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andradeigor/punpuns-portfolio/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/assets/bbb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andradeigor/punpuns-portfolio/HEAD/src/assets/bbb.png -------------------------------------------------------------------------------- /src/assets/bird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andradeigor/punpuns-portfolio/HEAD/src/assets/bird.png -------------------------------------------------------------------------------- /src/assets/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andradeigor/punpuns-portfolio/HEAD/src/assets/git.png -------------------------------------------------------------------------------- /src/assets/wpp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andradeigor/punpuns-portfolio/HEAD/src/assets/wpp.png -------------------------------------------------------------------------------- /src/assets/darkGit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andradeigor/punpuns-portfolio/HEAD/src/assets/darkGit.png -------------------------------------------------------------------------------- /src/assets/darkWpp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andradeigor/punpuns-portfolio/HEAD/src/assets/darkWpp.png -------------------------------------------------------------------------------- /src/assets/flappy-2023-01-22_17.24.18.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andradeigor/punpuns-portfolio/HEAD/src/assets/flappy-2023-01-22_17.24.18.mp4 -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "start_url": ".", 5 | "display": "standalone", 6 | "theme_color": "#000000", 7 | "background_color": "#ffffff" 8 | } 9 | -------------------------------------------------------------------------------- /src/components/MainContainer/MainContainer.js: -------------------------------------------------------------------------------- 1 | const MainContainer = ({ children }) => { 2 | return ( 3 |
4 | {children} 5 |
6 | ); 7 | }; 8 | 9 | export default MainContainer; 10 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById("root")); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{js,jsx,ts,tsx}"], 4 | darkMode: "class", 5 | theme: { 6 | extend: {}, 7 | fontFamily: { 8 | Inter: ["Inter"], 9 | }, 10 | }, 11 | plugins: [require("tailwind-scrollbar")({ nocompatible: true })], 12 | }; 13 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | outline: 0; 9 | box-sizing: border-box; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | } 13 | 14 | body { 15 | overflow-x: hidden; 16 | } 17 | html { 18 | scroll-behavior: smooth; 19 | } 20 | -------------------------------------------------------------------------------- /.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 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/components/CardsContactContainer/CardsContactContainer.js: -------------------------------------------------------------------------------- 1 | import Cards from "../Cards/Cards"; 2 | import Contact from "../Contact/Contact"; 3 | 4 | const AboutExperienceContainer = ({ theme }) => { 5 | return ( 6 |
7 | 8 | 9 |
10 | ); 11 | }; 12 | 13 | export default AboutExperienceContainer; 14 | -------------------------------------------------------------------------------- /src/assets/darkHouse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/house.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/AboutExperienceContainer/AboutExperienceContainer.js: -------------------------------------------------------------------------------- 1 | import Myexperience from "../MyExperience/MyExperience"; 2 | import About from "../About/About"; 3 | const AboutExperienceContainer = ({ theme }) => { 4 | return ( 5 |
6 | 7 | 8 |
9 | ); 10 | }; 11 | 12 | export default AboutExperienceContainer; 13 | -------------------------------------------------------------------------------- /src/assets/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/darkMail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/darkCheck.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Igor Andrade 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "punpuns-portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": ".", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.5", 8 | "@testing-library/react": "^13.4.0", 9 | "@testing-library/user-event": "^13.5.0", 10 | "framer-motion": "^8.5.0", 11 | "react": "^18.2.0", 12 | "react-dom": "^18.2.0", 13 | "react-scripts": "^5.0.1", 14 | "web-vitals": "^2.1.4" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | }, 40 | "devDependencies": { 41 | "prettier": "^2.8.3", 42 | "prettier-plugin-tailwindcss": "^0.2.1", 43 | "tailwind-scrollbar": "^2.1.0", 44 | "tailwindcss": "^3.2.4" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import Header from "./components/Header/Header"; 2 | import WhoIM from "./components/WhoIM/WhoIM"; 3 | import AboutExperienceContainer from "./components/AboutExperienceContainer/AboutExperienceContainer"; 4 | import CardsContactContainer from "./components/CardsContactContainer/CardsContactContainer"; 5 | import { useEffect, useState } from "react"; 6 | function App() { 7 | const [theme, setTheme] = useState(false); 8 | useEffect(() => { 9 | theme 10 | ? document.documentElement.classList.add("dark") 11 | : document.documentElement.classList.remove("dark"); 12 | }, [theme]); 13 | return ( 14 |
19 |
20 |
setTheme(!theme)} theme={theme} /> 21 |
22 |
23 | 24 | 25 | 26 |
27 |
28 | ); 29 | } 30 | 31 | export default App; 32 | -------------------------------------------------------------------------------- /src/assets/sun.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/Card/Card.js: -------------------------------------------------------------------------------- 1 | import BBBPath from "../../assets/bbb.png"; 2 | import GitPath from "../../assets/git.png"; 3 | import BirdPath from "../../assets/bird.png"; 4 | import darkGitPath from "../../assets/darkGit.png"; 5 | 6 | const Card = ({ data, theme }) => { 7 | const imagePath = [BBBPath, BirdPath, GitPath]; 8 | return ( 9 |
10 |
11 | BBB robot 23 |
24 |
25 |

26 | {data.Name} 27 |

28 |

29 | {data.Text} 30 |

31 |
32 |
33 | ); 34 | }; 35 | 36 | export default Card; 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PunPun's Portfolio 2 | 3 | Este projeto consiste num modelo de Portfolio implementado com base no personagem PunPun. O site foi feito apenas para estudos e é baseado em modelos disponíveis na internet. 4 | 5 | - [Como usar](#como-usar) 6 | - [Tecnologias](#tecnologias) 7 | - [Demonstração](#demonstracao) 8 | - [Contribuidores](#contribuidores) 9 | - [Licença](#licença) 10 | 11 | ## 🤖 Como Usar: 12 | 13 | Rodando o Site. 14 | 15 | ```bash 16 | Clone esse repositório 17 | $ git clone https://github.com/andradeigor/punpuns-portfolio 18 | 19 | # Acesse a pasta dos scripts 20 | $ cd punpuns-portfolio 21 | 22 | # Instale dependências 23 | $ yarn 24 | 25 | #inicie o servidor local com o react 26 | $ yarn start 27 | 28 | 29 | ``` 30 | 31 | ## 📜 Demonstração: 32 | 33 | 34 | https://user-images.githubusercontent.com/21049910/213947046-7d407859-a3b5-430b-8d11-efee31e8d4c7.mp4 35 | 36 | 37 | 38 | 39 | ## 💻 Tecnologias: 40 | 41 | - React 42 | - Tailwind 43 | - Framer Motion 44 | 45 | ## 👥 Contribuidores: 46 | 47 | Esses são os contribuidores do projeto (emoji key). 48 | 49 | 50 | 51 | 52 | 53 |

Igor Andrade
🤔 💻 🚧
54 | 55 | ## 📖 Licença 56 | 57 | Este projeto está licenciado sob a licença MIT. 58 | -------------------------------------------------------------------------------- /src/components/Cards/Cards.js: -------------------------------------------------------------------------------- 1 | import Card from "../Card/Card"; 2 | 3 | const Cards = ({ theme }) => { 4 | const CardsData = [ 5 | { 6 | Name: "BBB TRACKER", 7 | Text: "A Crawler that gets the numbers of follows from Instagram accounts", 8 | }, 9 | { 10 | Name: "COSINE MATCHER", 11 | Text: "A program that uses cosine similarity to detects pipes and beat Flappy Bird", 12 | }, 13 | { 14 | Name: "GITHUB viewer", 15 | Text: "A page where you can search for a github profile and visualize it in a nicer way", 16 | }, 17 | ]; 18 | return ( 19 |
23 |
24 |
25 |

26 | MY PORTFOLIO 27 |

28 |
29 |
30 |
31 |
32 |
33 |
34 | {CardsData.map((item, index) => ( 35 | 36 | ))} 37 |
38 |
39 |
40 | ); 41 | }; 42 | 43 | export default Cards; 44 | -------------------------------------------------------------------------------- /src/assets/moon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 19 | 23 | 32 | PunPun's 33 | 34 | 35 | 36 |
37 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/assets/phone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/darkPhone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/About/About.js: -------------------------------------------------------------------------------- 1 | const About = ({ theme }) => { 2 | return ( 3 |
7 |
8 |
9 |

10 | ABOUT ME 11 |

12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |

20 | Hi, again 21 |

22 |

23 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus 24 | in auctor elit. Aenean sed arcu commodo, venenatis justo a, 25 | rhoncus nibh. Donec sed ex luctus, hendrerit massa id, interdum 26 | quam. Nunc vehicula mi quis massa volutpat fermentum. 27 |

28 | 31 |
32 |
33 |
34 |

35 | Sadness 36 |

37 |
38 |
39 |
40 |
41 |
42 |
43 |

44 | Hopeless 45 |

46 |
47 |
48 |
49 |
50 |
51 |
52 |

53 | Depression 54 |

55 |
56 |
57 |
58 |
59 |
60 | {theme && ( 61 |
62 |

63 | Guiltiness 64 |

65 |
66 |
67 |
68 |
69 |
70 | )} 71 |
72 |
73 |
74 |
75 | ); 76 | }; 77 | 78 | export default About; 79 | -------------------------------------------------------------------------------- /src/components/Header/Header.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import MoonPath from "../../assets/moon.svg"; 3 | import SunPath from "../../assets/sun.svg"; 4 | import { useScroll, motion } from "framer-motion"; 5 | const Header = ({ setTheme, theme }) => { 6 | const { scrollYProgress } = useScroll(); 7 | const [show, setShow] = useState(true); 8 | const [lastScrollY, setLastScrollY] = useState(0); 9 | 10 | /*essa parte do controlnavbar e do useeffect eu sinceramente peguei do google*/ 11 | const controlNavbar = () => { 12 | if (typeof window !== "undefined") { 13 | if (window.scrollY > lastScrollY) { 14 | setShow(false); 15 | } else { 16 | setShow(true); 17 | } 18 | 19 | setLastScrollY(window.scrollY); 20 | } 21 | }; 22 | 23 | useEffect(() => { 24 | if (typeof window !== "undefined") { 25 | window.addEventListener("scroll", controlNavbar); 26 | return () => { 27 | window.removeEventListener("scroll", controlNavbar); 28 | }; 29 | } 30 | }, [lastScrollY]); 31 | return ( 32 |
37 |
38 |
39 |

40 | PunPun's 41 |

42 |
43 | 44 | 62 |
63 | 85 |
86 |
87 | 88 | 92 |
93 | ); 94 | }; 95 | 96 | export default Header; 97 | -------------------------------------------------------------------------------- /src/components/WhoIM/WhoIM.js: -------------------------------------------------------------------------------- 1 | import wppPath from "../../assets/wpp.png"; 2 | import wppDarkPath from "../../assets/darkWpp.png"; 3 | import { motion, AnimatePresence } from "framer-motion"; 4 | 5 | const WhoIM = ({ theme }) => { 6 | const helloQuote = "HELLO, MY NAME IS:"; 7 | const nameQuote = "Punpun Onodera"; 8 | const aboutQuote = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus 9 | in auctor elit. Aenean sed arcu commodo, venenatis justo a, 10 | rhoncus nibh. Donec sed ex luctus, hendrerit massa id, interdum 11 | quam. Nunc vehicula mi quis massa volutpat fermentum. Nam purus 12 | neque, vulputate at varius in, tempor sed dui. Aenean at turpis 13 | nisl. `; 14 | const setence = { 15 | hidden: { opacity: 1 }, 16 | visible: { 17 | opacity: 1, 18 | transition: { 19 | delay: 0.5, 20 | staggerChildren: 0.08, 21 | }, 22 | }, 23 | }; 24 | const letter = { 25 | hidden: { opacity: 0, x: -50 }, 26 | visible: { 27 | opacity: 1, 28 | x: 0, 29 | }, 30 | }; 31 | 32 | return ( 33 |
34 |
35 | 45 |
46 |
47 | 48 | 55 | {helloQuote.split("").map((caracter, index) => { 56 | return ( 57 | 58 | {caracter} 59 | 60 | ); 61 | })} 62 | 63 | 70 | {nameQuote.split("").map((caracter, index) => { 71 | return ( 72 | 73 | {caracter} 74 | 75 | ); 76 | })} 77 | 78 | 85 | {aboutQuote.split("\n").map((word, index) => { 86 | return ( 87 | 88 | {word} 89 | 90 | ); 91 | })} 92 | {theme && ( 93 | 98 | It's my fault 99 | 100 | )} 101 | 102 | 103 | 104 | 107 | 108 |
109 |
110 |
111 |
112 |
113 | ); 114 | }; 115 | 116 | export default WhoIM; 117 | -------------------------------------------------------------------------------- /src/components/Contact/Contact.js: -------------------------------------------------------------------------------- 1 | import PhonePath from "../../assets/phone.svg"; 2 | import MailPath from "../../assets/mail.svg"; 3 | import HousePath from "../../assets/house.svg"; 4 | import darkPhonePath from "../../assets/darkPhone.svg"; 5 | import darkMailPath from "../../assets/darkMail.svg"; 6 | import darkHousePath from "../../assets/darkHouse.svg"; 7 | 8 | const Contact = ({ theme }) => { 9 | return ( 10 |
14 |
15 |
16 |

17 | GET IN TOUCH 18 |

19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |

28 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus 29 | in auctor elit. 30 |

31 |
32 |
33 |
34 |
35 |
36 | 41 |
42 |
43 |
44 |

45 | {" "} 46 | Phone 47 |

48 |

49 | +81 6666-666 50 |

51 |
52 |
53 |
54 |
55 |
56 | 61 |
62 |
63 |
64 |

65 | {" "} 66 | Email 67 |

68 |

69 | PunPun@***.com 70 |

71 |
72 |
73 |
74 |
75 |
76 | 81 |
82 |
83 |
84 |

85 | Location 86 |

87 |

88 | Kagoshima city, next to Urata Beach 89 |

90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | 102 |
103 |
104 | 109 |
110 |
111 |
112 |
113 |