diff --git a/assets/codespace-cafe.png b/assets/codespace-cafe.png new file mode 100644 index 0000000..9e30b2e Binary files /dev/null and b/assets/codespace-cafe.png differ diff --git a/assets/codespace-cat.png b/assets/codespace-cat.png new file mode 100644 index 0000000..81d2c6d Binary files /dev/null and b/assets/codespace-cat.png differ diff --git a/assets/icons8-codepen-96.png b/assets/icons8-codepen-96.png new file mode 100644 index 0000000..05baee0 Binary files /dev/null and b/assets/icons8-codepen-96.png differ diff --git a/assets/icons8-github-96.png b/assets/icons8-github-96.png new file mode 100644 index 0000000..a272f3f Binary files /dev/null and b/assets/icons8-github-96.png differ diff --git a/assets/icons8-linkedin-96.png b/assets/icons8-linkedin-96.png new file mode 100644 index 0000000..2078624 Binary files /dev/null and b/assets/icons8-linkedin-96.png differ diff --git a/assets/magic-buttons.png b/assets/magic-buttons.png new file mode 100644 index 0000000..da4b01c Binary files /dev/null and b/assets/magic-buttons.png differ diff --git a/assets/pets-instagram-profile.png b/assets/pets-instagram-profile.png new file mode 100644 index 0000000..52dee2b Binary files /dev/null and b/assets/pets-instagram-profile.png differ diff --git a/portfolio.png b/assets/portfolio.png similarity index 100% rename from portfolio.png rename to assets/portfolio.png diff --git a/assets/profile-picture.jpg b/assets/profile-picture.jpg new file mode 100644 index 0000000..32fef32 Binary files /dev/null and b/assets/profile-picture.jpg differ diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..1488724 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,276 @@ +:root { + --primary-color: steelblue; + --text-color-light: #fff; + --text-color-dark: #333; + --background-color: #ffffff; + --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + --font-size-large: 1.5em; + --font-size-medium: 1em; + --font-size-small: 0.875em; + --border-radius: 8px; +} + +body { + font-family: Arial, Helvetica, sans-serif; + margin: 0; +} + +nav { + background-color: var(--primary-color); + color: #fff; + display: flex; + align-items: center; + padding: 10px 20px; + position: relative; +} + +.logo a { + color: #fff; + text-decoration: none; + font-size: 24px; +} + +#menu-toggle { + display: none; +} + +.menu-icon { + display: none; + cursor: pointer; + font-size: 24px; + margin-left: auto; +} + +#nav-links { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex: 1; + justify-content: flex-end; +} + +#nav-links li { + margin: 0 10px; +} + +#nav-links a { + color: #fff; + text-decoration: none; + padding: 5px 10px; +} + +#nav-links a:hover { + background-color: gray; + border-radius: 3px; +} + +@media (max-width: 768px) { + #nav-links { + display: none; + flex-direction: column; + width: 100%; + position: absolute; + top: 60px; + left: 0; + background-color: var(--primary-color); + border-top: 1px solid #444; + } + + #nav-links li { + margin: 0; + border-top: 1px solid #444; + } + + #nav-links a { + padding: 15px 20px; + display: block; + } + + #menu-toggle:checked ~ #nav-links { + display: flex; + } + + .menu-icon { + display: block; + } +} + +main { + padding-top: 100px; +} + +.container { + display: flex; + align-items: center; + padding: 20px; +} + +.image { + flex: 1; + text-align: center; +} + +.image img { + border-radius: 50%; + height: 300px; + max-width: 100%; +} + +.description { + flex: 2; + font-size: var(--font-size-medium); + margin-left: 20px; +} + +.description h1 { + margin-top: 0; + color: var(--text-color-dark); +} + +.highlight { + color: var(--primary-color); +} + +.containers { + width: 80%; + max-width: 1200px; + margin: 20px auto; + padding: 20px; + background: var(--background-color); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); +} + +h1 { + color: var(--text-color-dark); + margin-bottom: 20px; + text-align: center; +} + +.card-container { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; +} + +.card { + background: var(--background-color); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + overflow: hidden; + width: 300px; + transition: transform 0.3s ease; +} + +.card:hover { + transform: scale(1.05); +} + +.card img { + width: 100%; + height: 200px; + object-fit: cover; +} + +.card-content { + padding: 15px; +} + +.card-content h2 { + font-size: var(--font-size-large); + margin: 0 0 10px; +} + +.card-content p { + font-size: var(--font-size-medium); + margin: 0 0 15px; +} + +.card-content a { + color: #0056b3; + text-decoration: none; + font-weight: bold; +} + +.card-content a:hover { + text-decoration: underline; +} + +.footer { + background-color: var(--primary-color); + color: var(--text-color-light); + padding: 20px 0; + text-align: center; +} + +.footer-content { + width: 80%; + max-width: 1200px; + margin: 0 auto; +} + +.footer-content p { + margin: 0; + font-size: var(--font-size-medium); +} + +.social-links { + list-style: none; + padding: 0; + margin: 10px 0 0; + display: flex; + justify-content: center; +} + +.social-links li { + margin: 0 10px; +} + +.social-links a { + display: block; + width: 30px; + height: 30px; +} + +.social-links img { + width: 100%; + height: auto; + vertical-align: middle; +} + +.social-links a:hover { + opacity: 0.8; +} + +@media (max-width: 767px) { + .header { + padding: 15px; + flex-direction: column; + } + + .navbar { + gap: 10px; + justify-content: center; + } +} + +@media (max-width: 480px) { + .header { + padding: 10px 5%; + } + + .navbar a { + font-size: 14px; + } + + .image img { + height: 120px; + width: 120px; + } + + .description { + font-size: 14px; + } +} diff --git a/index.html b/index.html index 4c87b17..f41a3b1 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,99 @@ - - - - DevJane Portfolio Website - - + + + + Robert Koopedi Portfolio + + + +
- - + + + + + +
+ +
+
+
+
+ Profile picture of Robert Koopedi +
+
+

Who I Am

+

Hello! My name is Robert Sehulong Koopedi, and I am currently a student at CodeSpace, where I started just two months ago as a software developer.

+

My journey in software development began with a deep fascination for technology and problem-solving. At CodeSpace, I am honing my skills in various programming languages and tools, focusing on creating efficient and innovative solutions.

+

Aside from coding, I am passionate about continuous learning and staying updated with the latest industry trends. I believe in the power of collaboration and enjoy working in team environments where ideas can flourish and challenges can be tackled collectively.

+

As I continue to grow in my role, I am excited about the opportunities to contribute to meaningful projects and make a positive impact in the tech community.

+

Feel free to connect with me and follow my journey as I strive to excel in the ever-evolving world of software development!

+
+
+
- - \ No newline at end of file +
+
+

Showcasing some of my recent projects.

+
+
+ Screenshot of Cat HTML Portfolio project +
+

Cat HTML Portfolio

+ Learn More +
+
+ +
+ Screenshot of CodeSpace Cafe Debugging Challenge project +
+

CodeSpace Cafe Debugging Challenge

+ Learn More +
+
+ +
+ Screenshot of Magic Buttons project +
+

Magic Buttons

+ Learn More +
+
+ +
+ Screenshot of CodeSpace Pets Instagram Profile project +
+

CodeSpace Pets Instagram Profile

+ Learn More +
+
+
+
+
+
+ + + +