diff --git a/package-lock.json b/package-lock.json index 908d62d..f9e42fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@testing-library/user-event": "^13.5.0", "@types/react": "^18.2.13", "@types/react-dom": "^18.2.6", + "axios": "^1.4.0", "babel-plugin-macros": "^3.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -5401,6 +5402,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz", + "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -14518,6 +14542,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -22221,6 +22250,28 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.2.tgz", "integrity": "sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==" }, + "axios": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz", + "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==", + "requires": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + }, + "dependencies": { + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + } + } + }, "axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -28631,6 +28682,11 @@ } } }, + "proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", diff --git a/package.json b/package.json index 0d14752..dee8a29 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "@types/react": "^18.2.13", "@types/react-dom": "^18.2.6", + "axios": "^1.4.0", "babel-plugin-macros": "^3.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/public/assets/C_Logo.png b/public/assets/C_Logo.png new file mode 100644 index 0000000..dc7dbd7 Binary files /dev/null and b/public/assets/C_Logo.png differ diff --git a/src/assets/OHOMEM.png b/public/assets/OHOMEM.png similarity index 100% rename from src/assets/OHOMEM.png rename to public/assets/OHOMEM.png diff --git a/public/assets/bootstraplogo.png b/public/assets/bootstraplogo.png new file mode 100644 index 0000000..9280441 Binary files /dev/null and b/public/assets/bootstraplogo.png differ diff --git a/public/assets/csslogo.png b/public/assets/csslogo.png new file mode 100644 index 0000000..54c746c Binary files /dev/null and b/public/assets/csslogo.png differ diff --git a/public/assets/donuthunt.png b/public/assets/donuthunt.png new file mode 100644 index 0000000..20ef205 Binary files /dev/null and b/public/assets/donuthunt.png differ diff --git a/public/assets/ediwaveswebsite.png b/public/assets/ediwaveswebsite.png new file mode 100644 index 0000000..4667628 Binary files /dev/null and b/public/assets/ediwaveswebsite.png differ diff --git a/src/assets/homem.jpeg b/public/assets/homem.jpeg similarity index 100% rename from src/assets/homem.jpeg rename to public/assets/homem.jpeg diff --git a/public/assets/htmllogo.svg b/public/assets/htmllogo.svg new file mode 100644 index 0000000..c62fabb --- /dev/null +++ b/public/assets/htmllogo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/javascriptlogo.png b/public/assets/javascriptlogo.png new file mode 100644 index 0000000..645064a Binary files /dev/null and b/public/assets/javascriptlogo.png differ diff --git a/public/assets/pomopedro.png b/public/assets/pomopedro.png new file mode 100644 index 0000000..eba9a8a Binary files /dev/null and b/public/assets/pomopedro.png differ diff --git a/public/assets/portfoliowebsite.png b/public/assets/portfoliowebsite.png new file mode 100644 index 0000000..678c12b Binary files /dev/null and b/public/assets/portfoliowebsite.png differ diff --git a/public/assets/react.png b/public/assets/react.png new file mode 100644 index 0000000..4320d59 Binary files /dev/null and b/public/assets/react.png differ diff --git a/public/assets/sass.png b/public/assets/sass.png new file mode 100644 index 0000000..6d1c43a Binary files /dev/null and b/public/assets/sass.png differ diff --git a/public/assets/spotifyclone.png b/public/assets/spotifyclone.png new file mode 100644 index 0000000..33a4244 Binary files /dev/null and b/public/assets/spotifyclone.png differ diff --git a/src/assets/trajado.png b/public/assets/trajado.png similarity index 100% rename from src/assets/trajado.png rename to public/assets/trajado.png diff --git a/public/assets/typescript.png b/public/assets/typescript.png new file mode 100644 index 0000000..b3df0ca Binary files /dev/null and b/public/assets/typescript.png differ diff --git a/public/assets/typinggame.png b/public/assets/typinggame.png new file mode 100644 index 0000000..71fc322 Binary files /dev/null and b/public/assets/typinggame.png differ diff --git a/src/App.tsx b/src/App.tsx index e94be28..81ee317 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -45,7 +45,6 @@ function App() { } > } > } > - }> ); diff --git a/src/Styles/VariablesGlobal.scss b/src/Styles/VariablesGlobal.scss new file mode 100644 index 0000000..9963c47 --- /dev/null +++ b/src/Styles/VariablesGlobal.scss @@ -0,0 +1,4 @@ +$fontABout: 'Share Tech Mono', monospace; +$fontCourier: 'Courier New', Courier, monospace; +$fontRaleway: 'Raleway', sans-serif; +$fontOpenSans: 'Open Sans', sans-serif; \ No newline at end of file diff --git a/src/Styles/about/AboutMeDesktop.styles.scss b/src/Styles/about/AboutMeDesktop.styles.scss index 4530b22..2e32042 100644 --- a/src/Styles/about/AboutMeDesktop.styles.scss +++ b/src/Styles/about/AboutMeDesktop.styles.scss @@ -108,6 +108,7 @@ &::after { content: ''; + border-radius: 10px; width: 98%; height: 98%; background-color: rgba(0, 0, 0, 0.918); @@ -149,7 +150,7 @@ margin: 10px; z-index: 2; margin-left: 30px; - background-image: url(../../assets/trajado.png); + background-image: url(../../../public/assets/trajado.png); background-position: center; background-size: cover; background-repeat: no-repeat; diff --git a/src/Styles/about/AboutMeMobile.styles.scss b/src/Styles/about/AboutMeMobile.styles.scss index 0cde605..e37fde1 100644 --- a/src/Styles/about/AboutMeMobile.styles.scss +++ b/src/Styles/about/AboutMeMobile.styles.scss @@ -158,7 +158,7 @@ animation-delay: 100ms; width: 200px; height: 200px; - background-image: url(../../assets/trajado.png); + background-image: url(../../../public/assets/trajado.png); background-position: center; background-size: cover; background-repeat: no-repeat; diff --git a/src/Styles/about/TransitionAbout.styles.scss b/src/Styles/about/TransitionAbout.styles.scss new file mode 100644 index 0000000..2e17402 --- /dev/null +++ b/src/Styles/about/TransitionAbout.styles.scss @@ -0,0 +1,8 @@ +.transition-about { + width: 100vw; + height: 100px; + background-image: linear-gradient(to bottom, transparent, rgb(0, 0, 0)); + position: absolute; + z-index: 99; + bottom: 0%; +} \ No newline at end of file diff --git a/src/Styles/landing/ImageDecoration.styles.scss b/src/Styles/landing/ImageDecoration.styles.scss index b24f95a..297876a 100644 --- a/src/Styles/landing/ImageDecoration.styles.scss +++ b/src/Styles/landing/ImageDecoration.styles.scss @@ -35,7 +35,7 @@ border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; animation: morph 7s ease-in-out infinite; - background-image: url(../../assets/OHOMEM.png); + background-image: url(../../../public/assets/OHOMEM.png); background-size: cover; background-repeat: no-repeat; } diff --git a/src/Styles/landing/WhoAmI.styles.scss b/src/Styles/landing/WhoAmI.styles.scss index 5e5129d..986eede 100644 --- a/src/Styles/landing/WhoAmI.styles.scss +++ b/src/Styles/landing/WhoAmI.styles.scss @@ -186,7 +186,7 @@ background-color: transparent; padding: 10px 20px; color: white; - border: 1px solid black; + border: 1px solid red; background-color: black; border-radius: 10px; position: absolute; diff --git a/src/Styles/projects/Project.styles.scss b/src/Styles/projects/Project.styles.scss new file mode 100644 index 0000000..3088cf0 --- /dev/null +++ b/src/Styles/projects/Project.styles.scss @@ -0,0 +1,102 @@ +@import '../VariablesGlobal.scss'; + +.project { + height: 250px; + width: 400px; + margin: 10px; + border-radius: 10px; + border: 2px solid rgba(128, 128, 128, 0.26); + background-size: contain; + + &:hover { + border: 2px solid red; + } + + .project-image-container { + width: 100%; + height: 100%; + position: relative; + cursor: pointer; + + &:hover { + .hover-container { + opacity: 1; + } + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 10px; + } + + .hover-container { + padding-top: 20px; + padding-left: 5px; + transition: 1s; + position: absolute; + height: 100%; + width: 100%; + border-radius: 10px; + top: 0; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.438), black 70%); + opacity: 0; + display: flex; + flex-direction: column; + justify-content: center; + + h1,span { + color: white; + padding-left: 10px; + padding-top: 1px; + font-family: $fontABout; + } + + .project-title { + background-color: white; + background-image: linear-gradient(45deg, rgb(255, 1, 1), yellow); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-background-clip: text; + -moz-text-fill-color: transparent; + background-size: 100%; + background-position: left; + background-repeat: repeat; + font-family: $fontABout; + font-size: 3em; + padding: 0px 10px; + font-weight: bold; + animation: textGradient 1s ease-in alternate infinite; + } + + .project-subtitle { + color: rgba(245, 220, 0, 0.959); + font-family: $fontRaleway; + font-weight: 600; + margin-left: 5px; + } + + .tech-container { + background-color: transparent; + display: flex; + height: 50px; + width: 50px; + + .tech-img { + margin-top: 20px; + margin-left: 5px; + height: 50px; + width: 50px; + + &:first-child { + margin-left: 10px; + } + } + } + + } + + } + +} \ No newline at end of file diff --git a/src/Styles/projects/Projects.styles.scss b/src/Styles/projects/Projects.styles.scss new file mode 100644 index 0000000..3f120d6 --- /dev/null +++ b/src/Styles/projects/Projects.styles.scss @@ -0,0 +1,51 @@ +@import '../VariablesGlobal.scss'; + +.projects-container { + width: 100%; + padding: 50px; + background-color: black; + + display: flex; + flex-direction: column; + align-items: center; + overflow: hidden; + + .main-title-projects { + + @keyframes warning { + 0% { + color: rgba(196, 17, 17, 0.123); + } + + 50% { + color: rgba(196, 17, 17, 0.123); + } + + 100% { + color: rgba(206, 112, 5, 0.637); + } + } + + color: yellow; + font-weight: normal; + font-size: 3em; + margin-top: 30px; + padding: 70px; + font-family: $fontABout; + position: relative; + z-index: 2; + + &::after { + content: '⚠ PROJECTS ⚠'; + width: 230%; + position: absolute; + color: rgba(196, 17, 17, 0.123); + z-index: -1; + top: 0px; + left: -56%; + font-size: 2em; + animation: warning 2s infinite alternate linear; + } + } + +} \ No newline at end of file diff --git a/src/Styles/projects/ProjectsContainer.styles.scss b/src/Styles/projects/ProjectsContainer.styles.scss new file mode 100644 index 0000000..2568e5b --- /dev/null +++ b/src/Styles/projects/ProjectsContainer.styles.scss @@ -0,0 +1,9 @@ +@import '../VariablesGlobal.scss'; + +.projects-main-container { + max-width: 1500px; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} \ No newline at end of file diff --git a/src/components/about/TransitionAbout.component.tsx b/src/components/about/TransitionAbout.component.tsx new file mode 100644 index 0000000..21d86e7 --- /dev/null +++ b/src/components/about/TransitionAbout.component.tsx @@ -0,0 +1,8 @@ +import React from 'react' +import '../../Styles/about/TransitionAbout.styles.scss'; + +export const TransitionAbout = () => { + return ( +
+ ) +} diff --git a/src/components/landing/WhoAmI.component.tsx b/src/components/landing/WhoAmI.component.tsx index f15d681..108e629 100644 --- a/src/components/landing/WhoAmI.component.tsx +++ b/src/components/landing/WhoAmI.component.tsx @@ -2,6 +2,7 @@ import '../../Styles/landing/WhoAmI.styles.scss' import { useState, useEffect } from 'react' import { Socials } from '../Socials.component' import { Link } from 'react-router-dom' +import { DangerousButton } from '../global/DangerousButton.component' const WhoAmI = () => { let word = "Front-end Developer." diff --git a/src/components/projects/Project.component.tsx b/src/components/projects/Project.component.tsx new file mode 100644 index 0000000..4773558 --- /dev/null +++ b/src/components/projects/Project.component.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import '../../Styles/projects/Project.styles.scss' +import projectsDB from '../../projectsDB.json'; + +export const Project = () => { + + return ( + <> + {projectsDB.projects.map((project) => ( +
+
+ +
+

{`${project.title}`}

+ {`${project.subtitle}`} +
+ {project.technologies.map((img) => ( + + ))} +
+
+
+
+ ))} + + ) +} diff --git a/src/components/projects/ProjectsContainer.component.tsx b/src/components/projects/ProjectsContainer.component.tsx new file mode 100644 index 0000000..aa4bd3f --- /dev/null +++ b/src/components/projects/ProjectsContainer.component.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import { Project } from './Project.component' +import '../../Styles/projects/ProjectsContainer.styles.scss' + +export const ProjectsContainer = () => { + return ( +
+ +
+ ) +} diff --git a/src/projectsDB.json b/src/projectsDB.json new file mode 100644 index 0000000..8d51f83 --- /dev/null +++ b/src/projectsDB.json @@ -0,0 +1,94 @@ +{ + "projects": [ + { + "title": "Portfolio", + "subtitle": "Website", + "background": "./assets/portfoliowebsite.png", + "technologies": [ + { + "value": "./assets/typescript.png" + }, + { + "value": "./assets/react.png" + }, + { + "value": "./assets/sass.png" + } + ] + }, + { + "title": "Ediwaves", + "subtitle": "Website", + "background": "./assets/ediwaveswebsite.png", + "technologies": [ + { + "value": "./assets/htmllogo.svg" + }, + { + "value": "./assets/csslogo.png" + }, + { + "value": "./assets/javascriptlogo.png" + } + ] + }, + { + "title": "Spotify clone", + "subtitle": "Website", + "background": "./assets/spotifyclone.png", + "technologies": [ + { + "value": "./assets/htmllogo.svg" + }, + { + "value": "./assets/javascriptlogo.png" + }, + { + "value": "./assets/bootstraplogo.png" + } + ] + }, + { + "title": "Pomopedro", + "subtitle": "App", + "background": "./assets/pomopedro.png", + "technologies": [ + { + "value": "./assets/htmllogo.svg" + }, + { + "value": "./assets/csslogo.png" + }, + { + "value": "./assets/javascriptlogo.png" + } + ] + }, + { + "title": "Typing", + "subtitle": "JavaScript Game", + "background": "./assets/typinggame.png", + "technologies": [ + { + "value": "./assets/htmllogo.svg" + }, + { + "value": "./assets/csslogo.png" + }, + { + "value": "./assets/javascriptlogo.png" + } + ] + }, + { + "title": "Donut Hunt", + "subtitle": "Ascii based game", + "background": "./assets/donuthunt.png", + "technologies": [ + { + "value": "./assets/C_Logo.png" + } + ] + } + ] +} \ No newline at end of file diff --git a/src/routes/About.component.tsx b/src/routes/About.component.tsx index 1082aec..e58c312 100644 --- a/src/routes/About.component.tsx +++ b/src/routes/About.component.tsx @@ -3,6 +3,7 @@ import '../Styles/about/About.styles.scss'; import { Decorations } from '../components/about/Decorations.component'; import { AboutMeDesktop } from '../components/about/AboutMeDesktop.component'; import { AboutMeMobile } from '../components/about/AboutMeMobile.component'; +import { TransitionAbout } from '../components/about/TransitionAbout.component'; const About = () => { return ( @@ -11,6 +12,7 @@ const About = () => { + ) diff --git a/src/routes/Projects.component.tsx b/src/routes/Projects.component.tsx index 26e1a6f..330fc29 100644 --- a/src/routes/Projects.component.tsx +++ b/src/routes/Projects.component.tsx @@ -1,8 +1,11 @@ +import '../Styles/projects/Projects.styles.scss' +import { ProjectsContainer } from '../components/projects/ProjectsContainer.component'; + const Projects = () => { return ( -
-

This is the project page

- +
+

PROJECTS

+
); } diff --git a/yarn.lock b/yarn.lock index 88863c4..fc1b292 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2868,6 +2868,15 @@ "resolved" "https://registry.npmjs.org/axe-core/-/axe-core-4.7.2.tgz" "version" "4.7.2" +"axios@^1.4.0": + "integrity" "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==" + "resolved" "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz" + "version" "1.4.0" + dependencies: + "follow-redirects" "^1.15.0" + "form-data" "^4.0.0" + "proxy-from-env" "^1.1.0" + "axobject-query@^3.1.1": "integrity" "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==" "resolved" "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz" @@ -4776,7 +4785,7 @@ "resolved" "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz" "version" "3.2.7" -"follow-redirects@^1.0.0": +"follow-redirects@^1.0.0", "follow-redirects@^1.15.0": "integrity" "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==" "resolved" "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz" "version" "1.15.2" @@ -4816,6 +4825,15 @@ "combined-stream" "^1.0.8" "mime-types" "^2.1.12" +"form-data@^4.0.0": + "integrity" "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==" + "resolved" "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz" + "version" "4.0.0" + dependencies: + "asynckit" "^0.4.0" + "combined-stream" "^1.0.8" + "mime-types" "^2.1.12" + "forwarded@0.2.0": "integrity" "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==" "resolved" "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz" @@ -7739,6 +7757,11 @@ "forwarded" "0.2.0" "ipaddr.js" "1.9.1" +"proxy-from-env@^1.1.0": + "integrity" "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + "resolved" "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz" + "version" "1.1.0" + "psl@^1.1.33": "integrity" "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==" "resolved" "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz"