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 1f869f6..e50e1c4 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,11 @@
 # portfolio-site
 
-# testing git branch document
\ No newline at end of file
+# testing git branch document
+
+# making changes in the main branch
+
+# making changes to the read me branch again 
+
+# added new line
+
+# testing git branch by khaing
\ 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..76d304e 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. Lorem 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">
