CoderAcademy-ALL · JasonOfaolain · Apr 7, 2021 · Apr 7, 2021 · Apr 7, 2021 · Apr 7, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1 +1,9 @@
-# portfolio-site
+# portfolio-site
+
+# testing git branch document
+
+# making changes in the main branch
+
+# making changes to the read me branch again 
+
+# added new line
diff --git a/css/style.css b/css/style.css
@@ -1,10 +1,63 @@
+@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 
 }
 
+body{
+    font-family: 'Libre Baskerville', serif;
+}
+
+/* profile section */
+.row{
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+}
+
+.title{
+    text-align: center;
+    padding:10px;
+}
+
+#profile img{
+    width: 50%;
+    margin: 0 25%;
+}
+#profile p{
+    margin: 20px;
+    color: #777;
+    font-size: 14px;
+    line-height: 1.75;
+    text-align: justify;
+}
+
+/* Project section */
+#projects{
+    background-color: #eee;
+    min-height: 1040px;
+}
+#projects h2{
+    margin: 20px;
+    text-align: center;
+}
+#projects a{
+    position: relative;
+    bottom: 10px;
+    padding: 33%;
+}
+
+.project{
+    background-color: white;
+    margin: 10px;
+    min-height: 250px;
+}
+
+.project img{
+    width: 100%;
+}
 /* responsive media queries */
 /* For mobile phones: */
 [class*="col-"] {
@@ -26,9 +79,14 @@
   .col-s-10 {width: 83.33%;}
   .col-s-11 {width: 91.66%;}
   .col-s-12 {width: 100%;}
-}
-@media only screen and (min-width: 768px) {
-/*anything beyoud 768px*/
+  #profile p{ font-size: 1.7em;}
+  #profile img {width: 40%; margin: 0 30%}
+  .title{font-size: 2.5em;}
+  .project h2, a{font-size: 2em;}
+  #projects{min-height: 1900px;}
+} 
+@media only screen and (min-width: 769px) {
+/*anything beyoud 769px*/
   /* For desktop: */
   .col-1 {width: 8.33%;}
   .col-2 {width: 16.66%;}
@@ -42,4 +100,10 @@
   .col-10 {width: 83.33%;}
   .col-11 {width: 91.66%;}
   .col-12 {width: 100%;}
+  .container{margin: 0px 150px;}
+  #profile img{width: 70%; margin: 0 15%;}
+  #profile p{font-size: 1.2em;}
+  .project img{min-height: 300px;}
+  .project h2, a { font-size: 1.3em;}
+  #projects{min-height: 600px;}
 }
diff --git a/index.html b/index.html
@@ -4,12 +4,49 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="css/style.css">
     <title>Portfolio Page</title>
 </head>
 <body>
     <header></header>
-        <section id="profile"></section>
-        <section id="projects"></section>
+        <section id="profile">
+            <h1 class="title">Nandini Nayak</h1>
+            <div class="row container">
+                <div class="col-4 col-s-12">
+                    <img src="img/profile.jpg" alt="profile-pic">
+                </div>
+                <div class="col-8 col-s-12">
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo beatae dolores eveniet, ducimus exercitationem velit dolore eius quis incidunt aut minima, porro consequatur fugit, similique ratione tempore distinctio! Animi, earum. Loremgubfqubfuqbfbfqebfjqwbe23cbu1obdnu   oi3f1iu23rb ipsum dolor sit amet, consectetur adipisicing elit. Culpa possimus ducimus tempora odio veniam delectus, totam consequuntur tempore, itaque explicabo a dolorum accusantium ullam placeat reprehenderit, quo reiciendis porro necessitatibus!</p>
+                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id ipsa vel deleniti sit? Magni facilis excepturi molestias rerum aliquid. Alias facere voluptas officiis sint veniam dolorum veritatis cupiditate autem iste.</p>
+                </div>
+            </div>
+        </section>
+        <section id="projects">
+            <h1 class="title">PROJECTS</h1>
+            <div class="row container">
+                <div class="col-4 col-s-12">
+                    <div class="project">
+                        <img src="img/iot.jpeg" alt="iot">
+                        <h2>Internet Of Things</h2>
+                        <a href="/">Show More</a>
+                    </div>
+                </div>
+                <div class="col-4 col-s-12">
+                    <div class="project">
+                        <img src="img/vehicle_diagnostics.jpeg" alt="iot">
+                        <h2>vehicle diagnostics</h2>
+                        <a href="/">Show More</a>
+                    </div>
+                </div>
+                <div class="col-4 col-s-12">
+                    <div class="project">
+                        <img src="img/web-development.jpeg" alt="iot">
+                        <h2>Web development</h2>
+                        <a href="/">Show More</a>
+                    </div>
+                </div>
+            </div>
+        </section>
         <section id="skills"></section>
     <footer>
         <div class="contact">