diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/index.html b/public/index.html index aa069f2..6faa27d 100644 --- a/public/index.html +++ b/public/index.html @@ -10,34 +10,22 @@ content="Web site created using create-react-app" /> - + + + + - React App
- diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 080d6c7..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index e9e57dc..0000000 --- a/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/src/App.css b/src/App.css index 74b5e05..af77199 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,206 @@ -.App { +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); + +:root { + --header-height: 3rem; + + --hue: 0; + --sat: 0%; + --title-color: hsl(var(--hue), var(--sat), 20%); + --title-color-dark: hsl(var(--hue), var(--sat), 0%); + --text-color: hsl(var(--hue), var(--sat), 46%); + --body-color: hsl(var(--hue), var(--sat), 98%); + --container-color: #fff; + + --body-font: "Poppins", sans-serif; + + --big-font-size: 3.5rem; + --h1-font-size: 2.25rem; + --h2-font-size: 1.5rem; + --h3-font-size: 1.25rem; + --normal-font-size: 1rem; + --small-font-size: 0.875rem; + --smaller-font-size: 0.813rem; + --tiny-font-size: 0.625rem; + + --font-normal: 400; + --font-medium: 500; + --font-semi-bold: 600; + + --mb-0-25: 0.25rem; + --mb-0-5: 0.5rem; + --mb-0-75: 0.75rem; + --mb-1: 1rem; + --mb-1-5: 1.5rem; + --mb-2: 2rem; + --mb-2-5: 2.5rem; + --mb-3: 3rem; + + --z-tooltip: 10; + --z-fixed: 100; + --z-modal: 1000; +} + +@media screen and (max-width: 992px) { + :root { + --big-font-size: 2.75rem; + --h1-font-size: 1.5rem; + --h2-font-size: 1.25rem; + --h3-font-size: 1rem; + --normal-font-size: 0.938rem; + --small-font-size: 0.813rem; + --smaller-font-szie: 0.75rem; + } +} + +/* ================= Base ================= */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body, +button, +input, +textarea { + font-family: var(--body-font); + font-size: var(--normal-font-size); +} + +body { + background-color: var(--body-color); + color: var(--text-color); +} + +h1, +h2, +h3 { + color: var(--title-color); + font-weight: var(--font-semi-bold); +} + +ul { + list-style: none; +} + +a { + text-decoration: none; +} + +button { + cursor: pointer; + border: none; + outline: none; +} + +img { + max-width: 100%; + height: auto; +} + +/* ================= REUSABLE CLASSES ================= */ +.section { + padding: 6rem 0 2rem; +} + +.section__title { + font-size: var(--h1-font-size); + color: var(--title-color); +} + +.section__subtitle { + display: block; + font-size: var(--small-font-size); + margin-bottom: 4rem; +} + +.section__title, +.section__subtitle { text-align: center; } -.App-logo { - height: 40vmin; - pointer-events: none; +/* ================= LAYOUT ================= */ +.container { + max-width: 968px; + margin-left: auto; + margin-right: auto; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } +.grid { + display: grid; + gap: 1.5rem; } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; +/* ================= BUTTONS ================= */ +.button { + display: inline-block; + background-color: var(--title-color); + color: var(--container-color); + padding: 1.25rem 2rem; + border-radius: 1rem; + font-weight: var(--font-medium); justify-content: center; - font-size: calc(10px + 2vmin); - color: white; } -.App-link { - color: #61dafb; +.button:hover { + background-color: var(--title-color-dark); +} + +.button__icon { + margin-left: var(--mb-0-5); +} + +.button--flex { + display: inline-flex; + align-items: center; +} + +/* ================= BREAKPOINTS ================= */ +/* Large screen devices */ +@media screen and (max-width: 992px) { + .container { + margin-left: var(--mb-1-5); + margin-right: var(--mb-1-5); + } + + .button { + padding: 1rem 1.75rem; + } + + .button__icon { + width: 22px; + height: 22px; + } +} + +/* Medium screen devices */ +@media screen and (max-width: 768px) { + body { + margin: 0 0 var(--header-height); + } + .section { + padding: 2rem 0 4rem; + } + + .section__subtitle { + margin-bottom: var(--mb-3); + } +} + +@media screen and (max-width: 576px) { } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); +/* Small devices */ +@media screen and (max-width: 350px) { + :root { + --big-font-size: 2.25rem; } - to { - transform: rotate(360deg); + .container { + margin-left: var(--mb-1); + margin-right: var(--mb-1); } } diff --git a/src/App.js b/src/App.js index 3784575..e0bd3ea 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,20 @@ -import logo from './logo.svg'; -import './App.css'; +import React from "react"; +import "./App.css"; +import Header from "./components/header/Header"; +import Home from "./components/home/Home"; +import About from "./components/about/About"; +import Skills from "./components/skills/Skills"; function App() { return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ <> +
+
+ + + +
+ ); } diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/assets/HenriqueResume.pdf b/src/assets/HenriqueResume.pdf new file mode 100644 index 0000000..8dbcd97 Binary files /dev/null and b/src/assets/HenriqueResume.pdf differ diff --git a/src/assets/files.svg b/src/assets/files.svg new file mode 100644 index 0000000..b5bef2a --- /dev/null +++ b/src/assets/files.svg @@ -0,0 +1,25 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/profile.png b/src/assets/profile.png new file mode 100644 index 0000000..f0a3ec8 Binary files /dev/null and b/src/assets/profile.png differ diff --git a/src/assets/scroll.svg b/src/assets/scroll.svg new file mode 100644 index 0000000..ff2c782 --- /dev/null +++ b/src/assets/scroll.svg @@ -0,0 +1,35 @@ + + + + \ No newline at end of file diff --git a/src/assets/send.svg b/src/assets/send.svg new file mode 100644 index 0000000..1e4af2b --- /dev/null +++ b/src/assets/send.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/about/About.css b/src/components/about/About.css new file mode 100644 index 0000000..f4f684d --- /dev/null +++ b/src/components/about/About.css @@ -0,0 +1,92 @@ +.about__container { + grid-template-columns: repeat(2, 1fr); + align-items: center; + column-gap: 4rem; +} + +.about__img { + width: 350ox; + border-radius: 1.5rem; + justify-self: center; +} + +.about__info { + grid-template-columns: repeat(3, 140px); + gap: 0.5rem; + margin-bottom: var(--mb-2); +} + +.about__box { + background-color: var(--container-color); + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 0.75rem; + text-align: center; + padding: 1rem 1.25rem; +} + +.about__icon { + font-size: 1.5rem; + color: var(--title-color); + margin-bottom: var(--mb-0-5); +} + +.about__title { + font-size: var(--small-font-size); + font-weight: var(--font-medium); +} + +.about__subtitle { + font-size: var(--tiny-font-size); +} + +.about__description { + padding: 0 4rem 0 0; + margin-bottom: var(--mb-2-5); +} + +/* ================= BREAKPOINTS ================= */ +/* Large screen devices */ +@media screen and (max-width: 992px) { + .about__container { + grid-template-columns: 1fr; + row-gap: 2.5rem; + } + + .about__img { + width: 220px; + } + + .about__box { + padding: 0.75rem 0.5rem; + } + + .about__data { + text-align: center; + } + + .about__info { + justify-content: center; + } + + .about__description { + padding: 0 5rem; + margin-bottom: 2rem; + } +} + +@media screen and (max-width: 576px) { + .about__info { + grid-template-columns: repeat(3, 1fr); + } + + .about__description { + padding: 0; + } +} + +/* Small devices */ +@media screen and (max-width: 376px) { + .about__info { + grid-template-columns: repeat(2, 1fr); + } +} diff --git a/src/components/about/About.jsx b/src/components/about/About.jsx new file mode 100644 index 0000000..9fc0675 --- /dev/null +++ b/src/components/about/About.jsx @@ -0,0 +1,58 @@ +import React from "react"; +import "./About.css"; +import AboutImg from "../../assets/profile.png"; +import CV from "../../assets/HenriqueResume.pdf"; +import Info from "./Info"; + +const About = () => { + return ( +
+

About me

+ My introduction + +
+ + +
+ + +

+ Full stack developer, I create apps and pages with seamless + connections between the UI and the back-end. +

+ + + Download CV{" "} + + + + + + + +
+
+
+ ); +}; + +export default About; diff --git a/src/components/about/Info.jsx b/src/components/about/Info.jsx new file mode 100644 index 0000000..2367aaf --- /dev/null +++ b/src/components/about/Info.jsx @@ -0,0 +1,27 @@ +import React from "react"; + +const Info = () => { + return ( +
+
+ +

Experience

+ Lorem ipsum +
+ +
+ +

Completed

+ Lorem ipsum +
+ +
+ +

Support

+ Lorem ipsum +
+
+ ); +}; + +export default Info; diff --git a/src/components/header/Header.css b/src/components/header/Header.css new file mode 100644 index 0000000..dfbf040 --- /dev/null +++ b/src/components/header/Header.css @@ -0,0 +1,124 @@ +.header { + /* padding: 16px; */ + width: 100%; + position: fixed; + top: 0; + left: 0; + z-index: var(--z-fixed); + background-color: var(--body-color); +} + +.nav { + height: calc(var(--header-height) + 1.5rem); + display: flex; + justify-content: space-between; + align-items: center; + column-gap: 1rem; +} + +.nav__logo, +.nav__toggle { + color: var(--title-color); + font-weight: var(--font-medium); +} + +.nav__list { + display: flex; + column-gap: 2rem; +} + +.nav__link { + display: flex; + flex-direction: column; + align-items: center; + font-size: var(--small-font-size); + color: var(--title-color); + font-weight: var(--font-medium); + transition: 0.3s; +} + +.nav__icon, +.nav__close, +.nav__toggle { + display: none; +} + +/* Active link */ +.active-link, +.nav__link:hover { + color: var(--title-color-dark); +} + +/* ================= BREAKPOINTS ================= */ +/* Medium screen devices */ +@media screen and (max-width: 768px) { + .header { + top: initial; + bottom: 0; + } + + .nav { + height: var(--header-height); + } + + .nav__menu { + position: fixed; + bottom: -100%; + left: 0; + width: 100%; + background-color: var(--body-color); + padding: 2rem 1.5rem 4rem; + box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15); + border-radius: 1.5rem 1.5rem 0 0; + transition: 0.3s; + } + + /* Show menu */ + .show-menu { + bottom: 0; + } + + .nav__list { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + } + .nav__icon { + font-size: 1.2rem; + } + + .nav__close { + position: absolute; + right: 1.3rem; + bottom: 0.5rem; + font-size: 1.5rem; + cursor: pointer; + color: var(--title-color); + } + + .nav__close:hover { + color: var(--title-color-dark); + } + + .nav__toggle { + font-size: 1.1rem; + cursor: pointer; + } + + .nav__icon, + .nav__close, + .nav__toggle { + display: block; + } +} + +/* Small devices */ +@media screen and (max-width: 350px) { + .nav__menu { + padding: 2rem 0.25rem 4rem; + } + + .nav__list { + column-gap: 0; + } +} diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx new file mode 100644 index 0000000..49517b7 --- /dev/null +++ b/src/components/header/Header.jsx @@ -0,0 +1,66 @@ +import React, { useState } from "react"; +import "./Header.css"; + +export const Header = () => { + const [Toggle, showMenu] = useState(false); + return ( +
+ +
+ ); +}; + +export default Header; diff --git a/src/components/home/Data.jsx b/src/components/home/Data.jsx new file mode 100644 index 0000000..97a5c66 --- /dev/null +++ b/src/components/home/Data.jsx @@ -0,0 +1,37 @@ +import React from "react"; + +const Data = () => { + return ( +
+

Henrique Sagara 🤙

+

Web Developer

+

+ I'm a developer based in Toronto, and I'm very passionate and dedicated + to my work. +

+ + + Say hello + + + + + +
+ ); +}; + +export default Data; diff --git a/src/components/home/Home.css b/src/components/home/Home.css new file mode 100644 index 0000000..305201a --- /dev/null +++ b/src/components/home/Home.css @@ -0,0 +1,186 @@ +.home__container { + row-gap: 7rem; +} + +.home__content { + grid-template-columns: 116px repeat(2, 1fr); + padding-top: 5.5rem; + column-gap: 2rem; + align-items: center; +} + +.home__social { + display: grid; + grid-template-columns: max-content; + row-gap: 1rem; +} + +.home__social-icon { + font-size: 1.25rem; + color: var(--title-color); +} + +.home__social-icon:hover { + color: var(--title-color-dark); +} + +.home__title { + font-size: var(--h1-font-size); + margin-bottom: var(--mb-0-25); +} + +.home__subtitle { + position: relative; + font-size: var(--h3-font-size); + padding-left: 5.4rem; + font-weight: var(--font-normal); + margin-bottom: var(--mb-1); +} + +.home__subtitle::before { + content: ""; + position: absolute; + width: 70px; + height: 1px; + background-color: var(--text-color); + left: 0; + top: 1rem; +} + +.home__description { + max-width: 400px; + margin-bottom: var(--mb-3); +} + +.home__img { + background: url(../../assets/profile.png); + background-repeat: no-repeat; + background-position: left; + background-size: cover; + box-shadow: inset 0 0 0 9px rgb(255 255 255 / 30%); + order: 1; + justify-self: center; + width: 300px; + height: 300px; + animation: profile__animate 8s ease-in-out infinite 1s; +} + +@keyframes profile__animate { + 0% { + border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; + } + + 50% { + border-radius: 30% 60% 70% 40%/50% 60% 30% 60%; + } + + 100% { + border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; + } +} + +.home__scroll { + margin-left: 9.25rem; +} + +.wheel { + animation: scroll 2s ease infinite; +} + +@keyframes scroll { + 0% { + transform: translateY(0); + } + + 30% { + transform: translateY(3.75rem); + } +} + +.home__scroll-name { + color: var(--title-color); + font-weight: var(--font-medium); + margin-right: var(--mb-0-25); + margin-left: 2px; +} + +.home__scroll-arrow { + font-size: 1.25rem; + color: var(--title-color); +} + +/* ================= BREAKPOINTS ================= */ +/* Large screen devices */ +@media screen and (max-width: 992px) { + .home__content { + grid-template-columns: 100px repeat(2, 1fr); + column-gap: 1.25rem; + } + + .home__hand { + width: 26px; + height: 26px; + } + + .home__subtitle { + padding-left: 3.75rem; + margin-bottom: var(--mb-1); + } + + .home__subtitle::before { + width: 42px; + top: 0.8rem; + } + + .home__description { + max-width: initial; + margin-bottom: var(--mb-0-25); + } + + .home__img { + width: 250px; + height: 250px; + box-shadow: inset 0 0 0 8px rgb(255 255 255 / 30%); + } + + .home__scroll { + margin-left: 7.5rem; + } +} + +/* Medium screen devices */ +@media screen and (max-width: 768px) { + .home__content { + grid-template-columns: 0.5fr 3fr; + padding-top: 3.5rem; + } + + .home__img { + order: initial; + justify-self: initial; + box-shadow: inset 0 0 0 6px rgb(255 255 255 / 30%); + width: 200px; + height: 200px; + } + + .home__scroll { + display: none; + } + + .home__data { + grid-column: 1/3; + } +} + +/* Small devices */ +@media screen and (max-width: 350px) { + .home__img { + width: 180px; + height: 180px; + } + + .home__hand { + width: 22px; + height: 22px; + } +} diff --git a/src/components/home/Home.jsx b/src/components/home/Home.jsx new file mode 100644 index 0000000..0d3cda7 --- /dev/null +++ b/src/components/home/Home.jsx @@ -0,0 +1,24 @@ +import React from "react"; +import "./Home.css"; +import Social from "./Social"; +import Data from "./Data"; +import ScrollDown from "./ScrollDown"; + +const Home = () => { + return ( +
+
+
+ + +
+ +
+ + +
+
+ ); +}; + +export default Home; diff --git a/src/components/home/ScrollDown.jsx b/src/components/home/ScrollDown.jsx new file mode 100644 index 0000000..7887525 --- /dev/null +++ b/src/components/home/ScrollDown.jsx @@ -0,0 +1,49 @@ +import React from "react"; + +const ScrollDown = () => { + return ( +
+ + + + + + Scroll down + + +
+ ); +}; + +export default ScrollDown; diff --git a/src/components/home/Social.jsx b/src/components/home/Social.jsx new file mode 100644 index 0000000..2ec794b --- /dev/null +++ b/src/components/home/Social.jsx @@ -0,0 +1,33 @@ +import React from "react"; + +const Social = () => { + return ( +
+ + + + + + + + + + + +
+ ); +}; + +export default Social; diff --git a/src/components/skills/Skills.css b/src/components/skills/Skills.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/skills/Skills.jsx b/src/components/skills/Skills.jsx new file mode 100644 index 0000000..4f7e721 --- /dev/null +++ b/src/components/skills/Skills.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Skills = () => { + return
Skills
; +}; + +export default Skills; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.js b/src/index.js index d563c0f..8db5acb 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,10 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom';