diff --git a/Hometown page - Display 2.png b/Hometown page - Display 2.png new file mode 100644 index 00000000..10eaed08 Binary files /dev/null and b/Hometown page - Display 2.png differ diff --git a/Portfolio/README.md b/Portfolio/README.md new file mode 100644 index 00000000..fbca04ef --- /dev/null +++ b/Portfolio/README.md @@ -0,0 +1,23 @@ + I'm Emmanuel , a code your future trainee currently enrolled in a sofware enginnering course and I am particularly interested in webdevelopemnt +**My Skills:** +* **Programming Languages: HTML,CSS , Javascript +* +* + +**Featured Projects:** +* **Form control Site +* **Hometown page Website +* + +**Let's Connect!** +* **Email:** [esiziba71@gmail.com] +* **LinkedIn:** [https://www.linkedin.com/in/emmanuel-siziba-29464a1b7/] +* **GitHub:** [https://github.com/EmmanuelSiziba] + +Feel free to explore my projects or reach out for a chat! + +## Resources + +- [Josh Comeau on building your early career profile](https://www.youtube.com/watch?v=OXiaEXfkAec) +- [How to Build an Effective Dev Portfolio](https://www.joshwcomeau.com/effective-portfolio/) +- [CYF Graduate Module](https://module-graduates.codeyourfuture.io/) diff --git a/Portfolio/index.html b/Portfolio/index.html new file mode 100644 index 00000000..1fe9f2a4 --- /dev/null +++ b/Portfolio/index.html @@ -0,0 +1,91 @@ + + + + + + + My Portfolio + + + + + + + + + +
+

Emmanuel

+ +
+
+
+
+

About Me

+
+

+ I'm a dedicated software engineering student at Code Your Future, + passionate about turning creative ideas into reality. + I've honed my skills in HTML, CSS, JavaScript, Python, and SQL + through hands-on projects. + When I'm not coding, I enjoy staying active on the soccer field + and fueling my mind with good books. + I thrive on collaboration and continuous learning. + Let's connect on LinkedIn to discuss your next project! +

+
+
+
+

Projects Showcase

+
+
+
+ Hometown Page Image +
+

Home town page

+

Introduction to my hometown

+

Programming languages: HTML, CSS, and JavaScript

+
+
+
+ Form Control Page Image +
+

Form Control

+

Dynamic site you can use to collect and gather data from customers

+

Programming languages: HTML and CSS

+
+
+
+
+
+
+

Contact me on Social Media

+
+

+
+ LinkedIn | + GitHub | + Codewars +

+
+
+ + + + diff --git a/Portfolio/style.css b/Portfolio/style.css new file mode 100644 index 00000000..38f8adce --- /dev/null +++ b/Portfolio/style.css @@ -0,0 +1,152 @@ + +:root { + --paper: hsla(251, 28%, 88%, 0.99); + --ink: hsla(244, 16%, 17%, 0.95); + --brand: hsla(0, 79%, 63%, 0.9); + --font: "Raleway", system-ui, sans-serif; + --gap: 20px; + --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px); +} + + +html, +body { + scroll-behavior: smooth; + background: var(--paper); + color: var(--ink); + font-family: var(--font); +} +body { + display: grid; + margin: auto; + min-height: 100vh; + gap: var(--gap); + max-width: var(--container); +} +a, +a:any-link { + color: currentColor; + text-decoration: none; + border-bottom: 2px solid transparent; + transition: border-color ease-in-out 0.3s; +} +a:hover, +a:focus { + color: var(--brand); + border-color: currentColor; +} + + +body > header { + background: var(--paper); + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; +} +body > header h1 { + font-size: 2rem; + margin: 0; +} +body > header nav ul { + display: flex; + gap: 15px; +} +body > header nav ul li { + list-style: none; +} +body > header nav ul li a { + font-weight: bold; +} + + +#about { + padding: var(--gap); +} +#about h2 { + font-size: 2rem; +} +#about p { + font-size: 1rem; + line-height: 1.6; + margin-top: 10px; +} + + +#projects { + padding: var(--gap); +} +#projects h2 { + font-size: 2rem; + text-align: center; +} + +.card-container { + display: flex; + justify-content: space-between; + gap: var(--gap); + flex-wrap: wrap; +} + +.card { + background: white; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 48%; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.card img { + width: 100%; + height: 200px; + object-fit: cover; + +.container { + padding: 20px; + flex-grow: 1; +} + +.container h4 { + margin: 0; + font-size: 1.25rem; + font-weight: bold; +} + +.container p { + margin-top: 5px; + font-size: 1rem; + color: #666; +} + +.container a { + color: var(--brand); + text-decoration: none; +} + +.container a:hover { + text-decoration: underline; +} + + +footer { + text-align: center; + padding: 20px; + background: var(--paper); +} + +footer h3 { + font-size: 1rem; +} + +footer a { + font-weight: bold; +} + + +@media (max-width: 768px) { + .card { + width: 100%; + } +} diff --git a/Product Pick- Display 2.png b/Product Pick- Display 2.png new file mode 100644 index 00000000..2d502c36 Binary files /dev/null and b/Product Pick- Display 2.png differ diff --git a/README.md b/README.md deleted file mode 100644 index 98549832..00000000 --- a/README.md +++ /dev/null @@ -1,31 +0,0 @@ -# Portfolio - -Your starting portfolio, to iterate on. - -## Learning Objectives - -- Customise the starting portfolio with your professional details -- Iterate on your portfolio every module -- Review your colleague's portfolio - -## Requirements - -At Code Your Future, we expect everyone to graduate with a unique professional portfolio. Begin building this portfolio as soon as you begin our Software Development Course. At first, your portfolio will be a simple HTML/CSS page deployed to Github Pages or Netlify. This is your MVP. - -Every module, you will _iterate_ on your portfolio, adding a new project and improving your design and presentation. By the time you apply to Final Projects, your portfolio will help you show you are ready to be accepted on to a Final Projects team. - -## Acceptance Criteria - -- [ ] My portfolio introduces me and my work -- [ ] The design and code is my own, not a template or tutorial -- [ ] Each project is linked to my code on Github and the deployed project -- [ ] I have published my professional contact information on my portfolio -- [ ] My Accessibility and SEO scores are 100 on Lighthouse -- [ ] My portfolio is deployed -- [ ] I have replaced this README with one that describes my own portfolio - -## Resources - -- [Josh Comeau on building your early career profile](https://www.youtube.com/watch?v=OXiaEXfkAec) -- [How to Build an Effective Dev Portfolio](https://www.joshwcomeau.com/effective-portfolio/) -- [CYF Graduate Module](https://module-graduates.codeyourfuture.io/) diff --git a/index.html b/index.html deleted file mode 100644 index 7b0d8b5a..00000000 --- a/index.html +++ /dev/null @@ -1,102 +0,0 @@ - - - - - - My Portfolio - - - - - - - - - - -
-

My Name

- -
-
-
-

About Me

-

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi - excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi - commodi minima ullam necessitatibus, cumque blanditiis, nihil magni - amet consectetur? -

-
-
-

Projects Showcase

-

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi - excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi - commodi minima ullam necessitatibus, cumque blanditiis, nihil magni - amet consectetur? -

-
-
-

Contact me

-

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi - excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi - commodi minima ullam necessitatibus, cumque blanditiis, nihil magni - amet consectetur? -

-
-
- - - diff --git a/style.css b/style.css deleted file mode 100644 index c911f90c..00000000 --- a/style.css +++ /dev/null @@ -1,57 +0,0 @@ -/* Design tokens */ -:root { - --paper: hsla(251, 28%, 88%, 0.99); - --ink: hsla(244, 16%, 17%, 0.95); - --brand: hsla(0, 79%, 63%, 0.9); - --font: "Raleway", system-ui, sans-serif; - --gap: 20px; - --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px); -} -/* General Styles */ -html, -body { - scroll-behavior: smooth; - background: var(--paper); - color: var(--ink); - font-family: var(--font); -} -body { - display: grid; - margin: auto; - min-height: 100vh; - gap: var(--gap); - max-width: var(--container); -} -a, -a:any-link { - color: currentColor; - text-decoration: none; - border-bottom: 2px solid transparent; - transition: border-color ease-in-out 0.3s; -} -a:hover, -a:focus { - color: var(--brand); - border-color: currentColor; -} -/* Site header and navigation */ -body > header { - background: var(--paper); - display: flex; - justify-content: space-between; - align-items: center; - position: sticky; - top: 0; - z-index: 1; -} -nav ul { - display: flex; - list-style: none; - gap: var(--gap); -} - -/* Text readability */ -section p { - line-height: 1.5; - max-width: 55ch; -}