├── README.md ├── img ├── hero.png ├── blog1.jpg ├── blog2.jpg ├── blog3.jpg ├── port1.jpg ├── port2.jpg ├── port3.jpg ├── port4.jpg ├── port5.jpg ├── port6.jpg ├── port7.jpg ├── Screenshot from 2024-01-01 17-24-28.png └── 360_F_574955019_gk0EfaPbwaIzRf3HtS8KJdKmduOx8V5G.jpg ├── app.js ├── SECURITY.md ├── styles ├── styles.css.map ├── _media.scss ├── styles.scss └── styles.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # famous-portfolio -------------------------------------------------------------------------------- /img/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Famous-guy/famous-portfolio/HEAD/img/hero.png -------------------------------------------------------------------------------- /img/blog1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Famous-guy/famous-portfolio/HEAD/img/blog1.jpg -------------------------------------------------------------------------------- /img/blog2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Famous-guy/famous-portfolio/HEAD/img/blog2.jpg -------------------------------------------------------------------------------- /img/blog3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Famous-guy/famous-portfolio/HEAD/img/blog3.jpg -------------------------------------------------------------------------------- /img/port1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Famous-guy/famous-portfolio/HEAD/img/port1.jpg -------------------------------------------------------------------------------- /img/port2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Famous-guy/famous-portfolio/HEAD/img/port2.jpg -------------------------------------------------------------------------------- /img/port3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Famous-guy/famous-portfolio/HEAD/img/port3.jpg -------------------------------------------------------------------------------- /img/port4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Famous-guy/famous-portfolio/HEAD/img/port4.jpg -------------------------------------------------------------------------------- /img/port5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Famous-guy/famous-portfolio/HEAD/img/port5.jpg -------------------------------------------------------------------------------- /img/port6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Famous-guy/famous-portfolio/HEAD/img/port6.jpg -------------------------------------------------------------------------------- /img/port7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Famous-guy/famous-portfolio/HEAD/img/port7.jpg -------------------------------------------------------------------------------- /img/Screenshot from 2024-01-01 17-24-28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Famous-guy/famous-portfolio/HEAD/img/Screenshot from 2024-01-01 17-24-28.png -------------------------------------------------------------------------------- /img/360_F_574955019_gk0EfaPbwaIzRf3HtS8KJdKmduOx8V5G.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Famous-guy/famous-portfolio/HEAD/img/360_F_574955019_gk0EfaPbwaIzRf3HtS8KJdKmduOx8V5G.jpg -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | [...document.querySelectorAll(".control")].forEach(button => { 3 | button.addEventListener("click", function() { 4 | document.querySelector(".active-btn").classList.remove("active-btn"); 5 | this.classList.add("active-btn"); 6 | document.querySelector(".active").classList.remove("active"); 7 | document.getElementById(button.dataset.id).classList.add("active"); 8 | }) 9 | }); 10 | document.querySelector(".theme-btn").addEventListener("click", () => { 11 | document.body.classList.toggle("light-mode"); 12 | }) 13 | })(); 14 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /styles/styles.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["styles.scss","_media.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;;AACA;EACI;IAAI;;EACJ;IAAM;;;;AAKd;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;;AACA;EAAI;;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAU;;AACV;EACI;EACA;EACA;;;AAKR;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAMhB;EACI;EACA;EACA;EACA;;AACA;EACI;;AACA;EAAO;;AAEX;EACI;EACA;;;AAKZ;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAOpB;EACI;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;;AAKZ;EACI;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EAAQ;;AACR;EAAO;;AACP;EAAM;;AACN;EAAQ;;AACR;EAAO;;AACP;EAAS;;;AAM7B;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIR;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EAAG;;;AAKX;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;;AACA;EAAI;;;AAQ5B;EACI;EACA;;;AAIJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EAAU;;AAEd;EACI;EACA;EACA;;;AAQhB;EACI;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAIA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;EACA;;AAMhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EAAI;;AAER;EACI;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGR;EACI;;AACA;EACI;;AAGR;EACI;EACA;;;AAMZ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAY;;AACZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAMZ;EACI;;AACA;EACI;EACA;EACA;EACA;;AACA;EAAO;;AACP;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzpBZ;EACI;;;AAGJ;EACI;IACI;;;EAEJ;IACI;IACA;;;EAEJ;IACI;IACA;;;EAIA;IACI;;;EAGR;IACI;IACA;IACA;IACA;;EACA;IACI;IACA;IACA;;;EAGR;IACI;IACA;;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EACA;IACI;;;EAIR;IACI;;EACA;IACI;IACA;;EAEJ;IACI;;EACA;IACI;;;EAKZ;IACI;IACA;;;EAGJ;IACI;;;EAIA;IACI;;;EAIR;IACI;IACA;IACA;;;EAGJ;IACI;IACA;;;EAGJ;IACI;;EACA;IACI;IACA;;;EAIR;IACI;;;EAEJ;IACI;IACA;;;EAGJ;IACI;;;EAGJ;IACI;IACA;;EACA;IACI;IACA;;EAEJ;IACI;;EAEJ;IACI;;;EAMJ;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;;;EAGJ;IACI;;EACA;IACI;IACA;;;EAIR;IACI;;;EAEJ;IACI;IACA;;;EAGJ;IACI;;;EAKI;IACI;;;AAUhB;EACI;IACI;IACA;;;EAEJ;IACI;;;EAEJ;IACI;;;AAIR;EACI;IACI;;;EAEJ;IACI;;;AAIR;EACI;IACI;;EACA;IACI;;;EAIJ;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;;;EAEJ;IACI;;;EAEJ;IACI;IACA;;;EAIA;IACI;;EAEJ;IACI;IACA;;;EAIR;IACI;IACA;IACA;IACA;;EACA;IACI;IACA;IACA;;;AAIZ;EACI;IACI;;;EAEJ;IACI;;;EAEJ;IACI;;;EAGJ;IACI;;;EAGA;IACI;;EACA;IACI;;EAEJ;IACI","file":"styles.css"} -------------------------------------------------------------------------------- /styles/_media.scss: -------------------------------------------------------------------------------- 1 | .about-container .left-about p{ 2 | padding-left: 0; 3 | } 4 | 5 | @media screen and (max-width: 600px) { 6 | header{ 7 | padding: 0 !important; 8 | } 9 | .theme-btn{ 10 | width: 50px; 11 | height: 50px; 12 | } 13 | .header-content{ 14 | grid-template-columns: repeat(1, 1fr); 15 | padding-bottom: 6rem; 16 | } 17 | 18 | .left-header{ 19 | .h-shape{ 20 | display: none; 21 | } 22 | } 23 | .right-header{ 24 | grid-row: 1; 25 | padding-right: 0rem !important; 26 | width: 90%; 27 | margin: 0 auto; 28 | .name{ 29 | font-size: 2.5rem !important; 30 | text-align: center; 31 | padding-top: 3rem; 32 | } 33 | } 34 | .header-content .left-header .image{ 35 | margin: 0 auto; 36 | width: 90%; 37 | } 38 | 39 | .controls{ 40 | top: auto; 41 | bottom: 0; 42 | flex-direction: row; 43 | justify-content: center; 44 | left: 50%; 45 | transform: translateX(-50%); 46 | width: 100%; 47 | background-color: var(--color-grey-5); 48 | .control{ 49 | margin: 1rem .3rem; 50 | } 51 | } 52 | 53 | .about-container{ 54 | grid-template-columns: repeat(1, 1fr); 55 | .right-about{ 56 | grid-template-columns: repeat(1, 1fr); 57 | padding-top: 2.5rem; 58 | } 59 | .left-about{ 60 | padding-right: 0; 61 | p{ 62 | padding-left: 0; 63 | } 64 | } 65 | } 66 | 67 | .timeline{ 68 | grid-template-columns: repeat(1, 1fr); 69 | padding-bottom: 6rem; 70 | } 71 | 72 | .container{ 73 | padding: 2rem 2.5rem !important; 74 | } 75 | 76 | .about-stats{ 77 | .progress-bars{ 78 | grid-template-columns: repeat(1, 1fr); 79 | } 80 | } 81 | 82 | .portfolios{ 83 | grid-template-columns: repeat(1, 1fr); 84 | padding-bottom: 6rem; 85 | margin-top: 1rem; 86 | } 87 | 88 | .blogs{ 89 | grid-template-columns: repeat(1, 1fr); 90 | padding-bottom: 6rem; 91 | } 92 | 93 | .contact-content-con{ 94 | flex-direction: column; 95 | .right-contact{ 96 | margin-left: 0; 97 | margin-top: 2.5rem; 98 | } 99 | 100 | } 101 | .contact-content-con .right-contact .i-c-2{ 102 | flex-direction: column; 103 | } 104 | .contact-content-con .right-contact .i-c-2 :last-child{ 105 | margin-left: 0; 106 | margin-top: 1.5rem; 107 | } 108 | 109 | .contact-content-con .right-contact{ 110 | margin-bottom: 6rem; 111 | } 112 | 113 | .contact-item{ 114 | flex-direction: column; 115 | margin: 1rem 0; 116 | p{ 117 | font-size: 15px; 118 | color: var(--color-grey-2); 119 | } 120 | span{ 121 | font-size: 15px; 122 | } 123 | .icon{ 124 | grid-template-columns: 25px 1fr; 125 | } 126 | } 127 | 128 | 129 | .main-title{ 130 | h2{ 131 | font-size: 2rem; 132 | span{ 133 | font-size: 2.3rem; 134 | } 135 | .bg-text{ 136 | font-size: 2.3rem; 137 | } 138 | } 139 | } 140 | } 141 | 142 | @media screen and (max-width:1432px){ 143 | .container{ 144 | padding: 7rem 11rem; 145 | } 146 | 147 | .contact-content-con{ 148 | flex-direction: column; 149 | .right-contact{ 150 | margin-left: 0; 151 | margin-top: 2.5rem; 152 | } 153 | 154 | } 155 | .contact-content-con .right-contact .i-c-2{ 156 | flex-direction: column; 157 | } 158 | .contact-content-con .right-contact .i-c-2 :last-child{ 159 | margin-left: 0; 160 | margin-top: 1.5rem; 161 | } 162 | 163 | .contact-content-con .right-contact{ 164 | margin-bottom: 6rem; 165 | } 166 | 167 | .main-title{ 168 | h2{ 169 | .bg-text{ 170 | font-size: 5.5rem; 171 | } 172 | } 173 | } 174 | 175 | } 176 | 177 | 178 | 179 | 180 | @media screen and (max-width:1250px){ 181 | .blogs{ 182 | grid-template-columns: repeat(2, 1fr); 183 | margin-top: 6rem; 184 | } 185 | .portfolios{ 186 | grid-template-columns: repeat(2, 1fr); 187 | } 188 | .header-content .right-header{ 189 | padding-right: 9rem; 190 | } 191 | 192 | } 193 | @media screen and (max-width:660px){ 194 | .blogs{ 195 | grid-template-columns: repeat(1, 1fr); 196 | } 197 | .portfolios{ 198 | grid-template-columns: repeat(1, 1fr); 199 | } 200 | } 201 | 202 | @media screen and (max-width:1070px){ 203 | .about-container{ 204 | grid-template-columns: repeat(1, 1fr); 205 | .right-about{ 206 | padding-top: 2.5rem; 207 | } 208 | } 209 | .main-title{ 210 | h2{ 211 | font-size: 4rem; 212 | span{ 213 | font-size: 4rem; 214 | } 215 | .bg-text{ 216 | font-size: 4.5rem; 217 | } 218 | } 219 | } 220 | } 221 | 222 | @media screen and (max-width:970px){ 223 | .container{ 224 | padding: 7rem 6rem; 225 | } 226 | .about-container .left-about{ 227 | padding-right: 0rem; 228 | } 229 | .header-content{ 230 | grid-template-columns: repeat(1, 1fr); 231 | padding-bottom: 6rem; 232 | } 233 | 234 | .left-header{ 235 | .h-shape{ 236 | display: none; 237 | } 238 | .image{ 239 | width: 90% !important; 240 | margin: 0 auto !important; 241 | 242 | } 243 | } 244 | .right-header{ 245 | grid-row: 1; 246 | padding-right: 0rem !important; 247 | width: 90%; 248 | margin: 0 auto; 249 | .name{ 250 | font-size: 2.5rem !important; 251 | text-align: center; 252 | padding-top: 3rem; 253 | } 254 | } 255 | } 256 | @media screen and (max-width:700px){ 257 | .container{ 258 | padding: 7rem 3rem; 259 | } 260 | .about-stats .progress-bars{ 261 | grid-template-columns: repeat(1, 1fr); 262 | } 263 | .about-container .right-about{ 264 | grid-template-columns: repeat(1, 1fr); 265 | } 266 | 267 | .timeline{ 268 | grid-template-columns: repeat(1, 1fr); 269 | } 270 | .main-title{ 271 | h2{ 272 | font-size: 3rem; 273 | span{ 274 | font-size: 3rem; 275 | } 276 | .bg-text{ 277 | font-size: 4rem; 278 | } 279 | } 280 | } 281 | } -------------------------------------------------------------------------------- /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: #454e56; 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,.3); 22 | } 23 | 24 | .light-mode { 25 | --color-primary: #FFFFFF; 26 | --color-secondary: #F56692; 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 .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 | color: var(--color-white); 56 | overflow: hidden; 57 | padding: 0 !important; 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 | .container { 70 | display: none; 71 | transform: translateY(-100%) scale(0); 72 | transition: all .4s ease-in-out; 73 | background-color: var(--color-primary); 74 | } 75 | 76 | 77 | .active { 78 | display: block; 79 | animation: appear 1s ease-in-out; 80 | transform: translateY(0) scaleY(1); 81 | @keyframes appear { 82 | 0%{ transform: translateY(-100%) scaleY(0); } 83 | 100%{ transform: translateY(0) scaleY(1); } 84 | } 85 | } 86 | 87 | //Controls 88 | .controls { 89 | position: fixed; 90 | z-index: 10; 91 | top: 50%; 92 | right: 3%; 93 | display: flex; 94 | flex-direction: column; 95 | align-items: center; 96 | justify-content: center; 97 | transform: translateY(-50%); 98 | .control{ 99 | padding: 1rem; 100 | cursor: pointer; 101 | background-color: var(--color-grey-4); 102 | width: 55px; 103 | height: 55px; 104 | border-radius: 50%; 105 | display: flex; 106 | justify-content: center; 107 | align-items: center; 108 | margin: .7rem 0; 109 | box-shadow: var(--box-shadow-1) ; 110 | i { 111 | font-size: 1.2rem; 112 | color: var(--color-grey-2); 113 | pointer-events: none; 114 | } 115 | } 116 | .active-btn { 117 | background-color: var(--color-secondary); 118 | transition: all .4s ease-in-out; 119 | i { color: var(--color-white); } 120 | } 121 | } 122 | 123 | .theme-btn { 124 | top: 5%; 125 | right: 3%; 126 | width: 70px; 127 | height: 70px; 128 | border-radius: 50%; 129 | background-color: var(--color-grey-4); 130 | cursor: pointer; 131 | position: fixed; 132 | display: flex; 133 | justify-content: center; 134 | align-items: center; 135 | box-shadow: 0 3px 15px rgba(0,0,0,.3); 136 | transition: all .1s ease-in-out; 137 | &:active{ transform: translateY(-3px); } 138 | i{ 139 | font-size: 1.4rem; 140 | color: var(--color-grey-2); 141 | pointer-events: none; 142 | } 143 | } 144 | 145 | 146 | /*Header-content*/ 147 | .header-content { 148 | display: grid; 149 | grid-template-columns: repeat(2, 1fr); 150 | min-height: 100vh; 151 | .left-header { 152 | display: flex; 153 | align-items: center; 154 | position: relative; 155 | .h-shape { 156 | transition: all .4s ease-in-out; 157 | width: 65%; 158 | height: 100%; 159 | background-color: var(--color-secondary); 160 | position: absolute; 161 | left: 0; 162 | top: 0; 163 | z-index: -1; 164 | clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); 165 | } 166 | .image { 167 | border-radius: var(--br-sm-2); 168 | height: 90%; 169 | width: 68%; 170 | margin-left: 4rem; 171 | background-color: var(--color-black); 172 | transition: all .4s ease-in-out; 173 | img { 174 | width: 100%; 175 | height: 100%; 176 | object-fit: cover; 177 | transition: all .4s ease-in-out; 178 | filter: grayscale(100%); 179 | &:hover{ 180 | filter: grayscale(0); 181 | } 182 | } 183 | } 184 | } 185 | 186 | .right-header { 187 | display: flex; 188 | flex-direction: column; 189 | justify-content: center; 190 | padding-right: 18rem; 191 | .name { 192 | font-size: 3rem; 193 | span { color: var(--color-secondary); } 194 | } 195 | p { 196 | margin: 1.5rem 0; 197 | line-height: 2rem; 198 | } 199 | } 200 | } 201 | 202 | /*About*/ 203 | .about-container { 204 | display: grid; 205 | grid-template-columns: repeat(2, 1fr); 206 | padding-top: 3.5rem; 207 | padding-bottom: 5rem; 208 | .right-about { 209 | display: grid; 210 | grid-template-columns: repeat(2, 1fr); 211 | grid-gap: 2rem; 212 | .about-item { 213 | border: 1px solid var(--color-grey-5); 214 | border-radius: 5px; 215 | transition: all .4s ease-in-out; 216 | box-shadow: 1px 2px 15px rgba(0,0,0,.1); 217 | &:hover { 218 | cursor: default; 219 | transform: translateY(-5px); 220 | border: 1px solid var(--color-secondary); 221 | box-shadow: 1px 4px 15px rgba(0,0,0,.32); 222 | } 223 | .abt-text { 224 | padding: 1.5rem; 225 | display: flex; 226 | flex-direction: column; 227 | .large-text { 228 | font-size: 3rem; 229 | font-weight: 700; 230 | color: var(--color-secondary); 231 | } 232 | .small-text { 233 | padding-left: 3rem; 234 | position: relative; 235 | text-transform: uppercase; 236 | font-size: 1.2rem; 237 | color: var(--color-grey-1); 238 | letter-spacing: 2px; 239 | &::before { 240 | content: ''; 241 | position: absolute; 242 | left: 0; 243 | top: 15px; 244 | width: 2rem; 245 | height: 2px; 246 | background-color: var(--color-grey-5); 247 | } 248 | } 249 | } 250 | } 251 | } 252 | 253 | .left-about { 254 | padding-right: 5rem; 255 | p { 256 | line-height: 2rem; 257 | padding: 1rem; 258 | color: var(--color-grey-1); 259 | } 260 | h4 { 261 | font-size: 2rem; 262 | text-transform: uppercase; 263 | } 264 | } 265 | } 266 | 267 | .about-stats { 268 | padding-bottom: 4rem; 269 | .progress-bars { 270 | display: grid; 271 | grid-template-columns: repeat(2, 1fr); 272 | grid-gap: 2rem; 273 | .progress-bar { 274 | display: flex; 275 | flex-direction: column; 276 | .prog-title { 277 | text-transform: uppercase; 278 | font-weight: 500; 279 | } 280 | .progress-con { 281 | display: flex; 282 | align-items: center; 283 | .prog-text { 284 | color: var(--color-grey-2); 285 | } 286 | .progress { 287 | width: 100%; 288 | height: .45rem; 289 | background-color: var(--color-grey-4); 290 | margin-left: 1rem; 291 | position: relative; 292 | span { 293 | position: absolute; 294 | top: 0; 295 | left: 0; 296 | height: 100%; 297 | background-color: var(--color-secondary); 298 | transition: all .4s ease-in-out; 299 | width: 60%; 300 | } 301 | .html { width: 80%; } 302 | .css { width: 95%; } 303 | .js { width: 75%; } 304 | .react{ width: 60%; } 305 | .node{ width: 87%; } 306 | .python{ width: 70%; } 307 | } 308 | } 309 | } 310 | } 311 | } 312 | .stat-title { 313 | text-transform: uppercase; 314 | font-size: 1.4rem; 315 | text-align: center; 316 | padding: 3.5rem 0; 317 | position: relative; 318 | &::before { 319 | content: ''; 320 | position: absolute; 321 | left: 50%; 322 | top: 0; 323 | width: 40%; 324 | height: 1px; 325 | background-color: var(--color-grey-5); 326 | transform: translateX(-50%); 327 | } 328 | } 329 | 330 | /*Timeline*/ 331 | .timeline { 332 | display: grid; 333 | grid-template-columns: repeat(2, 1fr); 334 | grid-gap: 2rem; 335 | padding-bottom: 3rem; 336 | .timeline-item { 337 | position: relative; 338 | padding-left: 3rem; 339 | border-left: 1px solid var(--color-grey-5); 340 | .tl-icon { 341 | position: absolute; 342 | left: -27px; 343 | top: 0; 344 | background-color: var(--color-secondary); 345 | width: 50px; 346 | height: 50px; 347 | border-radius: 50%; 348 | display: flex; 349 | align-items: center; 350 | justify-content: center; 351 | i { font-size: 1.3rem; } 352 | } 353 | .tl-duration { 354 | padding: .2rem .6rem; 355 | background-color: var(--color-grey-5); 356 | border-radius: 15px; 357 | display: inline-block; 358 | font-size: .8rem; 359 | text-transform: uppercase; 360 | font-weight: 500; 361 | } 362 | h5 { 363 | padding: 1rem 0; 364 | text-transform: uppercase; 365 | font-size: 1.3rem; 366 | font-weight: 600; 367 | span { 368 | color: var(--color-grey-2); 369 | font-weight: 500; 370 | font-size: 1.2rem; 371 | } 372 | } 373 | p{ color: var(--color-grey-2); } 374 | } 375 | } 376 | 377 | //Portfolios 378 | .port-text { 379 | padding: 2rem 0; 380 | text-align: center; 381 | } 382 | 383 | .portfolios { 384 | display: grid; 385 | grid-template-columns: repeat(3, 1fr); 386 | grid-gap: 2rem; 387 | margin-top: 3rem; 388 | .portfolio-item { 389 | position: relative; 390 | border-radius: 15px; 391 | img { 392 | width: 100%; 393 | height: 300px; 394 | object-fit: cover; 395 | border-radius: 15px; 396 | } 397 | .hover-items { 398 | width: 100%; 399 | height: 100%; 400 | background-color: var(--color-secondary); 401 | position: absolute; 402 | left: 0; 403 | top: 0; 404 | border-radius: 15px; 405 | display: flex; 406 | justify-content: center; 407 | align-items: center; 408 | flex-direction: column; 409 | opacity: 0; 410 | transform: scale(0); 411 | transition: all .4s ease-in-out; 412 | h3 { 413 | font-size: 1.5rem; 414 | color: var(--color-white); 415 | margin-bottom: 1.5rem; 416 | } 417 | .icons { 418 | display: flex; 419 | justify-content: center; 420 | align-items: center; 421 | .icon { 422 | background-color: var(--color-primary); 423 | border-radius: 50%; 424 | width: 50px; 425 | height: 50px; 426 | display: flex; 427 | align-items: center; 428 | justify-content: center; 429 | margin: 0 1rem; 430 | cursor: pointer; 431 | transition: all .4s ease-in-out; 432 | i { 433 | font-size: 1.5rem; 434 | color: var(--color-white); 435 | margin: 0 1rem; 436 | } 437 | &:hover { 438 | background-color: var(--color-white); 439 | i { color: var(--color-primary); } 440 | } 441 | } 442 | } 443 | } 444 | } 445 | } 446 | 447 | .portfolio-item:hover .hover-items { 448 | opacity: 1; 449 | transform: scale(1); 450 | } 451 | 452 | //Blogs Section 453 | .blogs { 454 | display: grid; 455 | grid-template-columns: repeat(3, 1fr); 456 | grid-gap: 2rem; 457 | margin-top: 3rem; 458 | .blog { 459 | position: relative; 460 | background-color: var(--color-grey-5); 461 | border-radius: 5px; 462 | box-shadow: 1px 1px 20px rgba(0,0,0,.1); 463 | transition: all .4s ease-in-out; 464 | &:hover { 465 | box-shadow: 1px 1px 20px rgba(0,0,0,.3); 466 | transform: translateY(-5px); 467 | transition: all .4s ease-in-out; 468 | img { 469 | filter: grayscale(0); 470 | transform: scale(1.1); 471 | box-shadow: 0px 4px 15px rgba(0,0,0,0.8); 472 | } 473 | } 474 | img { 475 | width: 100%; 476 | height: 300px; 477 | object-fit: cover; 478 | border-top-left-radius: 5px; 479 | border-top-right-radius: 5px; 480 | filter: grayscale(100%); 481 | transition: all .4s ease-in-out; 482 | } 483 | .blog-text { 484 | margin-top: -7px; 485 | padding: 1.1rem; 486 | border-top: 8px solid var(--color-secondary); 487 | h4 { 488 | font-size: 1.5rem; 489 | margin-bottom: .7rem; 490 | transition: all .4s ease-in-out; 491 | cursor: pointer; 492 | &:hover { color: var(--color-secondary); } 493 | } 494 | p{ 495 | color: var(--color-grey-2); 496 | line-height: 2rem; 497 | padding-bottom: 1rem; 498 | } 499 | } 500 | } 501 | } 502 | 503 | 504 | //Contact section 505 | .contact-content-con { 506 | display: flex; 507 | padding-top: 3.5rem; 508 | .left-contact { 509 | flex: 2; 510 | h4 { 511 | margin-top: 1rem; 512 | font-size: 2rem; 513 | text-transform: uppercase; 514 | } 515 | p { 516 | margin: 1rem 0; 517 | line-height: 2rem; 518 | } 519 | 520 | .contact-info { 521 | .contact-item { 522 | display: flex; 523 | align-items: center; 524 | justify-content: space-between; 525 | p { 526 | margin: .3rem 0 !important; 527 | padding: 0 !important; 528 | } 529 | .icon { 530 | display: grid; 531 | grid-template-columns: 40px 1fr; 532 | i { 533 | display: flex; 534 | align-items: center; 535 | font-size: 1.3rem; 536 | } 537 | } 538 | } 539 | } 540 | 541 | .contact-icon { 542 | display: flex; 543 | margin-top: 2rem; 544 | a { 545 | display: flex; 546 | align-items: center; 547 | color: var(--color-white); 548 | background-color: var(--color-grey-5); 549 | cursor: pointer; 550 | justify-content: center; 551 | width: 50px; 552 | height: 50px; 553 | border-radius: 50%; 554 | margin: 0 .4rem; 555 | transition: all .4s ease-in-out; 556 | &:hover { 557 | background-color: var(--color-secondary); 558 | i { color: var(--color-primary); } 559 | } 560 | i { 561 | display: flex; 562 | align-items: center; 563 | justify-content: center; 564 | font-size: 1.3rem; 565 | } 566 | } 567 | } 568 | } 569 | 570 | .right-contact { 571 | flex: 3; 572 | margin-left: 3rem; 573 | .input-control { 574 | margin: 1.5rem 0; 575 | input, textarea { 576 | border-radius: 30px; 577 | font-weight: inherit; 578 | font-size: inherit; 579 | font-family: inherit; 580 | padding: .8rem 1.1rem; 581 | outline: none; 582 | border: none; 583 | background-color: var(--color-grey-5); 584 | width: 100%; 585 | color: var(--color-white); 586 | resize: none; 587 | } 588 | } 589 | .i-c-2 { 590 | display: flex; 591 | :last-child{ 592 | margin-left: 1.5rem; 593 | } 594 | } 595 | .submit-btn { 596 | display: flex; 597 | justify-content: flex-start; 598 | } 599 | } 600 | } 601 | 602 | 603 | /*Independed components*/ 604 | .btn-con { 605 | display: flex; 606 | align-self: flex-start; 607 | } 608 | .main-btn { 609 | border-radius: 30px; 610 | color: inherit; 611 | font-weight: 600; 612 | position: relative; 613 | border: 1px solid var(--color-secondary); 614 | display: flex; 615 | align-self: flex-start; 616 | align-items: center; 617 | overflow: hidden; 618 | .btn-text { padding: 0 2rem; } 619 | .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 | &::before { 628 | content: ''; 629 | position: absolute; 630 | top: 0; 631 | right: 0; 632 | transform: translateX(100%); 633 | transition: all .4s ease-out; 634 | z-index: -1; 635 | } 636 | &:hover { 637 | transition: all .4s ease-out; 638 | &::before { 639 | width: 100%; 640 | height: 100%; 641 | background-color: var(--color-secondary); 642 | transform: translateX(0); 643 | transition: all .4s ease-out; 644 | } 645 | } 646 | 647 | } 648 | 649 | .main-title { 650 | text-align: center; 651 | h2 { 652 | position: relative; 653 | text-transform: uppercase; 654 | font-size: 4rem; 655 | font-weight: 700; 656 | span { color: var(--color-secondary); } 657 | .bg-text { 658 | position: absolute; 659 | top: 50%; 660 | left: 50%; 661 | color: var(--color-grey-5); 662 | transition: all .4s ease-in-out; 663 | z-index: -1; 664 | transform: translate(-50%, -50%); 665 | font-weight: 800; 666 | font-size: 6.3rem; 667 | } 668 | } 669 | } 670 | 671 | @import './media'; -------------------------------------------------------------------------------- /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: #454e56; 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,.3); 22 | } 23 | 24 | .light-mode { 25 | --color-primary: #FFFFFF; 26 | --color-secondary: #F56692; 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 | color: var(--color-white); 56 | overflow: hidden; 57 | padding: 0 !important; 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 | .container { 70 | display: none; 71 | transform: translateY(-100%) scale(0); 72 | transition: all 0.4s ease-in-out; 73 | background-color: var(--color-primary); 74 | } 75 | 76 | .active { 77 | display: block; 78 | animation: appear 1s ease-in-out; 79 | transform: translateY(0) scaleY(1); 80 | } 81 | @keyframes appear { 82 | 0% { 83 | transform: translateY(-100%) scaleY(0); 84 | } 85 | 100% { 86 | transform: translateY(0) scaleY(1); 87 | } 88 | } 89 | 90 | .controls { 91 | position: fixed; 92 | z-index: 10; 93 | top: 50%; 94 | right: 3%; 95 | display: flex; 96 | flex-direction: column; 97 | align-items: center; 98 | justify-content: center; 99 | transform: translateY(-50%); 100 | } 101 | .controls .control { 102 | padding: 1rem; 103 | cursor: pointer; 104 | background-color: var(--color-grey-4); 105 | width: 55px; 106 | height: 55px; 107 | border-radius: 50%; 108 | display: flex; 109 | justify-content: center; 110 | align-items: center; 111 | margin: 0.7rem 0; 112 | box-shadow: var(--box-shadow-1); 113 | } 114 | .controls .control i { 115 | font-size: 1.2rem; 116 | color: var(--color-grey-2); 117 | pointer-events: none; 118 | } 119 | .controls .active-btn { 120 | background-color: var(--color-secondary); 121 | transition: all 0.4s ease-in-out; 122 | } 123 | .controls .active-btn i { 124 | color: var(--color-white); 125 | } 126 | 127 | .theme-btn { 128 | top: 5%; 129 | right: 3%; 130 | width: 70px; 131 | height: 70px; 132 | border-radius: 50%; 133 | background-color: var(--color-grey-4); 134 | cursor: pointer; 135 | position: fixed; 136 | display: flex; 137 | justify-content: center; 138 | align-items: center; 139 | box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3); 140 | transition: all 0.1s ease-in-out; 141 | } 142 | .theme-btn:active { 143 | transform: translateY(-3px); 144 | } 145 | .theme-btn i { 146 | font-size: 1.4rem; 147 | color: var(--color-grey-2); 148 | pointer-events: none; 149 | } 150 | 151 | /*Header-content*/ 152 | .header-content { 153 | display: grid; 154 | grid-template-columns: repeat(2, 1fr); 155 | min-height: 100vh; 156 | } 157 | .header-content .left-header { 158 | display: flex; 159 | align-items: center; 160 | position: relative; 161 | } 162 | .header-content .left-header .h-shape { 163 | transition: all 0.4s ease-in-out; 164 | width: 65%; 165 | height: 100%; 166 | background-color: var(--color-secondary); 167 | position: absolute; 168 | left: 0; 169 | top: 0; 170 | z-index: -1; 171 | clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); 172 | } 173 | .header-content .left-header .image { 174 | border-radius: var(--br-sm-2); 175 | height: 90%; 176 | width: 68%; 177 | margin-left: 4rem; 178 | background-color: var(--color-black); 179 | transition: all 0.4s ease-in-out; 180 | } 181 | .header-content .left-header .image img { 182 | width: 100%; 183 | height: 100%; 184 | object-fit: cover; 185 | transition: all 0.4s ease-in-out; 186 | filter: grayscale(100%); 187 | } 188 | .header-content .left-header .image img:hover { 189 | filter: grayscale(0); 190 | } 191 | .header-content .right-header { 192 | display: flex; 193 | flex-direction: column; 194 | justify-content: center; 195 | padding-right: 18rem; 196 | } 197 | .header-content .right-header .name { 198 | font-size: 3rem; 199 | } 200 | .header-content .right-header .name span { 201 | color: var(--color-secondary); 202 | } 203 | .header-content .right-header p { 204 | margin: 1.5rem 0; 205 | line-height: 2rem; 206 | } 207 | 208 | /*About*/ 209 | .about-container { 210 | display: grid; 211 | grid-template-columns: repeat(2, 1fr); 212 | padding-top: 3.5rem; 213 | padding-bottom: 5rem; 214 | } 215 | .about-container .right-about { 216 | display: grid; 217 | grid-template-columns: repeat(2, 1fr); 218 | grid-gap: 2rem; 219 | } 220 | .about-container .right-about .about-item { 221 | border: 1px solid var(--color-grey-5); 222 | border-radius: 5px; 223 | transition: all 0.4s ease-in-out; 224 | box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1); 225 | } 226 | .about-container .right-about .about-item:hover { 227 | cursor: default; 228 | transform: translateY(-5px); 229 | border: 1px solid var(--color-secondary); 230 | box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); 231 | } 232 | .about-container .right-about .about-item .abt-text { 233 | padding: 1.5rem; 234 | display: flex; 235 | flex-direction: column; 236 | } 237 | .about-container .right-about .about-item .abt-text .large-text { 238 | font-size: 3rem; 239 | font-weight: 700; 240 | color: var(--color-secondary); 241 | } 242 | .about-container .right-about .about-item .abt-text .small-text { 243 | padding-left: 3rem; 244 | position: relative; 245 | text-transform: uppercase; 246 | font-size: 1.2rem; 247 | color: var(--color-grey-1); 248 | letter-spacing: 2px; 249 | } 250 | .about-container .right-about .about-item .abt-text .small-text::before { 251 | content: ""; 252 | position: absolute; 253 | left: 0; 254 | top: 15px; 255 | width: 2rem; 256 | height: 2px; 257 | background-color: var(--color-grey-5); 258 | } 259 | .about-container .left-about { 260 | padding-right: 5rem; 261 | } 262 | .about-container .left-about p { 263 | line-height: 2rem; 264 | padding: 1rem; 265 | color: var(--color-grey-1); 266 | } 267 | .about-container .left-about h4 { 268 | font-size: 2rem; 269 | text-transform: uppercase; 270 | } 271 | 272 | .about-stats { 273 | padding-bottom: 4rem; 274 | } 275 | .about-stats .progress-bars { 276 | display: grid; 277 | grid-template-columns: repeat(2, 1fr); 278 | grid-gap: 2rem; 279 | } 280 | .about-stats .progress-bars .progress-bar { 281 | display: flex; 282 | flex-direction: column; 283 | } 284 | .about-stats .progress-bars .progress-bar .prog-title { 285 | text-transform: uppercase; 286 | font-weight: 500; 287 | } 288 | .about-stats .progress-bars .progress-bar .progress-con { 289 | display: flex; 290 | align-items: center; 291 | } 292 | .about-stats .progress-bars .progress-bar .progress-con .prog-text { 293 | color: var(--color-grey-2); 294 | } 295 | .about-stats .progress-bars .progress-bar .progress-con .progress { 296 | width: 100%; 297 | height: 0.45rem; 298 | background-color: var(--color-grey-4); 299 | margin-left: 1rem; 300 | position: relative; 301 | } 302 | .about-stats .progress-bars .progress-bar .progress-con .progress span { 303 | position: absolute; 304 | top: 0; 305 | left: 0; 306 | height: 100%; 307 | background-color: var(--color-secondary); 308 | transition: all 0.4s ease-in-out; 309 | width: 60%; 310 | } 311 | .about-stats .progress-bars .progress-bar .progress-con .progress .html { 312 | width: 95%; 313 | } 314 | .about-stats .progress-bars .progress-bar .progress-con .progress .css { 315 | width: 80%; 316 | } 317 | .about-stats .progress-bars .progress-bar .progress-con .progress .js { 318 | width: 75%; 319 | } 320 | .about-stats .progress-bars .progress-bar .progress-con .progress .react { 321 | width: 40%; 322 | } 323 | .about-stats .progress-bars .progress-bar .progress-con .progress .node { 324 | width: 87%; 325 | } 326 | .about-stats .progress-bars .progress-bar .progress-con .progress .python { 327 | width: 3%; 328 | } 329 | 330 | .about-stats .progress-bars .progress-bar .progress-con .progress .flutter { 331 | width: 90%; 332 | } 333 | 334 | .about-stats .progress-bars .progress-bar .progress-con .progress .solidity { 335 | width: 70%; 336 | } 337 | .about-stats .progress-bars .progress-bar .progress-con .progress .lisk { 338 | width: 55%; 339 | } 340 | .about-stats .progress-bars .progress-bar .progress-con .progress .bootstrap { 341 | width: 40%; 342 | } 343 | 344 | 345 | .stat-title { 346 | text-transform: uppercase; 347 | font-size: 1.4rem; 348 | text-align: center; 349 | padding: 3.5rem 0; 350 | position: relative; 351 | } 352 | .stat-title::before { 353 | content: ""; 354 | position: absolute; 355 | left: 50%; 356 | top: 0; 357 | width: 40%; 358 | height: 1px; 359 | background-color: var(--color-grey-5); 360 | transform: translateX(-50%); 361 | } 362 | 363 | /*Timeline*/ 364 | .timeline { 365 | display: grid; 366 | grid-template-columns: repeat(2, 1fr); 367 | grid-gap: 2rem; 368 | padding-bottom: 3rem; 369 | } 370 | .timeline .timeline-item { 371 | position: relative; 372 | padding-left: 3rem; 373 | border-left: 1px solid var(--color-grey-5); 374 | } 375 | .timeline .timeline-item .tl-icon { 376 | position: absolute; 377 | left: -27px; 378 | top: 0; 379 | background-color: var(--color-secondary); 380 | width: 50px; 381 | height: 50px; 382 | border-radius: 50%; 383 | display: flex; 384 | align-items: center; 385 | justify-content: center; 386 | } 387 | .timeline .timeline-item .tl-icon i { 388 | font-size: 1.3rem; 389 | } 390 | .timeline .timeline-item .tl-duration { 391 | padding: 0.2rem 0.6rem; 392 | background-color: var(--color-grey-5); 393 | border-radius: 15px; 394 | display: inline-block; 395 | font-size: 0.8rem; 396 | text-transform: uppercase; 397 | font-weight: 500; 398 | } 399 | .timeline .timeline-item h5 { 400 | padding: 1rem 0; 401 | text-transform: uppercase; 402 | font-size: 1.3rem; 403 | font-weight: 600; 404 | } 405 | .timeline .timeline-item h5 span { 406 | color: var(--color-grey-2); 407 | font-weight: 500; 408 | font-size: 1.2rem; 409 | } 410 | .timeline .timeline-item p { 411 | color: var(--color-grey-2); 412 | } 413 | 414 | .port-text { 415 | padding: 2rem 0; 416 | text-align: center; 417 | } 418 | 419 | .portfolios { 420 | display: grid; 421 | grid-template-columns: repeat(3, 1fr); 422 | grid-gap: 2rem; 423 | margin-top: 3rem; 424 | } 425 | .portfolios .portfolio-item { 426 | position: relative; 427 | border-radius: 15px; 428 | } 429 | .portfolios .portfolio-item img { 430 | width: 100%; 431 | height: 300px; 432 | object-fit: cover; 433 | border-radius: 15px; 434 | } 435 | .portfolios .portfolio-item .hover-items { 436 | width: 100%; 437 | height: 100%; 438 | background-color: var(--color-secondary); 439 | position: absolute; 440 | left: 0; 441 | top: 0; 442 | border-radius: 15px; 443 | display: flex; 444 | justify-content: center; 445 | align-items: center; 446 | flex-direction: column; 447 | opacity: 0; 448 | transform: scale(0); 449 | transition: all 0.4s ease-in-out; 450 | } 451 | .portfolios .portfolio-item .hover-items h3 { 452 | font-size: 1.5rem; 453 | color: var(--color-white); 454 | margin-bottom: 1.5rem; 455 | } 456 | .portfolios .portfolio-item .hover-items .icons { 457 | display: flex; 458 | justify-content: center; 459 | align-items: center; 460 | } 461 | .portfolios .portfolio-item .hover-items .icons .icon { 462 | background-color: var(--color-primary); 463 | border-radius: 50%; 464 | width: 50px; 465 | height: 50px; 466 | display: flex; 467 | align-items: center; 468 | justify-content: center; 469 | margin: 0 1rem; 470 | cursor: pointer; 471 | transition: all 0.4s ease-in-out; 472 | } 473 | .portfolios .portfolio-item .hover-items .icons .icon i { 474 | font-size: 1.5rem; 475 | color: var(--color-white); 476 | margin: 0 1rem; 477 | } 478 | .portfolios .portfolio-item .hover-items .icons .icon:hover { 479 | background-color: var(--color-white); 480 | } 481 | .portfolios .portfolio-item .hover-items .icons .icon:hover i { 482 | color: var(--color-primary); 483 | } 484 | 485 | .portfolio-item:hover .hover-items { 486 | opacity: 1; 487 | transform: scale(1); 488 | } 489 | 490 | .blogs { 491 | display: grid; 492 | grid-template-columns: repeat(3, 1fr); 493 | grid-gap: 2rem; 494 | margin-top: 3rem; 495 | } 496 | .blogs .blog { 497 | position: relative; 498 | background-color: var(--color-grey-5); 499 | border-radius: 5px; 500 | box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1); 501 | transition: all 0.4s ease-in-out; 502 | } 503 | .blogs .blog:hover { 504 | box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3); 505 | transform: translateY(-5px); 506 | transition: all 0.4s ease-in-out; 507 | } 508 | .blogs .blog:hover img { 509 | filter: grayscale(0); 510 | transform: scale(1.1); 511 | box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.8); 512 | } 513 | .blogs .blog img { 514 | width: 100%; 515 | height: 300px; 516 | object-fit: cover; 517 | border-top-left-radius: 5px; 518 | border-top-right-radius: 5px; 519 | filter: grayscale(100%); 520 | transition: all 0.4s ease-in-out; 521 | } 522 | .blogs .blog .blog-text { 523 | margin-top: -7px; 524 | padding: 1.1rem; 525 | border-top: 8px solid var(--color-secondary); 526 | } 527 | .blogs .blog .blog-text h4 { 528 | font-size: 1.5rem; 529 | margin-bottom: 0.7rem; 530 | transition: all 0.4s ease-in-out; 531 | cursor: pointer; 532 | } 533 | .blogs .blog .blog-text h4:hover { 534 | color: var(--color-secondary); 535 | } 536 | .blogs .blog .blog-text p { 537 | color: var(--color-grey-2); 538 | line-height: 2rem; 539 | padding-bottom: 1rem; 540 | } 541 | 542 | .contact-content-con { 543 | display: flex; 544 | padding-top: 3.5rem; 545 | } 546 | .contact-content-con .left-contact { 547 | flex: 2; 548 | } 549 | .contact-content-con .left-contact h4 { 550 | margin-top: 1rem; 551 | font-size: 2rem; 552 | text-transform: uppercase; 553 | } 554 | .contact-content-con .left-contact p { 555 | margin: 1rem 0; 556 | line-height: 2rem; 557 | } 558 | .contact-content-con .left-contact .contact-info .contact-item { 559 | display: flex; 560 | align-items: center; 561 | justify-content: space-between; 562 | } 563 | .contact-content-con .left-contact .contact-info .contact-item p { 564 | margin: 0.3rem 0 !important; 565 | padding: 0 !important; 566 | } 567 | .contact-content-con .left-contact .contact-info .contact-item .icon { 568 | display: grid; 569 | grid-template-columns: 40px 1fr; 570 | } 571 | .contact-content-con .left-contact .contact-info .contact-item .icon i { 572 | display: flex; 573 | align-items: center; 574 | font-size: 1.3rem; 575 | } 576 | .contact-content-con .left-contact .contact-icon { 577 | display: flex; 578 | margin-top: 2rem; 579 | } 580 | .contact-content-con .left-contact .contact-icon a { 581 | display: flex; 582 | align-items: center; 583 | color: var(--color-white); 584 | background-color: var(--color-grey-5); 585 | cursor: pointer; 586 | justify-content: center; 587 | width: 50px; 588 | height: 50px; 589 | border-radius: 50%; 590 | margin: 0 0.4rem; 591 | transition: all 0.4s ease-in-out; 592 | } 593 | .contact-content-con .left-contact .contact-icon a:hover { 594 | background-color: var(--color-secondary); 595 | } 596 | .contact-content-con .left-contact .contact-icon a:hover i { 597 | color: var(--color-primary); 598 | } 599 | .contact-content-con .left-contact .contact-icon a i { 600 | display: flex; 601 | align-items: center; 602 | justify-content: center; 603 | font-size: 1.3rem; 604 | } 605 | .contact-content-con .right-contact { 606 | flex: 3; 607 | margin-left: 3rem; 608 | } 609 | .contact-content-con .right-contact .input-control { 610 | margin: 1.5rem 0; 611 | } 612 | .contact-content-con .right-contact .input-control input, .contact-content-con .right-contact .input-control textarea { 613 | border-radius: 30px; 614 | font-weight: inherit; 615 | font-size: inherit; 616 | font-family: inherit; 617 | padding: 0.8rem 1.1rem; 618 | outline: none; 619 | border: none; 620 | background-color: var(--color-grey-5); 621 | width: 100%; 622 | color: var(--color-white); 623 | resize: none; 624 | } 625 | .contact-content-con .right-contact .i-c-2 { 626 | display: flex; 627 | } 628 | .contact-content-con .right-contact .i-c-2 :last-child { 629 | margin-left: 1.5rem; 630 | } 631 | .contact-content-con .right-contact .submit-btn { 632 | display: flex; 633 | justify-content: flex-start; 634 | } 635 | 636 | /*Independed components*/ 637 | .btn-con { 638 | display: flex; 639 | align-self: flex-start; 640 | } 641 | 642 | .main-btn { 643 | border-radius: 30px; 644 | color: inherit; 645 | font-weight: 600; 646 | position: relative; 647 | border: 1px solid var(--color-secondary); 648 | display: flex; 649 | align-self: flex-start; 650 | align-items: center; 651 | overflow: hidden; 652 | } 653 | .main-btn .btn-text { 654 | padding: 0 2rem; 655 | } 656 | .main-btn .btn-icon { 657 | background-color: var(--color-secondary); 658 | display: flex; 659 | align-items: center; 660 | justify-content: center; 661 | border-radius: 50%; 662 | padding: 1rem; 663 | } 664 | .main-btn::before { 665 | content: ""; 666 | position: absolute; 667 | top: 0; 668 | right: 0; 669 | transform: translateX(100%); 670 | transition: all 0.4s ease-out; 671 | z-index: -1; 672 | } 673 | .main-btn:hover { 674 | transition: all 0.4s ease-out; 675 | } 676 | .main-btn:hover::before { 677 | width: 100%; 678 | height: 100%; 679 | background-color: var(--color-secondary); 680 | transform: translateX(0); 681 | transition: all 0.4s ease-out; 682 | } 683 | 684 | .main-title { 685 | text-align: center; 686 | } 687 | .main-title h2 { 688 | position: relative; 689 | text-transform: uppercase; 690 | font-size: 4rem; 691 | font-weight: 700; 692 | } 693 | .main-title h2 span { 694 | color: var(--color-secondary); 695 | } 696 | .main-title h2 .bg-text { 697 | position: absolute; 698 | top: 50%; 699 | left: 50%; 700 | color: var(--color-grey-5); 701 | transition: all 0.4s ease-in-out; 702 | z-index: -1; 703 | transform: translate(-50%, -50%); 704 | font-weight: 800; 705 | font-size: 6.3rem; 706 | } 707 | 708 | .about-container .left-about p { 709 | padding-left: 0; 710 | } 711 | 712 | @media screen and (max-width: 600px) { 713 | header { 714 | padding: 0 !important; 715 | } 716 | 717 | .theme-btn { 718 | width: 50px; 719 | height: 50px; 720 | } 721 | 722 | .header-content { 723 | grid-template-columns: repeat(1, 1fr); 724 | padding-bottom: 6rem; 725 | } 726 | 727 | .left-header .h-shape { 728 | display: none; 729 | } 730 | 731 | .right-header { 732 | grid-row: 1; 733 | padding-right: 0rem !important; 734 | width: 90%; 735 | margin: 0 auto; 736 | } 737 | .right-header .name { 738 | font-size: 2.5rem !important; 739 | text-align: center; 740 | padding-top: 3rem; 741 | } 742 | 743 | .header-content .left-header .image { 744 | margin: 0 auto; 745 | width: 90%; 746 | } 747 | 748 | .controls { 749 | top: auto; 750 | bottom: 0; 751 | flex-direction: row; 752 | justify-content: center; 753 | left: 50%; 754 | transform: translateX(-50%); 755 | width: 100%; 756 | background-color: var(--color-grey-5); 757 | } 758 | .controls .control { 759 | margin: 1rem 0.3rem; 760 | } 761 | 762 | .about-container { 763 | grid-template-columns: repeat(1, 1fr); 764 | } 765 | .about-container .right-about { 766 | grid-template-columns: repeat(1, 1fr); 767 | padding-top: 2.5rem; 768 | } 769 | .about-container .left-about { 770 | padding-right: 0; 771 | } 772 | .about-container .left-about p { 773 | padding-left: 0; 774 | } 775 | 776 | .timeline { 777 | grid-template-columns: repeat(1, 1fr); 778 | padding-bottom: 6rem; 779 | } 780 | 781 | .container { 782 | padding: 2rem 2.5rem !important; 783 | } 784 | 785 | .about-stats .progress-bars { 786 | grid-template-columns: repeat(1, 1fr); 787 | } 788 | 789 | .portfolios { 790 | grid-template-columns: repeat(1, 1fr); 791 | padding-bottom: 6rem; 792 | margin-top: 1rem; 793 | } 794 | 795 | .blogs { 796 | grid-template-columns: repeat(1, 1fr); 797 | padding-bottom: 6rem; 798 | } 799 | 800 | .contact-content-con { 801 | flex-direction: column; 802 | } 803 | .contact-content-con .right-contact { 804 | margin-left: 0; 805 | margin-top: 2.5rem; 806 | } 807 | 808 | .contact-content-con .right-contact .i-c-2 { 809 | flex-direction: column; 810 | } 811 | 812 | .contact-content-con .right-contact .i-c-2 :last-child { 813 | margin-left: 0; 814 | margin-top: 1.5rem; 815 | } 816 | 817 | .contact-content-con .right-contact { 818 | margin-bottom: 6rem; 819 | } 820 | 821 | .contact-item { 822 | flex-direction: column; 823 | margin: 1rem 0; 824 | } 825 | .contact-item p { 826 | font-size: 15px; 827 | color: var(--color-grey-2); 828 | } 829 | .contact-item span { 830 | font-size: 15px; 831 | } 832 | .contact-item .icon { 833 | grid-template-columns: 25px 1fr; 834 | } 835 | 836 | .main-title h2 { 837 | font-size: 2rem; 838 | } 839 | .main-title h2 span { 840 | font-size: 2.3rem; 841 | } 842 | .main-title h2 .bg-text { 843 | font-size: 2.3rem; 844 | } 845 | } 846 | @media screen and (max-width: 1432px) { 847 | .container { 848 | padding: 7rem 11rem; 849 | } 850 | 851 | .contact-content-con { 852 | flex-direction: column; 853 | } 854 | .contact-content-con .right-contact { 855 | margin-left: 0; 856 | margin-top: 2.5rem; 857 | } 858 | 859 | .contact-content-con .right-contact .i-c-2 { 860 | flex-direction: column; 861 | } 862 | 863 | .contact-content-con .right-contact .i-c-2 :last-child { 864 | margin-left: 0; 865 | margin-top: 1.5rem; 866 | } 867 | 868 | .contact-content-con .right-contact { 869 | margin-bottom: 6rem; 870 | } 871 | 872 | .main-title h2 .bg-text { 873 | font-size: 5.5rem; 874 | } 875 | } 876 | @media screen and (max-width: 1250px) { 877 | .blogs { 878 | grid-template-columns: repeat(2, 1fr); 879 | margin-top: 6rem; 880 | } 881 | 882 | .portfolios { 883 | grid-template-columns: repeat(2, 1fr); 884 | } 885 | 886 | .header-content .right-header { 887 | padding-right: 9rem; 888 | } 889 | } 890 | @media screen and (max-width: 660px) { 891 | .blogs { 892 | grid-template-columns: repeat(1, 1fr); 893 | } 894 | 895 | .portfolios { 896 | grid-template-columns: repeat(1, 1fr); 897 | } 898 | } 899 | @media screen and (max-width: 1070px) { 900 | .about-container { 901 | grid-template-columns: repeat(1, 1fr); 902 | } 903 | .about-container .right-about { 904 | padding-top: 2.5rem; 905 | } 906 | 907 | .main-title h2 { 908 | font-size: 4rem; 909 | } 910 | .main-title h2 span { 911 | font-size: 4rem; 912 | } 913 | .main-title h2 .bg-text { 914 | font-size: 4.5rem; 915 | } 916 | } 917 | @media screen and (max-width: 970px) { 918 | .container { 919 | padding: 7rem 6rem; 920 | } 921 | 922 | .about-container .left-about { 923 | padding-right: 0rem; 924 | } 925 | 926 | .header-content { 927 | grid-template-columns: repeat(1, 1fr); 928 | padding-bottom: 6rem; 929 | } 930 | 931 | .left-header .h-shape { 932 | display: none; 933 | } 934 | .left-header .image { 935 | width: 90% !important; 936 | margin: 0 auto !important; 937 | } 938 | 939 | .right-header { 940 | grid-row: 1; 941 | padding-right: 0rem !important; 942 | width: 90%; 943 | margin: 0 auto; 944 | } 945 | .right-header .name { 946 | font-size: 2.5rem !important; 947 | text-align: center; 948 | padding-top: 3rem; 949 | } 950 | } 951 | @media screen and (max-width: 700px) { 952 | .container { 953 | padding: 7rem 3rem; 954 | } 955 | 956 | .about-stats .progress-bars { 957 | grid-template-columns: repeat(1, 1fr); 958 | } 959 | 960 | .about-container .right-about { 961 | grid-template-columns: repeat(1, 1fr); 962 | } 963 | 964 | .timeline { 965 | grid-template-columns: repeat(1, 1fr); 966 | } 967 | 968 | .main-title h2 { 969 | font-size: 3rem; 970 | } 971 | .main-title h2 span { 972 | font-size: 3rem; 973 | } 974 | .main-title h2 .bg-text { 975 | font-size: 4rem; 976 | } 977 | } 978 | 979 | /*# sourceMappingURL=styles.css.map */ 980 | -------------------------------------------------------------------------------- /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 Gabriel Gideon Bassey. 26 | A Web Developer. 27 |

28 |

29 | I'm a Web Developer, I love to create beautiful and functional websites. A web 3.0 / Blockchain developer building on blockchain security, Cryptocurrency and tokenomic. Currently a Cyber Security specialist on Pentesting and Enumeration (Phising and Spoofing) 30 |

31 | 37 |
38 |
39 |
40 |
41 |
42 |
43 |

About memy stats

44 |
45 |
46 |
47 |

Information About me

48 |

49 | I am Gabriel Gideon Bassey, a dedicated and innovative professional currently leading as the CEO of CarCure. My academic and practical journey in cybersecurity, focusing on Penetration Testing and Enumeration with a specialization in phishing and spoofing, reflects my deep commitment to understanding and improving digital security landscapes.
50 | 51 |
52 | 53 | My expertise extends to software development, where I am proficient in a variety of programming languages including Dart, Flutter, JavaScript, Solidity, and Python. This diverse technical skill set enables me to approach cybersecurity challenges with a developer's perspective, enhancing both problem-solving efficiency and solution effectiveness.
54 |
55 | My professional experience includes collaborative and leadership roles in dynamic companies like Cisadocs, Raphina AI, and Streamlivr, where I contributed to and led teams towards innovative solutions in the tech space. As the CEO of CarCure, I am focused on driving the company's vision, ensuring the delivery of top-notch services, and maintaining a cutting-edge in the fast-evolving automotive and tech industries. 56 |

57 | 63 |
64 |
65 |
66 |
67 |

20+

68 |

Projects
Completed

69 |
70 |
71 |
72 |
73 |

3+

74 |

Years of
experience

75 |
76 |
77 |
78 |
79 |

5

80 |

Happy
Clients

81 |
82 |
83 | 89 |
90 |
91 |
92 |

My Skills

93 |
94 |
95 |

html5

96 |
97 |

95%

98 |
99 | 100 |
101 |
102 |
103 |
104 |

css3

105 |
106 |

80%

107 |
108 | 109 |
110 |
111 |
112 |
113 |

javascript

114 |
115 |

75%

116 |
117 | 118 |
119 |
120 |
121 |
122 |

ReactJS

123 |
124 |

40%

125 |
126 | 127 |
128 |
129 |
130 |
131 |

NodeJS

132 |
133 |

87%

134 |
135 | 136 |
137 |
138 |
139 |
140 |

Python

141 |
142 |

3%

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

Flutter & Dart

150 |
151 |

90%

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

158 |
159 |

70%

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

Lisk

167 |
168 |

55%

169 |
170 | 171 |
172 |
173 |
174 |
175 |

Bootstrap

176 |
177 |

40%

178 |
179 | 180 |
181 |
182 |
183 | 192 |
193 |
194 |

My Timeline

195 |
196 |
197 |
198 | 199 |
200 |

2022 - 2023

201 |
Mobile app dev - code ambassador
202 |

203 | Studied front end mobile app dev at code Ambassador on (Dart, Flutter{Stateless Widget, Stateful Widget and State management}). 204 |

205 |
206 |
207 |
208 | 209 |
210 |

2023 - Present

211 |
Web 3.0 Developer - Streamlivr
212 |

213 | Worked as a web 3.0 Developer at Streamlivr, building on security, streaming build with tokens. 214 |

215 |
216 |
217 |
218 | 219 |
220 |

2023 - Present

221 |
Web 3.0 Developer - Raphina Ai
222 |

223 | Worked as a web 3.0 Developer at Raphina Ai, building on medical record been stored on chain and tokenomic. 224 |

225 |
226 |
227 |
228 | 229 |
230 |

2023 - Present

231 |
Flutter Dev - Cisadoc
232 |

233 | Built on the mobile app for the medical care app Cisadoc. 234 |

235 |
236 |
237 |
238 | 239 |
240 |

2023 - Present

241 |
Full stack dev - MyMarketrng
242 |

243 | Worked as a lead develper for MyMarketrng, controlling both the frontend and backend. 244 |

245 |
246 |
247 |
248 | 249 |
250 |

2023 - present

251 |
CEO || Founder - Carcure
252 |

253 | Working as a developer and business lead 254 |

255 |
256 |
257 |
258 |
259 |
260 |

My PortfolioMy Work

261 |
262 |

263 | Here is some of my work that I've done in various programming languages. 264 |

265 |
266 |
267 |
268 | 269 |
270 |
271 |

Project Source

272 |
273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 |
283 |
284 |
285 |
286 |
287 | 288 |
289 |
290 |

Project Source

291 |
292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 |
302 |
303 |
304 |
305 |
306 | 307 |
308 |
309 |

Project Source

310 |
311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 |
321 |
322 |
323 |
324 |
325 | 326 |
327 |
328 |

Project Source

329 |
330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 |
340 |
341 |
342 |
343 |
344 | 345 |
346 |
347 |

Project Source

348 |
349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 |
359 |
360 |
361 |
362 |
363 | 364 |
365 |
366 |

Project Source

367 |
368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 |
378 |
379 |
380 |
381 |
382 | 383 |
384 |
385 |

Project Source

386 |
387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 |
397 |
398 |
399 |
400 |
401 |
402 |
403 |
404 |

My BlogsMy Blogs

405 |
406 |
407 |
408 | 409 |
410 |

411 | How to Create Your Own Website 412 |

413 |

414 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 415 | Doloribus natus voluptas, eos obcaecati recusandae amet? 416 |

417 |
418 |
419 |
420 | 421 |
422 |

423 | How to Become an Expert in Web Design 424 |

425 |

426 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 427 | Doloribus natus voluptas, eos obcaecati recusandae amet? 428 |

429 |
430 |
431 |
432 | 433 |
434 |

435 | Become a Web Designer in 10 Days 436 |

437 |

438 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 439 | Doloribus natus voluptas, eos obcaecati recusandae amet? 440 |

441 |
442 |
443 |
444 | 445 |
446 |

447 | Debbuging made easy with Web Inspector 448 |

449 |

450 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 451 | Doloribus natus voluptas, eos obcaecati recusandae amet? 452 |

453 |
454 |
455 |
456 | 457 |
458 |

459 | Get started with Web Design and UI Design 460 |

461 |

462 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 463 | Doloribus natus voluptas, eos obcaecati recusandae amet? 464 |

465 |
466 |
467 |
468 | 469 |
470 |

471 | This is what you need to know about Web Design 472 |

473 |

474 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 475 | Doloribus natus voluptas, eos obcaecati recusandae amet? 476 |

477 |
478 |
479 |
480 |
481 |
482 |
483 |
484 |
485 |

Contact MeContact

486 |
487 |
488 |
489 |

Contact me here

490 |

491 | Feel free to reach out to me via email at gideongabriel557@gmail.com for any inquiries, collaborations, or opportunities. I'm always open to connecting and discussing innovative projects or potential partnerships. 492 |

493 |
494 |
495 |
496 | 497 | Location 498 |
499 |

500 | : Woji Port Harcourt, Nigeria 501 |

502 |
503 |
504 |
505 | 506 | Email 507 |
508 |

509 | : gideongabriel557@gmail.com 510 |

511 |
512 | 521 | 530 |
531 |
532 | 533 | Languages 534 |
535 |

536 | : French, English, Efik 537 |

538 |
539 |
540 |
541 |
542 | 543 | 544 | 545 | 548 | 549 | 550 | 551 | 554 |
555 |
556 |
557 |
558 |
559 |
560 | 561 | 562 |
563 |
564 | 565 |
566 |
567 | 568 |
569 | 575 |
576 |
577 |
578 |
579 |
580 |
581 | 582 |
583 |
584 | 585 |
586 |
587 | 588 |
589 |
590 | 591 |
592 | 595 |
596 | 597 |
598 |
599 |
600 | 601 |
602 | 603 | 604 | 605 | --------------------------------------------------------------------------------