├── images ├── css-logo.webp ├── hero-headshot.webp ├── html-logo.webp ├── javascript-logo.webp ├── node-logo.webp ├── react-logo.webp └── testimony-headshot.webp ├── index.html └── styles.css /images/css-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notunderctrl/portfolio-website/97d57fb85db009909a001f065559ccb09043b098/images/css-logo.webp -------------------------------------------------------------------------------- /images/hero-headshot.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notunderctrl/portfolio-website/97d57fb85db009909a001f065559ccb09043b098/images/hero-headshot.webp -------------------------------------------------------------------------------- /images/html-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notunderctrl/portfolio-website/97d57fb85db009909a001f065559ccb09043b098/images/html-logo.webp -------------------------------------------------------------------------------- /images/javascript-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notunderctrl/portfolio-website/97d57fb85db009909a001f065559ccb09043b098/images/javascript-logo.webp -------------------------------------------------------------------------------- /images/node-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notunderctrl/portfolio-website/97d57fb85db009909a001f065559ccb09043b098/images/node-logo.webp -------------------------------------------------------------------------------- /images/react-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notunderctrl/portfolio-website/97d57fb85db009909a001f065559ccb09043b098/images/react-logo.webp -------------------------------------------------------------------------------- /images/testimony-headshot.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notunderctrl/portfolio-website/97d57fb85db009909a001f065559ccb09043b098/images/testimony-headshot.webp -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Portfolio 17 | 18 | 19 | 20 | 42 | 43 |
44 | 45 |
46 |
47 |

Hi, I'm John 👋

48 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem ipsam assumenda est perspiciatis labore quasi, iure dignissimos, libero, omnis sint necessitatibus ad. Hic expedita eligendi tenetur quisquam id quaerat alias cumque, autem voluptatem in iure ut laudantium tempora cupiditate voluptate est nemo impedit, quidem iusto, provident aperiam. Iste, repellat aperiam!

49 | 50 |
51 | 52 | 53 | Skills 54 | 55 | 56 | 57 | 58 | Testimony 59 | 60 | 61 | 62 | 63 | Contact 64 | 65 |
66 |
67 | 68 |
69 | john doe headshot 70 |
71 |
72 | 73 | 74 |
75 |

Skills

76 |
77 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates, perspiciatis iure distinctio quidem aperiam necessitatibus omnis possimus excepturi amet quos rerum? Perferendis repellat natus saepe quaerat quibusdam neque recusandae optio? 78 |
79 | 80 |
81 |
82 | html logo 83 | HTML 84 |
85 | 86 |
87 | css logo 88 | CSS 89 |
90 | 91 |
92 | javascript logo 93 | JavaScript 94 |
95 | 96 |
97 | node logo 98 | Node.js 99 |
100 | 101 |
102 | react logo 103 | React.js 104 |
105 |
106 |
107 | 108 | 109 |
110 |

Testimony

111 | 112 |
113 |
114 | 115 |

John Doe

116 |

Lorem ipsum dolor sit.

117 |
118 | 119 |
120 | "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor, sint repudiandae ratione exercitationem saepe distinctio cumque quaerat nostrum laborum? Rem adipisci natus eos nemo reprehenderit, cumque nostrum enim commodi. Eum, enim vero eveniet doloremque sed veniam. Doloremque explicabo non reprehenderit expedita! Accusamus mollitia repellendus dolorum officiis libero quod deleniti cum." 121 |
122 |
123 |
124 | 125 | 126 |
127 |

Contact

128 | 129 |
130 |
131 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat fugit maiores atque architecto saepe tenetur quasi reiciendis illum sint doloremque alias inventore, asperiores maxime pariatur totam hic assumenda repudiandae, iusto quisquam nisi! Eaque doloremque perspiciatis minus voluptate dicta. A ratione autem dolor iure libero numquam voluptatem nobis laborum et corporis. 132 |
133 | 134 |
135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 |
146 |
147 |
148 |
149 | 150 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --text-color: #1a1c20; 3 | --link-color: #4a76ee; 4 | --background-color: #eeeff1; 5 | } 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | box-sizing: border-box; 11 | } 12 | 13 | html { 14 | scroll-behavior: smooth; 15 | } 16 | 17 | body { 18 | font-family: 'Poppins', sans-serif; 19 | color: var(--text-color); 20 | background-color: var(--background-color); 21 | max-width: 1400px; 22 | margin: 0 auto; 23 | } 24 | 25 | a { 26 | color: var(--link-color); 27 | text-decoration: none; 28 | } 29 | 30 | /* NAVBAR */ 31 | nav { 32 | display: flex; 33 | justify-content: space-between; 34 | align-items: center; 35 | 36 | padding: 0 50px; 37 | height: 80px; 38 | } 39 | 40 | nav .left a { 41 | color: var(--text-color); 42 | font-size: 22px; 43 | font-weight: 600; 44 | } 45 | 46 | nav .right a { 47 | color: var(--text-color); 48 | margin: 0 10px; 49 | } 50 | 51 | nav .right a:last-child { 52 | color: var(--background-color); 53 | background-color: var(--text-color); 54 | padding: 5px 15px; 55 | border-radius: 5px; 56 | } 57 | 58 | nav .right a span { 59 | margin-left: 5px; 60 | } 61 | 62 | /* SECTION 1: Hero */ 63 | .hero-section { 64 | display: flex; 65 | justify-content: space-between; 66 | align-items: center; 67 | padding: 0 50px; 68 | margin: 50px 0; 69 | margin-bottom: 100px; 70 | gap: 40px; 71 | } 72 | 73 | .hero-section .text { 74 | flex: 5; 75 | } 76 | 77 | .hero-section .text h2 { 78 | font-size: 45px; 79 | } 80 | 81 | .hero-section .text .links { 82 | margin-top: 25px; 83 | } 84 | 85 | .hero-section .text .links a { 86 | display: inline-block; 87 | padding: 5px 10px; 88 | border: 2px solid var(--link-color); 89 | border-radius: 5px; 90 | margin-right: 10px; 91 | margin-bottom: 10px; 92 | transition: .1s; 93 | } 94 | 95 | .hero-section .text .links a:hover { 96 | color: var(--text-color); 97 | border: 2px solid var(--text-color); 98 | } 99 | 100 | .hero-section .headshot { 101 | flex: 2; 102 | display: flex; 103 | justify-content: right; 104 | } 105 | 106 | .hero-section .headshot img { 107 | width: 350px; 108 | border-radius: 50%; 109 | } 110 | 111 | /* SECTION 2: Skills */ 112 | .skills-section { 113 | padding: 0 50px; 114 | margin-bottom: 100px; 115 | } 116 | 117 | .skills-section h2 { 118 | text-align: center; 119 | font-size: 35px; 120 | } 121 | 122 | .skills-section .text { 123 | text-align: center; 124 | margin-bottom: 20px; 125 | } 126 | 127 | .skills-section .cells { 128 | display: flex; 129 | justify-content: center; 130 | flex-wrap: wrap; 131 | } 132 | 133 | .skills-section .cells .cell { 134 | display: flex; 135 | justify-content: center; 136 | align-items: center; 137 | gap: 10px; 138 | 139 | width: 200px; 140 | padding: 10px 20px; 141 | margin: 10px; 142 | border: 1.5px solid #d3d3d3; 143 | border-radius: 5px; 144 | } 145 | 146 | .skills-section .cells .cell img { 147 | width: 30px; 148 | height: 30px; 149 | object-fit: contain; 150 | border-radius: 2px; 151 | } 152 | 153 | .skills-section .cells .cell span { 154 | font-size: 18px; 155 | } 156 | 157 | /* SECTION 3: Testimony */ 158 | .testimony-section { 159 | padding: 0 50px; 160 | margin-bottom: 100px; 161 | } 162 | 163 | .testimony-section h2 { 164 | font-size: 35px; 165 | margin-bottom: 30px; 166 | } 167 | 168 | .testimony-section .group { 169 | display: flex; 170 | align-items: center; 171 | gap: 50px; 172 | } 173 | 174 | .testimony-section .group .person-details { 175 | text-align: center; 176 | flex: 2; 177 | } 178 | 179 | .testimony-section .group .person-details img { 180 | width: 200px; 181 | aspect-ratio: 1 / 1; 182 | object-fit: cover; 183 | border-radius: 50%; 184 | margin-bottom: 10px; 185 | } 186 | 187 | .testimony-section .group .person-details p { 188 | font-weight: 600; 189 | } 190 | 191 | .testimony-section .group .person-details p:last-child { 192 | font-weight: normal; 193 | } 194 | 195 | .testimony-section .group .text { 196 | flex: 8; 197 | } 198 | 199 | /* SECTION 4: Contact */ 200 | .contact-section { 201 | padding: 0 50px; 202 | margin-bottom: 100px; 203 | } 204 | 205 | .contact-section h2 { 206 | font-size: 35px; 207 | } 208 | 209 | .contact-section .group { 210 | display: flex; 211 | gap: 50px; 212 | } 213 | 214 | .contact-section .group .text { 215 | flex: 3; 216 | margin-top: 20px; 217 | } 218 | 219 | .contact-section .group form { 220 | flex: 3; 221 | display: flex; 222 | flex-direction: column; 223 | } 224 | 225 | .contact-section .group form input, 226 | .contact-section .group form textarea { 227 | font-family: 'Poppins', sans-serif; 228 | border: 2px solid var(--link-color); 229 | background-color: transparent; 230 | padding: 10px; 231 | margin-bottom: 15px; 232 | outline: none; 233 | resize: none; 234 | } 235 | 236 | .contact-section .group form button { 237 | font-size: 16px; 238 | font-family: 'Poppins', sans-serif; 239 | color: #fff; 240 | background-color: var(--link-color); 241 | border: none; 242 | height: 50px; 243 | cursor: pointer; 244 | transition: .1s; 245 | } 246 | 247 | .contact-section .group form button:hover { 248 | filter: brightness(.9); 249 | } 250 | 251 | @media (max-width: 850px) { 252 | /* SECTION 1: Hero */ 253 | .hero-section .text h2 { 254 | font-size: 35px; 255 | } 256 | } 257 | 258 | @media (max-width: 740px) { 259 | /* SECTION 1: Hero */ 260 | .hero-section { 261 | flex-direction: column-reverse; 262 | } 263 | 264 | .hero-section .headshot img { 265 | width: 300px; 266 | } 267 | 268 | /* SECTION 3: Testimony */ 269 | .testimony-section { 270 | text-align: center; 271 | } 272 | 273 | .testimony-section .group { 274 | flex-direction: column; 275 | } 276 | 277 | /* SECTION 4: Contact */ 278 | .contact-section .group { 279 | flex-direction: column; 280 | } 281 | } 282 | 283 | @media (max-width: 600px) { 284 | /* NAVBAR */ 285 | nav { 286 | padding: 0 20px; 287 | } 288 | 289 | nav .right a { 290 | font-size: 22px; 291 | } 292 | 293 | nav .right a:last-child { 294 | color: var(--text-color); 295 | background-color: transparent; 296 | padding: 0; 297 | } 298 | 299 | nav .right a span { 300 | display: none; 301 | } 302 | 303 | /* SECTION 1: Hero */ 304 | .hero-section { 305 | padding: 0 20px; 306 | } 307 | 308 | .hero-section .text h2 { 309 | font-size: 30px; 310 | } 311 | 312 | /* SECTION 2: Skills */ 313 | .skills-section { 314 | padding: 0 20px; 315 | } 316 | 317 | .skills-section .cells .cell span { 318 | font-size: 16px; 319 | } 320 | 321 | /* SECTION 3: Testimony */ 322 | .testimony-section { 323 | padding: 0 20px; 324 | } 325 | 326 | /* SECTION 4: Contact */ 327 | .contact-section { 328 | padding: 0 20px; 329 | } 330 | } --------------------------------------------------------------------------------