style.css

html {
  min-height: 100vh;
  scroll-behavior: smooth;
}
body {
  background-size: cover;
  margin: 0;
  padding: 0;
  background: #fafafa;
}
* {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}
/*.****************.********************************/
/*.****************.********************************/
/*.****************.********************************/
/*                 HEADER                          */
/*.****************.********************************/
/*.****************.********************************/
/*.****************.********************************/

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.logo {
  margin-left: 90px;
  position: relative;
}
.about {
  margin-right: 90px;
}
.about a:nth-of-type(1) {
  margin-right: 10px;
}
.about > p:nth-last-of-type(2) {
  margin-right: 50px;
}

.logo > p:nth-last-of-type(2) {
  /* firstName */
  opacity: 0;
  transition: all 2s;
}
.logo > p:nth-last-of-type(1) {
  /* lastName */
  font-weight: bolder;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s;
}
.moveRight {
  left: 6.3rem !important;
}
.reveal {
  opacity: 1 !important ;
}

p {
  display: inline-block;
  font-size: 20px;
}

/*.****************.********************************/
/*.****************.********************************/
/*.****************.********************************/
/*              Typying effect                     */
/*.****************.********************************/
/*.****************.********************************/
/*.****************.********************************/
.wrapper {
  display: flex;
  height: 90vh;
  align-items: center;
  justify-content: center;
}
.container {
  /* in order to stop the cursor at the last letter of the typed-out element once it has been fully typed out, the way a typewriter (or really a word processor) would, we’ll create a container for the typed-out element and add display: inline-block;: */
  display: inline-block;
  position: relative;
}
.typed-out {
  border-right: 0.15em solid black;
  font-size: 150px;
  /* overflow:hidden + width:0 is the trick here */
  /* to make sure the text content isn’t revealed until the typing effect has started. */
  overflow: hidden;
  width: 0;
  animation: typing 1.2s steps(20, end) forwards, blink 1.2s infinite,
    removeBlink 1s infinite 6s, erasing 1.2s steps(20, end) 5s forwards;
}

.typed-out-new {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 150px;
  overflow: hidden;
  width: 0;
  animation: typing-new-welcome 1.2s steps(20, end) 6.4s forwards,
    blink 1.2s infinite;
}
@keyframes typing {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
    border-right: 0.15em solid black;
  }
}

@keyframes typing-new-welcome {
  0% {
    width: 0;
  }
  100% {
    width: 112%;
    border-right: 0.15em solid black;
  }
}

@keyframes erasing {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

@keyframes blink {
  from {
    border-color: transparent;
  }
  to {
    border-color: black;
  }
}

@keyframes removeBlink {
  from {
    border-color: transparent;
  }
  to {
    border-color: transparent;
  }
}

/*.****************.********************************/
/*.****************.********************************/
/*.****************.********************************/
/*                 Action button                    */
/*.****************.********************************/
/*.****************.********************************/
/*.****************.********************************/
.arrowCall {
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: black;
  height: 50px;
  width: 80px;
  position: absolute;
  opacity: 0;
  animation: pointDown 2s infinite 8s forwards;
}

@keyframes pointDown {
  0% {
    top: 80vh;
    opacity: 0;
  }
  100% {
    top: 90vh;
    opacity: 1;
  }
}

/*.****************.********************************/
/*.****************.********************************/
/*.****************.********************************/
/*                 About me                       */
/*.****************.********************************/
/*.****************.********************************/
/*.****************.********************************/
.aboutWrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  grid-template-rows: repeat(1, 1fr);
  height: 100vh;
}
.iconStandard {
  height: 50%;
  width: 80px;
}
.iconWrapper-left {
  grid-column: 1/2;
  transition: all 0.5s;
}
.iconWrapper-right {
  grid-column: 3/-1;
  transition: all 0.5s;
}
.aboutMe-text {
  grid-column: 2/3;
  grid-row: 1/-1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.aboutMe-text h2 {
  font-size: 60px;
  margin-bottom: 60px;
}
.aboutMe span {
  text-decoration: line-through;
}
.aboutMe {
  text-align: left;
  padding: 5px;
}
.iconWrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

.htmlIcon {
  width: 127.38px;
  height: 115px;
}
.bashIcon {
  width: 130px;
  height: 130px;
}
.dockerIcon {
  width: 223px;
  height: 74px;
}
.jscript {
  width: 130px;
  height: 115px;
}
.sqlIcon {
  width: 130px;
  height: 115px;
}
.reactIcon {
  width: 150px;
  height: 115px;
}
.windowsIcon {
  width: 150px;
  height: 115px;
}
.appleIcon {
  width: 84px;
  height: 103px;
}
.tuxIcon {
  width: 84px;
  height: 103px;
}

.moveInLeft {
  animation: fadeInLeft 2s ease 0.35s 1 backwards;
}
.moveInRight {
  animation: fadeInRight 2s ease 0.35s 1 backwards;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-300px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(400px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

a,
a:visited {
  text-decoration: none;
  color: black;
  font-size: 20px;
}

/*.****************.********************************/
/*.****************.********************************/
/*.****************.********************************/
/*                 Portfolio                       */
/*.****************.********************************/
/*.****************.********************************/
/*.****************.********************************/
.projects > h2 {
  text-align: center;
  font-size: 60px;
  padding-bottom: 2rem;
}
.cards-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 200px);
  gap: 1.5rem;
}

.card1 {
  grid-column: 2/3;
  grid-row: 1/2;
}
.card2 {
  grid-column: 2/3;
  grid-row: 2/3;
}
.card3 {
  grid-column: 2/3;
  grid-row: 3/4;
}

/* Format Cards **********/
.cards {
  position: relative;
  /* to add more in-depth appearance - enhance UI */
  perspective: 150rem;
}

/* to make the cards look like one */
.cards-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: all 0.9s ease;
  border-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.4);
}

.cards-side1,
.cards-side2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.firstProject {
  background-image: url(icons/alex-padurariu-unsplash.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
}
.secondProject {
  background-image: url(icons/anna-wangler-unsplash.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
}
.thirdProject {
  background-image: url(icons/kosta-bratsos-unsplash.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
}
.cards-side1 h2 {
  color: black;
  background: #fafafa;
  width: 100%;
  text-align: center;
}
.cards-side2 p {
  color: #fafafa;
  width: 100%;
  text-align: center;
  padding: 8px 15px;
  opacity: 1;
}
.cards-side2 {
  transform: rotateX(180deg);
  background: black;
}

/*********** Animate cards ***********/
.cards:hover .cards-side1 {
  transform: rotateX(180deg);
}
.cards:hover .cards-side2 {
  transform: rotateX(360deg);
}
.projects {
  height: 100vh;
}

/*.****************.********************************/
/*.****************.********************************/
/*.****************.********************************/
/*                 Contact                       */
/*.****************.********************************/
/*.****************.********************************/
/*.****************.********************************/
#contactSlider > h2 {
  margin-top: 0;
  padding: 0;
}
.contactSection {
  height: 100vh;
  position: relative;
}
.contactWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.contactSection h2 {
  margin-bottom: -100px;
  font-size: 50px;
  margin-top: 100px;
  text-align: center;
  padding-top: 20px;
}
.contactIcons {
  display: grid;
  gap: 150px;
  grid-template-columns: repeat(2, 1fr);
}
.linkedinContainer img,
.githubContainer img {
  width: 100px;
  height: 100px;
  opacity: 1;
  box-shadow: 0px 11px 3px rgba(83, 66, 66, 0.15);
  border-radius: 50%;
}

.rotate {
  transform: scale(1.4) rotateY(360deg) translateY(-80px);
  perspective: 800px;
  transition: all 0.6s;
  animation: floating 2.2s infinite 0.7s forwards;
}
@keyframes floating {
  0% {
    transform: scale(1.4) translateY(-80px);
  }
  50% {
    transform: scale(1.4) translateY(-65px);
  }
  100% {
    transform: scale(1.4) translateY(-80px);
  }
}
.linkedinContainer,
.githubContainer {
  justify-self: center;
  align-self: center;
}

 .linkedinText {
  position: absolute;
  top: 0;
  left: 0;
  writing-mode: vertical-rl;
  font-size: 10rem;
  padding-top: 20px;
  transition: all 0.5s;
  transform: translateY(-800px);
  color:#fafafa
}
 .githubText {
  position: absolute;
  top: 0;
  right: 0;
  writing-mode: vertical-rl;
  font-size: 10rem;
  padding-top: 20px;
  transition: all 0.5s;
  transform: translateY(-800px);
  color:#fafafa
}
.bringTextDown {
  transform: translateY(0);
  color:black
}