Customizations using Github Copilot

.devcontainer/devcontainer.json

@@ -23,7 +23,8 @@
         "esbenp.prettier-vscode",
         "GitHub.copilot",
         "ms-vscode.azure-account",
-        "ms-azuretools.vscode-azurestaticwebapps"
+        "ms-azuretools.vscode-azurestaticwebapps",
+        "oderwat.indent-rainbow" 
       ],
       "settings": {
         "emmet.includeLanguages": {

src/App.jsx

@@ -11,6 +11,7 @@ import Footer from "./Components/Footer";
 import Header from "./Components/Header";
 import Home from "./Components/Home";
 import Portfolio from "./Components/Portfolio";
+import Education from "./Components/Education";
 
 import "./styles.css";
 
@@ -45,6 +46,7 @@ const App = () => {
       <Home name={siteProps.name} title={siteProps.title} />
       <About />
       <Portfolio />
+      <Education />
       <Footer {...siteProps} primaryColor={primaryColor} secondaryColor={secondaryColor} />
     </div>
   );

src/Components/Education.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+const Education = () => {
+  return (
+    <section className="light" id="education">
+      <h2 style={{ textAlign: "center" }}>Education</h2>
+      {/* grid of 3 education cells */}
+      <div className="grid">
+        <div className="box" style={{ margin: "20px", padding: "20px" }}>
+          <h3>Indira Gandhi Delhi Technical University For Women</h3>
+          <p className="small">B.Tech in ECE</p>
+          <p className="small">2021 - 2025</p>
+        </div>
+        <div className="box" style={{ margin: "20px", padding: "20px" }}>
+          <h3>Ryan International School</h3>
+          <p className="small">Class 12th</p>
+          <p className="small">2020 - 2021</p>
+        </div>
+        <div className="box" style={{ margin: "20px", padding: "20px" }}>
+          <h3>Ryan International School</h3>
+          <p className="small">Class 10th</p>
+          <p className="small">2018 - 2019</p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Education;

src/Components/Header.jsx

@@ -25,6 +25,8 @@ const Header = () => {
       <a href="#about">About</a>
       <a href="#portfolio">Portfolio</a>
       <a href="#footer">Contact</a>
+      {/* add reference to Education section */}
+      <a href="#education">Education</a>
     </div>
   );
 };

src/Components/Portfolio.jsx

@@ -64,7 +64,12 @@ const Portfolio = () => {
         <div style={{ maxWidth: "40%", alignSelf: "center" }}>
           <img
             src={image}
-            style={{ height: "90%", width: "100%", objectFit: "cover" }}
+            style={{
+              animation: "10s ease-out 0s 1 slideIn",
+              height: "90%",
+              width: "100%",
+              objectFit: "cover",
+            }}
             alt={imageAltText}
           />
         </div>

src/styles.css

@@ -12,8 +12,14 @@ body {
   overflow-x: hidden;
   padding: 0;
   width: 100%;
+  scroll-behavior: smooth;
 }
 
+/* add a smooth scroll
+html {
+  
+} */
+
 div#main {
   display: flex;
   flex-direction: column;
@@ -123,3 +129,15 @@ img.socialIcon {
   height: 30px;
   width: 30px;
 }
+
+/* add a slide in animation */
+@keyframes slideIn {
+  0% {
+
+    transform: translateX(-100%);
+  }
+  100% {
+
+    transform: translateX(0);
+  }
+}