addded a readme file

Portfolio/README.md

@@ -1,28 +1,20 @@
-# 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
+ 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:** [[email protected]]
+* **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
 

Portfolio/style.css

@@ -1,4 +1,4 @@
-/* Design tokens */
+  
 :root {
   --paper: hsla(251, 28%, 88%, 0.99);
   --ink: hsla(244, 16%, 17%, 0.95);
@@ -7,7 +7,8 @@
   --gap: 20px;
   --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px);
 }
-/* General Styles */
+
+
 html,
 body {
   scroll-behavior: smooth;
@@ -34,24 +35,119 @@ 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;
+  padding: 10px 20px;
+}
+body > header h1 {
+  font-size: 2rem;
+  margin: 0;
 }
-nav ul {
+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%;  /* Adjust width to fit two cards side by side */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;  /* Hide any overflow content */
+}
+
+.card img {
+  width: 100%;
+  height: 200px;  /* Fixed height for image */
+  object-fit: cover;  /* Ensure the image covers the entire area */
+}
+
+.container {
+  padding: 20px;
+  flex-grow: 1;  /* Allow text to take up remaining space in the card */
+}
+
+.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;
 }
 
-/* Text readability */
-section p {
-  line-height: 1.5;
-  max-width: 55ch;
+
+@media (max-width: 768px) {
+  .card {
+    width: 100%;  /* Make the cards take full width on small screens */
+  }
 }