-
- {props.thisTech.title === "JavaScript" ?
{props.thisTech.title}
:
{props.thisTech.title}
}
- {props.thisTech.text.map(item => (
-
{item}
- ))}
-
+
+
+
+
diff --git a/src/Components/Techflip/style.css b/src/Components/Techflip/style.css
index 4f453a2..048062a 100644
--- a/src/Components/Techflip/style.css
+++ b/src/Components/Techflip/style.css
@@ -1,11 +1,11 @@
-.flip-card {
+.techContainer {
background-color: transparent;
width:100px;
height:105px;
}
@media screen and (min-width:1550px) {
- .flip-card {
+ .techContainer {
background-color: transparent;
width:100px;
height:105px;
@@ -13,7 +13,7 @@ height:105px;
}
@media screen and (min-width:1365px) and (max-width:1549px) {
- .flip-card {
+ .techContainer {
background-color: transparent;
width:90px;
height:95px;
@@ -21,59 +21,31 @@ height:105px;
}
@media screen and (min-width:1050px) and (max-width:1364px) {
- .flip-card {
+ .techContainer {
background-color: transparent;
width:80px;
height:85px;
}
}
-/* This container is needed to position the front and back side */
-.flip-card-inner {
-/* position: relative; */
+
+.techFlip {
width: 100%;
height: 100%;
-text-align: center;
-transition: transform 0.8s;
+text-align: center;
+transition: transform 0.8s ease-in-out;
transform-style: preserve-3d;
}
-/* Do an horizontal flip when you move the mouse over the flip box container */
-.flip-card:hover .flip-card-inner {
-transform: rotateY(180deg);
+.techFlip:hover {
+ transform: scale(1.2);
+
}
-/* Position the front and back side */
-.flip-card-front, .flip-card-back {
-position: absolute;
-width: 100%;
-height: 100%;
--webkit-backface-visibility: hidden; /* Safari */
-backface-visibility: hidden;
+.techFlipStart {
+ transform: rotateY(90deg);
}
-/* Style the front side (fallback if image is missing) */
-.flip-card-front {
+.techIcon {
color: black;
}
-/* Style the back side */
-.flip-card-back {
-
-transform: rotateY(180deg);
-}
-
-.fliptext {
- height: 10%;
- width: 80%;
- margin-bottom: 50%;
-}
-
-.fliptext H6 {
- font-size: .85rem;
- font-weight: 900;
-}
-.fliptext p {
- font-weight: 600;
- font-size: 10px;
- margin-bottom: 0 !important;
-}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index e7de83e..e621f0e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,84 +1,151 @@
+:root {
+ /* aboutMe Coords */
+ --aboutAX: ----;
+ --aboutAY: ----;
+ --aboutBX: ----;
+ --aboutBY: ----;
+ --aboutOX: ----;
+ --aboutOY: ----;
+ --aboutUX: ----;
+ --aboutUY: ----;
+ --aboutTX: ----;
+ --aboutTY: ----;
+ --aboutSPX: ----;
+ --aboutSPY: ----;
+ --aboutMX: ----;
+ --aboutMY: ----;
+ --aboutEX: ----;
+ --aboutEY: ----;
+
+ /* tech Coords */
+ --techTX: ----;
+ --techTY: ----;
+ --techE1X: ----;
+ --techE1Y: ----;
+ --techCX: ----;
+ --techCY: ----;
+ --techHX: ----;
+ --techHY: ----;
+ --techNX: ----;
+ --techNY: ----;
+ --techO1X: ----;
+ --techO1Y: ----;
+ --techLX: ----;
+ --techLY: ----;
+ --techO2X: ----;
+ --techO2Y: ----;
+ --techGX: ----;
+ --techGY: ----;
+ --techIX: ----;
+ --techIY: ----;
+ --techE2X: ----;
+ --techE2Y: ----;
+ --techSX: ----;
+ --techSY: ----;
+}
+
@media screen and (min-width:1921px) and (max-width:2560px) {
- html {font-size: 22.4px;}
+ html {
+ font-size: 22.4px;
+ }
}
@media screen and (min-width:1681px) and (max-width:1920px) {
- html {font-size: 18px;}
+ html {
+ font-size: 18px;
+ }
}
@media screen and (min-width:1537px) and (max-width:1680px) {
- html {font-size: 16px;}
+ html {
+ font-size: 16px;
+ }
}
@media screen and (min-width:1441px) and (max-width:1536px) {
- html {font-size: 14.8px;}
+ html {
+ font-size: 14.8px;
+ }
}
@media screen and (min-width:1367px) and (max-width:1440px) {
- html {font-size: 14px;}
+ html {
+ font-size: 14px;
+ }
}
@media screen and (min-width:1281px) and (max-width:1366px) {
- html {font-size: 13.2px;}
+ html {
+ font-size: 13.2px;
+ }
}
@media screen and (min-width:1025px) and (max-width:1280px) {
- html {font-size: 11.5px;}
+ html {
+ font-size: 11.5px;
+ }
}
@media screen and (min-width:801px) and (max-width:1024px) {
- html {font-size: 9.1px;}
+ html {
+ font-size: 9.1px;
+ }
}
@media screen and (min-width:601px) and (max-width:800px) {
- html {font-size: 6.9px;}
+ html {
+ font-size: 6.9px;
+ }
}
@media screen and (min-width:415px) and (max-width:600px) {
- html {font-size: 5px;}
+ html {
+ font-size: 5px;
+ }
}
@media screen and (min-width:350px) and (max-width:414px) {
- html {font-size: 3.8px;}
+ html {
+ font-size: 3.8px;
+ }
}
-
h1 {
font-size: 32px !important;
}
+
h2 {
font-size: 24px !important;
}
+
h3 {
font-size: 20.8px !important;
}
+
h4 {
font-size: 16px !important;
}
+
h5 {
font-size: 12.8px !important;
}
+
h6 {
font-size: 11.2px !important;
}
-
body {
margin: 0;
font-size: 16px !important;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
-
+ 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;
overflow-x: hidden;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
#myVideo {
@@ -97,7 +164,6 @@ code {
z-index: 1;
font-family: 'Syne', sans-serif;
color: rgb(202, 202, 202);
-
}
.headerh1 {
@@ -106,11 +172,12 @@ code {
#headerText {
font-weight: 600;
+
}
#mainContent {
- background-color: #061326;
- background: radial-gradient( rgba(0, 0, 0, 0.2), #061326, #061326, #061326);
+ background-color: #061326;
+ background: radial-gradient( rgba(0, 0, 0, 0.2), #061326, #061326, #061326);
z-index: 2;
position: absolute;
font-family: 'Syne', sans-serif;
@@ -124,9 +191,9 @@ code {
width: 74%;
}
}
+
@media screen and (max-width:1199px) {
#mainContent {
-
top: 24%;
height: auto;
width: 100%;
@@ -143,84 +210,586 @@ code {
}
.navCol {
- position: relative;
+ position: relative;
+}
+
+
+
+.project1 {
+ animation: projectsShowing 1s ease-in forwards;
+ transform: translateY(-45vh);
+}
+
+.project2 {
+ animation: projectsShowing .5s ease-out forwards;
}
-.projectsShowing {
- animation: projectsShowing 1s ease-in forwards;
+.project3 {
+ animation: projectsShowing .75s ease-in forwards;
+}
+
+.project4 {
+ animation: projectsShowing .5s ease-out forwards;
}
@keyframes projectsShowing {
- 0%{
+ 0% {
transform: translateY(0%);
}
+ 100% {
+ transform: translateY(-45vh);
+ }
+}
+
+.aboutA {
+ animation: aboutA .5s ease-in forwards;
+}
+.aboutB {
+ animation: aboutB .5s ease-in forwards;
+}
+.aboutO {
+ animation: aboutO .5s ease-in forwards;
+}
+.aboutU {
+ animation: aboutU .5s ease-in forwards;
+}
+.aboutT {
+ animation: aboutT .5s ease-in forwards;
+}
+.aboutSp {
+ animation: aboutSp .5s ease-in forwards;
+}
+.aboutM {
+ animation: aboutM .5s ease-in forwards;
+}
+.aboutE {
+ animation: aboutE .5s ease-in forwards;
+}
+
+@keyframes aboutA {
+ 0%{
+ transform: translate(0%, 0%);
+ }
100%{
- transform: translateY(-45vh);
+ transform: translate(var(--aboutAX), var(--aboutAY));
+
+ }
+}
+@keyframes aboutB {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+
+ 100%{
+ transform: translate(var(--aboutBX), var(--aboutBY));
+
+ }
+}
+@keyframes aboutO {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+
+ 100%{
+ transform: translate(var(--aboutOX), var(--aboutOY));
+
+ }
+}
+@keyframes aboutU {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+
+ 100%{
+ transform: translate(var(--aboutUX), var(--aboutUY));
+
+ }
+}
+@keyframes aboutT {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+
+ 100%{
+ transform: translate(var(--aboutTX), var(--aboutTY));
+
+ }
+}
+@keyframes aboutSp {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+
+ 100%{
+ transform: translate(var(--aboutSPX), var(--aboutSPY));
+
+ }
+}
+@keyframes aboutM {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+
+ 100%{
+ transform: translate(var(--aboutMX), var(--aboutMY));
+
+ }
+}
+@keyframes aboutE {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+
+ 100%{
+ transform: translate(var(--aboutEX), var(--aboutEY));
+
+ }
+}
+
+.hideAboutA {
+ animation: hideAboutA .5s ease-in forwards;
+}
+.hideAboutB {
+ animation: hideAboutB .5s ease-in forwards;
+}
+.hideAboutO {
+ animation: hideAboutO .5s ease-in forwards;
+}
+.hideAboutU {
+ animation: hideAboutU .5s ease-in forwards;
+}
+.hideAboutT {
+ animation: hideAboutT .5s ease-in forwards;
+}
+.hideAboutSp {
+ animation: hideAboutSp .5s ease-in forwards;
+}
+.hideAboutM {
+ animation: hideAboutM .5s ease-in forwards;
+}
+.hideAboutE {
+ animation: hideAboutE .5s ease-in forwards;
+}
+
+@keyframes hideAboutA {
+ 0%{
+ transform: translate(var(--aboutAX), var(--aboutAY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+ }
+}
+@keyframes hideAboutB {
+ 0%{
+ transform: translate(var(--aboutBX), var(--aboutBY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideAboutO {
+ 0%{
+ transform: translate(var(--aboutOX), var(--aboutOY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideAboutU {
+ 0%{
+ transform: translate(var(--aboutUX), var(--aboutUY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideAboutT {
+ 0%{
+ transform: translate(var(--aboutTX), var(--aboutTY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideAboutSp {
+ 0%{
+ transform: translate(var(--aboutSPX), var(--aboutSPY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideAboutM {
+ 0%{
+ transform: translate(var(--aboutMX), var(--aboutMY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideAboutE {
+ 0%{
+ transform: translate(var(--aboutEX), var(--aboutEY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+
+.techT {
+ animation: techT .5s ease-in forwards;
+}
+.techE1 {
+ animation: techE1 .5s ease-in forwards;
+}
+.techC {
+ animation: techC .5s ease-in forwards;
+}
+.techH {
+ animation: techH .5s ease-in forwards;
+}
+.techN {
+ animation: techN .5s ease-in forwards;
+}
+.techO1 {
+ animation: techO1 .5s ease-in forwards;
+}
+.techL {
+ animation: techL .5s ease-in forwards;
+}
+.techO2 {
+ animation: techO2 .5s ease-in forwards;
+}
+.techG {
+ animation: techG .5s ease-in forwards;
+}
+.techI {
+ animation: techI .5s ease-in forwards;
+}
+.techE2 {
+ animation: techE2 .5s ease-in forwards;
+}
+.techS {
+ animation: techS .5s ease-in forwards;
+}
+
+@keyframes techT {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+ 100%{
+ transform: translate(var(--techTX), var(--techTY));
+
+ }
+}
+@keyframes techE1 {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+ 100%{
+ transform: translate(var(--techE1X), var(--techE1Y));
+
+ }
+}
+@keyframes techC {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+ 100%{
+ transform: translate(var(--techCX), var(--techCY));
+
+ }
+}
+@keyframes techH {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+ 100%{
+ transform: translate(var(--techHX), var(--techHY));
+
+ }
+}
+@keyframes techN {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+ 100%{
+ transform: translate(var(--techNX), var(--techNY));
+
+ }
+}
+@keyframes techO1 {
+ 0%{
+ transform: translate(0%, 0%);
}
+ 100%{
+ transform: translate(var(--techO1X), var(--techO1Y));
+
+ }
+}
+@keyframes techL {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+ 100%{
+ transform: translate(var(--techLX), var(--techLY));
+
+ }
+}
+@keyframes techO2 {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+ 100%{
+ transform: translate(var(--techO2X), var(--techO2Y));
+
+ }
+}
+@keyframes techG {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+ 100%{
+ transform: translate(var(--techGX), var(--techGY));
+
+ }
+}
+@keyframes techI {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+ 100%{
+ transform: translate(var(--techIX), var(--techIY));
+
+ }
+}
+@keyframes techE2 {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+ 100%{
+ transform: translate(var(--techE2X), var(--techE2Y));
+
+ }
+}
+@keyframes techS {
+ 0%{
+ transform: translate(0%, 0%);
+ }
+ 100%{
+ transform: translate(var(--techSX), var(--techSY));
+
+ }
+}
-
+.hideTechT {
+ animation: hideTechT .5s ease-in forwards;
+}
+.hideTechE1 {
+ animation: hideTechE1 .5s ease-in forwards;
+}
+.hideTechC {
+ animation: hideTechC .5s ease-in forwards;
+}
+.hideTechH {
+ animation: hideTechH .5s ease-in forwards;
+}
+.hideTechN {
+ animation: hideTechN .5s ease-in forwards;
+}
+.hideTechO1 {
+ animation: hideTechO1 .5s ease-in forwards;
+}
+.hideTechL {
+ animation: hideTechL .5s ease-in forwards;
+}
+.hideTechO2 {
+ animation: hideTechO2 .5s ease-in forwards;
+}
+.hideTechG {
+ animation: hideTechG .5s ease-in forwards;
+}
+.hideTechI {
+ animation: hideTechI .5s ease-in forwards;
+}
+.hideTechE2 {
+ animation: hideTechE2 .5s ease-in forwards;
+}
+.hideTechS {
+ animation: hideTechS .5s ease-in forwards;
+}
+
+@keyframes hideTechT {
+ 0%{
+ transform: translate(var(--techTX), var(--techTY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideTechE1 {
+ 0%{
+ transform: translate(var(--techE1X), var(--techE1Y));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideTechC {
+ 0%{
+ transform: translate(var(--techCX), var(--techCY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideTechH {
+ 0%{
+ transform: translate(var(--techHX), var(--techHY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideTechN {
+ 0%{
+ transform: translate(var(--techNX), var(--techNY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideTechO1 {
+ 0%{
+ transform: translate(var(--techO1X), var(--techO1Y));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideTechL {
+ 0%{
+ transform: translate(var(--techLX), var(--techLY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideTechO2 {
+ 0%{
+ transform: translate(var(--techO2X), var(--techO2Y));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
}
+@keyframes hideTechG {
+ 0%{
+ transform: translate(var(--techGX), var(--techGY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideTechI {
+ 0%{
+ transform: translate(var(--techIX), var(--techIY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideTechE2 {
+ 0%{
+ transform: translate(var(--techE2X), var(--techE2Y));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+@keyframes hideTechS {
+ 0%{
+ transform: translate(var(--techSX), var(--techSY));
+ }
+ 100%{
+ transform: translate(0%, 0%);
+
+ }
+}
+
.hShowing {
display: inline-block;
animation: hShowing 1s ease-in forwards;
- }
-
- @keyframes hShowing {
- 0%{
- transform: translateY(0%);
- }
-
- 100%{
- transform: translateY(35vh);
- /* transform: translateX(3vw); */
- }
- }
-
- .oShowing {
- display:inline-block;
+}
+
+@keyframes hShowing {
+ 0% {
+ transform: translateY(0%);
+ }
+ 100% {
+ transform: translateY(35vh);
+ /* transform: translateX(3vw); */
+ }
+}
+
+.oShowing {
+ display: inline-block;
animation: oShowing 1.5s ease-in-out forwards;
-
- }
-
- @keyframes oShowing {
- 0%{
- transform: translate(0%);
- }
-
- 14% {
- transform: translate(-6vw, 12vh);
- }
- 60%{
+}
+
+@keyframes oShowing {
+ 0% {
+ transform: translate(0%);
+ }
+ 14% {
+ transform: translate(-6vw, 12vh);
+ }
+ 60% {
transform: translate(-6vw, 28vh);
- }
- 99%{
+ }
+ 99% {
transform: translate(1.3vw, 51.2vh);
- }
- 100%{
+ }
+ 100% {
display: hidden;
-
- }
- }
+ }
+}
.projectsClosing {
animation: projectsClosing 1s ease-in forwards;
- }
-
- @keyframes projectsClosing {
- 0%{
- transform: translateY(-45vh);
- }
-
- 100%{
- transform: translateY(0%);
- }
- }
-
- .rowCustom {
+}
+
+@keyframes projectsClosing {
+ 0% {
+ transform: translateY(-45vh);
+ }
+ 100% {
+ transform: translateY(0%);
+ }
+}
+
+.rowCustom {
position: relative;
-
}
#canvas {
@@ -231,19 +800,26 @@ code {
}
#techIntro p {
- font-family: Consolas,monaco,monospace;
- font-weight: 700;
+ font-family: Consolas, monaco, monospace;
+ font-weight: 700;
font-size: .55rem;
margin-bottom: 0 !important;
-webkit-filter: drop-shadow(1px 0px 5px black);
- -moz-filter: drop-shadow(1px 0px 5px black);
- filter: drop-shadow(1px 0px 5px black);
+ -moz-filter: drop-shadow(1px 0px 5px black);
+ filter: drop-shadow(1px 0px 5px black);
+}
+
+#techBtn {
+ position: relative;
+ z-index: 5;
}
.varStyle {
- color: #9cdcfe;;
+ color: #9cdcfe;
+ ;
}
+
.defineStyle {
color: #569cd6;
}
@@ -262,7 +838,4 @@ code {
.strStyle {
color: #ce9178;
-}
-
-
-
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 6c38ab8..efae9a2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
-
+import 'overlayscrollbars/css/OverlayScrollbars.css';
ReactDOM.render(
diff --git a/src/pages/Portfolio.js b/src/pages/Portfolio.js
index 55807e8..2c239e2 100644
--- a/src/pages/Portfolio.js
+++ b/src/pages/Portfolio.js
@@ -14,52 +14,181 @@ import { propTypes } from "react-bootstrap/esm/Image";
function Portfolio(props) {
const [aboutMeShowing, setAboutMeShowing] = useState("init");
const [aboutMeBtn, setAboutMeBtn] = useState("");
-
+ const [aboutMeKey, setAboutMeKey] = useState("");
+ const [aboutMeRect, setAboutMeRect] = useState({})
+
const [techShowing, setTechShowing] = useState(false);
const [techIntro, setTechIntro] = useState('hide');
const [techBody, setTechBody] = useState('hide');
const [techBtn, setTechBtn] = useState("");
const [disabled, setDisabled] = useState("");
+ const [techRect, setTechRect] = useState({})
+ const [techKey, setTechKey] = useState("");
const [projectsShowing, setProjectsShowing] = useState('');
- const widthAndHeight = useRef(null);
+ // const widthAndHeight = useRef(null);
const [height, setHeight] = useState(0);
const [width, setWidth] = useState(0);
- var arrayOfObject = Object.values(textObject)
- var objectTexts = []
- var objectClasses = []
- var string = "string";
+ const projectsArray = ["P", "R", "O", "J", "E", "C", "T", "S"]
+ const aboutArray = ["A", "B", "O", "U", "T", "Sp", "M", "E"]
+ const techArray = ["T", "E1", "C", "H", "N", "O1", "L", "O2", "G", "I", "E2", "S"]
+ const order = [1, 5, 0, 6, 2, 4, 7, 3, 10, 8, 11, 9]
+
+
+ const aboutA = document.getElementById("aboutA")
+ const mainContent = document.getElementById("mainContent")
+ const mainContentRef = useRef();
+ const aboutAref = useRef();
+ const aboutBref = useRef();
+ const aboutOref = useRef();
+ const aboutUref = useRef();
+ const aboutTref = useRef();
+ const aboutSpref = useRef();
+ const aboutMref = useRef();
+ const aboutEref = useRef();
+
+ // const techTref = useRef();
+
+
+
+
+ const techRefs = {
+ techTref: useRef(),
+ techE1ref: useRef(),
+ techCref: useRef(),
+ techHref: useRef(),
+ techNref: useRef(),
+ techO1ref: useRef(),
+ techLref: useRef(),
+ techO2ref: useRef(),
+ techGref: useRef(),
+ techIref: useRef(),
+ techE2ref: useRef(),
+ techSref: useRef()
+ }
+
+
+
+
+
+
+
+
+ const getRect = (ref) => {
+ if (!ref) return
+ if (ref.current) {
+ let rect = ref.current.getBoundingClientRect();
+ return rect;
+ }
+ }
+
+ useEffect(() => {
+ if (props.windowSize > 1199) {
+ const mcRect = getRect(mainContentRef);
+ const aRect = getRect(aboutAref);
+ const bRect = getRect(aboutBref);
+ const oRect = getRect(aboutOref);
+ const uRect = getRect(aboutUref);
+ const tRect = getRect(aboutTref);
+ const spRect = getRect(aboutSpref);
+ const mRect = getRect(aboutMref);
+ const eRect = getRect(aboutEref);
+
+ let ax = aRect.x - aboutMeRect.right;
+ let ay = aRect.y * .60;
+ console.log(`ax is ${aboutMeRect.right}`)
+ document.documentElement.style.setProperty(`--aboutAX`, `-${ax}px`);
+ document.documentElement.style.setProperty(`--aboutAY`, `-${ay}px`);
+
+ let bx = bRect.x - aboutMeRect.right
+ let by = bRect.y * .52;
+ document.documentElement.style.setProperty(`--aboutBX`, `-${bx}px`);
+ document.documentElement.style.setProperty(`--aboutBY`, `-${by}px`);
+
+ let ox = oRect.x - aboutMeRect.right
+ let oy = oRect.y * .45;
+ document.documentElement.style.setProperty(`--aboutOX`, `-${ox}px`);
+ document.documentElement.style.setProperty(`--aboutOY`, `-${oy}px`);
+
+ let ux = uRect.x - aboutMeRect.right
+ let uy = uRect.y * .38;
+ document.documentElement.style.setProperty(`--aboutUX`, `-${ux}px`);
+ document.documentElement.style.setProperty(`--aboutUY`, `-${uy}px`);
+
+ let tx = tRect.x - aboutMeRect.right
+ let ty = tRect.y * .30;
+ document.documentElement.style.setProperty(`--aboutTX`, `-${tx}px`);
+ document.documentElement.style.setProperty(`--aboutTY`, `-${ty}px`);
+
+ let spx = spRect.x - aboutMeRect.right
+ let spy = spRect.y * .24;
+ document.documentElement.style.setProperty(`--aboutSPX`, `-${spx}px`);
+ document.documentElement.style.setProperty(`--aboutSPY`, `-${spy}px`);
+
+ let mx = mRect.x - aboutMeRect.right
+ let my = mRect.y * .18;
+ document.documentElement.style.setProperty(`--aboutMX`, `-${mx}px`);
+ document.documentElement.style.setProperty(`--aboutMY`, `-${my}px`);
+
+ let ex = eRect.x - aboutMeRect.right
+ let ey = eRect.y * .12;
+ document.documentElement.style.setProperty(`--aboutEX`, `-${ex}px`);
+ document.documentElement.style.setProperty(`--aboutEY`, `-${ey}px`);
+ }
+
+ }, [aboutMeRect])
+
+ useEffect(() => {
+ if (props.windowSize > 1199) {
+ let vertCount = .76
+ for (let i = 0; i < techArray.length; i++) {
+ let obj = Object.keys(techRefs)
+ let stub = obj[i]
+ let rect = getRect(techRefs[stub]);
+
+ let x = (techRect.left - 25) - rect.x
+ let y = rect.y * vertCount;
+ document.documentElement.style.setProperty(`--tech${techArray[i]}X`, `${x}px`);
+ document.documentElement.style.setProperty(`--tech${techArray[i]}Y`, `-${y}px`);
+ vertCount = vertCount - .06
+ }
+ }
+ }, [techRect])
+
+
+ const arrayOfObject = Object.values(textObject)
+ let objectTexts = []
+ let objectClasses = []
objectClasses = arrayOfObject.map(item => {
objectTexts.push(item[0].split(''))
return item
});
-
- var delay = 5;
- var count = 1;
- var divCount = 1;
+
+ let delay = 5;
+ let techStartCount = 1;
+ let divCount = 1;
function addOneChar(i, j) {
-
- let currentP = document.getElementById(`tech${count}`)
+ let currentP = document.getElementById(`tech${techStartCount}`)
currentP.classList.add(objectClasses[i][1])
currentP.classList.add(objectClasses[i][2])
currentP.classList.add(objectClasses[i][3])
- objectTexts[i][j] !== "1" ? currentP.append(objectTexts[i][j]) : divCount ++;
+ objectTexts[i][j] !== "1" ? currentP.append(objectTexts[i][j]) : divCount++;
if (j + 1 < objectTexts[i].length) { // next character in the current string
setTimeout(function () { addOneChar(i, j + 1); }, delay);
} else if (i + 1 < objectTexts.length) { // start the next string in the text[] array
- count++;
+ techStartCount++;
let tech = document.getElementById(`techDiv${divCount}`)
let nextTech = document.createElement("p")
- nextTech.setAttribute("id", `tech${count}`)
+ nextTech.setAttribute("id", `tech${techStartCount}`)
tech.appendChild(nextTech)
setTimeout(function () { addOneChar(i + 1, 0); }, delay);
- }
+ }
else {
fadeTech();
}
@@ -83,23 +212,69 @@ function Portfolio(props) {
}
const handleTechClick = function () {
+ let techCount = 0;
if (techShowing == false) {
+ const techShowInt = setInterval(() => {
+ let letter = document.getElementById(`tech${techArray[order[techCount]]}`)
+ setTechKey(letter)
+ letter.classList.add(`tech${techArray[order[techCount]]}`)
+ letter.classList.remove(`hideTech${techArray[order[techCount]]}`)
+ techCount++
+ }, 100);
+ setTimeout(() => {
+ clearInterval(techShowInt)
+ }, 1201);
setTechShowing(true);
- setTechIntro('show');
- setTimeout(function () { addOneChar(0, 0); });
- setDisabled("none");
- setTimeout(function () { setDisabled(""); }, 4000);
+ setTimeout(() => {
+
+ setTechIntro('show');
+ setTimeout(function () { addOneChar(0, 0); });
+ setDisabled("none");
+ setTimeout(function () { setDisabled(""); }, 4000);
+ }, 1200);
+
+
}
- else {
- setTechShowing(false);
- clearTech();
- setTechBody('hide');
+ else if (techShowing === true) {
+ techCount = 0;
+ const techCloseInt = setInterval(() => {
+ let letter = document.getElementById(`tech${techArray[order[techCount]]}`)
+ letter.classList.add(`hideTech${techArray[order[techCount]]}`)
+ letter.classList.remove(`tech${techArray[order[techCount]]}`)
+ techCount++
+
+ }, 100);
+ setTimeout(() => {
+ clearInterval(techCloseInt)
+ }, 1201);
+ setTimeout(() => {
+ techCount = 0
+ setTechShowing(false);
+ clearTech();
+ setTechBody('hide');
+ }, 1205)
+
}
}
- const handleProjectsClick = function () {
+ function handleProjectsClick(e) {
+ let projCount = 0
+ let classCount = 1
if (projectsShowing == '') {
+
setProjectsShowing('projectsShowing');
+ const projectShowInt = setInterval(() => {
+ let letter = document.getElementById(`project${projectsArray[order[projCount]]}`)
+ letter.classList.remove("projectsClosing")
+ letter.classList.add(`project${classCount}`)
+ projCount++
+ classCount++
+ if (classCount > 4) classCount = 1
+ }, 200);
+ setTimeout(() => {
+ clearInterval(projectShowInt)
+ }, 1601);
+
setAboutMeShowing(false);
setTechShowing(false);
clearTech();
@@ -109,23 +284,78 @@ function Portfolio(props) {
setTechBtn('collapse')
}
else if (projectsShowing == 'projectsShowing') {
+ projCount = 0
+ classCount = 1
setProjectsShowing('projectsClosing');
+ const projectCloseInt = setInterval(() => {
+ let letter = document.getElementById(`project${projectsArray[order[projCount]]}`)
+ console.log(letter)
+ letter.classList.add(`projectsClosing`)
+ letter.classList.remove(`project${classCount}`)
+ projCount++
+ classCount++
+ if (classCount > 4) classCount = 1
+ }, 200);
+ setTimeout(() => {
+ clearInterval(projectCloseInt)
+ projCount = 0
+ classCount = 1
+ }, 1601)
setTimeout(function () { setProjectsShowing(''); }, 1001);
setTimeout(function () { setAboutMeBtn('') }, 1001);
setTimeout(function () { setTechBtn('') }, 1001);
}
+
+ for (let i = 0; i < 8; i++) {
+ let letter = document.getElementById(`about${aboutArray[order[i]]}`)
+ letter.classList.remove(`about${aboutArray[order[i]]}`)
+ letter.classList.remove(`hideAbout${aboutArray[order[i]]}`)
+ }
+
+ for (let i = 0; i < 12; i++) {
+ let letter = document.getElementById(`tech${techArray[order[i]]}`)
+ letter.classList.remove(`tech${techArray[order[i]]}`)
+ letter.classList.remove(`hideTech${techArray[order[i]]}`)
+ }
+
}
const handleAboutMeClick = function () {
- if (aboutMeShowing === "hidden" || "init") {
+
+ let aboutCount = 0
+ if (aboutMeShowing === "hidden" || aboutMeShowing === "init") {
setAboutMeShowing("showing");
+ const aboutShowInt = setInterval(() => {
+ let letter = document.getElementById(`about${aboutArray[order[aboutCount]]}`)
+ setAboutMeKey(letter)
+ letter.classList.add(`about${aboutArray[order[aboutCount]]}`)
+ letter.classList.remove(`hideAbout${aboutArray[order[aboutCount]]}`)
+ aboutCount++
+ }, 100);
+ setTimeout(() => {
+ clearInterval(aboutShowInt)
+ }, 801);
+
}
- if (aboutMeShowing === "showing") {
+ else if (aboutMeShowing === "showing") {
+ aboutCount = 0;
setAboutMeShowing("hidden");
+ const aboutCloseInt = setInterval(() => {
+ let letter = document.getElementById(`about${aboutArray[order[aboutCount]]}`)
+ letter.classList.add(`hideAbout${aboutArray[order[aboutCount]]}`)
+ letter.classList.remove(`about${aboutArray[order[aboutCount]]}`)
+ aboutCount++
+
+ }, 100);
+ setTimeout(() => {
+ clearInterval(aboutCloseInt)
+ aboutCount = 0
+
+ }, 801)
}
}
-
+
useEffect(() => {
if (props.windowSize < 1199) {
setAboutMeShowing("showing");
@@ -135,30 +365,67 @@ function Portfolio(props) {
}
}, [props.windowSize]);
- useEffect(() => {
- setHeight(widthAndHeight.current.offsetHeight);
- setWidth(widthAndHeight.current.offsetWidth);
- }, [widthAndHeight.current]);
+ // useEffect(() => {
+ // setHeight(widthAndHeight.current.offsetHeight);
+ // setWidth(widthAndHeight.current.offsetWidth);
+ // }, [widthAndHeight.current]);
return (
-
-
+ 1199) ? "row" : "row m-0"} id="mainContent">
+
+
-
+
- {props.windowSize>1199 ?
+ {props.windowSize > 1199 ?
-
about me
-
projects
-
technologies
+
+
+
a
+ b
+ o
+ u
+ t
+ {/ /g, "\u00a0"}
+ m
+ e
+
+
handleProjectsClick(e)} style={{ pointerEvents: disabled }} >
+
p
+ r
+ o
+ j
+ e
+ c
+ t
+ s
+
+
+
t
+ e
+ c
+ h
+ n
+ o
+ l
+ o
+ g
+ i
+ e
+ s
+
![](\"https://img.icons8.com/ios-glyphs/18/000000/merge-git.png\"/)
;\r\n const webIcon = ![](\"https://img.icons8.com/carbon-copy/40/000000/domain.png\"/)
;\r\n \r\n const loadedLink = \"https://loadedtruckingapp.herokuapp.com/\";\r\n const loadedRepo = \"https://github.com/baberMatt/loaded\";\r\n const streamLineLink = \"https://babermatt.github.io/StreamerSearch/\";\r\n const streamLineRepo = \"https://github.com/baberMatt/StreamerSearch\";\r\n const turnupLink = \"https://turnuppopups.herokuapp.com/\";\r\n const turnupRepo = \"https://github.com/baberMatt/Turnup\";\r\n const botwLink = \"https://babermatt.github.io/BaberOfTheWoods/\";\r\n const botwRepo = \"https://github.com/baberMatt/BaberOfTheWoods\";\r\n \r\n \r\n function checkShowing() {\r\n if (props.showing == \"projectsShowing\") {\r\n setTimeout(function () { setCollapsed(\"\"); }, 1025);\r\n }\r\n else {\r\n setCollapsed(\" collapse\");\r\n } \r\n }\r\n \r\n\r\n useEffect(() => {\r\n checkShowing(); \r\n }, [props.showing]);\r\n\r\n console.log(props.height, props.width)\r\n \r\n return (\r\n ![](\"https://img.icons8.com/plasticine/50/000000/email-sign.png\")
\r\n ![\"instagram](\"https://img.icons8.com/fluent/48/000000/instagram-new.png\"/)
![\"linkedin](\"https://img.icons8.com/fluent/48/000000/linkedin.png\"/)
![\"github](\"https://img.icons8.com/fluent/48/000000/github.png\"/)
![\"pdf](\"https://img.icons8.com/officel/80/000000/pdf.png\"/)
![\"instagram](\"https://img.icons8.com/fluent/48/000000/instagram-new.png\")
![\"linkedin](\"https://img.icons8.com/fluent/48/000000/linkedin.png\")
![\"github](\"https://img.icons8.com/fluent/48/000000/github.png\")
![\"pdf](\"https://img.icons8.com/officel/48/000000/pdf.png\")
![](\"https://img.icons8.com/color/48/000000/gmail--v1.png\"/)
\r\n 
+ 
;
const webIcon = 
;
-
+ const [showCanvas, setShowCanvas] = useState(false)
+
const loadedLink = "https://loadedtruckingapp.herokuapp.com/";
const loadedRepo = "https://github.com/baberMatt/loaded";
const streamLineLink = "https://babermatt.github.io/StreamerSearch/";
@@ -20,30 +22,38 @@ function Projects(props) {
const turnupRepo = "https://github.com/baberMatt/Turnup";
const botwLink = "https://babermatt.github.io/BaberOfTheWoods/";
const botwRepo = "https://github.com/baberMatt/BaberOfTheWoods";
+ const twoChefsLink = "https://2chefsandabeat.com"
function checkShowing() {
if (props.showing == "projectsShowing") {
setTimeout(function () { setCollapsed(""); }, 1025);
+ setTimeout(() => {
+ setShowCanvas(false)
+ }, 1900);
+
}
else {
setCollapsed(" collapse");
+ setShowCanvas(false)
}
}
+
+
useEffect(() => {
checkShowing();
}, [props.showing]);
- console.log(props.height, props.width)
+
return (