├── imgs ├── logo.png ├── mainImage.png ├── name.png ├── playButton.png └── rightSplash.png ├── index.html ├── script.js └── style.css /imgs/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asynchronousJavascriptor/modernAnimatedPortfolioWebsite/7c7c1ba523582e10db015b828172d0ba2f2761d7/imgs/logo.png -------------------------------------------------------------------------------- /imgs/mainImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asynchronousJavascriptor/modernAnimatedPortfolioWebsite/7c7c1ba523582e10db015b828172d0ba2f2761d7/imgs/mainImage.png -------------------------------------------------------------------------------- /imgs/name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asynchronousJavascriptor/modernAnimatedPortfolioWebsite/7c7c1ba523582e10db015b828172d0ba2f2761d7/imgs/name.png -------------------------------------------------------------------------------- /imgs/playButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asynchronousJavascriptor/modernAnimatedPortfolioWebsite/7c7c1ba523582e10db015b828172d0ba2f2761d7/imgs/playButton.png -------------------------------------------------------------------------------- /imgs/rightSplash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asynchronousJavascriptor/modernAnimatedPortfolioWebsite/7c7c1ba523582e10db015b828172d0ba2f2761d7/imgs/rightSplash.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Portfolio Website 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 |
17 |
18 |

UI/UX Designer

19 |
20 |
21 |

loves to help brands.

22 |
23 |
24 | 25 |
26 |
27 |
28 | 29 |
30 | 39 |
40 | 41 |
42 |
43 |

Hello, I am 👋

44 | 45 |
a designer from ukraine.
46 |
47 | 48 |
see my work profile
49 |
50 |
51 |

Contact me

52 |
Email : someone@email.com
53 |
Contact Number: +91-123456789
54 |
55 |
56 | 59 |
60 |
61 | 62 | 63 | 64 | 65 | 75 | 76 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var tl = gsap.timeline(); 2 | 3 | tl.from('.navitem', { 4 | stagger: .3, 5 | duration: 2, 6 | y: 20, 7 | delay: 7, 8 | ease: 'Expo.easeInOut', 9 | opacity: 0 10 | }) 11 | .from('#smline', { 12 | width: 0, 13 | duration: 1, 14 | ease: 'Expo.easeInOut', 15 | }, '-=2') 16 | .from('.leftitem', { 17 | stagger: .3, 18 | duration: 2, 19 | y: 20, 20 | ease: 'Expo.easeInOut', 21 | opacity: 0 22 | }, '-=2') 23 | .from('#right img', { 24 | duration: 2, 25 | scale: 1.05, 26 | ease: 'Expo.easeInOut', 27 | opacity: 0 28 | }, '-=2') -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: "Montserrat"; 5 | box-sizing: border-box; 6 | } 7 | 8 | html,body{ 9 | width: 100%; 10 | height: 100%; 11 | } 12 | 13 | body{ 14 | overflow: hidden; 15 | background-color: #ececec; 16 | } 17 | 18 | #loader{ 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | z-index: 9999; 26 | width: 100%; 27 | height: 100%; 28 | background-color: #fff; 29 | animation: anim2 1s cubic-bezier(0.19, 1, 0.22, 1) 7s both; 30 | } 31 | 32 | #wrapperload{ 33 | width: 500px; 34 | height: 100px; 35 | overflow: hidden; 36 | background-color: #fff; 37 | } 38 | 39 | #wrapperload .elem{ 40 | display: flex; 41 | justify-content: center; 42 | align-items: center; 43 | width: 100%; 44 | height: 100%; 45 | /* background-color: #efefef; */ 46 | } 47 | 48 | #wrapperload .elem img{ 49 | width: 40%; 50 | } 51 | 52 | #wrapperload .elem:nth-child(1){ 53 | animation: anim 2s cubic-bezier(0.19, 1, 0.22, 1) 1s both; 54 | } 55 | 56 | #wrapperload .elem:nth-child(2){ 57 | animation: anim 2s cubic-bezier(0.19, 1, 0.22, 1) 3s both; 58 | } 59 | 60 | #wrapperload .elem:nth-child(3){ 61 | animation: anim 2s cubic-bezier(0.19, 1, 0.22, 1) 5s both; 62 | } 63 | 64 | @keyframes anim{ 65 | to{ 66 | margin-top: -100px; 67 | } 68 | } 69 | 70 | @keyframes anim2{ 71 | to{ 72 | transform: translateY(-100%); 73 | } 74 | } 75 | 76 | #bg{ 77 | width: 100%; 78 | height: 100vh; 79 | transition: all cubic-bezier(0.19, 1, 0.22, 1) .5s; 80 | background-color: #fff; 81 | } 82 | 83 | nav{ 84 | display: flex; 85 | justify-content: space-between; 86 | align-items: center; 87 | width: 90%; 88 | height: 80px; 89 | /* background-color: #dadada; */ 90 | margin: 0 auto; 91 | } 92 | 93 | nav img{ 94 | width: 110px; 95 | } 96 | 97 | nav #links{ 98 | display: flex; 99 | align-items: center; 100 | } 101 | 102 | nav #links a{ 103 | margin-left: 50px; 104 | text-decoration: none; 105 | text-transform: uppercase; 106 | font-size: 11px; 107 | color: black; 108 | font-weight: 700; 109 | opacity: .6; 110 | letter-spacing: 4px; 111 | } 112 | 113 | nav #links i{ 114 | margin-left: 50px; 115 | } 116 | 117 | nav #links a:nth-child(2){ 118 | opacity: .2; 119 | } 120 | 121 | #sections{ 122 | display: flex; 123 | width: 100%; 124 | height: calc(100% - 80px); 125 | } 126 | 127 | #left{ 128 | width: 50%; 129 | height: 100%; 130 | padding: 100px; 131 | } 132 | 133 | #left #smline{ 134 | width: 90px; 135 | height: 3px; 136 | margin-top: 100px; 137 | background-color: black; 138 | } 139 | 140 | #left h4{ 141 | font-size: 50px; 142 | margin-top: 10px; 143 | font-family: "Gilroy ☞"; 144 | } 145 | 146 | #left img{ 147 | width: 650px; 148 | margin-top: 30px; 149 | } 150 | 151 | #left>h5{ 152 | font-size: 22px; 153 | text-transform: uppercase; 154 | letter-spacing: 12px; 155 | margin-top: 20px; 156 | font-weight: 700; 157 | color: #d1d1d1; 158 | } 159 | 160 | #left>h5 span{ 161 | color: rgb(82, 184, 218); 162 | } 163 | 164 | #playbtn img{ 165 | width: 80px; 166 | } 167 | 168 | #playbtn{ 169 | display: flex; 170 | align-items: center; 171 | justify-content: flex-start; 172 | } 173 | 174 | #playbtn h5{ 175 | margin-top: 20px; 176 | letter-spacing: 10px; 177 | opacity: .9; 178 | margin-left: 20px; 179 | text-transform: uppercase; 180 | } 181 | 182 | .bold{ 183 | font-weight: 800; 184 | } 185 | 186 | #contact{ 187 | margin-top: 200px; 188 | } 189 | 190 | #contact h3{ 191 | text-transform: uppercase; 192 | letter-spacing: 15px; 193 | font-size: 12px; 194 | opacity: .8; 195 | font-weight: 800; 196 | margin-bottom: 20px; 197 | } 198 | 199 | #contact h6{ 200 | font-size: 12px; 201 | margin-top: 5px; 202 | } 203 | 204 | #contact h6 span{ 205 | color: #04C2C7; 206 | } 207 | 208 | #right{ 209 | width: 50%; 210 | height: 100%; 211 | } 212 | 213 | #right img{ 214 | width: 100%; 215 | } 216 | 217 | #splash{ 218 | position: absolute; 219 | left: -60px; 220 | top: 70%; 221 | width: 150px; 222 | } --------------------------------------------------------------------------------