├── README.md ├── TODO.pdf ├── assets └── README.md ├── blue.css ├── default.css ├── green.css ├── index.html ├── main.pdf ├── main2.pdf ├── project-2.jpeg ├── project-3.jpeg ├── project-4.jpeg ├── project-5.jpeg ├── project-6.jpeg ├── purple.css ├── sambi.jpeg └── script.js /README.md: -------------------------------------------------------------------------------- 1 | # summerhacks-PORTFOLIO-WEBSITE 2 | Template For Summer Hacks Project Submission 3 | 4 | my portfolio-website link https://sambitraj.000webhostapp.com/ 5 | 6 | 7 | ## THIS PORTFOLIO-WEBSITE DIVIDED INTO 3-SECTION 8 | 9 | 1ST-SECTION=INTRODUCTION OF MINE AND WHAT I DO! 10 | 11 | 2ND-SECTION =MY CONTACT + WHAT HAVE I LEARN IN MY PAST 12 | 13 | 3RD-SECTION=MY PROJECTS SPACE ! 14 | 15 | THAT'S ALL THANK YOU FOR VISITING THIS PROJECT 16 | 17 | ### IF YOU WANT KNOW MORE ABOUT MY PROJECTS THEN CONTACT ME ON MY E-MAIL-sambit.raj2001@gmail.com 18 | -------------------------------------------------------------------------------- /TODO.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sambitraj/portfolio-website/206fd7ab0e8b0c8af44f66ded6e7b04e75c3452b/TODO.pdf -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | Summer Hacks 2 | SOA Code Room 3 | Project Template 4 | Use this template: https://github.com/SOACodeRoom/summerhacks-projectName/generate 5 | 6 | This folder is for you to add assets like images, video and what ever you like to add to your site. But make sure to keep everything under this. -------------------------------------------------------------------------------- /blue.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --maincolor:#15202B; 3 | --secondarycolour:#192734; 4 | 5 | --bordercolor:#164D56; 6 | 7 | 8 | --mainText:#fff; 9 | --secondarytext:#eeeeee; 10 | 11 | --themedotborder:#FFF; 12 | --previewBg:rgb(25, 39, 52, 0.8); 13 | --previewShadow:#111921; 14 | 15 | --buttonColor:#17a2b8; 16 | } -------------------------------------------------------------------------------- /default.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --maincolor:#eaeaea; 3 | --secondarycolour:#fff; 4 | 5 | --bordercolor:#c1c1c1; 6 | 7 | 8 | --mainText:black; 9 | --secondarytext:#4b5156; 10 | 11 | --themedotborder:#24292e; 12 | --previewBg:rgb(251, 249, 243, 0.8); 13 | --previewShadow:#f0ead6; 14 | 15 | --buttonColor:black; 16 | } 17 | 18 | html, body{ 19 | padding: 0; 20 | margin: 0 ; 21 | display: flex; flex-direction: column; 22 | } 23 | 24 | body *{ 25 | transition: 0.6s; 26 | 27 | } 28 | 29 | h1 , h2, h3, h4, h5, h6, strong{ 30 | color: var(--mainText); 31 | font-family: 'Russo One', sans-serif; 32 | font-weight: 500; 33 | 34 | } 35 | 36 | p, li, span,label,input,textarea{ 37 | color: var(--secondarytext); 38 | font-family: 'Roboto Mono', monospace; 39 | 40 | } 41 | 42 | a{ 43 | text-decoration: none; 44 | color: #17a2b8; 45 | } 46 | 47 | ul{ 48 | list-style: none; 49 | } 50 | 51 | h1{font-size: 56px;} 52 | h2{font-size: 36px;} 53 | h3{font-size: 28px;} 54 | h4{font-size: 20px;} 55 | h5{font-size: 20px;} 56 | h6{font-size: 16px;} 57 | h7{font-size: 15px;} 58 | 59 | .s1{ 60 | background-color:var(--maincolor) ; 61 | border-bottom:1px solid var(--bordercolor); 62 | overflow: auto; 63 | } 64 | 65 | .s2{ 66 | background-color:var(--secondarycolour) ; 67 | border-bottom:1px solid var(--bordercolor); 68 | overflow: auto; 69 | } 70 | 71 | .s3{ 72 | padding-top: 30px; 73 | background-color:var(--secondarycolour) ; 74 | border-bottom:1px solid var(--bordercolor); 75 | overflow: auto; 76 | display: flex; 77 | justify-content: center; 78 | align-items: center; 79 | height: 800px; 80 | } 81 | 82 | .main-container{ 83 | width: 1200px; 84 | margin: 0 auto; 85 | } 86 | 87 | .greeting-wrapper{ 88 | display: grid; 89 | text-align:center ; 90 | align-content: center; 91 | min-height: 10em ; 92 | } 93 | 94 | .intro-wrapper{ 95 | background-color: var(--secondarycolour); 96 | border: 1px solid var(--bordercolor); 97 | border-radius: 5px 5px 0 0 ; 98 | 99 | -webkit-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75); 100 | -moz-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75); 101 | box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75); 102 | 103 | display: grid; 104 | grid-template-columns: 1fr 1fr; 105 | 106 | grid-template-areas: 107 | 'nav-wrapper nav-wrapper' 108 | 'left-column right-column' 109 | ; 110 | } 111 | 112 | .nav-wrapper{ 113 | border-radius: 5px 5px 0 0 ; 114 | grid-area:nav-wrapper ; 115 | border-bottom: 1px solid var(--bordercolor) ; 116 | display: flex; 117 | justify-content: space-between; 118 | align-items: center; 119 | background-color: var(--maincolor); 120 | } 121 | 122 | #navigation li{ 123 | display: inline-block; 124 | margin-right: 5px ; 125 | margin-left: 5px; 126 | 127 | } 128 | 129 | .dots-wrapper{ 130 | display: flex; 131 | padding: 10px; 132 | 133 | } 134 | 135 | #dot-1{ 136 | background-color: #fc6058; 137 | 138 | } 139 | 140 | #dot-2{ 141 | background-color: #fec02f; 142 | } 143 | 144 | #dot-3{ 145 | background-color: #2aca3e; 146 | } 147 | 148 | .browser-dots{ 149 | background-color: black; 150 | height: 15px; 151 | width: 15px; 152 | border-radius: 50%; 153 | margin: 5px; 154 | 155 | -webkit-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75); 156 | -moz-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75); 157 | box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75); 158 | 159 | } 160 | 161 | 162 | .left-column{ 163 | grid-area: left-column; 164 | padding-top: 50px; 165 | padding-bottom: 50px; 166 | } 167 | .con{ 168 | text-align-last: center; 169 | padding-top: 100px; 170 | padding-bottom: 50px; 171 | } 172 | 173 | #profile_pic{ 174 | display: block; 175 | margin: 0 auto ; 176 | 177 | height: 400px; 178 | width: 200px; 179 | object-fit: cover; 180 | border: 2px solid var(--bordercolor); 181 | } 182 | 183 | #theme-options-wrapper{ 184 | display: flex; 185 | justify-content: center; 186 | } 187 | 188 | 189 | .theme-dot{ 190 | height: 30px; 191 | width: 30px; 192 | background-color: black; 193 | border-radius: 50%; 194 | 195 | margin: 5px; 196 | border: 2px solid var(--themedotborder); 197 | 198 | 199 | -webkit-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75); 200 | -moz-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75); 201 | box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75); 202 | 203 | cursor: pointer; 204 | 205 | } 206 | 207 | .theme-dot:hover{ 208 | border-width: 5px; 209 | } 210 | 211 | #light-mode{ 212 | background-color: #fff; 213 | } 214 | 215 | #blue-mode{ 216 | background-color: #192734; 217 | } 218 | 219 | #green-mode{ 220 | background-color: #78866b; 221 | } 222 | 223 | #purple-mode{ 224 | background-color: #7E4C74; 225 | } 226 | 227 | #settings-note{ 228 | font-size: 12px; 229 | font-style: italic; 230 | text-align: center; 231 | } 232 | 233 | .right-column{ 234 | grid-area: right-column; 235 | display: grid; 236 | align-content: center; 237 | 238 | padding-top: 50px; 239 | padding-bottom: 50px; 240 | 241 | padding-right: 50px; 242 | } 243 | 244 | #preview-shadow{ 245 | background-color: var(--previewShadow); 246 | width: 300px; 247 | height: 180px; 248 | padding-left: 30px; 249 | padding-top: 30px; 250 | } 251 | 252 | #preview{ 253 | width: 300px; 254 | border: 1.5px solid #17a2b8 ; 255 | background-color: var(--previewBg); 256 | padding: 15px; 257 | position: relative; 258 | } 259 | 260 | .corner{ 261 | width: 7px; 262 | height: 7px; 263 | border-radius: 50%; 264 | border: 1.5px solid #17a2b8; 265 | background-color: #fff; 266 | position: absolute; 267 | } 268 | 269 | #corner-tl{ 270 | top: -5px; 271 | left: -5px; 272 | } 273 | 274 | #corner-tr{ 275 | top: -5px; 276 | right: -5px; 277 | } 278 | 279 | #corner-br{ 280 | bottom: -5px; 281 | right: -5px; 282 | } 283 | 284 | #corner-bl{ 285 | bottom: -5px; 286 | left: -5px; 287 | } 288 | 289 | .about-wrapper{ 290 | display: grid; 291 | grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 292 | padding-bottom: 50px; 293 | padding-top: 50px; 294 | gap:100px; 295 | } 296 | 297 | 298 | #skills{ 299 | display: flex; 300 | justify-content: space-evenly; 301 | background-color: var(--previewShadow); 302 | } 303 | .post-wrapper{ 304 | display: grid; 305 | grid-template-columns: repeat(auto-fit, 320px); 306 | gap: 30px; 307 | justify-content: center; 308 | padding-bottom: 50px; 309 | } 310 | 311 | .post{ 312 | border: 1px solid var(--bordercolor) ; 313 | -webkit-box-shadow: -2px 7px 21px -9px rgba(0,0,0,0.75); 314 | -moz-box-shadow: -2px 7px 21px -9px rgba(0,0,0,0.75); 315 | box-shadow: -2px 7px 21px -9px rgba(0,0,0,0.75); 316 | } 317 | 318 | .thumbnail{ 319 | display: block; 320 | width: 100%; 321 | height: 350px; 322 | object-fit: cover; 323 | } 324 | 325 | .post-preview{ 326 | background-color: #fff; 327 | padding: 15px; 328 | } 329 | 330 | .post-title{ 331 | color: black; 332 | margin: 0; 333 | } 334 | 335 | .post-intro{ 336 | color: #4b5156; 337 | font-size: 16px; 338 | } 339 | 340 | 341 | 342 | @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"; 343 | 344 | * { 345 | box-sizing:border-box; 346 | } 347 | body { 348 | background:#ddd; 349 | font-family:"Raleway"; 350 | } 351 | 352 | 353 | .tabs { 354 | 355 | padding-left: 200px; 356 | padding-bottom: 20px; 357 | 358 | width:680px; 359 | height:400px; 360 | padding:30px 20px; 361 | background:#f5f5f5; 362 | box-shadow:5px 5px 10px 5px #ccc; 363 | overflow:auto; 364 | } 365 | .tabs .tab-header { 366 | float:left; 367 | width:180px; 368 | height:100%; 369 | border-right:1px solid #ccc; 370 | padding:50px 0px; 371 | } 372 | .tabs .tab-header > div { 373 | height:50px; 374 | line-height:50px; 375 | font-size:16px; 376 | font-weight:600; 377 | color:#888; 378 | cursor:pointer; 379 | padding-left:10px; 380 | } 381 | .tabs .tab-header > div:hover, 382 | .tabs .tab-header > div.active { 383 | color:#00acee; 384 | } 385 | .tabs .tab-header div i { 386 | display:inline-block; 387 | margin-left:10px; 388 | margin-right:5px; 389 | } 390 | .tabs .tab-content { 391 | position:relative; 392 | height:100%; 393 | overflow:hidden; 394 | } 395 | .tabs .tab-content > div > i { 396 | display:inline-block; 397 | width:50px; 398 | height:50px; 399 | background:#555; 400 | color:#f5f5f5; 401 | font-size:25px; 402 | font-weight:600; 403 | text-align:center; 404 | line-height:50px; 405 | border-radius:50%; 406 | } 407 | .tabs .tab-content > div { 408 | position:absolute; 409 | text-align:center; 410 | padding:40px 20px; 411 | top:-200%; 412 | transition:all 500ms ease-in-out; 413 | } 414 | .tabs .tab-content > div.active { 415 | top:0px; 416 | } 417 | 418 | .tabs .tab-indicator { 419 | 420 | 421 | background:#00acee; 422 | left:198px; 423 | top:80px; 424 | 425 | } 426 | 427 | 428 | 429 | 430 | 431 | 432 | @media screen and (max-width:1200px) { 433 | .main-container{ 434 | width: 95%; 435 | } 436 | } 437 | 438 | @media screen and (max-width:800px) { 439 | 440 | .intro-wrapper{ 441 | grid-template-columns: 1fr; 442 | 443 | grid-template-areas: 444 | 'nav-wrapper' 445 | 'left-column' 446 | 'right-column' 447 | ; 448 | 449 | } 450 | .right-column{ 451 | justify-content: center; 452 | 453 | } 454 | } 455 | -------------------------------------------------------------------------------- /green.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --maincolor:#606B56; 3 | --secondarycolour:#515a48; 4 | 5 | --bordercolor:#161914; 6 | 7 | 8 | --mainText:#fff; 9 | --secondarytext:#eeeeee; 10 | 11 | --themedotborder:#FFF; 12 | --previewBg:rgb(81, 90, 72, 0.8); 13 | --previewShadow:#2a2f25; 14 | 15 | --buttonColor:#669966; 16 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | SAMBIT ID 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 |

Hi, I'm Sambit Raj

20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | 29 |
30 |
31 | 32 |
Personalize Theme
33 |
34 |
35 |
36 |
37 |
38 |
39 |

"Theme settings will be saved for
your next visit."

40 |
41 |
42 |
43 |
44 |
45 |
46 |

What I Do

47 |

" I was learning computer language in a past life , Now I enjoy making new projects. "

48 |
49 |
50 |
51 |
52 | 53 |
54 |
55 |
56 |
57 | 58 |
59 |
60 | 61 |
62 |
63 |

More about me

64 | 65 |

I build new projects just to tickle my brain and love studing others project also !

66 | 67 |

While I keep busy in learning courses, I still take interviews in search of a great team & projects that interest me.

68 |
69 | 70 | 71 |
72 |

COMP. language that I know

73 |
74 |
    75 |
  • Python
    • 76 |
  • Django
    • 77 |
  • Sql
    • 78 |
79 | 80 |
    81 |
  • Java
    • 82 |
  • HTML/CSS
    • 83 |
84 | 85 |
86 |
87 |
88 |

you want to know more about
my projects then contact me

89 |
E-mail-sambit.raj2001@gmail.com
90 |
91 | 92 | 95 |
96 |
97 |
98 | 99 |
100 |
101 |

Some of my past projects

102 |
103 |
104 |
105 | 106 |
107 |
GUI-LOGINPAGE
108 |

In this project you can see the interfernce of the login page

109 | Read More 110 |
111 |
112 |
113 | 114 |
115 |
116 | 117 |
118 |
GUI-LOGINPAGE 2
119 |

In this login page you can see the interfernce with saving your login data

120 | Read More 121 |
122 |
123 |
124 | 125 |
126 |
127 | 128 |
129 |
PORTFOLIO-WEBSITE
130 |

This is your personalize website where you can save your project

131 | this project is pvt 132 |
133 |
134 |
135 |
136 |
137 | 138 |
139 |
TO-DO LIST
140 |

This is a to-do list which remind your task

141 | Read More 142 |
143 |
144 |
145 | 146 |
147 |
148 | 149 |
150 |
COLLEGE-NEEDER
151 |

This is a website where all the students can have they are notes etc in one website

152 | Read More 153 |
154 |
155 |
156 |
157 |
158 |
159 | 160 | 161 | 162 | 163 | -------------------------------------------------------------------------------- /main.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sambitraj/portfolio-website/206fd7ab0e8b0c8af44f66ded6e7b04e75c3452b/main.pdf -------------------------------------------------------------------------------- /main2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sambitraj/portfolio-website/206fd7ab0e8b0c8af44f66ded6e7b04e75c3452b/main2.pdf -------------------------------------------------------------------------------- /project-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sambitraj/portfolio-website/206fd7ab0e8b0c8af44f66ded6e7b04e75c3452b/project-2.jpeg -------------------------------------------------------------------------------- /project-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sambitraj/portfolio-website/206fd7ab0e8b0c8af44f66ded6e7b04e75c3452b/project-3.jpeg -------------------------------------------------------------------------------- /project-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sambitraj/portfolio-website/206fd7ab0e8b0c8af44f66ded6e7b04e75c3452b/project-4.jpeg -------------------------------------------------------------------------------- /project-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sambitraj/portfolio-website/206fd7ab0e8b0c8af44f66ded6e7b04e75c3452b/project-5.jpeg -------------------------------------------------------------------------------- /project-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sambitraj/portfolio-website/206fd7ab0e8b0c8af44f66ded6e7b04e75c3452b/project-6.jpeg -------------------------------------------------------------------------------- /purple.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --maincolor:#46344E; 3 | --secondarycolour:#382a3f; 4 | 5 | --bordercolor:#1d1520; 6 | 7 | 8 | --mainText:#fff; 9 | --secondarytext:#eeeeee; 10 | 11 | --themedotborder:#FFF; 12 | --previewBg:rgb(29, 21, 32, 0.8); 13 | --previewShadow:#2b202f; 14 | 15 | --buttonColor:#8534a3; 16 | } -------------------------------------------------------------------------------- /sambi.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sambitraj/portfolio-website/206fd7ab0e8b0c8af44f66ded6e7b04e75c3452b/sambi.jpeg -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | console.log('Its working') 2 | 3 | let theme = localStorage.getItem('theme') 4 | 5 | if(theme == null){ 6 | setTheme('light') 7 | }else{ 8 | setTheme(theme) 9 | } 10 | 11 | let themeDots = document.getElementsByClassName('theme-dot') 12 | 13 | 14 | for (var i=0; themeDots.length > i; i++){ 15 | themeDots[i].addEventListener('click', function(){ 16 | let mode = this.dataset.mode 17 | console.log('Option clicked:', mode) 18 | setTheme(mode) 19 | }) 20 | } 21 | 22 | function setTheme(mode){ 23 | if(mode == 'light'){ 24 | document.getElementById('theme-style').href = 'default.css' 25 | } 26 | 27 | if(mode == 'blue'){ 28 | document.getElementById('theme-style').href = 'blue.css' 29 | } 30 | 31 | if(mode == 'green'){ 32 | document.getElementById('theme-style').href = 'green.css' 33 | } 34 | 35 | if(mode == 'purple'){ 36 | document.getElementById('theme-style').href = 'purple.css' 37 | } 38 | 39 | localStorage.setItem('theme', mode) 40 | } 41 | 42 | 43 | function _class(name){ 44 | return document.getElementsByClassName(name); 45 | } 46 | 47 | let tabPanes = _class("tab-header")[0].getElementsByTagName("div"); 48 | 49 | for(let i=0;i