diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index a896f3c..bedaf45 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,9 @@
-# portfolio-site
\ No newline at end of file
+# portfolio-site
+
+# testing git branch document
+
+# making changes in the main branch
+
+# making changes to the read me branch again 
+
+# added new line
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index a968715..f1351c0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
 *{
     margin: 0;
     padding: 0;
@@ -5,6 +6,58 @@
 
 }
 
+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;}
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 6a1a4e9..6e82709 100644
--- 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">
