├── sass ├── _footer.scss ├── clients.scss ├── main.scss ├── animations.scss ├── cta.scss ├── _header.scss ├── gallery.scss ├── menu.scss ├── nav.scss ├── story.scss └── _base.scss ├── .gitignore ├── img ├── sky.mp4 ├── logo.png ├── work-1.jpeg ├── work-2.jpeg ├── work-3.jpeg ├── work-4.jpeg ├── work-5.jpeg ├── work-6.jpeg ├── work-7.jpeg ├── icon-github.png ├── icon-linkedin.png └── icon-search.png ├── README.md ├── debug.log ├── package.json ├── JavaScript └── script.js ├── css └── style.css └── index.html /sass/_footer.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sass/clients.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /img/sky.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sabamokhlesi/my-portfolio/HEAD/img/sky.mp4 -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sabamokhlesi/my-portfolio/HEAD/img/logo.png -------------------------------------------------------------------------------- /img/work-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sabamokhlesi/my-portfolio/HEAD/img/work-1.jpeg -------------------------------------------------------------------------------- /img/work-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sabamokhlesi/my-portfolio/HEAD/img/work-2.jpeg -------------------------------------------------------------------------------- /img/work-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sabamokhlesi/my-portfolio/HEAD/img/work-3.jpeg -------------------------------------------------------------------------------- /img/work-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sabamokhlesi/my-portfolio/HEAD/img/work-4.jpeg -------------------------------------------------------------------------------- /img/work-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sabamokhlesi/my-portfolio/HEAD/img/work-5.jpeg -------------------------------------------------------------------------------- /img/work-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sabamokhlesi/my-portfolio/HEAD/img/work-6.jpeg -------------------------------------------------------------------------------- /img/work-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sabamokhlesi/my-portfolio/HEAD/img/work-7.jpeg -------------------------------------------------------------------------------- /img/icon-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sabamokhlesi/my-portfolio/HEAD/img/icon-github.png -------------------------------------------------------------------------------- /img/icon-linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sabamokhlesi/my-portfolio/HEAD/img/icon-linkedin.png -------------------------------------------------------------------------------- /img/icon-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sabamokhlesi/my-portfolio/HEAD/img/icon-search.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # My-Portfolio 2 | Check out my portfolio website here! https://sabamokhlesi.github.io/my-portfolio/ 3 | -------------------------------------------------------------------------------- /sass/main.scss: -------------------------------------------------------------------------------- 1 | @import "base"; 2 | @import "header"; 3 | @import "story"; 4 | @import "menu"; 5 | @import "gallery"; 6 | @import "footer"; 7 | @import "clients"; 8 | @import "cta"; 9 | @import "nav"; 10 | @import "animations"; -------------------------------------------------------------------------------- /debug.log: -------------------------------------------------------------------------------- 1 | [1215/184852.273:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 2 | [1215/200318.334:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 3 | [1215/211051.548:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 4 | [0102/123244.987:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "My-Portfolio", 3 | "version": "1.0.0", 4 | "description": "Saba Mokhlesi portfolio website", 5 | "main": "index.js", 6 | "scripts": { 7 | "watch:sass": "node-sass sass/main.scss css/style.css -w", 8 | "devserver": "live-server --browser=chrome" 9 | }, 10 | "author": "Saba", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "autoprefixer": "^7.2.6", 14 | "node-sass": "^4.14.0" 15 | }, 16 | "dependencies": {} 17 | } 18 | -------------------------------------------------------------------------------- /sass/animations.scss: -------------------------------------------------------------------------------- 1 | //move right 2 | .move-in-right{ 3 | opacity: 0; 4 | } 5 | 6 | .move-in-right.add-animation{ 7 | animation: moveInRight 1s ease-out; 8 | opacity: 1; 9 | } 10 | @keyframes moveInRight { 11 | 0%{ 12 | opacity: 0; 13 | transform: translateX(10rem); 14 | } 15 | 100%{ 16 | opacity: 1; 17 | transform: translate(0); 18 | } 19 | } 20 | 21 | //move up 22 | .move-in-up{ 23 | opacity: 0; 24 | } 25 | 26 | .move-in-up.add-animation{ 27 | animation: moveInUp 1s ease-out; 28 | opacity: 1; 29 | } 30 | @keyframes moveInUp { 31 | 0%{ 32 | opacity: 1; 33 | transform: translateY(12rem); 34 | } 35 | 100%{ 36 | opacity: 1; 37 | transform: translate(0); 38 | } 39 | } 40 | 41 | //move down 42 | .move-in-down{ 43 | opacity: 0; 44 | } 45 | 46 | .move-in-down.add-animation{ 47 | animation: moveInDown 1s ease-out; 48 | opacity: 1; 49 | } 50 | @keyframes moveInDown { 51 | 0%{ 52 | opacity: 1; 53 | transform: translateY(-12rem); 54 | } 55 | 100%{ 56 | opacity: 1; 57 | transform: translate(0); 58 | } 59 | } 60 | 61 | //move left 62 | .move-in-left{ 63 | opacity: 0; 64 | } 65 | 66 | .move-in-left.add-animation{ 67 | animation: moveInLeft 1s ease-out; 68 | opacity: 1; 69 | } 70 | @keyframes moveInLeft { 71 | 0%{ 72 | opacity: 0; 73 | transform: translateX(-10rem); 74 | } 75 | 100%{ 76 | opacity: 1; 77 | transform: translate(0); 78 | } 79 | } 80 | 81 | //fade-in 82 | .fade-in{ 83 | opacity: 0; 84 | } 85 | 86 | .fade-in.add-animation{ 87 | transition: opacity 1.5s ease-out; 88 | opacity: 1; 89 | } -------------------------------------------------------------------------------- /sass/cta.scss: -------------------------------------------------------------------------------- 1 | .resume{ 2 | position: absolute; 3 | top: 0; 4 | right: 0; 5 | width: 50%; 6 | height: 50%; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | @media only screen and (max-width:$bp-large) {position: relative; width: auto; min-height: 100vh; padding-top: 10rem; padding-bottom: 20rem;} 11 | @media only screen and (max-width:$bp-medium) {padding-top: 0;} 12 | } 13 | 14 | .code{ 15 | &-links{ 16 | writing-mode: vertical-lr; 17 | margin-right: 3rem; 18 | padding-top: 8rem; 19 | height: max-content; 20 | } 21 | &-title{ 22 | display: none; 23 | @media only screen and (max-width:$bp-large) {display: block;} 24 | } 25 | &-wrapper{ 26 | flex: 1; 27 | padding: 3rem; 28 | padding-right: 2rem; 29 | padding-left: 1rem; 30 | margin-top: 5%; 31 | @media only screen and (max-width:$bp-medium) {padding-right: 2rem;} 32 | @media only screen and (max-width:$bp-small) {width: max-content; overflow: auto; white-space: nowrap; margin-right: 3rem;} 33 | } 34 | &-line{ 35 | padding-left: 4%; 36 | margin-left: 2%; 37 | font-family: $font-codes; 38 | font-size: 1.5rem; 39 | &-0{ font-size: 2.5rem;} 40 | @media only screen and (max-width:$bp-medium) {margin-left: 1%;} 41 | &:hover{ 42 | background-color: rgba(41, 41, 41, 0.637); 43 | } 44 | } 45 | &-animation{ 46 | line-height: 0; 47 | font-size: 2.2rem; 48 | font-weight: bolder; 49 | animation: type 1s infinite; 50 | } 51 | &-dot{color: rgb(95, 94, 94);} 52 | &-grey{color: rgb(151, 151, 151);} 53 | &-red{color: red;} 54 | &-orange{color: orange;} 55 | &-blue{color: blueviolet;} 56 | &-yellow{color: yellow;} 57 | &-green{color: green;} 58 | &-greenyellow{color: yellowgreen;} 59 | } 60 | 61 | @keyframes type{ 62 | 0% {opacity:0;} 63 | 50% {opacity:1;} 64 | 100% {opacity:0;} 65 | } -------------------------------------------------------------------------------- /sass/_header.scss: -------------------------------------------------------------------------------- 1 | .header{ 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | width: 50%; 6 | height: 50%; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | @media only screen and (max-width:$bp-large) {position: relative; width: auto; min-height: 100vh; padding-bottom: 6rem;} 11 | &-text{ 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: center; 15 | margin-left: 15%; 16 | h1{line-height: 130%; font-size: 9rem;} 17 | @media only screen and (max-width:$bp-medium) {margin-left: 7%;} 18 | @media only screen and (max-width:$bp-small) { 19 | h1{font-size: 7rem; line-height: 150%;} 20 | } 21 | } 22 | &-letter{ 23 | &-1{ 24 | transition: all .1s; 25 | &:hover{ 26 | color: $color-primary; 27 | line-height: 0; 28 | @media only screen and (max-width:$bp-small) {font-size: 6.5rem;} 29 | } 30 | } 31 | &-2{ 32 | transition: all .1s; 33 | &:hover{ 34 | color: $color-secondary; 35 | line-height: 0; 36 | @media only screen and (max-width:$bp-small) {font-size: 6.5rem;} 37 | } 38 | } 39 | &-3{ 40 | color: $color-primary; 41 | transition: all .1s; 42 | &:hover{ 43 | color: $color-secondary; 44 | line-height: 0;} 45 | } 46 | &-4{ 47 | transition: all .1s; 48 | color: $color-secondary; 49 | &:hover{ 50 | color: $color-primary; 51 | line-height: 0; 52 | } 53 | } 54 | } 55 | &-links{ 56 | margin-top: 3rem; 57 | align-self: start; 58 | margin-left: 15%; 59 | @media only screen and (max-width:$bp-medium) {margin-left: 7%;} 60 | @media only screen and (max-width:$bp-small) {span{display: none;}} 61 | } 62 | } 63 | 64 | #output{color: $color-secondary; font-size:3rem;} 65 | 66 | @keyframes letter-up{ 67 | 0%{ 68 | font-size: 10rem; 69 | } 70 | 40%{ 71 | font-size: 9.5rem; 72 | color: $color-secondary; 73 | } 74 | 100%{ 75 | font-size: 10rem; 76 | } 77 | } 78 | 79 | -------------------------------------------------------------------------------- /sass/gallery.scss: -------------------------------------------------------------------------------- 1 | .contact{ 2 | position: absolute; 3 | bottom: 0; 4 | right: 0; 5 | width: 50%; 6 | height: 50%; 7 | display: flex; 8 | align-items: center; 9 | @media only screen and (max-width:$bp-large) {position: relative; width: auto; height: fit-content;} 10 | } 11 | .contact{ 12 | &-wrapper{ 13 | flex: auto; 14 | display: grid; 15 | grid-template-columns: auto auto auto auto; 16 | gap: 3rem; 17 | @media only screen and (max-width:$bp-large) {padding-bottom: 15rem;} 18 | @media only screen and (max-width:$bp-small) {padding-bottom: 5rem; display: flex; flex-direction: column; justify-content: center; br{display: none;}} 19 | } 20 | &-heading{ 21 | grid-column: 4/5; 22 | font-size: 13rem; 23 | line-height: 100%; 24 | font-family: $font-header; 25 | &-1{color: $color-primary;} 26 | &-2{color: $color-secondary;} 27 | @media only screen and (max-width:$bp-medium) {margin-left: -8%; font-size: 15rem;} 28 | @media only screen and (max-width:$bp-small) {margin-left: 5%; font-size: 10rem; padding-bottom: 1rem;} 29 | } 30 | &-form{ 31 | grid-column: 2/-1; 32 | grid-row: 2/3; 33 | @media only screen and (max-width:$bp-small) {margin-left: 3rem; margin-right: 5rem;} 34 | } 35 | &-lable{ 36 | line-height: 150%; 37 | font-size: 2rem; 38 | } 39 | &-input{ 40 | color: inherit; 41 | font-size: 1.8rem; 42 | background-color: transparent; 43 | border: none; 44 | width: 45%; 45 | padding: .5rem; 46 | border-bottom: 2px solid $color-primary; 47 | @media only screen and (max-width:$bp-small) {display: block; width: 100%; margin-bottom: 2.5rem;} 48 | &:focus:invalid{ 49 | border-bottom:2px solid orangered; 50 | } 51 | &:focus{ 52 | outline: none; 53 | box-shadow: 0 1rem 2rem rgba(253, 252, 252, 0.199); 54 | border-bottom: 2px solid $color-secondary 55 | } 56 | } 57 | &-submit{ 58 | min-width:10% ; 59 | @media only screen and (max-width:$bp-small) {float: right; padding: 1rem 2rem;} 60 | } 61 | &-links{ 62 | writing-mode: vertical-lr; 63 | margin-right: 4rem; 64 | padding-top: 8rem; 65 | height: max-content; 66 | } 67 | } -------------------------------------------------------------------------------- /sass/menu.scss: -------------------------------------------------------------------------------- 1 | .social{ 2 | position: fixed; 3 | bottom: 4rem; 4 | left: 4rem; 5 | z-index: 999; 6 | @media only screen and (max-width:$bp-large) {bottom: 2rem; left: 2rem;} 7 | &-checkbox{display: none;} 8 | &-btn{ 9 | height: 7rem; 10 | width: 7rem; 11 | position: fixed; 12 | bottom: 4rem; 13 | left: 4rem; 14 | border-radius: 50%; 15 | z-index: 1000; 16 | cursor: pointer; 17 | @media only screen and (max-width:$bp-large) {bottom: 2rem; left: 2rem;} 18 | } 19 | &-link{ 20 | &-linkedin{ 21 | position: fixed; 22 | bottom: 4rem; 23 | left: 6.5rem; 24 | z-index: 999; 25 | transition: all .7s ease-out; 26 | @media only screen and (max-width:$bp-large) {left: 4rem; bottom: 2rem;} 27 | } 28 | &-github{ 29 | position: fixed; 30 | bottom: 4rem; 31 | left: 6.5rem; 32 | z-index: 999; 33 | transition: all .7s .1s ease-out; 34 | @media only screen and (max-width:$bp-large) {left: 4rem; bottom: 2rem;} 35 | } 36 | } 37 | &-img{ 38 | background-color: black; 39 | cursor: pointer; 40 | } 41 | &-search{ 42 | position: fixed; 43 | bottom: 4rem; 44 | left: 5rem; 45 | z-index: 999; 46 | height: 5rem; 47 | width: 5rem; 48 | transition: all .9s ease-in; 49 | animation: pulse 1.5s infinite ease-in-out; 50 | border-radius: 10px 20px 0 0; 51 | @media only screen and (max-width:$bp-large) {bottom: 2rem; left: 2.5rem;} 52 | } 53 | &-linkedin{ 54 | transition: all .7s ease-out; 55 | height: 1rem; 56 | width: 1rem; 57 | border-radius: 50%; 58 | } 59 | &-github{ 60 | transition: all .7s .1s ease-out; 61 | height: 1rem; 62 | width: 1rem; 63 | border-radius: 50%; 64 | } 65 | &-checkbox:checked ~ &-link-linkedin{ 66 | transform: translateY(-10rem) rotate(720deg) scale(5); 67 | filter: brightness(1.5); 68 | } 69 | &-checkbox:checked ~ &-search{ 70 | animation:unset; 71 | filter: brightness(2); 72 | transform:rotate(1440deg); 73 | } 74 | &-checkbox:checked ~ &-link-github{ 75 | transform: translateY(-17rem) rotate(1080deg) scale(5); 76 | filter: brightness(1.5); 77 | } 78 | } 79 | 80 | @keyframes pulse{ 81 | 0%{ 82 | transform: scale(1); 83 | filter: brightness(1); 84 | } 85 | 50%{ 86 | transform: scale(1.05); 87 | filter: brightness(1.5); 88 | } 89 | 100%{ 90 | transform: scale(1); 91 | filter: brightness(1); 92 | } 93 | } -------------------------------------------------------------------------------- /sass/nav.scss: -------------------------------------------------------------------------------- 1 | .navigation{ 2 | &-checkbox{display: none;} 3 | &-btn{ 4 | height: 7rem; 5 | width: 7rem; 6 | position: fixed; 7 | top: 3rem; 8 | right: 2rem; 9 | border-radius: 50%; 10 | z-index: 2000; 11 | cursor: pointer; 12 | } 13 | 14 | &-background{ 15 | z-index: 1000; 16 | height: 0; 17 | width: 100%; 18 | position: fixed; 19 | top: 0; 20 | left: 0; 21 | background-image:linear-gradient(to bottom,rgba(245, 222, 179, 0.842),transparent); 22 | @media only screen and (max-width:$bp-medium) {background-image:linear-gradient(to bottom,rgba(245, 222, 179, 0.959),transparent);} 23 | transition: all 1s ; 24 | } 25 | 26 | &-nav{ 27 | height: 0; 28 | min-width: 50%; 29 | position: fixed; 30 | top: 36%; 31 | left: 50%; 32 | transform: translate(-50% , -50%); 33 | z-index: 1500; 34 | opacity: 0; 35 | transform-origin: right; 36 | transition: all .5s; 37 | pointer-events: none; 38 | cursor: not-allowed; 39 | @media only screen and (max-width:$bp-medium) {top: 42%;} 40 | } 41 | &-list{ 42 | list-style: none; 43 | display: flex; 44 | justify-content: space-between; 45 | } 46 | &-link{ 47 | &:link, 48 | &:visited{ 49 | text-decoration: none; 50 | transition: all .5s; 51 | font-size: 2rem; 52 | color: black; 53 | font-weight: bolder; 54 | text-transform: uppercase; 55 | span{color: $color-primary;} 56 | @media only screen and (max-width:$bp-medium) {font-size: 1.6rem;} 57 | 58 | } 59 | &:hover, 60 | &:active{ 61 | color: $color-primary ; 62 | transform: translateY(-.7rem) scale(1.15); 63 | } 64 | } 65 | 66 | &-checkbox:checked ~ &-background{ 67 | height: 33%; 68 | @media only screen and (max-width:$bp-medium) {height: 56%;} 69 | } 70 | &-checkbox:checked ~ &-nav{ 71 | opacity: 1; 72 | height: 50vh; 73 | pointer-events: unset; 74 | cursor: auto; 75 | } 76 | 77 | &-icon{ 78 | position: relative; 79 | margin-top: 3.4rem; 80 | 81 | &, 82 | &::before, 83 | &::after{ 84 | height: 2px; 85 | background-color: blanchedalmond; 86 | display: inline-block; 87 | width: 4.5rem; 88 | } 89 | 90 | &::before, 91 | &::after{ 92 | content: ""; 93 | position: absolute; 94 | right: 0; 95 | transition: all .3s; 96 | transform: translateX(.5rem); 97 | } 98 | &::after{top: 1.3rem;} 99 | &::before{top: -1.3rem;} 100 | } 101 | &-btn:hover &-icon{ 102 | background-color: $color-primary; 103 | } 104 | &-btn:hover &-icon::before{ 105 | transform: translateX(0); 106 | background-color: $color-secondary; 107 | 108 | } 109 | &-btn:hover &-icon::after{ 110 | transform: translateX(0); 111 | background-color: $color-secondary; 112 | } 113 | 114 | &-checkbox:checked + &-btn &-icon{ 115 | background-color: transparent; 116 | } 117 | 118 | &-checkbox:checked + &-btn &-icon::before{ 119 | transform: rotate(45deg); 120 | top: 0; 121 | } 122 | 123 | &-checkbox:checked + &-btn &-icon::after{ 124 | transform: rotate(-45deg); 125 | top: 0; 126 | } 127 | } -------------------------------------------------------------------------------- /sass/story.scss: -------------------------------------------------------------------------------- 1 | .works{ 2 | position: absolute; 3 | bottom: 0; 4 | left: 0; 5 | width: 50%; 6 | height: 50%; 7 | display: flex; 8 | justify-content: space-between; 9 | @media only screen and (max-width:$bp-large) {position: relative; width: auto; min-height: fit-content; padding-top: 10rem; padding-bottom: 10rem;} 10 | @media only screen and (max-width:$bp-medium) {padding-top: 5rem;} 11 | &-links{ 12 | writing-mode: vertical-lr; 13 | margin: 4rem; 14 | padding-top: 8rem; 15 | margin-top: auto; 16 | margin-bottom: auto; 17 | height: max-content; 18 | } 19 | } 20 | 21 | .works-box{ 22 | flex: 1; 23 | padding:3rem; 24 | margin: auto; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | } 29 | .works-wrapper{ 30 | position: relative; 31 | width: 100%; 32 | // margin: 0 auto; 33 | display: flex; 34 | align-items: center; 35 | justify-content: space-around; 36 | flex-wrap: wrap; 37 | height: 67vh; 38 | overflow-y: scroll; 39 | &::-webkit-scrollbar {width: 3px;} 40 | &::-webkit-scrollbar-track { background: transparent;border-radius: 1rem;} 41 | &::-webkit-scrollbar-thumb {background: transparent; border-radius: 1rem;} 42 | &:hover{ 43 | &::-webkit-scrollbar-thumb {background: gainsboro;} 44 | } 45 | } 46 | 47 | $letters: 7; 48 | $teal: #16e590; 49 | $cubic-slow: cubic-bezier(0.7, 0.01, 0.37, 1); 50 | 51 | .roll-up { 52 | overflow: hidden; 53 | position: relative; 54 | > span { 55 | font-size: 2.5rem; 56 | display: inline-block; 57 | position: relative; 58 | @for $i from 1 through $letters { 59 | &:nth-child(#{$i}) { 60 | transition-delay: #{$i *.03}s; 61 | } 62 | } 63 | > span { 64 | display: inline-block; 65 | transition: .6s $cubic-slow; 66 | transition-delay: inherit; 67 | &:nth-child(1) { 68 | position: relative; 69 | } 70 | &:nth-child(2) { 71 | position: absolute; 72 | transform: translateY(100%); 73 | left: 0; 74 | color: $color-primary-light; 75 | } 76 | } 77 | } 78 | } 79 | .text-reveal { 80 | position: relative; 81 | overflow: hidden; 82 | span { 83 | display: block; 84 | transition: $cubic-slow 0.6s; 85 | } 86 | > span { 87 | &:nth-child(2) { 88 | position: absolute; 89 | top: 0; 90 | left: 0; 91 | color: $color-secondary-light; 92 | > span { 93 | overflow: hidden; 94 | transform: translateX(-100%); 95 | @for $i from 1 through $letters { 96 | &:nth-child(#{$i}) { 97 | transition-delay: #{$i *.1}s; 98 | } 99 | } 100 | > span { 101 | transform: translateX(100%); 102 | transition-delay: inherit; 103 | } 104 | } 105 | } 106 | } 107 | } 108 | .card { 109 | text-decoration: none; 110 | color: inherit; 111 | display: inline-flex; 112 | align-items: center; 113 | justify-content: center; 114 | position: relative; 115 | max-width: 28%; 116 | width: 100%; 117 | height: 19rem; 118 | padding: 2rem; 119 | box-shadow: 0 2rem 3rem 1rem rgba(0, 0, 0, 0.37), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3); 120 | background-size: cover; 121 | background-position: top; 122 | cursor: pointer; 123 | &-1, 124 | &-2{ 125 | margin: 8rem 8rem 0 0rem; 126 | @media only screen and (max-width:$bp-medium) {margin: 5rem 4.5rem 0 0rem;} 127 | } 128 | &-3, 129 | &-4{ 130 | margin: 8rem 0 0 8rem; 131 | @media only screen and (max-width:$bp-medium) {margin: 5rem 4rem 0 0rem;} 132 | } 133 | &-single-left{ 134 | margin-right: auto; 135 | margin-left: 18rem; 136 | @media only screen and (max-width:$bp-medium) {margin: 5rem 4rem 0 0rem;} 137 | } 138 | @media only screen and (max-width:$bp-medium) {max-width: 60%; height: 10rem;} 139 | @media only screen and (max-width:$bp-small) {max-width: 100%; height: 10rem;} 140 | &:before { 141 | content: ''; 142 | display: block; 143 | height: 100%; 144 | width: 100%; 145 | position: absolute; 146 | background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); 147 | } 148 | .card__content { 149 | z-index: 1; 150 | .card__content--description { 151 | position: absolute; 152 | bottom: 2rem; 153 | right: 0; 154 | margin-right: -8rem; 155 | text-align: left; 156 | max-width: 17.5rem; 157 | } 158 | } 159 | &:hover { 160 | box-shadow: 0 0rem 5rem rgba(255, 255, 255, 0.219); 161 | .roll-up { 162 | > span { 163 | > span { 164 | &:nth-child(1) { 165 | transform: translateY(-100%); 166 | } 167 | &:nth-child(2) { 168 | transform: translateY(0); 169 | } 170 | } 171 | } 172 | } 173 | .text-reveal { 174 | > span:nth-child(2) > span, 175 | > span:nth-child(2) > span > span { 176 | transform: translateX(0); 177 | } 178 | } 179 | } 180 | } -------------------------------------------------------------------------------- /sass/_base.scss: -------------------------------------------------------------------------------- 1 | // COLOR VARIABLES 2 | $color-primary: #5918df; 3 | $color-primary-light: #7b45e9; 4 | $color-primary-dark: #310e79; 5 | 6 | $color-secondary: #c818df; 7 | $color-secondary-dark: #740283; 8 | $color-secondary-light: #d5b2da; 9 | 10 | $color-grey-light-1: #dadfe2; 11 | $color-grey-light-2: #c2c7ca; 12 | 13 | $color-grey-dark-1: #353638; 14 | $color-grey-dark-2: #4c4f52; 15 | 16 | //mediaqueries breakpoints 17 | $bp-very-large: 120em; 18 | $bp-largest: 63em; 19 | $bp-large: 56.5em; 20 | $bp-medium: 40em; 21 | $bp-small: 30em; 22 | 23 | // FONT VARIABLES 24 | $font-primary: 'Jost', sans-serif; 25 | $font-codes: 'Roboto Mono', monospace; 26 | $font-header: 'Righteous', cursive; 27 | 28 | *, 29 | *::before, 30 | *::after{ 31 | margin: 0; 32 | padding: 0; 33 | box-sizing: initial; 34 | } 35 | 36 | html{ 37 | box-sizing: border-box; 38 | font-size: 52%; 39 | scroll-behavior: smooth; 40 | @media only screen and (max-width:$bp-largest) {font-size: 49%;} 41 | @media only screen and (max-width:$bp-large) {font-size: 46%;} 42 | } 43 | 44 | body{ 45 | font-family: $font-primary; 46 | color:$color-grey-dark-2; 47 | font-weight: 400; 48 | font-size: 1.6rem; 49 | letter-spacing: 1px; 50 | line-height: 1.6; 51 | overflow: hidden; 52 | @media only screen and (max-width:$bp-large) {overflow: scroll;} 53 | } 54 | 55 | ::selection { 56 | color: white; 57 | background: $color-secondary; 58 | } 59 | 60 | .heading-1{ 61 | font-family: $font-header; 62 | letter-spacing: 4px; 63 | font-weight: 600; 64 | font-size: 10rem; 65 | } 66 | .wrapper{ 67 | position: relative; 68 | width: 200vw; 69 | height: 200vh; 70 | background-color: black; 71 | color: blanchedalmond; 72 | overflow: hidden; 73 | @media only screen and (max-width:$bp-large) {width: auto; height: auto; padding-bottom: 3rem; padding-top: 8rem;} 74 | @media only screen and (max-width:$bp-large) {padding-top: 3rem; padding-bottom: 0;} 75 | } 76 | 77 | .background-video { 78 | position: fixed; 79 | left: 0; 80 | top: 0; 81 | width: 100%; 82 | height: 100%; 83 | @media only screen and (max-width:$bp-large) {width: auto; height:100vh;} 84 | } 85 | 86 | .btn{ 87 | background-color: transparent; 88 | color: wheat; 89 | font-size: 1.8rem; 90 | border: none; 91 | outline: none; 92 | cursor: pointer; 93 | text-decoration: none; 94 | &-primary{ 95 | background-image: linear-gradient(135deg, transparent 0%, transparent 50%,white 50%); 96 | background-size: 565%; 97 | padding: 1rem 1.5rem; 98 | border: 1px solid currentColor; 99 | border-radius: 5px; 100 | transition: all .8s ease-out; 101 | margin-right:.5rem ; 102 | margin-top: .5rem; 103 | @media only screen and (max-width:$bp-medium) {padding: 1rem;background-size: 600%;} 104 | @media only screen and (max-width:$bp-large) {span{display: none;}} 105 | &:hover{ 106 | background-position: 100%; 107 | color: black ; 108 | } 109 | } 110 | &-secondary{ 111 | &::after{ 112 | transition: all .5s ease-out; 113 | content: ""; 114 | display: block; 115 | width: 90%; 116 | height: 3px; 117 | margin: 1rem auto; 118 | background-color: currentColor; 119 | } 120 | &:hover{ 121 | color: $color-secondary; 122 | &::after{ 123 | width: 0; 124 | background-image: linear-gradient(to right,$color-primary,$color-secondary,$color-primary); 125 | } 126 | } 127 | } 128 | } 129 | 130 | .logo{ 131 | color: $color-secondary; 132 | position: fixed; 133 | top: 0; 134 | left: 0; 135 | padding: 5rem; 136 | z-index: 999; 137 | font-size: 4rem; 138 | font-family: $font-header; 139 | @media only screen and (max-width:$bp-large) {padding: 0rem; margin: 3rem; background-color: black; border-radius: 200px;} 140 | &-link{ 141 | text-decoration: none; 142 | color: inherit; 143 | span{ 144 | color: $color-primary; 145 | } 146 | } 147 | } 148 | 149 | .loader-background { 150 | position: fixed; 151 | width: 100vw; 152 | height: 100vh; 153 | max-width: 100%; 154 | max-height: 100%; 155 | display: flex; 156 | justify-content: center; 157 | align-items: center; 158 | background-color: black; 159 | z-index: 3500; 160 | } 161 | 162 | .loader { 163 | width: 100px; 164 | height: 100px; 165 | padding-bottom: 0.2rem; 166 | background-color: black; 167 | display: flex; 168 | justify-content: space-evenly; 169 | align-items: flex-end; 170 | z-index: 3000; 171 | } 172 | 173 | .loader .dot1 { 174 | height: 25%; 175 | width: 25%; 176 | background-color: aqua; 177 | animation: bounce 2s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s infinite; 178 | 179 | } 180 | 181 | .loader .dot2 { 182 | height: 25%; 183 | width: 25%; 184 | background-color: aqua; 185 | animation: bounce 2s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.3s infinite; 186 | 187 | } 188 | 189 | .loader .dot3 { 190 | height: 25%; 191 | width: 25%; 192 | background-color: aqua; 193 | animation: bounce 2s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.7s infinite; 194 | } 195 | 196 | @keyframes bounce { 197 | 0% { 198 | transform: scaleY(0.5); 199 | } 200 | 25% { 201 | transform: scaleY(1) translateY(-70px); 202 | } 203 | 204 | 98% { 205 | transform: scaleY(1) translateY(-5); 206 | } 207 | 208 | 100% { 209 | transform: scaleY(0.5) translateY(0); 210 | 211 | } 212 | } -------------------------------------------------------------------------------- /JavaScript/script.js: -------------------------------------------------------------------------------- 1 | const MoveInRight = document.querySelectorAll('.move-in-right') 2 | const MoveInUp = document.querySelectorAll('.move-in-up') 3 | const MoveInDown = document.querySelectorAll('.move-in-down') 4 | const MoveInLeft = document.querySelectorAll('.move-in-left') 5 | const FadeIn = document.querySelectorAll('.fade-in') 6 | const options = { 7 | root:null, 8 | threshold:0, 9 | rootMargin:"-150px -100px -100px -100px", 10 | } 11 | const observer = new IntersectionObserver(function(entries,observer){ 12 | entries.forEach(entry =>{ 13 | if(!entry.isIntersecting){return} 14 | entry.target.classList.add('add-animation'); 15 | observer.unobserve(entry.target) 16 | }) 17 | },options) 18 | MoveInRight.forEach(item => observer.observe(item)) 19 | MoveInLeft.forEach(item => observer.observe(item)) 20 | MoveInUp.forEach(item => observer.observe(item)) 21 | MoveInDown.forEach(item => observer.observe(item)) 22 | FadeIn.forEach(item => observer.observe(item)) 23 | 24 | 25 | textAnimate(); 26 | function textAnimate(){ 27 | const randomLetters = "-+*/|}{[]~\\\":;?/.><=+-_)(*&^%$#@!)}"; 28 | const content = "A Software Developer"; 29 | const speed = 25; // ms per frame 30 | const increment = 3; // frames per step. Must be >2 31 | 32 | 33 | const contentLength = content.length; 34 | let si = 0; 35 | let stri = 0; 36 | let block = ""; 37 | let fixed = ""; 38 | //Call self x times, whole function wrapped in setTimeout 39 | (function rustle (i) { 40 | setTimeout(function () { 41 | if (--i){rustle(i);} 42 | nextFrame(i); 43 | si = si + 1; 44 | }, speed); 45 | })(contentLength*increment+1); 46 | function nextFrame(pos){ 47 | for (let i=0; i { 127 | $(this).css({'transition': ''}); 128 | if(this.settings.glare) this.glareElement.css({'transition': ''}); 129 | }, this.settings.speed); 130 | }; 131 | 132 | /** 133 | * When user mouse enters tilt element 134 | */ 135 | const mouseEnter = function(event) { 136 | this.ticking = false; 137 | $(this).css({'will-change': 'transform'}); 138 | setTransition.call(this); 139 | 140 | // Trigger change event 141 | $(this).trigger("tilt.mouseEnter"); 142 | }; 143 | 144 | /** 145 | * Return the x,y position of the mouse on the tilt element 146 | * @returns {{x: *, y: *}} 147 | */ 148 | const getMousePositions = function(event) { 149 | if (typeof(event) === "undefined") { 150 | event = { 151 | pageX: $(this).offset().left + $(this).outerWidth() / 2, 152 | pageY: $(this).offset().top + $(this).outerHeight() / 2 153 | }; 154 | } 155 | return {x: event.pageX, y: event.pageY}; 156 | }; 157 | 158 | /** 159 | * When user mouse moves over the tilt element 160 | */ 161 | const mouseMove = function(event) { 162 | this.mousePositions = getMousePositions(event); 163 | requestTick.call(this); 164 | }; 165 | 166 | /** 167 | * When user mouse leaves tilt element 168 | */ 169 | const mouseLeave = function() { 170 | setTransition.call(this); 171 | this.reset = true; 172 | requestTick.call(this); 173 | 174 | // Trigger change event 175 | $(this).trigger("tilt.mouseLeave"); 176 | }; 177 | 178 | /** 179 | * Get tilt values 180 | * 181 | * @returns {{x: tilt value, y: tilt value}} 182 | */ 183 | const getValues = function() { 184 | const width = $(this).outerWidth(); 185 | const height = $(this).outerHeight(); 186 | const left = $(this).offset().left; 187 | const top = $(this).offset().top; 188 | const percentageX = (this.mousePositions.x - left) / width; 189 | const percentageY = (this.mousePositions.y - top) / height; 190 | // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value 191 | const tiltX = ((this.settings.maxTilt / 2) - ((percentageX) * this.settings.maxTilt)).toFixed(2); 192 | const tiltY = (((percentageY) * this.settings.maxTilt) - (this.settings.maxTilt / 2)).toFixed(2); 193 | // angle 194 | const angle = Math.atan2(this.mousePositions.x - (left+width/2),- (this.mousePositions.y - (top+height/2)) )*(180/Math.PI); 195 | // Return x & y tilt values 196 | return {tiltX, tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle}; 197 | }; 198 | 199 | /** 200 | * Update tilt transforms on mousemove 201 | */ 202 | const updateTransforms = function() { 203 | this.transforms = getValues.call(this); 204 | 205 | if (this.reset) { 206 | this.reset = false; 207 | $(this).css('transform', `perspective(${this.settings.perspective}px) rotateX(0deg) rotateY(0deg)`); 208 | 209 | // Rotate glare if enabled 210 | if (this.settings.glare){ 211 | this.glareElement.css('transform', `rotate(180deg) translate(-50%, -50%)`); 212 | this.glareElement.css('opacity', `0`); 213 | } 214 | 215 | return; 216 | } else { 217 | $(this).css('transform', `perspective(${this.settings.perspective}px) rotateX(${this.settings.axis === 'x' ? 0 : this.transforms.tiltY}deg) rotateY(${this.settings.axis === 'y' ? 0 : this.transforms.tiltX}deg) scale3d(${this.settings.scale},${this.settings.scale},${this.settings.scale})`); 218 | 219 | // Rotate glare if enabled 220 | if (this.settings.glare){ 221 | this.glareElement.css('transform', `rotate(${this.transforms.angle}deg) translate(-50%, -50%)`); 222 | this.glareElement.css('opacity', `${this.transforms.percentageY * this.settings.maxGlare / 100}`); 223 | } 224 | } 225 | 226 | // Trigger change event 227 | $(this).trigger("change", [this.transforms]); 228 | 229 | this.ticking = false; 230 | }; 231 | 232 | /** 233 | * Prepare elements 234 | */ 235 | const prepareGlare = function () { 236 | const glarePrerender = this.settings.glarePrerender; 237 | 238 | // If option pre-render is enabled we assume all html/css is present for an optimal glare effect. 239 | if (!glarePrerender) 240 | // Create glare element 241 | $(this).append('
'); 242 | 243 | // Store glare selector if glare is enabled 244 | this.glareElementWrapper = $(this).find(".js-tilt-glare"); 245 | this.glareElement = $(this).find(".js-tilt-glare-inner"); 246 | 247 | // Remember? We assume all css is already set, so just return 248 | if (glarePrerender) return; 249 | 250 | // Abstracted re-usable glare styles 251 | const stretch = { 252 | 'position': 'absolute', 253 | 'top': '0', 254 | 'left': '0', 255 | 'width': '100%', 256 | 'height': '100%', 257 | }; 258 | 259 | // Style glare wrapper 260 | this.glareElementWrapper.css(stretch).css({ 261 | 'overflow': 'hidden', 262 | }); 263 | 264 | // Style glare element 265 | this.glareElement.css({ 266 | 'position': 'absolute', 267 | 'top': '50%', 268 | 'left': '50%', 269 | 'pointer-events': 'none', 270 | 'background-image': `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`, 271 | 'width': `${$(this).outerWidth()*2}`, 272 | 'height': `${$(this).outerWidth()*2}`, 273 | 'transform': 'rotate(180deg) translate(-50%, -50%)', 274 | 'transform-origin': '0% 0%', 275 | 'opacity': '0', 276 | }); 277 | 278 | }; 279 | 280 | /** 281 | * Update glare on resize 282 | */ 283 | const updateGlareSize = function () { 284 | this.glareElement.css({ 285 | 'width': `${$(this).outerWidth()*2}`, 286 | 'height': `${$(this).outerWidth()*2}`, 287 | }); 288 | }; 289 | 290 | /** 291 | * Public methods 292 | */ 293 | $.fn.tilt.destroy = function() { 294 | $(this).each(function () { 295 | $(this).find('.js-tilt-glare').remove(); 296 | $(this).css({'will-change': '', 'transform': ''}); 297 | $(this).off('mousemove mouseenter mouseleave'); 298 | }); 299 | }; 300 | 301 | $.fn.tilt.getValues = function() { 302 | const results = []; 303 | $(this).each(function () { 304 | this.mousePositions = getMousePositions.call(this); 305 | results.push(getValues.call(this)); 306 | }); 307 | return results; 308 | }; 309 | 310 | $.fn.tilt.reset = function() { 311 | $(this).each(function () { 312 | this.mousePositions = getMousePositions.call(this); 313 | this.settings = $(this).data('settings'); 314 | mouseLeave.call(this); 315 | setTimeout(() => { 316 | this.reset = false; 317 | }, this.settings.transition); 318 | }); 319 | }; 320 | 321 | /** 322 | * Loop every instance 323 | */ 324 | return this.each(function () { 325 | 326 | /** 327 | * Default settings merged with user settings 328 | * Can be set trough data attributes or as parameter. 329 | * @type {*} 330 | */ 331 | this.settings = $.extend({ 332 | maxTilt: $(this).is('[data-tilt-max]') ? $(this).data('tilt-max') : 20, 333 | perspective: $(this).is('[data-tilt-perspective]') ? $(this).data('tilt-perspective') : 300, 334 | easing: $(this).is('[data-tilt-easing]') ? $(this).data('tilt-easing') : 'cubic-bezier(.03,.98,.52,.99)', 335 | scale: $(this).is('[data-tilt-scale]') ? $(this).data('tilt-scale') : '1', 336 | speed: $(this).is('[data-tilt-speed]') ? $(this).data('tilt-speed') : '400', 337 | transition: $(this).is('[data-tilt-transition]') ? $(this).data('tilt-transition') : true, 338 | axis: $(this).is('[data-tilt-axis]') ? $(this).data('tilt-axis') : null, 339 | reset: $(this).is('[data-tilt-reset]') ? $(this).data('tilt-reset') : true, 340 | glare: $(this).is('[data-tilt-glare]') ? $(this).data('tilt-glare') : false, 341 | maxGlare: $(this).is('[data-tilt-maxglare]') ? $(this).data('tilt-maxglare') : 1, 342 | }, options); 343 | 344 | 345 | this.init = () => { 346 | // Store settings 347 | $(this).data('settings', this.settings); 348 | 349 | // Prepare element 350 | if(this.settings.glare) prepareGlare.call(this); 351 | 352 | // Bind events 353 | bindEvents.call(this); 354 | }; 355 | 356 | // Init 357 | this.init(); 358 | 359 | }); 360 | }; 361 | 362 | /** 363 | * Auto load 364 | */ 365 | $('[data-tilt]').tilt(); 366 | 367 | return true; 368 | })); 369 | 370 | $(".card").tilt({ 371 | glare: true, 372 | maxGlare: .2, 373 | maxTilt: 5 374 | }); 375 | 376 | //loader 377 | $(window).on('load',function(){ 378 | $('.loader-background').fadeOut("slow"); 379 | }); 380 | 381 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: initial; } 7 | 8 | html { 9 | box-sizing: border-box; 10 | font-size: 52%; 11 | scroll-behavior: smooth; } 12 | @media only screen and (max-width: 63em) { 13 | html { 14 | font-size: 49%; } } 15 | @media only screen and (max-width: 56.5em) { 16 | html { 17 | font-size: 46%; } } 18 | 19 | body { 20 | font-family: "Jost", sans-serif; 21 | color: #4c4f52; 22 | font-weight: 400; 23 | font-size: 1.6rem; 24 | letter-spacing: 1px; 25 | line-height: 1.6; 26 | overflow: hidden; } 27 | @media only screen and (max-width: 56.5em) { 28 | body { 29 | overflow: scroll; } } 30 | 31 | ::selection { 32 | color: white; 33 | background: #c818df; } 34 | 35 | .heading-1 { 36 | font-family: "Righteous", cursive; 37 | letter-spacing: 4px; 38 | font-weight: 600; 39 | font-size: 10rem; } 40 | 41 | .wrapper { 42 | position: relative; 43 | width: 200vw; 44 | height: 200vh; 45 | background-color: black; 46 | color: blanchedalmond; 47 | overflow: hidden; } 48 | @media only screen and (max-width: 56.5em) { 49 | .wrapper { 50 | width: auto; 51 | height: auto; 52 | padding-bottom: 3rem; 53 | padding-top: 8rem; } } 54 | @media only screen and (max-width: 56.5em) { 55 | .wrapper { 56 | padding-top: 3rem; 57 | padding-bottom: 0; } } 58 | 59 | .background-video { 60 | position: fixed; 61 | left: 0; 62 | top: 0; 63 | width: 100%; 64 | height: 100%; } 65 | @media only screen and (max-width: 56.5em) { 66 | .background-video { 67 | width: auto; 68 | height: 100vh; } } 69 | 70 | .btn { 71 | background-color: transparent; 72 | color: wheat; 73 | font-size: 1.8rem; 74 | border: none; 75 | outline: none; 76 | cursor: pointer; 77 | text-decoration: none; } 78 | .btn-primary { 79 | background-image: linear-gradient(135deg, transparent 0%, transparent 50%, white 50%); 80 | background-size: 565%; 81 | padding: 1rem 1.5rem; 82 | border: 1px solid currentColor; 83 | border-radius: 5px; 84 | transition: all .8s ease-out; 85 | margin-right: .5rem; 86 | margin-top: .5rem; } 87 | @media only screen and (max-width: 40em) { 88 | .btn-primary { 89 | padding: 1rem; 90 | background-size: 600%; } } 91 | @media only screen and (max-width: 56.5em) { 92 | .btn-primary span { 93 | display: none; } } 94 | .btn-primary:hover { 95 | background-position: 100%; 96 | color: black; } 97 | .btn-secondary::after { 98 | transition: all .5s ease-out; 99 | content: ""; 100 | display: block; 101 | width: 90%; 102 | height: 3px; 103 | margin: 1rem auto; 104 | background-color: currentColor; } 105 | .btn-secondary:hover { 106 | color: #c818df; } 107 | .btn-secondary:hover::after { 108 | width: 0; 109 | background-image: linear-gradient(to right, #5918df, #c818df, #5918df); } 110 | 111 | .logo { 112 | color: #c818df; 113 | position: fixed; 114 | top: 0; 115 | left: 0; 116 | padding: 5rem; 117 | z-index: 999; 118 | font-size: 4rem; 119 | font-family: "Righteous", cursive; } 120 | @media only screen and (max-width: 56.5em) { 121 | .logo { 122 | padding: 0rem; 123 | margin: 3rem; 124 | background-color: black; 125 | border-radius: 200px; } } 126 | .logo-link { 127 | text-decoration: none; 128 | color: inherit; } 129 | .logo-link span { 130 | color: #5918df; } 131 | 132 | .loader-background { 133 | position: fixed; 134 | width: 100vw; 135 | height: 100vh; 136 | max-width: 100%; 137 | max-height: 100%; 138 | display: flex; 139 | justify-content: center; 140 | align-items: center; 141 | background-color: black; 142 | z-index: 3500; } 143 | 144 | .loader { 145 | width: 100px; 146 | height: 100px; 147 | padding-bottom: 0.2rem; 148 | background-color: black; 149 | display: flex; 150 | justify-content: space-evenly; 151 | align-items: flex-end; 152 | z-index: 3000; } 153 | 154 | .loader .dot1 { 155 | height: 25%; 156 | width: 25%; 157 | background-color: aqua; 158 | animation: bounce 2s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s infinite; } 159 | 160 | .loader .dot2 { 161 | height: 25%; 162 | width: 25%; 163 | background-color: aqua; 164 | animation: bounce 2s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.3s infinite; } 165 | 166 | .loader .dot3 { 167 | height: 25%; 168 | width: 25%; 169 | background-color: aqua; 170 | animation: bounce 2s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.7s infinite; } 171 | 172 | @keyframes bounce { 173 | 0% { 174 | transform: scaleY(0.5); } 175 | 25% { 176 | transform: scaleY(1) translateY(-70px); } 177 | 98% { 178 | transform: scaleY(1) translateY(-5); } 179 | 100% { 180 | transform: scaleY(0.5) translateY(0); } } 181 | 182 | .header { 183 | position: absolute; 184 | top: 0; 185 | left: 0; 186 | width: 50%; 187 | height: 50%; 188 | display: flex; 189 | flex-direction: column; 190 | justify-content: center; } 191 | @media only screen and (max-width: 56.5em) { 192 | .header { 193 | position: relative; 194 | width: auto; 195 | min-height: 100vh; 196 | padding-bottom: 6rem; } } 197 | .header-text { 198 | display: flex; 199 | flex-direction: column; 200 | justify-content: center; 201 | margin-left: 15%; } 202 | .header-text h1 { 203 | line-height: 130%; 204 | font-size: 9rem; } 205 | @media only screen and (max-width: 40em) { 206 | .header-text { 207 | margin-left: 7%; } } 208 | @media only screen and (max-width: 30em) { 209 | .header-text h1 { 210 | font-size: 7rem; 211 | line-height: 150%; } } 212 | .header-letter-1 { 213 | transition: all .1s; } 214 | .header-letter-1:hover { 215 | color: #5918df; 216 | line-height: 0; } 217 | @media only screen and (max-width: 30em) { 218 | .header-letter-1:hover { 219 | font-size: 6.5rem; } } 220 | .header-letter-2 { 221 | transition: all .1s; } 222 | .header-letter-2:hover { 223 | color: #c818df; 224 | line-height: 0; } 225 | @media only screen and (max-width: 30em) { 226 | .header-letter-2:hover { 227 | font-size: 6.5rem; } } 228 | .header-letter-3 { 229 | color: #5918df; 230 | transition: all .1s; } 231 | .header-letter-3:hover { 232 | color: #c818df; 233 | line-height: 0; } 234 | .header-letter-4 { 235 | transition: all .1s; 236 | color: #c818df; } 237 | .header-letter-4:hover { 238 | color: #5918df; 239 | line-height: 0; } 240 | .header-links { 241 | margin-top: 3rem; 242 | align-self: start; 243 | margin-left: 15%; } 244 | @media only screen and (max-width: 40em) { 245 | .header-links { 246 | margin-left: 7%; } } 247 | @media only screen and (max-width: 30em) { 248 | .header-links span { 249 | display: none; } } 250 | 251 | #output { 252 | color: #c818df; 253 | font-size: 3rem; } 254 | 255 | @keyframes letter-up { 256 | 0% { 257 | font-size: 10rem; } 258 | 40% { 259 | font-size: 9.5rem; 260 | color: #c818df; } 261 | 100% { 262 | font-size: 10rem; } } 263 | 264 | .works { 265 | position: absolute; 266 | bottom: 0; 267 | left: 0; 268 | width: 50%; 269 | height: 50%; 270 | display: flex; 271 | justify-content: space-between; } 272 | @media only screen and (max-width: 56.5em) { 273 | .works { 274 | position: relative; 275 | width: auto; 276 | min-height: fit-content; 277 | padding-top: 10rem; 278 | padding-bottom: 10rem; } } 279 | @media only screen and (max-width: 40em) { 280 | .works { 281 | padding-top: 5rem; } } 282 | .works-links { 283 | writing-mode: vertical-lr; 284 | margin: 4rem; 285 | padding-top: 8rem; 286 | margin-top: auto; 287 | margin-bottom: auto; 288 | height: max-content; } 289 | 290 | .works-box { 291 | flex: 1; 292 | padding: 3rem; 293 | margin: auto; 294 | display: flex; 295 | align-items: center; 296 | justify-content: center; } 297 | 298 | .works-wrapper { 299 | position: relative; 300 | width: 100%; 301 | display: flex; 302 | align-items: center; 303 | justify-content: space-around; 304 | flex-wrap: wrap; 305 | height: 67vh; 306 | overflow-y: scroll; } 307 | .works-wrapper::-webkit-scrollbar { 308 | width: 3px; } 309 | .works-wrapper::-webkit-scrollbar-track { 310 | background: transparent; 311 | border-radius: 1rem; } 312 | .works-wrapper::-webkit-scrollbar-thumb { 313 | background: transparent; 314 | border-radius: 1rem; } 315 | .works-wrapper:hover::-webkit-scrollbar-thumb { 316 | background: gainsboro; } 317 | 318 | .roll-up { 319 | overflow: hidden; 320 | position: relative; } 321 | .roll-up > span { 322 | font-size: 2.5rem; 323 | display: inline-block; 324 | position: relative; } 325 | .roll-up > span:nth-child(1) { 326 | transition-delay: 0.03s; } 327 | .roll-up > span:nth-child(2) { 328 | transition-delay: 0.06s; } 329 | .roll-up > span:nth-child(3) { 330 | transition-delay: 0.09s; } 331 | .roll-up > span:nth-child(4) { 332 | transition-delay: 0.12s; } 333 | .roll-up > span:nth-child(5) { 334 | transition-delay: 0.15s; } 335 | .roll-up > span:nth-child(6) { 336 | transition-delay: 0.18s; } 337 | .roll-up > span:nth-child(7) { 338 | transition-delay: 0.21s; } 339 | .roll-up > span > span { 340 | display: inline-block; 341 | transition: 0.6s cubic-bezier(0.7, 0.01, 0.37, 1); 342 | transition-delay: inherit; } 343 | .roll-up > span > span:nth-child(1) { 344 | position: relative; } 345 | .roll-up > span > span:nth-child(2) { 346 | position: absolute; 347 | transform: translateY(100%); 348 | left: 0; 349 | color: #7b45e9; } 350 | 351 | .text-reveal { 352 | position: relative; 353 | overflow: hidden; } 354 | .text-reveal span { 355 | display: block; 356 | transition: cubic-bezier(0.7, 0.01, 0.37, 1) 0.6s; } 357 | .text-reveal > span:nth-child(2) { 358 | position: absolute; 359 | top: 0; 360 | left: 0; 361 | color: #d5b2da; } 362 | .text-reveal > span:nth-child(2) > span { 363 | overflow: hidden; 364 | transform: translateX(-100%); } 365 | .text-reveal > span:nth-child(2) > span:nth-child(1) { 366 | transition-delay: 0.1s; } 367 | .text-reveal > span:nth-child(2) > span:nth-child(2) { 368 | transition-delay: 0.2s; } 369 | .text-reveal > span:nth-child(2) > span:nth-child(3) { 370 | transition-delay: 0.3s; } 371 | .text-reveal > span:nth-child(2) > span:nth-child(4) { 372 | transition-delay: 0.4s; } 373 | .text-reveal > span:nth-child(2) > span:nth-child(5) { 374 | transition-delay: 0.5s; } 375 | .text-reveal > span:nth-child(2) > span:nth-child(6) { 376 | transition-delay: 0.6s; } 377 | .text-reveal > span:nth-child(2) > span:nth-child(7) { 378 | transition-delay: 0.7s; } 379 | .text-reveal > span:nth-child(2) > span > span { 380 | transform: translateX(100%); 381 | transition-delay: inherit; } 382 | 383 | .card { 384 | text-decoration: none; 385 | color: inherit; 386 | display: inline-flex; 387 | align-items: center; 388 | justify-content: center; 389 | position: relative; 390 | max-width: 28%; 391 | width: 100%; 392 | height: 19rem; 393 | padding: 2rem; 394 | box-shadow: 0 2rem 3rem 1rem rgba(0, 0, 0, 0.37), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3); 395 | background-size: cover; 396 | background-position: top; 397 | cursor: pointer; } 398 | .card-1, .card-2 { 399 | margin: 8rem 8rem 0 0rem; } 400 | @media only screen and (max-width: 40em) { 401 | .card-1, .card-2 { 402 | margin: 5rem 4.5rem 0 0rem; } } 403 | .card-3, .card-4 { 404 | margin: 8rem 0 0 8rem; } 405 | @media only screen and (max-width: 40em) { 406 | .card-3, .card-4 { 407 | margin: 5rem 4rem 0 0rem; } } 408 | .card-single-left { 409 | margin-right: auto; 410 | margin-left: 18rem; } 411 | @media only screen and (max-width: 40em) { 412 | .card-single-left { 413 | margin: 5rem 4rem 0 0rem; } } 414 | @media only screen and (max-width: 40em) { 415 | .card { 416 | max-width: 60%; 417 | height: 10rem; } } 418 | @media only screen and (max-width: 30em) { 419 | .card { 420 | max-width: 100%; 421 | height: 10rem; } } 422 | .card:before { 423 | content: ''; 424 | display: block; 425 | height: 100%; 426 | width: 100%; 427 | position: absolute; 428 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); } 429 | .card .card__content { 430 | z-index: 1; } 431 | .card .card__content .card__content--description { 432 | position: absolute; 433 | bottom: 2rem; 434 | right: 0; 435 | margin-right: -8rem; 436 | text-align: left; 437 | max-width: 17.5rem; } 438 | .card:hover { 439 | box-shadow: 0 0rem 5rem rgba(255, 255, 255, 0.219); } 440 | .card:hover .roll-up > span > span:nth-child(1) { 441 | transform: translateY(-100%); } 442 | .card:hover .roll-up > span > span:nth-child(2) { 443 | transform: translateY(0); } 444 | .card:hover .text-reveal > span:nth-child(2) > span, 445 | .card:hover .text-reveal > span:nth-child(2) > span > span { 446 | transform: translateX(0); } 447 | 448 | .social { 449 | position: fixed; 450 | bottom: 4rem; 451 | left: 4rem; 452 | z-index: 999; } 453 | @media only screen and (max-width: 56.5em) { 454 | .social { 455 | bottom: 2rem; 456 | left: 2rem; } } 457 | .social-checkbox { 458 | display: none; } 459 | .social-btn { 460 | height: 7rem; 461 | width: 7rem; 462 | position: fixed; 463 | bottom: 4rem; 464 | left: 4rem; 465 | border-radius: 50%; 466 | z-index: 1000; 467 | cursor: pointer; } 468 | @media only screen and (max-width: 56.5em) { 469 | .social-btn { 470 | bottom: 2rem; 471 | left: 2rem; } } 472 | .social-link-linkedin { 473 | position: fixed; 474 | bottom: 4rem; 475 | left: 6.5rem; 476 | z-index: 999; 477 | transition: all .7s ease-out; } 478 | @media only screen and (max-width: 56.5em) { 479 | .social-link-linkedin { 480 | left: 4rem; 481 | bottom: 2rem; } } 482 | .social-link-github { 483 | position: fixed; 484 | bottom: 4rem; 485 | left: 6.5rem; 486 | z-index: 999; 487 | transition: all .7s .1s ease-out; } 488 | @media only screen and (max-width: 56.5em) { 489 | .social-link-github { 490 | left: 4rem; 491 | bottom: 2rem; } } 492 | .social-img { 493 | background-color: black; 494 | cursor: pointer; } 495 | .social-search { 496 | position: fixed; 497 | bottom: 4rem; 498 | left: 5rem; 499 | z-index: 999; 500 | height: 5rem; 501 | width: 5rem; 502 | transition: all .9s ease-in; 503 | animation: pulse 1.5s infinite ease-in-out; 504 | border-radius: 10px 20px 0 0; } 505 | @media only screen and (max-width: 56.5em) { 506 | .social-search { 507 | bottom: 2rem; 508 | left: 2.5rem; } } 509 | .social-linkedin { 510 | transition: all .7s ease-out; 511 | height: 1rem; 512 | width: 1rem; 513 | border-radius: 50%; } 514 | .social-github { 515 | transition: all .7s .1s ease-out; 516 | height: 1rem; 517 | width: 1rem; 518 | border-radius: 50%; } 519 | .social-checkbox:checked ~ .social-link-linkedin { 520 | transform: translateY(-10rem) rotate(720deg) scale(5); 521 | filter: brightness(1.5); } 522 | .social-checkbox:checked ~ .social-search { 523 | animation: unset; 524 | filter: brightness(2); 525 | transform: rotate(1440deg); } 526 | .social-checkbox:checked ~ .social-link-github { 527 | transform: translateY(-17rem) rotate(1080deg) scale(5); 528 | filter: brightness(1.5); } 529 | 530 | @keyframes pulse { 531 | 0% { 532 | transform: scale(1); 533 | filter: brightness(1); } 534 | 50% { 535 | transform: scale(1.05); 536 | filter: brightness(1.5); } 537 | 100% { 538 | transform: scale(1); 539 | filter: brightness(1); } } 540 | 541 | .contact { 542 | position: absolute; 543 | bottom: 0; 544 | right: 0; 545 | width: 50%; 546 | height: 50%; 547 | display: flex; 548 | align-items: center; } 549 | @media only screen and (max-width: 56.5em) { 550 | .contact { 551 | position: relative; 552 | width: auto; 553 | height: fit-content; } } 554 | 555 | .contact-wrapper { 556 | flex: auto; 557 | display: grid; 558 | grid-template-columns: auto auto auto auto; 559 | gap: 3rem; } 560 | @media only screen and (max-width: 56.5em) { 561 | .contact-wrapper { 562 | padding-bottom: 15rem; } } 563 | @media only screen and (max-width: 30em) { 564 | .contact-wrapper { 565 | padding-bottom: 5rem; 566 | display: flex; 567 | flex-direction: column; 568 | justify-content: center; } 569 | .contact-wrapper br { 570 | display: none; } } 571 | 572 | .contact-heading { 573 | grid-column: 4/5; 574 | font-size: 13rem; 575 | line-height: 100%; 576 | font-family: "Righteous", cursive; } 577 | .contact-heading-1 { 578 | color: #5918df; } 579 | .contact-heading-2 { 580 | color: #c818df; } 581 | @media only screen and (max-width: 40em) { 582 | .contact-heading { 583 | margin-left: -8%; 584 | font-size: 15rem; } } 585 | @media only screen and (max-width: 30em) { 586 | .contact-heading { 587 | margin-left: 5%; 588 | font-size: 10rem; 589 | padding-bottom: 1rem; } } 590 | 591 | .contact-form { 592 | grid-column: 2/-1; 593 | grid-row: 2/3; } 594 | @media only screen and (max-width: 30em) { 595 | .contact-form { 596 | margin-left: 3rem; 597 | margin-right: 5rem; } } 598 | 599 | .contact-lable { 600 | line-height: 150%; 601 | font-size: 2rem; } 602 | 603 | .contact-input { 604 | color: inherit; 605 | font-size: 1.8rem; 606 | background-color: transparent; 607 | border: none; 608 | width: 45%; 609 | padding: .5rem; 610 | border-bottom: 2px solid #5918df; } 611 | @media only screen and (max-width: 30em) { 612 | .contact-input { 613 | display: block; 614 | width: 100%; 615 | margin-bottom: 2.5rem; } } 616 | .contact-input:focus:invalid { 617 | border-bottom: 2px solid orangered; } 618 | .contact-input:focus { 619 | outline: none; 620 | box-shadow: 0 1rem 2rem rgba(253, 252, 252, 0.199); 621 | border-bottom: 2px solid #c818df; } 622 | 623 | .contact-submit { 624 | min-width: 10%; } 625 | @media only screen and (max-width: 30em) { 626 | .contact-submit { 627 | float: right; 628 | padding: 1rem 2rem; } } 629 | 630 | .contact-links { 631 | writing-mode: vertical-lr; 632 | margin-right: 4rem; 633 | padding-top: 8rem; 634 | height: max-content; } 635 | 636 | .resume { 637 | position: absolute; 638 | top: 0; 639 | right: 0; 640 | width: 50%; 641 | height: 50%; 642 | display: flex; 643 | justify-content: center; 644 | align-items: center; } 645 | @media only screen and (max-width: 56.5em) { 646 | .resume { 647 | position: relative; 648 | width: auto; 649 | min-height: 100vh; 650 | padding-top: 10rem; 651 | padding-bottom: 20rem; } } 652 | @media only screen and (max-width: 40em) { 653 | .resume { 654 | padding-top: 0; } } 655 | 656 | .code-links { 657 | writing-mode: vertical-lr; 658 | margin-right: 3rem; 659 | padding-top: 8rem; 660 | height: max-content; } 661 | 662 | .code-title { 663 | display: none; } 664 | @media only screen and (max-width: 56.5em) { 665 | .code-title { 666 | display: block; } } 667 | 668 | .code-wrapper { 669 | flex: 1; 670 | padding: 3rem; 671 | padding-right: 2rem; 672 | padding-left: 1rem; 673 | margin-top: 5%; } 674 | @media only screen and (max-width: 40em) { 675 | .code-wrapper { 676 | padding-right: 2rem; } } 677 | @media only screen and (max-width: 30em) { 678 | .code-wrapper { 679 | width: max-content; 680 | overflow: auto; 681 | white-space: nowrap; 682 | margin-right: 3rem; } } 683 | 684 | .code-line { 685 | padding-left: 4%; 686 | margin-left: 2%; 687 | font-family: "Roboto Mono", monospace; 688 | font-size: 1.5rem; } 689 | .code-line-0 { 690 | font-size: 2.5rem; } 691 | @media only screen and (max-width: 40em) { 692 | .code-line { 693 | margin-left: 1%; } } 694 | .code-line:hover { 695 | background-color: rgba(41, 41, 41, 0.637); } 696 | 697 | .code-animation { 698 | line-height: 0; 699 | font-size: 2.2rem; 700 | font-weight: bolder; 701 | animation: type 1s infinite; } 702 | 703 | .code-dot { 704 | color: #5f5e5e; } 705 | 706 | .code-grey { 707 | color: #979797; } 708 | 709 | .code-red { 710 | color: red; } 711 | 712 | .code-orange { 713 | color: orange; } 714 | 715 | .code-blue { 716 | color: blueviolet; } 717 | 718 | .code-yellow { 719 | color: yellow; } 720 | 721 | .code-green { 722 | color: green; } 723 | 724 | .code-greenyellow { 725 | color: yellowgreen; } 726 | 727 | @keyframes type { 728 | 0% { 729 | opacity: 0; } 730 | 50% { 731 | opacity: 1; } 732 | 100% { 733 | opacity: 0; } } 734 | 735 | .navigation-checkbox { 736 | display: none; } 737 | 738 | .navigation-btn { 739 | height: 7rem; 740 | width: 7rem; 741 | position: fixed; 742 | top: 3rem; 743 | right: 2rem; 744 | border-radius: 50%; 745 | z-index: 2000; 746 | cursor: pointer; } 747 | 748 | .navigation-background { 749 | z-index: 1000; 750 | height: 0; 751 | width: 100%; 752 | position: fixed; 753 | top: 0; 754 | left: 0; 755 | background-image: linear-gradient(to bottom, rgba(245, 222, 179, 0.842), transparent); 756 | transition: all 1s; } 757 | @media only screen and (max-width: 40em) { 758 | .navigation-background { 759 | background-image: linear-gradient(to bottom, rgba(245, 222, 179, 0.959), transparent); } } 760 | 761 | .navigation-nav { 762 | height: 0; 763 | min-width: 50%; 764 | position: fixed; 765 | top: 36%; 766 | left: 50%; 767 | transform: translate(-50%, -50%); 768 | z-index: 1500; 769 | opacity: 0; 770 | transform-origin: right; 771 | transition: all .5s; 772 | pointer-events: none; 773 | cursor: not-allowed; } 774 | @media only screen and (max-width: 40em) { 775 | .navigation-nav { 776 | top: 42%; } } 777 | 778 | .navigation-list { 779 | list-style: none; 780 | display: flex; 781 | justify-content: space-between; } 782 | 783 | .navigation-link:link, .navigation-link:visited { 784 | text-decoration: none; 785 | transition: all .5s; 786 | font-size: 2rem; 787 | color: black; 788 | font-weight: bolder; 789 | text-transform: uppercase; } 790 | .navigation-link:link span, .navigation-link:visited span { 791 | color: #5918df; } 792 | @media only screen and (max-width: 40em) { 793 | .navigation-link:link, .navigation-link:visited { 794 | font-size: 1.6rem; } } 795 | 796 | .navigation-link:hover, .navigation-link:active { 797 | color: #5918df; 798 | transform: translateY(-0.7rem) scale(1.15); } 799 | 800 | .navigation-checkbox:checked ~ .navigation-background { 801 | height: 33%; } 802 | @media only screen and (max-width: 40em) { 803 | .navigation-checkbox:checked ~ .navigation-background { 804 | height: 56%; } } 805 | 806 | .navigation-checkbox:checked ~ .navigation-nav { 807 | opacity: 1; 808 | height: 50vh; 809 | pointer-events: unset; 810 | cursor: auto; } 811 | 812 | .navigation-icon { 813 | position: relative; 814 | margin-top: 3.4rem; } 815 | .navigation-icon, .navigation-icon::before, .navigation-icon::after { 816 | height: 2px; 817 | background-color: blanchedalmond; 818 | display: inline-block; 819 | width: 4.5rem; } 820 | .navigation-icon::before, .navigation-icon::after { 821 | content: ""; 822 | position: absolute; 823 | right: 0; 824 | transition: all .3s; 825 | transform: translateX(0.5rem); } 826 | .navigation-icon::after { 827 | top: 1.3rem; } 828 | .navigation-icon::before { 829 | top: -1.3rem; } 830 | 831 | .navigation-btn:hover .navigation-icon { 832 | background-color: #5918df; } 833 | 834 | .navigation-btn:hover .navigation-icon::before { 835 | transform: translateX(0); 836 | background-color: #c818df; } 837 | 838 | .navigation-btn:hover .navigation-icon::after { 839 | transform: translateX(0); 840 | background-color: #c818df; } 841 | 842 | .navigation-checkbox:checked + .navigation-btn .navigation-icon { 843 | background-color: transparent; } 844 | 845 | .navigation-checkbox:checked + .navigation-btn .navigation-icon::before { 846 | transform: rotate(45deg); 847 | top: 0; } 848 | 849 | .navigation-checkbox:checked + .navigation-btn .navigation-icon::after { 850 | transform: rotate(-45deg); 851 | top: 0; } 852 | 853 | .move-in-right { 854 | opacity: 0; } 855 | 856 | .move-in-right.add-animation { 857 | animation: moveInRight 1s ease-out; 858 | opacity: 1; } 859 | 860 | @keyframes moveInRight { 861 | 0% { 862 | opacity: 0; 863 | transform: translateX(10rem); } 864 | 100% { 865 | opacity: 1; 866 | transform: translate(0); } } 867 | 868 | .move-in-up { 869 | opacity: 0; } 870 | 871 | .move-in-up.add-animation { 872 | animation: moveInUp 1s ease-out; 873 | opacity: 1; } 874 | 875 | @keyframes moveInUp { 876 | 0% { 877 | opacity: 1; 878 | transform: translateY(12rem); } 879 | 100% { 880 | opacity: 1; 881 | transform: translate(0); } } 882 | 883 | .move-in-down { 884 | opacity: 0; } 885 | 886 | .move-in-down.add-animation { 887 | animation: moveInDown 1s ease-out; 888 | opacity: 1; } 889 | 890 | @keyframes moveInDown { 891 | 0% { 892 | opacity: 1; 893 | transform: translateY(-12rem); } 894 | 100% { 895 | opacity: 1; 896 | transform: translate(0); } } 897 | 898 | .move-in-left { 899 | opacity: 0; } 900 | 901 | .move-in-left.add-animation { 902 | animation: moveInLeft 1s ease-out; 903 | opacity: 1; } 904 | 905 | @keyframes moveInLeft { 906 | 0% { 907 | opacity: 0; 908 | transform: translateX(-10rem); } 909 | 100% { 910 | opacity: 1; 911 | transform: translate(0); } } 912 | 913 | .fade-in { 914 | opacity: 0; } 915 | 916 | .fade-in.add-animation { 917 | transition: opacity 1.5s ease-out; 918 | opacity: 1; } 919 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Saba Mokhlesi | Portfolio | Front-end Developer 21 | 22 | 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 | 33 |
 
34 | 42 |
43 |
44 | 45 | 46 | 47 | 48 | 49 |
50 | 53 |
54 | 57 | 71 | 72 |
73 |
74 |
75 | 76 |
77 |
78 |

79 | MM 80 | yy 81 | MM 82 | oo 83 | nn 84 | ee 85 | yy 86 |

87 |

88 | 89 | A Web Application 90 | For Managing Your Budget 91 | 92 | 93 | A Web Application 94 | For Managing Your Budget 95 | 96 |

97 |
98 |
99 | 100 | 101 |
102 |
103 |

104 | BB 105 | uu 106 | dd 107 | dd 108 | yy 109 |

110 |

111 | 112 | A social media 113 | Inspired by Instagram 114 | 115 | 116 | A social media 117 | Inspired by Instagram 118 | 119 |

120 |
121 |
122 | 123 | 124 |
125 |
126 |

127 | CC 128 | aa 129 | ff 130 | ee 131 |

132 |

133 | 134 | A Website 135 | For A Fictional Cafe 136 | 137 | 138 | A Website 139 | For A Fictional Cafe 140 | 141 |

142 |
143 |
144 | 145 | 146 |
147 |
148 |

149 | EE 150 | -- 151 | ss 152 | hh 153 | oo 154 | pp 155 |

156 |

157 | 158 | An Imaginary 159 | Online Shop WebPage 160 | 161 | 162 | An Imaginary 163 | Online Shop WebPage 164 | 165 |

166 |
167 |
168 | 169 | 170 |
171 |
172 |

173 | FF 174 | oo 175 | oo 176 | dd 177 | ii 178 | ee 179 | ss 180 |

181 |

182 | 183 | A Landing Page 184 | For A Food StartUp 185 | 186 | 187 | A Landing Page 188 | For A Food StartUp 189 | 190 |

191 |
192 |
193 | 194 | 195 |
196 |
197 |

198 | CC 199 | oo 200 | mm 201 | pp 202 | aa 203 | nn 204 | yy 205 |

206 |

207 | 208 | A Demo For a 209 | Web Development Company 210 | 211 | 212 | A Demo For a 213 | Web Development Company 214 | 215 |

216 |
217 |
218 | 219 | 220 |
221 |
222 |

223 | CC 224 | aa 225 | kk 226 | ee 227 |

228 |

229 | 230 | A Cake Website 231 | To Design And Order Cakes 232 | 233 | 234 | A Cake Website 235 | To Design And Order Cakes 236 | 237 |

238 |
239 |
240 | 241 |
242 |
243 |
244 | ← Home 245 | ↖ Know Me Better 246 | ↑ Contact Me 247 |
248 |
249 |
250 |
251 |
252 |
253 | Resume/> 254 |
255 |
256 | 01 257 | class 258 | Saba Mokhlesi 259 | { 260 |
261 |
262 | 02 263 | .. 264 | // I Love Learning New Things! 265 |
266 |
267 | 03 268 | .. 269 | // And I Work Really Hard To Deal With Problems And Challenges In The Way. 270 |
271 |
272 | 04 273 | .. 274 | constructor 275 | ( 276 | name , dateOfBirthTimeStamps , email 277 | ) { 278 |
279 |
280 | 05 281 | .... 282 | this 283 | . 284 | name 285 | = 286 | "Saba Mokhlesi" 287 |
288 |
289 | 06 290 | .... 291 | this 292 | . 293 | dateOfBirthTimeStamps 294 | = 295 | 795756318 296 |
297 |
298 | 07 299 | .... 300 | this 301 | . 302 | email 303 | = 304 | "saba.mokhlesi@gmail.com" 305 |
306 |
307 | 08 308 | .. 309 | } 310 |
311 |
312 | 09 313 | .. 314 | workExperience 315 | ( ) { 316 |
317 |
318 | 10 319 | .... 320 | return 321 | [ 322 |
323 |
324 | 11 325 | ...... 326 | { 327 | "2018-now" 328 | : 329 | "Software Developer" 330 | }, 331 |
332 |
333 | 12 334 | ...... 335 | { 336 | "2017-2018" 337 | : 338 | "Project Manager Assistant" 339 | } 340 |
341 |
342 | 13 343 | .... 344 | ] 345 |
346 |
347 | 14 348 | .. 349 | } 350 |
351 | 352 |
353 | 15 354 | .. 355 | education 356 | ( ) { 357 |
358 |
359 | 16 360 | .... 361 | return 362 |
363 |
364 | 17 365 | ...... 366 | [ 367 | { 368 | "2019-now" 369 | : 370 | "Master of Engineering Innovation and Entrepreneurship - Ryerson University - Canada" 371 | }, 372 |
373 |
374 | 18 375 | ...... 376 | { 377 | "2013-2017" 378 | : 379 | "Architectural Engineering - Art University Of Isfahan - Iran" 380 | } ] 381 |
382 | 387 |
388 | 19 389 | .. 390 | } 391 |
392 |
393 | 20 394 | .. 395 | skills 396 | ( ) { 397 |
398 |
399 | 21 400 | .... 401 | return 402 | [ 403 | 'HTML', 'CSS', 'JavaScript', 'React.js', 'Redux.js', 'Node.js', 'Express.js', 'MongoDB', 404 | 405 |
406 |
407 | 22 408 | ........... 409 | 'SQL', 'MySQL', 'jQuery', 'BootStrap', 'SASS/SCSS', 'OOP', 'Git', 'PhotoShop', 'Ajax', 410 | | 411 | ] 412 |
413 |
414 | 23 415 | .. 416 | } 417 |
418 |
419 | 24 420 | } 421 |
422 |
423 |
424 |
425 | Home ↓ 426 | Selected Works ↘ 427 | Contact Me → 428 |
429 |
430 |
431 |
432 |

Say
  <Hi/>

433 |
434 |
435 | 436 |

437 | 438 |

439 | 440 |

441 | 442 |

443 | 444 |

445 | 446 |
447 |
448 |
449 |
450 | ↙ Home 451 | ← Know Me Better 452 | ↓ Selected Works 453 |
454 |
455 |
456 | 457 | 458 | 459 | --------------------------------------------------------------------------------