├── README.md ├── app.js ├── game.html ├── img ├── hero1.png ├── homescreen.png └── port1.jpg ├── index.html ├── script.js ├── style1.css └── styles ├── _media.scss ├── styles.css ├── styles.css.map └── styles.scss /README.md: -------------------------------------------------------------------------------- 1 | # Responsive Portfolio Website 2 | 3 | Website Using HTML, CSS, SCSS and JavaScript, with a wonderful user interface. 4 | 5 | ## Website contains: 6 | 7 | - Home 8 | - About Me 9 | - Skills 10 | - Qualification 11 | - Portfolio 12 | - Game (Working on it) 13 | - Contact 14 | 15 |
16 | ➥ Live Demo 17 | 18 |

If you found the code useful, please feel free to fork it and modify it as you see fit. 19 |

20 | 21 | 22 | 23 |

© Created by Praveen Mishra{ 19 | const id = e.target.dataset.id; 20 | if(id){ 21 | //remove selected from the other btns 22 | sectBtns.forEach((btn) =>{ 23 | btn.classList.remove('active') 24 | }) 25 | e.target.classList.add('active') 26 | 27 | //hide other section 28 | sections.forEach((section)=>{ 29 | section.classList.remove('active') 30 | }) 31 | 32 | const element = document.getElementById(id); 33 | element.classList.add('active'); 34 | } 35 | }) 36 | 37 | //Toogle theme 38 | 39 | const themeBtn = document.querySelector('.theme-btn'); 40 | themeBtn.addEventListener('click', () => { 41 | let element = document.body; 42 | element.classList.toggle('light-mode'); 43 | }) 44 | 45 | } 46 | 47 | PageTransition(); 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /game.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Snakes & Ladders 6 | 7 | 8 | 9 | 10 | 11 |

12 | 13 |
14 | 15 |
16 |

Player:

17 |

 

18 |
19 |
20 | 21 |
22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /img/hero1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mishraji566/Portfolio/026b9b5fa3f329836edf83bed91a2a161f0c5dcf/img/hero1.png -------------------------------------------------------------------------------- /img/homescreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mishraji566/Portfolio/026b9b5fa3f329836edf83bed91a2a161f0c5dcf/img/homescreen.png -------------------------------------------------------------------------------- /img/port1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mishraji566/Portfolio/026b9b5fa3f329836edf83bed91a2a161f0c5dcf/img/port1.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Portfolio 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 | 21 |
22 |
23 |
24 |

25 | Hi, I,m Praveen Mishra 26 | A student 27 |

28 |

29 | I,m a student of Master,s in Computer Application, I love to learn. 30 |

31 |
32 | 33 | Download CV 34 | 35 | 36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |

About memy stats

44 |
45 |
46 |
47 |

Information About me

48 |

49 | My name is Praveen Mishra, I belong to Bareilly ,Uttar Pradesh. I,m a student of Master,s in Computer Application from RBMI, 50 | I have completed my Bachloer's in Computer Application from Bareilly Collage, BAreilly. 51 |

52 |
53 | 54 | Download CV 55 | 56 | 57 |
58 |
59 |
60 |
61 |
62 |

2+

63 |

Projects
completed

64 |
65 |
66 |
67 |
68 |

2+

69 |

Years of
Experince

70 |
71 |
72 |
73 |
74 |

2023

75 |

Pursing master's
in computer Apllication

76 |
77 |
78 |
79 |
80 |

2021

81 |

Bachloer's
in computer Application

82 |
83 |
84 |
85 |
86 |
87 |

My skills

88 |
89 |
90 |
C Language
91 |
92 |

60%

93 |
94 | 95 |
96 |
97 |
98 |
99 |
C++
100 |
101 |

65%

102 |
103 | 104 |
105 |
106 |
107 |
108 |
CORE JAVA
109 |
110 |

68%

111 |
112 | 113 |
114 |
115 |
116 |
117 |
OOP's
118 |
119 |

75%

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

My Timeline

128 |
129 |
130 |
131 | 132 |
133 |

2019 - 2022

134 |
Technical Support- Toshani multi-brand trading Pvt. Ltd.
135 |

* Provide Supoort for accounting software and tools
* Educated employees on new feature capabilities

136 |
137 |
138 |
139 | 140 |
141 |

2021 - 2023

142 |
Pursuing Master's - in Computer Application
143 |

Rakshpal Bahdur Institute of Management,

Bareilly

144 |
145 |
146 |
147 | 148 |
149 |

2019 - 2022

150 |
Technical Support- Toshani multi-brand trading Pvt. Ltd.
151 |

* Provide Supoort for accounting software and tools
* Educated employees on new feature capabilities

152 |
153 |
154 |
155 | 156 |
157 |

2017 - 2021

158 |
Bachloer's- in Computer Application
159 |

Bareilly collage,
Bareilly

160 |
161 |
162 |
163 |
164 |
165 |

My PortfolioMy work

166 |
167 |

168 | Here is some of my work, i have done in various projects. 169 |

170 |
171 |
172 |
173 | 174 |
175 |
176 |

Project source

177 |
178 | 179 | 180 | 181 |
182 |
183 |
184 |
185 |
186 | 187 |
188 |
189 |

Project source

190 |
191 | 192 | 193 | 194 |
195 |
196 |
197 |
198 |
199 | 200 |
201 |
202 |

Project source

203 |
204 | 205 | 206 | 207 |
208 |
209 |
210 |
211 |
212 | 213 |
214 |
215 |

Project source

216 |
217 | 218 | 219 | 220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |

Get in TouchContact

230 |
231 |
232 |
233 |

Contact me Here

234 |

235 | I am available for freelance work. If you have any project that you want to get started, 236 | think you need my help with something or just fancy saying hey, then get in touch. 237 |

238 |
239 |
240 |
241 | 242 | Location 243 |
244 |

: Bareilly, Uttar Pradesh

245 |
246 |
247 |
248 | 249 | Email 250 |
251 |

252 | : mishrapraveen561@gmail.com 253 |

254 |
255 |
256 |
257 | 258 | Mobile 259 |
260 |

: 9084084222

261 |
262 |
263 |
264 | 265 |

Languages

266 |
267 | : English, Hindi 268 |
269 |
270 |
271 |
272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 |
286 |
287 |
288 |
289 |
290 |
291 | 292 | 293 |
294 |
295 | 296 |
297 |
298 | 299 |
300 |
301 | 302 | Download 303 | 304 | 305 |
306 |
307 |
308 |
309 |
310 |
311 | 312 | 313 |
314 | 315 |
316 |
317 | 318 |
319 |
320 | 321 |
322 |
323 | 324 |
325 |
326 | 327 |
328 |
329 | 330 |
331 |
332 |
333 | 334 |
335 | 336 | 337 | 338 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let canvas = document.querySelector('canvas'); 2 | let wrapper = document.querySelector('.wrapper'); 3 | let resetGameBtn = document.querySelector('#reset'); 4 | let diceDisplay = document.querySelector('#diceThrow'); 5 | let playerDisplay = document.querySelector('.playerName'); 6 | let message = document.querySelector('.message'); 7 | let ctx = canvas.getContext('2d'); 8 | let height = 500; 9 | let width = 500; 10 | let gridSize = 50; 11 | let gridMid = 25; 12 | let walking, walkSpeed = 450; 13 | let locked = false; 14 | let slideSpeed = .5; 15 | let rolled = '', rolling, rollCount, rollMax, rollSpeed=85; 16 | 17 | let player1 = {current:0, target:0, x:0, y:0, colour:'#f36d', id:'You'}; 18 | let player2 = {current:0, target:0, x:0, y:0, colour:'#8a2d', id:'AutoBot'}; 19 | let activePlayer = player1; 20 | 21 | const obstacles = [ 22 | {type:'snake', start:97, end:78}, 23 | {type:'snake', start:95, end:56}, 24 | {type:'snake', start:88, end:24}, 25 | {type:'snake', start:62, end:18}, 26 | {type:'snake', start:48, end:26}, 27 | {type:'snake', start:36, end:6}, 28 | {type:'snake', start:32, end:10}, 29 | {type:'ladder', start:1, end:38}, 30 | {type:'ladder', start:4, end:14}, 31 | {type:'ladder', start:8, end:30}, 32 | {type:'ladder', start:21, end:42}, 33 | {type:'ladder', start:28, end:76}, 34 | {type:'ladder', start:50, end:67}, 35 | {type:'ladder', start:71, end:92}, 36 | {type:'ladder', start:80, end:99} 37 | ]; 38 | 39 | canvas.width = width; 40 | canvas.height = height; 41 | wrapper.style.width = `${width}px`; 42 | ctx.strokeStyle = '#555'; 43 | ctx.lineWidth = 2; 44 | 45 | const setLocked = (tf) => { 46 | locked = tf; 47 | } 48 | 49 | const boustrophedonWalk = (cols, rows) => { 50 | let temp = []; 51 | for(let row=0; row { 53 | return {id:col+row*cols, y:height - gridSize - row*gridSize, x:col*gridSize}; 54 | }); 55 | t = row % 2 ? t.reverse() : t; 56 | temp = [...temp, ...t]; 57 | } 58 | return temp; 59 | } 60 | 61 | const drawPlayers = () => { 62 | ctx.clearRect(0, 0, width, height); 63 | if(player1.current > 0) { 64 | ctx.fillStyle = player1.colour; 65 | ctx.beginPath(); 66 | ctx.arc(player1.x+gridMid, player1.y+gridMid, 16, 0, 2 * Math.PI); 67 | ctx.fill(); 68 | ctx.stroke(); 69 | } 70 | if(player2.current > 0) { 71 | ctx.fillStyle = player2.colour; 72 | ctx.beginPath(); 73 | if(player2.current === player1.current){ 74 | ctx.arc(player2.x+gridMid, player2.y+gridMid, 16, 45, Math.PI + 45); 75 | } 76 | else { 77 | ctx.arc(player2.x+gridMid, player2.y+gridMid, 16, 0, 2 * Math.PI); 78 | } 79 | ctx.fill(); 80 | ctx.stroke(); 81 | } 82 | } 83 | 84 | const walk = () => { 85 | let activeCounter = activePlayer.current++; 86 | let sliding = false; 87 | activePlayer.x = walkSequence[activeCounter].x; 88 | activePlayer.y = walkSequence[activeCounter].y; 89 | drawPlayers(); 90 | 91 | if(activeCounter === 99){ 92 | clearInterval(walking); 93 | showWinner(); 94 | return; 95 | } 96 | 97 | if(activePlayer.current >= activePlayer.target){ 98 | clearInterval(walking); 99 | 100 | // check obstacles 101 | for(let i=0; i < obstacles.length; i++){ 102 | if(obstacles[i].start === activePlayer.target){ 103 | let endSquare = obstacles[i].end; 104 | activePlayer.target = obstacles[i].end; 105 | sliding = true; 106 | slide(activePlayer, walkSequence[endSquare-1].x, walkSequence[endSquare-1].y, slideSpeed); 107 | break; 108 | } 109 | } 110 | if(!sliding){ 111 | resetTurn(); 112 | togglePlayer(); 113 | } 114 | } 115 | } 116 | 117 | const showWinner = () => { 118 | setPlayerID('is the winner!'); 119 | resetGameBtn.classList.remove('hidden'); 120 | } 121 | 122 | const setPlayerID = (msg='') => { 123 | playerDisplay.innerHTML = `${activePlayer.id} ${msg}`; 124 | message.innerHTML = "Click dice to play"; 125 | document.body.classList = `player${activePlayer.id}`; 126 | } 127 | 128 | const resetTurn = () => { 129 | setLocked(false); 130 | } 131 | 132 | const slide = (element, dX, dY, dur=1) => { 133 | gsap.to(element, {x:dX, y:dY, duration:dur, delay: 0.25, onUpdate:doOnUpdate, onComplete:doOnComplete}); 134 | } 135 | const doOnUpdate = () => { 136 | drawPlayers(); 137 | } 138 | const doOnComplete = () => { 139 | activePlayer.current = activePlayer.target; 140 | drawPlayers(); 141 | resetTurn(); 142 | togglePlayer(); 143 | } 144 | 145 | const togglePlayer = () => { 146 | activePlayer = activePlayer.id === player1.id ? player2 : player1; 147 | setPlayerID(); 148 | 149 | if(activePlayer === player2){ 150 | rollDice(); 151 | } 152 | } 153 | 154 | const rollDice = (evt) => { 155 | if(evt) evt.preventDefault(); 156 | if (locked) return; 157 | setLocked(true); 158 | 159 | message.innerHTML = activePlayer === player1 ? "Rolling..." : 'Auto rolling...'; 160 | 161 | rollCount = 0; 162 | rollMax = Math.random()*10 + 15; 163 | rolling = setInterval(doRoll, rollSpeed); 164 | } 165 | 166 | const doRoll = () => { 167 | rolled = Math.floor(Math.random() * 6 + 1); 168 | diceRollDisplay(rolled); 169 | if(rollCount++ >= rollMax){ 170 | clearInterval(rolling); 171 | message.innerHTML = "Moving..."; 172 | activePlayer.target += rolled; 173 | walking = setInterval(walk, walkSpeed); 174 | } 175 | } 176 | 177 | const diceRollDisplay = (spots) => { 178 | diceDisplay.classList = `s${spots}` 179 | } 180 | 181 | const resetGame = () => { 182 | player1.current = 0; 183 | player1.target = 0; 184 | player1.x = 0; 185 | player1.y = 0; 186 | player2.current = 0; 187 | player2.target = 0; 188 | player2.x = 0; 189 | player2.y = 0; 190 | activePlayer = player1; 191 | locked = false; 192 | diceRollDisplay(''); 193 | setPlayerID(); 194 | 195 | drawPlayers(); 196 | 197 | resetGameBtn.classList.add('hidden'); 198 | } 199 | 200 | diceDisplay.addEventListener('click', rollDice); 201 | resetGameBtn.addEventListener('click', resetGame); 202 | 203 | let walkSequence = boustrophedonWalk(10, 10); 204 | setPlayerID(); 205 | 206 | // Test method to show obstacles 207 | const drawObstacles = () => { 208 | ctx.clearRect(0, 0, width, height); 209 | for(let i=0; i < obstacles.length; i++){ 210 | let ob = obstacles[i]; 211 | ctx.strokeStyle = ob.type === 'snake' ? '#d00' : '#0d0'; 212 | ctx.beginPath(); 213 | ctx.moveTo(walkSequence[ob.start-1].x+gridSize*.5, walkSequence[ob.start-1].y+gridSize*.5); 214 | ctx.lineTo(walkSequence[ob.end-1].x+gridSize*.5, walkSequence[ob.end-1].y+gridSize*.5); 215 | ctx.stroke(); 216 | ctx.closePath(); 217 | } 218 | } 219 | // drawObstacles(); -------------------------------------------------------------------------------- /style1.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-color: #eed; 3 | font-family: sans-serif; 4 | font-size: 64.5%; 5 | } 6 | 7 | .wrapper { 8 | font-size: 1.5rem; 9 | height: 500px; 10 | margin: 0 auto; 11 | width: 500px; 12 | } 13 | 14 | canvas { 15 | background-image: url("https://assets.codepen.io/215128/snakesAndLaddersBoard.jpg"); 16 | border: 5px solid grey; 17 | border-radius: 7px; 18 | height: 500px; 19 | width: 500px; 20 | } 21 | 22 | .playerYou .wrapper { 23 | color: #8a0022; 24 | } 25 | .playerYou canvas { 26 | border-color: #f36; 27 | } 28 | .playerYou #diceThrow { 29 | background-color: #f361; 30 | background-blend-mode: multiply; 31 | border-color: #d60036; 32 | } 33 | 34 | .playerAutoBot .wrapper { 35 | color: #3a480e; 36 | } 37 | .playerAutoBot canvas { 38 | border-color: #8a2; 39 | } 40 | .playerAutoBot #diceThrow { 41 | background-color: #8a22; 42 | background-blend-mode: multiply; 43 | border-color: #556a15; 44 | } 45 | 46 | #diceThrow { 47 | background-image: url("https://assets.codepen.io/215128/diceSpots.png"); 48 | background-size: 50px; 49 | border: 2px solid black; 50 | border-radius: 7px; 51 | cursor: pointer; 52 | display: inline-block; 53 | height: 50px; 54 | width: 50px; 55 | } 56 | #diceThrow.s6 { 57 | background-position: 0 0; 58 | } 59 | #diceThrow.s5 { 60 | background-position: 0 -50px; 61 | } 62 | #diceThrow.s4 { 63 | background-position: 0 -100px; 64 | } 65 | #diceThrow.s3 { 66 | background-position: 0 -150px; 67 | } 68 | #diceThrow.s2 { 69 | background-position: 0 -200px; 70 | } 71 | #diceThrow.s1 { 72 | background-position: 0 -250px; 73 | } 74 | 75 | .buttonWrapper { 76 | display: flex; 77 | margin: 15px 15px; 78 | } 79 | 80 | button { 81 | border-radius: 7px; 82 | margin-left: 100px; 83 | padding: 10px 30px; 84 | } 85 | 86 | .hidden { 87 | display: none; 88 | } 89 | 90 | h1 { 91 | margin-bottom: 5px; 92 | } 93 | 94 | h2 { 95 | margin-top: 0; 96 | } -------------------------------------------------------------------------------- /styles/_media.scss: -------------------------------------------------------------------------------- 1 | 2 | @media screen and (max-width: 600px){ 3 | 4 | 5 | .about-container{ 6 | grid-template-columns: 1fr; 7 | .right-about{ 8 | grid-template-columns: 1fr; 9 | padding-top: 2.5rem; 10 | } 11 | .left-about{ 12 | padding-right: 0; 13 | p{ 14 | padding-left: 0; 15 | } 16 | } 17 | } 18 | 19 | .timeline{ 20 | grid-template-columns: 1fr; 21 | padding-bottom: 6rem; 22 | } 23 | 24 | 25 | 26 | .portfolios{ 27 | grid-template-columns: 1fr; 28 | padding-bottom: 6rem; 29 | } 30 | 31 | 32 | 33 | .section{ 34 | padding: 2rem 2.5rem; 35 | } 36 | 37 | .main-title{ 38 | h2{ 39 | font-size: 2rem; 40 | span{ 41 | font-size: 2.5rem; 42 | } 43 | .bg-text{ 44 | font-size: 3.5rem; 45 | } 46 | } 47 | } 48 | 49 | } 50 | 51 | 52 | 53 | @media screen and (max-width: 1432px) { 54 | header{ 55 | padding: 0 !important; 56 | } 57 | .section{ 58 | padding: 7rem 11rem; 59 | } 60 | 61 | .contact-content-con{ 62 | flex-direction: column; 63 | .right-contact{ 64 | margin-left: 0; 65 | margin-top: 2.5rem; 66 | } 67 | } 68 | 69 | .contact-content-con .right-contact .i-c-2{ 70 | flex-direction: column; 71 | } 72 | 73 | .contact-content-con .right-contact .i-c-2 :last-child{ 74 | margin-left: 0; 75 | margin-top: 1.5rem; 76 | } 77 | 78 | 79 | } 80 | 81 | @media screen and (max-width: 1070px) { 82 | .about-container{ 83 | grid-template-columns: 1fr; 84 | .right-about{ 85 | padding-top: 2.5rem; 86 | } 87 | } 88 | 89 | .portfolios{ 90 | grid-template-columns: 1fr 1fr; 91 | } 92 | .main-title{ 93 | h2{ 94 | font-size: 4rem; 95 | span{ 96 | font-size: 4rem; 97 | } 98 | .bg-text{ 99 | font-size: 4.5rem; 100 | } 101 | } 102 | } 103 | } 104 | 105 | @media screen and (max-width: 970px) { 106 | .section{ 107 | padding: 7rem 6rem; 108 | } 109 | 110 | header{ 111 | padding: 0; 112 | } 113 | header .right-header{ 114 | padding: 0 !important; 115 | } 116 | 117 | .theme-btn{ 118 | width: 50px; 119 | height: 50px; 120 | } 121 | 122 | .header-content{ 123 | grid-template-columns: 1fr; 124 | padding: 6rem; 125 | } 126 | 127 | .left-header{ 128 | .h-shape{ 129 | display: none; 130 | } 131 | } 132 | 133 | .right-header{ 134 | grid-row: 1; 135 | width: 90%; 136 | margin: 0 auto; 137 | .name{ 138 | font-size: 2.5rem !important; 139 | } 140 | } 141 | 142 | .header-content .left-header .image{ 143 | margin: 0 auto; 144 | width: 90%; 145 | } 146 | 147 | .controlls{ 148 | top: auto; 149 | bottom: 0; 150 | flex-direction: row; 151 | justify-content: center; 152 | left: 50%; 153 | transform: translateX(-50%); 154 | width: 100%; 155 | background-color: var(--color-grey-5); 156 | .control{ 157 | margin: .3rem 1rem; 158 | } 159 | } 160 | } 161 | 162 | @media screen and (max-width: 710px) { 163 | .section{ 164 | padding: 7rem 3rem; 165 | } 166 | 167 | .about-stats{ 168 | .progress-bars{ 169 | grid-template-columns: 1fr; 170 | } 171 | } 172 | 173 | .main-title{ 174 | h2{ 175 | font-size: 3rem; 176 | span{ 177 | font-size: 3rem; 178 | } 179 | .bg-text{ 180 | font-size: 4rem; 181 | } 182 | } 183 | } 184 | } -------------------------------------------------------------------------------- /styles/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | list-style: none; 6 | } 7 | 8 | :root { 9 | --color-primary: #191d2b; 10 | --color-secondary: #27AE60; 11 | --color-white: #FFFFFF; 12 | --color-black: #000; 13 | --color-grey0: #f8f8f8; 14 | --color-grey-1: #dbe1e8; 15 | --color-grey-2: #b2becd; 16 | --color-grey-3: #6c7983; 17 | --color-grey-4: #545e56; 18 | --color-grey-5: #2a2e35; 19 | --color-grey-6: #12181b; 20 | --br-sm-2: 14px; 21 | --box-shadow-1: 0 3px 15px rgba(0, 0, 0, 0.3); 22 | } 23 | 24 | .light-mode { 25 | --color-primary: #FEFBF6; 26 | --color-secondary: #A6D1E6; 27 | --color-white: #454e56; 28 | --color-black: #000; 29 | --color-grey0: #f8f8f8; 30 | --color-grey-1: #6c7983; 31 | --color-grey-2: #6c7983; 32 | --color-grey-3: #6c7983; 33 | --color-grey-4: #454e56; 34 | --color-grey-5: #f8f8f8; 35 | --color-grey-6: #12181b; 36 | } 37 | 38 | body { 39 | background-color: var(--color-primary); 40 | font-family: "Poppins", sans-serif; 41 | font-size: 1.1rem; 42 | color: var(--color-white); 43 | transition: all 0.4s ease-in-out; 44 | } 45 | 46 | a { 47 | display: inline-block; 48 | text-decoration: none; 49 | color: inherit; 50 | font-family: inherit; 51 | } 52 | 53 | header { 54 | min-height: 100vh; 55 | font-family: "Poppins", sans-serif; 56 | color: var(--color-white); 57 | overflow: hidden; 58 | } 59 | 60 | section { 61 | min-height: 100vh; 62 | width: 100%; 63 | position: absolute; 64 | left: 0; 65 | top: 0; 66 | padding: 3rem 18rem; 67 | } 68 | 69 | .section { 70 | transform: translateY(-100%) scale(0); 71 | transition: all 0.4s ease-in-out; 72 | background-color: var(--color-primary); 73 | } 74 | 75 | .sec1 { 76 | display: none; 77 | transform: translateY(0) scale(1); 78 | } 79 | 80 | .sec2 { 81 | display: none; 82 | transform: translateY(0) scale(1); 83 | } 84 | 85 | .sec3 { 86 | display: none; 87 | transform: translateY(0) scale(1); 88 | } 89 | 90 | .sec4 { 91 | display: none; 92 | transform: translateY(0) scale(1); 93 | } 94 | 95 | .sec5 { 96 | display: none; 97 | transform: translateY(0) scale(1); 98 | } 99 | 100 | .active { 101 | display: block; 102 | -webkit-animation: scaleAnim 1s ease-in-out; 103 | animation: scaleAnim 1s ease-in-out; 104 | } 105 | @-webkit-keyframes scaleAnim { 106 | 0% { 107 | transform: translateY(-100%) scaleY(0); 108 | } 109 | 100% { 110 | transform: translateY(0) scaleY(1); 111 | } 112 | } 113 | @keyframes scaleAnim { 114 | 0% { 115 | transform: translateY(-100%) scaleY(0); 116 | } 117 | 100% { 118 | transform: translateY(0) scaleY(1); 119 | } 120 | } 121 | 122 | .controlls { 123 | position: fixed; 124 | z-index: 10; 125 | top: 50%; 126 | right: 3%; 127 | display: flex; 128 | flex-direction: column; 129 | align-items: center; 130 | justify-content: center; 131 | transform: translateY(-50%); 132 | } 133 | .controlls .active-btn { 134 | background-color: var(--color-secondary) !important; 135 | transition: all 0.4s ease-in-out; 136 | } 137 | .controlls .active-btn i { 138 | color: var(--color-white) !important; 139 | } 140 | .controlls .control { 141 | padding: 1rem; 142 | cursor: pointer; 143 | background-color: var(--color-grey-4); 144 | width: 55px; 145 | height: 55px; 146 | border-radius: 50%; 147 | display: flex; 148 | justify-content: center; 149 | align-items: center; 150 | margin: 0.7rem 0; 151 | box-shadow: var(--box-shadow-1); 152 | } 153 | .controlls .control i { 154 | font-size: 1.2rem; 155 | color: var(--color-grey-2); 156 | pointer-events: none; 157 | } 158 | 159 | .theme-btn { 160 | top: 5%; 161 | right: 3%; 162 | width: 70px; 163 | height: 70px; 164 | border-radius: 50%; 165 | background-color: var(--color-grey-4); 166 | cursor: pointer; 167 | position: fixed; 168 | display: flex; 169 | justify-content: center; 170 | align-items: center; 171 | box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3); 172 | transition: all 0.1s ease-in-out; 173 | } 174 | .theme-btn:active { 175 | transform: translateY(-3px); 176 | } 177 | .theme-btn i { 178 | font-size: 1.4rem; 179 | color: var(--color-grey-2); 180 | pointer-events: none; 181 | } 182 | 183 | /*Header-content*/ 184 | .header-content { 185 | display: grid; 186 | grid-template-columns: repeat(2, 1fr); 187 | min-height: 100vh; 188 | } 189 | .header-content .left-header { 190 | display: flex; 191 | align-items: center; 192 | position: relative; 193 | } 194 | .header-content .left-header .h-shape { 195 | transition: all 0.4s ease-in-out; 196 | width: 65%; 197 | height: 100%; 198 | background-color: var(--color-secondary); 199 | position: absolute; 200 | left: 0; 201 | top: 0; 202 | z-index: -1; 203 | -webkit-clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); 204 | clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); 205 | } 206 | .header-content .left-header .image { 207 | border-radius: var(--br-sm-2); 208 | height: 90%; 209 | width: 68%; 210 | margin-left: 4rem; 211 | background-color: var(--color-black); 212 | transition: all 0.4s ease-in-out; 213 | } 214 | .header-content .left-header .image img { 215 | width: 100%; 216 | height: 100%; 217 | -o-object-fit: cover; 218 | object-fit: cover; 219 | transition: all 0.4s ease-in-out; 220 | filter: grayscale(100%); 221 | } 222 | .header-content .left-header .image img:hover { 223 | filter: grayscale(0); 224 | } 225 | .header-content .right-header { 226 | display: flex; 227 | flex-direction: column; 228 | justify-content: center; 229 | padding-right: 18rem; 230 | } 231 | .header-content .right-header .name { 232 | font-size: 3rem; 233 | } 234 | .header-content .right-header .name span { 235 | color: var(--color-secondary); 236 | } 237 | .header-content .right-header p { 238 | margin: 1.5rem 0; 239 | line-height: 2rem; 240 | } 241 | 242 | /*About*/ 243 | .about-container { 244 | display: grid; 245 | grid-template-columns: repeat(2, 1fr); 246 | padding-top: 3.5rem; 247 | padding-bottom: 5rem; 248 | } 249 | .about-container .right-about { 250 | display: grid; 251 | grid-template-columns: repeat(2, 1fr); 252 | grid-gap: 2rem; 253 | } 254 | .about-container .right-about .about-item { 255 | border: 1px solid var(--color-grey-5); 256 | border-radius: 5px; 257 | transition: all 0.4s ease-in-out; 258 | box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1); 259 | } 260 | .about-container .right-about .about-item:hover { 261 | cursor: default; 262 | transform: translateY(-5px); 263 | border: 1px solid var(--color-secondary); 264 | box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); 265 | } 266 | .about-container .right-about .about-item .abt-text { 267 | padding: 1.5rem; 268 | display: flex; 269 | flex-direction: column; 270 | } 271 | .about-container .right-about .about-item .abt-text .large-text { 272 | font-size: 3rem; 273 | font-weight: 700; 274 | color: var(--color-secondary); 275 | } 276 | .about-container .right-about .about-item .abt-text .small-text { 277 | padding-left: 3rem; 278 | position: relative; 279 | text-transform: uppercase; 280 | font-size: 1.2rem; 281 | color: var(--color-grey-1); 282 | letter-spacing: 2px; 283 | } 284 | .about-container .right-about .about-item .abt-text .small-text::before { 285 | content: ""; 286 | position: absolute; 287 | left: 0; 288 | top: 15px; 289 | width: 2rem; 290 | height: 2px; 291 | background-color: var(--color-grey-5); 292 | } 293 | .about-container .left-about { 294 | padding-right: 5rem; 295 | } 296 | .about-container .left-about p { 297 | line-height: 2rem; 298 | padding: 1rem; 299 | color: var(--color-grey-1); 300 | } 301 | .about-container .left-about h4 { 302 | font-size: 2rem; 303 | text-transform: uppercase; 304 | } 305 | 306 | .about-stats { 307 | padding-bottom: 4rem; 308 | } 309 | .about-stats .progress-bars { 310 | display: grid; 311 | grid-template-columns: repeat(2, 1fr); 312 | grid-gap: 2rem; 313 | } 314 | .about-stats .progress-bars .progress-bar { 315 | display: flex; 316 | flex-direction: column; 317 | } 318 | .about-stats .progress-bars .progress-bar .prog-title { 319 | text-transform: uppercase; 320 | font-weight: 500; 321 | } 322 | .about-stats .progress-bars .progress-bar .progress-con { 323 | display: flex; 324 | align-items: center; 325 | } 326 | .about-stats .progress-bars .progress-bar .progress-con .prog-text { 327 | color: var(--color-grey-2); 328 | } 329 | .about-stats .progress-bars .progress-bar .progress-con .progress { 330 | width: 100%; 331 | height: 0.45rem; 332 | background-color: var(--color-grey-4); 333 | margin-left: 1rem; 334 | position: relative; 335 | } 336 | .about-stats .progress-bars .progress-bar .progress-con .progress span { 337 | position: absolute; 338 | top: 0; 339 | left: 0; 340 | height: 100%; 341 | background-color: var(--color-secondary); 342 | transition: all 0.4s ease-in-out; 343 | width: 60%; 344 | } 345 | .about-stats .progress-bars .progress-bar .progress-con .progress .c { 346 | width: 60%; 347 | } 348 | .about-stats .progress-bars .progress-bar .progress-con .progress .cpp { 349 | width: 65%; 350 | } 351 | .about-stats .progress-bars .progress-bar .progress-con .progress .java { 352 | width: 68%; 353 | } 354 | .about-stats .progress-bars .progress-bar .progress-con .progress .oop { 355 | width: 75%; 356 | } 357 | 358 | .stat-title { 359 | text-transform: uppercase; 360 | font-size: 1.4rem; 361 | text-align: center; 362 | padding: 3.5rem 0; 363 | position: relative; 364 | } 365 | .stat-title::before { 366 | content: ""; 367 | position: absolute; 368 | left: 50%; 369 | top: 0; 370 | width: 40%; 371 | height: 1px; 372 | background-color: var(--color-grey-5); 373 | transform: translateX(-50%); 374 | } 375 | 376 | /*timeline*/ 377 | .timeline { 378 | display: grid; 379 | grid-template-columns: repeat(2, 1fr); 380 | grid-gap: 2rem; 381 | padding-bottom: 3rem; 382 | } 383 | .timeline .timeline-item { 384 | position: relative; 385 | padding-left: 3rem; 386 | border-left: 1px solid var(--color-grey-5); 387 | } 388 | .timeline .timeline-item .tl-icon { 389 | position: absolute; 390 | left: -27px; 391 | top: 0; 392 | background-color: var(--color-secondary); 393 | width: 50px; 394 | height: 50px; 395 | border-radius: 50%; 396 | display: flex; 397 | align-items: center; 398 | justify-content: center; 399 | } 400 | .timeline .timeline-item .tl-icon i { 401 | font-size: 1.3rem; 402 | } 403 | .timeline .timeline-item .tl-duration { 404 | padding: 0.2rem 0.6rem; 405 | background-color: var(--color-grey-5); 406 | border-radius: 15px; 407 | display: inline-block; 408 | font-size: 0.8rem; 409 | text-transform: uppercase; 410 | font-weight: 500; 411 | } 412 | .timeline .timeline-item h5 { 413 | padding: 1rem 0; 414 | text-transform: uppercase; 415 | font-size: 1.3rem; 416 | font-weight: 600; 417 | } 418 | .timeline .timeline-item h5 span { 419 | color: var(--color-grey-2); 420 | font-weight: 500; 421 | font-size: 1.2rem; 422 | } 423 | .timeline .timeline-item h5 p { 424 | color: var(--color-grey-2); 425 | } 426 | 427 | .port-text { 428 | padding: 2rem 0; 429 | text-align: center; 430 | } 431 | 432 | .portfolios { 433 | display: grid; 434 | grid-template-columns: repeat(3, 1fr); 435 | grid-gap: 2rem; 436 | margin-top: 3rem; 437 | } 438 | .portfolios .portfolio-item { 439 | position: relative; 440 | border-radius: 15px; 441 | } 442 | .portfolios .portfolio-item img { 443 | width: 100%; 444 | height: 300px; 445 | -o-object-fit: cover; 446 | object-fit: cover; 447 | border-radius: 15px; 448 | } 449 | .portfolios .portfolio-item .hover-items { 450 | width: 100%; 451 | height: 100%; 452 | background-color: var(--color-secondary); 453 | position: absolute; 454 | left: 0; 455 | top: 0; 456 | border-radius: 15px; 457 | display: flex; 458 | justify-content: center; 459 | align-items: center; 460 | flex-direction: column; 461 | opacity: 0; 462 | transform: scale(0); 463 | transition: all 0.4s ease-in-out; 464 | } 465 | .portfolios .portfolio-item .hover-items h3 { 466 | font-size: 1.5rem; 467 | color: var(--color-white); 468 | margin-bottom: 1.5rem; 469 | } 470 | .portfolios .portfolio-item .hover-items .icons { 471 | display: flex; 472 | justify-content: center; 473 | align-items: center; 474 | } 475 | .portfolios .portfolio-item .hover-items .icons .icon { 476 | background-color: var(--color-black); 477 | border-radius: 50%; 478 | width: 50px; 479 | height: 50px; 480 | display: flex; 481 | justify-content: center; 482 | align-items: center; 483 | margin: 0 1rem; 484 | cursor: pointer; 485 | transition: all 0.4s ease-in-out; 486 | } 487 | .portfolios .portfolio-item .hover-items .icons .icon i { 488 | font-size: 1.5rem; 489 | color: var(--color-white); 490 | margin: 0 1rem; 491 | } 492 | .portfolios .portfolio-item .hover-items .icons .icon:hover { 493 | background-color: var(--color-white); 494 | } 495 | .portfolios .portfolio-item .hover-items .icons .icon:hover i { 496 | color: var(--color-primary); 497 | } 498 | 499 | .portfolio-item:hover .hover-items { 500 | opacity: 1; 501 | transform: scale(1); 502 | } 503 | 504 | .contact-content-con { 505 | display: flex; 506 | padding-top: 3.5rem; 507 | } 508 | .contact-content-con .left-contact { 509 | flex: 2; 510 | } 511 | .contact-content-con .left-contact h4 { 512 | margin-top: 1rem; 513 | font-size: 2rem; 514 | text-transform: uppercase; 515 | } 516 | .contact-content-con .left-contact p { 517 | margin: 1rem 0; 518 | line-height: 2rem; 519 | } 520 | .contact-content-con .left-contact .contact-info .contact-item { 521 | display: flex; 522 | align-items: center; 523 | justify-content: space-between; 524 | } 525 | .contact-content-con .left-contact .contact-info .contact-item p { 526 | margin: 0.3rem 0 !important; 527 | padding: 0 !important; 528 | } 529 | .contact-content-con .left-contact .contact-info .contact-item .icon { 530 | display: grid; 531 | grid-template-columns: 40px 1fr; 532 | } 533 | .contact-content-con .left-contact .contact-info .contact-item .icon i { 534 | display: flex; 535 | align-items: center; 536 | font-size: 1.3rem; 537 | } 538 | .contact-content-con .left-contact .contact-icon { 539 | display: flex; 540 | margin-top: 2rem; 541 | } 542 | .contact-content-con .left-contact .contact-icon a { 543 | display: flex; 544 | align-items: center; 545 | color: var(--color-white); 546 | background-color: var(--color-grey-5); 547 | cursor: pointer; 548 | justify-content: center; 549 | width: 50px; 550 | height: 50px; 551 | border-radius: 50%; 552 | margin: 0 0.4rem; 553 | transition: all 0.4s ease-in-out; 554 | } 555 | .contact-content-con .left-contact .contact-icon a:hover { 556 | background-color: var(--color-secondary); 557 | } 558 | .contact-content-con .left-contact .contact-icon a:hover i { 559 | color: var(--color-primary); 560 | } 561 | .contact-content-con .left-contact .contact-icon a i { 562 | display: flex; 563 | align-items: center; 564 | justify-content: center; 565 | font-size: 1.3rem; 566 | } 567 | .contact-content-con .right-contact { 568 | flex: 3; 569 | margin-left: 3rem; 570 | } 571 | .contact-content-con .right-contact .input-control { 572 | margin: 1.5rem; 573 | } 574 | .contact-content-con .right-contact .input-control input, .contact-content-con .right-contact .input-control textarea { 575 | border-radius: 30px; 576 | font-weight: inherit; 577 | font-size: inherit; 578 | font-family: inherit; 579 | padding: 0.8rem 1.1rem; 580 | outline: none; 581 | border: none; 582 | background-color: var(--color-grey-5); 583 | width: 100%; 584 | color: var(--color-white); 585 | resize: none; 586 | } 587 | .contact-content-con .right-contact .i-c-2 { 588 | display: flex; 589 | } 590 | .contact-content-con .right-contact .i-c-2 :last-child { 591 | margin-left: 1.5rem; 592 | } 593 | .contact-content-con .right-contact .submit-btn { 594 | display: flex; 595 | justify-content: flex-start; 596 | } 597 | 598 | /*Independent Component*/ 599 | .btn-con { 600 | display: flex; 601 | align-self: flex-start; 602 | } 603 | 604 | .main-btn { 605 | border-radius: 30px; 606 | color: inherit; 607 | font-weight: 600; 608 | position: relative; 609 | border: 1px solid var(--color-secondary); 610 | display: flex; 611 | align-self: flex-start; 612 | display: flex; 613 | align-items: center; 614 | overflow: hidden; 615 | } 616 | .main-btn .btn-text { 617 | padding: 0 2rem; 618 | } 619 | .main-btn .btn-icon { 620 | background-color: var(--color-secondary); 621 | display: flex; 622 | align-items: center; 623 | justify-content: center; 624 | border-radius: 50%; 625 | padding: 1rem; 626 | } 627 | .main-btn::before { 628 | content: ""; 629 | position: absolute; 630 | top: 0; 631 | right: 0; 632 | transform: translateX(100%); 633 | transition: all 0.4s ease-out; 634 | z-index: -1; 635 | } 636 | .main-btn:hover { 637 | transition: all 0.4s ease-out; 638 | } 639 | .main-btn:hover::before { 640 | width: 100%; 641 | height: 100%; 642 | background-color: var(--color-secondary); 643 | transform: translateX(0); 644 | transition: all 0.4s ease-out; 645 | } 646 | 647 | .main-title { 648 | text-align: center; 649 | } 650 | .main-title h2 { 651 | position: relative; 652 | text-transform: uppercase; 653 | font-size: 4rem; 654 | font-weight: 700; 655 | } 656 | .main-title h2 span { 657 | color: var(--color-secondary); 658 | } 659 | .main-title h2 .bg-text { 660 | position: absolute; 661 | top: 50%; 662 | left: 50%; 663 | color: var(--color-grey-5); 664 | transition: all 0.4s ease-in-out; 665 | z-index: -1; 666 | transform: translate(-50%, -50%); 667 | font-weight: 800; 668 | font-size: 6.3rem; 669 | } 670 | 671 | @media screen and (max-width: 600px) { 672 | .about-container { 673 | grid-template-columns: 1fr; 674 | } 675 | .about-container .right-about { 676 | grid-template-columns: 1fr; 677 | padding-top: 2.5rem; 678 | } 679 | .about-container .left-about { 680 | padding-right: 0; 681 | } 682 | .about-container .left-about p { 683 | padding-left: 0; 684 | } 685 | .timeline { 686 | grid-template-columns: 1fr; 687 | padding-bottom: 6rem; 688 | } 689 | .portfolios { 690 | grid-template-columns: 1fr; 691 | padding-bottom: 6rem; 692 | } 693 | .section { 694 | padding: 2rem 2.5rem; 695 | } 696 | .main-title h2 { 697 | font-size: 2rem; 698 | } 699 | .main-title h2 span { 700 | font-size: 2.5rem; 701 | } 702 | .main-title h2 .bg-text { 703 | font-size: 3.5rem; 704 | } 705 | } 706 | @media screen and (max-width: 1432px) { 707 | header { 708 | padding: 0 !important; 709 | } 710 | .section { 711 | padding: 7rem 11rem; 712 | } 713 | .contact-content-con { 714 | flex-direction: column; 715 | } 716 | .contact-content-con .right-contact { 717 | margin-left: 0; 718 | margin-top: 2.5rem; 719 | } 720 | .contact-content-con .right-contact .i-c-2 { 721 | flex-direction: column; 722 | } 723 | .contact-content-con .right-contact .i-c-2 :last-child { 724 | margin-left: 0; 725 | margin-top: 1.5rem; 726 | } 727 | } 728 | @media screen and (max-width: 1070px) { 729 | .about-container { 730 | grid-template-columns: 1fr; 731 | } 732 | .about-container .right-about { 733 | padding-top: 2.5rem; 734 | } 735 | .portfolios { 736 | grid-template-columns: 1fr 1fr; 737 | } 738 | .main-title h2 { 739 | font-size: 4rem; 740 | } 741 | .main-title h2 span { 742 | font-size: 4rem; 743 | } 744 | .main-title h2 .bg-text { 745 | font-size: 4.5rem; 746 | } 747 | } 748 | @media screen and (max-width: 970px) { 749 | .section { 750 | padding: 7rem 6rem; 751 | } 752 | header { 753 | padding: 0; 754 | } 755 | header .right-header { 756 | padding: 0 !important; 757 | } 758 | .theme-btn { 759 | width: 50px; 760 | height: 50px; 761 | } 762 | .header-content { 763 | grid-template-columns: 1fr; 764 | padding: 6rem; 765 | } 766 | .left-header .h-shape { 767 | display: none; 768 | } 769 | .right-header { 770 | grid-row: 1; 771 | width: 90%; 772 | margin: 0 auto; 773 | } 774 | .right-header .name { 775 | font-size: 2.5rem !important; 776 | } 777 | .header-content .left-header .image { 778 | margin: 0 auto; 779 | width: 90%; 780 | } 781 | .controlls { 782 | top: auto; 783 | bottom: 0; 784 | flex-direction: row; 785 | justify-content: center; 786 | left: 50%; 787 | transform: translateX(-50%); 788 | width: 100%; 789 | background-color: var(--color-grey-5); 790 | } 791 | .controlls .control { 792 | margin: 0.3rem 1rem; 793 | } 794 | } 795 | @media screen and (max-width: 710px) { 796 | .section { 797 | padding: 7rem 3rem; 798 | } 799 | .about-stats .progress-bars { 800 | grid-template-columns: 1fr; 801 | } 802 | .main-title h2 { 803 | font-size: 3rem; 804 | } 805 | .main-title h2 span { 806 | font-size: 3rem; 807 | } 808 | .main-title h2 .bg-text { 809 | font-size: 4rem; 810 | } 811 | }/*# sourceMappingURL=styles.css.map */ -------------------------------------------------------------------------------- /styles/styles.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["styles.scss","styles.css","_media.scss"],"names":[],"mappings":"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","file":"styles.css"} -------------------------------------------------------------------------------- /styles/styles.scss: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | list-style: none; 6 | 7 | } 8 | :root{ 9 | --color-primary: #191d2b; 10 | --color-secondary: #27AE60; 11 | --color-white : #FFFFFF; 12 | --color-black : #000; 13 | --color-grey0 : #f8f8f8; 14 | --color-grey-1 : #dbe1e8; 15 | --color-grey-2 : #b2becd; 16 | --color-grey-3 : #6c7983; 17 | --color-grey-4 : #545e56; 18 | --color-grey-5 : #2a2e35; 19 | --color-grey-6 : #12181b; 20 | --br-sm-2: 14px; 21 | --box-shadow-1: 0 3px 15px rgba(0, 0, 0, 0.3); 22 | } 23 | 24 | .light-mode{ 25 | --color-primary: #FEFBF6; 26 | --color-secondary: #A6D1E6; 27 | --color-white : #454e56; 28 | --color-black : #000; 29 | --color-grey0 : #f8f8f8; 30 | --color-grey-1 : #6c7983; 31 | --color-grey-2 : #6c7983; 32 | --color-grey-3 : #6c7983; 33 | --color-grey-4 : #454e56; 34 | --color-grey-5 : #f8f8f8; 35 | --color-grey-6 : #12181b; 36 | } 37 | 38 | 39 | body{ 40 | background-color: var(--color-primary); 41 | font-family: 'Poppins', sans-serif; 42 | font-size: 1.1rem; 43 | color: var(--color-white); 44 | transition: all 0.4s ease-in-out; 45 | } 46 | a{ 47 | display: inline-block; 48 | text-decoration: none; 49 | color: inherit; 50 | font-family: inherit; 51 | } 52 | 53 | header{ 54 | min-height: 100vh; 55 | font-family: 'Poppins', sans-serif; 56 | color: var(--color-white); 57 | overflow: hidden; 58 | } 59 | 60 | section{ 61 | min-height: 100vh; 62 | width: 100%; 63 | position: absolute; 64 | left: 0; 65 | top: 0; 66 | padding: 3rem 18rem; 67 | } 68 | 69 | .section{ 70 | transform: translateY(-100%) scale(0); 71 | transition: all 0.4s ease-in-out; 72 | background-color: var(--color-primary); 73 | } 74 | 75 | .sec1{ 76 | display: none; 77 | transform: translateY(0) scale(1); 78 | 79 | 80 | } 81 | 82 | .sec2{ 83 | display: none; 84 | transform: translateY(0) scale(1); 85 | 86 | } 87 | 88 | .sec3{ 89 | display: none; 90 | transform: translateY(0) scale(1); 91 | 92 | } 93 | 94 | .sec4{ 95 | display: none; 96 | transform: translateY(0) scale(1); 97 | 98 | } 99 | 100 | .sec5{ 101 | display: none; 102 | transform: translateY(0) scale(1); 103 | } 104 | 105 | .active{ 106 | display: block; 107 | animation: scaleAnim 1s ease-in-out; 108 | @keyframes scaleAnim { 109 | 0%{ 110 | transform: translateY(-100%) scaleY(0) 111 | } 112 | 100%{ 113 | transform: translateY(0) scaleY(1) 114 | } 115 | } 116 | } 117 | 118 | //controls 119 | .controlls{ 120 | position: fixed; 121 | z-index: 10; 122 | top: 50%; 123 | right: 3%; 124 | display: flex; 125 | flex-direction: column; 126 | align-items: center; 127 | justify-content: center; 128 | transform: translateY(-50%); 129 | .active-btn{ 130 | background-color: var(--color-secondary) !important; 131 | transition: all .4s ease-in-out; 132 | i{ 133 | color: var(--color-white) !important; 134 | } 135 | 136 | } 137 | .control{ 138 | padding: 1rem; 139 | cursor: pointer; 140 | background-color: var(--color-grey-4); 141 | width: 55px; 142 | height: 55px; 143 | border-radius: 50%; 144 | display: flex; 145 | justify-content: center; 146 | align-items: center; 147 | margin: .7rem 0; 148 | box-shadow: var(--box-shadow-1) ; 149 | i{ 150 | font-size: 1.2rem; 151 | color: var(--color-grey-2); 152 | pointer-events: none; 153 | } 154 | 155 | } 156 | } 157 | 158 | .theme-btn{ 159 | top: 5%; 160 | right: 3%; 161 | width: 70px; 162 | height: 70px; 163 | border-radius: 50%; 164 | background-color: var(--color-grey-4); 165 | cursor: pointer; 166 | position: fixed; 167 | display: flex; 168 | justify-content: center; 169 | align-items: center; 170 | box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3); 171 | transition: all 0.1s ease-in-out; 172 | &:active{ 173 | transform: translateY(-3px) 174 | } 175 | i{ 176 | font-size: 1.4rem; 177 | color: var(--color-grey-2); 178 | pointer-events: none; 179 | } 180 | } 181 | 182 | 183 | /*Header-content*/ 184 | .header-content{ 185 | display: grid; 186 | grid-template-columns: repeat(2, 1fr); 187 | min-height: 100vh; 188 | .left-header{ 189 | display: flex; 190 | align-items: center; 191 | position: relative; 192 | .h-shape{ 193 | transition: all .4s ease-in-out; 194 | width: 65%; 195 | height: 100%; 196 | background-color: var(--color-secondary); 197 | position: absolute; 198 | left: 0; 199 | top: 0; 200 | z-index: -1; 201 | clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); 202 | } 203 | .image{ 204 | border-radius: var(--br-sm-2); 205 | height: 90%; 206 | width: 68%; 207 | margin-left: 4rem; 208 | background-color: var(--color-black); 209 | transition: all .4s ease-in-out; 210 | img{ 211 | width: 100%; 212 | height: 100%; 213 | object-fit: cover; 214 | transition: all .4s ease-in-out; 215 | filter: grayscale(100%); 216 | &:hover{ 217 | filter: grayscale(0); 218 | } 219 | } 220 | } 221 | } 222 | 223 | .right-header{ 224 | display: flex; 225 | flex-direction: column; 226 | justify-content: center; 227 | padding-right: 18rem; 228 | .name{ 229 | font-size: 3rem; 230 | span{ 231 | color: var(--color-secondary); 232 | } 233 | } 234 | p{ 235 | margin: 1.5rem 0; 236 | line-height: 2rem; 237 | } 238 | } 239 | } 240 | 241 | /*About*/ 242 | .about-container{ 243 | display: grid; 244 | grid-template-columns: repeat(2, 1fr); 245 | padding-top: 3.5rem; 246 | padding-bottom: 5rem; 247 | .right-about{ 248 | display: grid; 249 | grid-template-columns: repeat(2, 1fr); 250 | grid-gap: 2rem; 251 | .about-item{ 252 | border: 1px solid var(--color-grey-5); 253 | border-radius: 5px; 254 | transition: all .4s ease-in-out; 255 | box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1); 256 | &:hover{ 257 | cursor: default; 258 | transform: translateY(-5px); 259 | border: 1px solid var(--color-secondary); 260 | box-shadow: 1px 4px 15px rgba(0, 0, 0, .32); 261 | } 262 | .abt-text{ 263 | padding: 1.5rem; 264 | display: flex; 265 | flex-direction: column; 266 | .large-text{ 267 | font-size: 3rem; 268 | font-weight: 700; 269 | color: var(--color-secondary); 270 | } 271 | .small-text{ 272 | padding-left: 3rem; 273 | position: relative; 274 | text-transform: uppercase; 275 | font-size: 1.2rem; 276 | color: var(--color-grey-1); 277 | letter-spacing: 2px; 278 | &::before{ 279 | content: ''; 280 | position: absolute; 281 | left: 0; 282 | top: 15px; 283 | width: 2rem; 284 | height: 2px; 285 | background-color: var(--color-grey-5); 286 | } 287 | } 288 | } 289 | } 290 | } 291 | 292 | .left-about{ 293 | padding-right: 5rem; 294 | p{ 295 | line-height: 2rem; 296 | padding: 1rem; 297 | color: var(--color-grey-1); 298 | } 299 | h4{ 300 | font-size: 2rem; 301 | text-transform: uppercase; 302 | } 303 | } 304 | } 305 | 306 | 307 | .about-stats{ 308 | padding-bottom: 4rem; 309 | .progress-bars{ 310 | display: grid; 311 | grid-template-columns: repeat(2, 1fr); 312 | grid-gap: 2rem; 313 | .progress-bar{ 314 | display: flex; 315 | flex-direction: column; 316 | .prog-title{ 317 | text-transform: uppercase; 318 | font-weight: 500; 319 | } 320 | .progress-con{ 321 | display: flex; 322 | align-items: center; 323 | .prog-text{ 324 | color: var(--color-grey-2); 325 | } 326 | .progress{ 327 | width: 100%; 328 | height: .45rem; 329 | background-color: var(--color-grey-4); 330 | margin-left: 1rem; 331 | position: relative; 332 | span{ 333 | position: absolute; 334 | top: 0; 335 | left: 0; 336 | height: 100%; 337 | background-color: var(--color-secondary); 338 | transition: all .4s ease-in-out; 339 | width: 60%; 340 | } 341 | 342 | .c{ 343 | width: 60%; 344 | } 345 | .cpp{ 346 | width: 65%; 347 | } 348 | 349 | .java{ 350 | width: 68%; 351 | } 352 | 353 | .oop{ 354 | width: 75%; 355 | } 356 | 357 | 358 | } 359 | 360 | 361 | } 362 | 363 | } 364 | } 365 | } 366 | 367 | .stat-title{ 368 | text-transform: uppercase; 369 | font-size: 1.4rem; 370 | text-align: center; 371 | padding: 3.5rem 0; 372 | position: relative; 373 | &::before{ 374 | content:''; 375 | position: absolute; 376 | left: 50%; 377 | top: 0; 378 | width: 40%; 379 | height: 1px; 380 | background-color: var(--color-grey-5); 381 | transform: translateX(-50%); 382 | } 383 | } 384 | 385 | /*timeline*/ 386 | .timeline{ 387 | display: grid; 388 | grid-template-columns: repeat(2, 1fr); 389 | grid-gap: 2rem; 390 | padding-bottom: 3rem; 391 | .timeline-item{ 392 | position: relative; 393 | padding-left: 3rem; 394 | border-left: 1px solid var(--color-grey-5); 395 | .tl-icon{ 396 | position: absolute; 397 | left: -27px; 398 | top: 0; 399 | background-color: var(--color-secondary); 400 | width: 50px; 401 | height: 50px; 402 | border-radius: 50%; 403 | display: flex; 404 | align-items: center; 405 | justify-content: center; 406 | i{ 407 | font-size: 1.3rem; 408 | } 409 | } 410 | .tl-duration{ 411 | padding: .2rem .6rem; 412 | background-color: var(--color-grey-5); 413 | border-radius: 15px; 414 | display: inline-block; 415 | font-size: .8rem; 416 | text-transform: uppercase; 417 | font-weight: 500; 418 | } 419 | h5{ 420 | padding: 1rem 0; 421 | text-transform: uppercase; 422 | font-size: 1.3rem; 423 | font-weight: 600; 424 | span{ 425 | color: var(--color-grey-2); 426 | font-weight: 500; 427 | font-size: 1.2rem; 428 | } 429 | p{ 430 | color: var(--color-grey-2); 431 | } 432 | } 433 | } 434 | } 435 | 436 | //portfolio 437 | .port-text{ 438 | padding: 2rem 0; 439 | text-align: center; 440 | } 441 | 442 | .portfolios{ 443 | display: grid; 444 | grid-template-columns: repeat(3, 1fr); 445 | grid-gap: 2rem; 446 | margin-top: 3rem; 447 | .portfolio-item{ 448 | position: relative; 449 | border-radius: 15px; 450 | img{ 451 | width: 100%; 452 | height: 300px; 453 | object-fit: cover; 454 | border-radius: 15px; 455 | } 456 | .hover-items{ 457 | width: 100%; 458 | height: 100%; 459 | background-color: var(--color-secondary); 460 | position: absolute; 461 | left: 0; 462 | top: 0; 463 | border-radius: 15px; 464 | display: flex; 465 | justify-content: center; 466 | align-items: center; 467 | flex-direction: column; 468 | opacity: 0; 469 | transform: scale(0); 470 | transition: all .4s ease-in-out; 471 | h3{ 472 | font-size: 1.5rem; 473 | color: var(--color-white); 474 | margin-bottom: 1.5rem; 475 | } 476 | .icons{ 477 | display:flex; 478 | justify-content: center; 479 | align-items: center; 480 | .icon{ 481 | background-color: var(--color-black); 482 | border-radius: 50%; 483 | width: 50px; 484 | height: 50px; 485 | display: flex; 486 | justify-content: center; 487 | align-items: center; 488 | margin: 0 1rem; 489 | cursor: pointer; 490 | transition: all .4s ease-in-out; 491 | i{ 492 | font-size: 1.5rem; 493 | color: var(--color-white); 494 | margin: 0 1rem; 495 | } 496 | &:hover{ 497 | background-color: var(--color-white); 498 | i{ 499 | color: var(--color-primary); 500 | } 501 | } 502 | } 503 | } 504 | } 505 | } 506 | } 507 | 508 | .portfolio-item:hover .hover-items{ 509 | opacity: 1; 510 | transform: scale(1); 511 | } 512 | 513 | 514 | //contact section 515 | .contact-content-con{ 516 | display: flex; 517 | padding-top: 3.5rem; 518 | .left-contact{ 519 | flex: 2; 520 | h4{ 521 | margin-top: 1rem; 522 | font-size: 2rem; 523 | text-transform: uppercase; 524 | } 525 | p{ 526 | margin: 1rem 0; 527 | line-height: 2rem; 528 | } 529 | .contact-info{ 530 | .contact-item{ 531 | display: flex; 532 | align-items: center; 533 | justify-content: space-between; 534 | p{ 535 | margin: .3rem 0 !important; 536 | padding: 0 !important; 537 | } 538 | .icon{ 539 | display: grid; 540 | grid-template-columns: 40px 1fr; 541 | i{ 542 | display: flex; 543 | align-items: center; 544 | font-size: 1.3rem; 545 | } 546 | } 547 | } 548 | } 549 | .contact-icon{ 550 | display: flex; 551 | margin-top: 2rem; 552 | a{ 553 | display: flex; 554 | align-items: center; 555 | color: var(--color-white); 556 | background-color: var(--color-grey-5); 557 | cursor: pointer; 558 | justify-content: center; 559 | width: 50px; 560 | height: 50px; 561 | border-radius: 50%; 562 | margin: 0 .4rem; 563 | transition: all .4s ease-in-out; 564 | &:hover{ 565 | background-color: var(--color-secondary); 566 | i{ 567 | color: var(--color-primary); 568 | } 569 | } 570 | i{ 571 | display: flex; 572 | align-items: center; 573 | justify-content: center; 574 | font-size: 1.3rem; 575 | } 576 | } 577 | } 578 | } 579 | .right-contact{ 580 | flex: 3; 581 | margin-left: 3rem; 582 | .input-control{ 583 | margin: 1.5rem; 584 | input, textarea{ 585 | border-radius: 30px; 586 | font-weight: inherit; 587 | font-size: inherit; 588 | font-family: inherit; 589 | padding: .8rem 1.1rem; 590 | outline: none; 591 | border: none; 592 | background-color: var(--color-grey-5); 593 | width: 100%; 594 | color: var(--color-white); 595 | resize: none ; 596 | } 597 | 598 | } 599 | .i-c-2{ 600 | display: flex; 601 | :last-child{ 602 | margin-left: 1.5rem; 603 | } 604 | } 605 | .submit-btn{ 606 | display: flex; 607 | justify-content: flex-start; 608 | } 609 | } 610 | } 611 | 612 | 613 | /*Independent Component*/ 614 | .btn-con{ 615 | display: flex; 616 | align-self: flex-start; 617 | } 618 | .main-btn{ 619 | border-radius: 30px; 620 | color: inherit; 621 | font-weight: 600; 622 | position: relative; 623 | border: 1px solid var(--color-secondary); 624 | display: flex; 625 | align-self: flex-start; 626 | display: flex; 627 | align-items: center; 628 | overflow: hidden; 629 | .btn-text{ 630 | padding: 0 2rem; 631 | } 632 | .btn-icon{ 633 | background-color: var(--color-secondary); 634 | display: flex; 635 | align-items: center; 636 | justify-content: center; 637 | border-radius: 50%; 638 | padding: 1rem; 639 | } 640 | &::before{ 641 | content: ''; 642 | position: absolute; 643 | top: 0; 644 | right: 0; 645 | transform: translateX(100%); 646 | transition: all .4s ease-out; 647 | z-index: -1; 648 | } 649 | &:hover{ 650 | transition: all .4s ease-out; 651 | &::before{ 652 | width: 100%; 653 | height: 100%; 654 | background-color: var(--color-secondary); 655 | transform: translateX(0); 656 | transition: all .4s ease-out; 657 | } 658 | } 659 | } 660 | 661 | .main-title{ 662 | text-align: center; 663 | h2{ 664 | position: relative; 665 | text-transform: uppercase; 666 | font-size: 4rem; 667 | font-weight: 700; 668 | span{ 669 | color: var(--color-secondary); 670 | } 671 | .bg-text{ 672 | position: absolute; 673 | top: 50%; 674 | left: 50%; 675 | color: var(--color-grey-5); 676 | transition: all .4s ease-in-out; 677 | z-index: -1; 678 | transform: translate(-50%, -50%); 679 | font-weight: 800; 680 | font-size: 6.3rem; 681 | } 682 | } 683 | } 684 | 685 | 686 | @import './media'; --------------------------------------------------------------------------------