Add basic structure and styles

css/styles.css

@@ -0,0 +1,49 @@
+.background {
+  height: 100vh;
+  width: 100%;
+  background-color: #043260;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  color: white;
+  margin: 0;
+  padding: 0;
+}
+
+.profile-container {
+  text-align: left;
+  max-width: 800px;
+  width: 100%;
+  margin: auto;
+}
+
+.name {
+  color: #ceddfc;
+}
+
+.description-container {
+  width: 60%;
+}
+
+.description {
+  text-align: left;
+  color: #c7c7c7;
+  font-size: medium;
+}
+
+.social-links {
+  text-align: center;
+  margin-top: 50px;
+}
+
+.social-links a {
+  text-decoration: none;
+  color: #ffffff;
+  margin: 0 30px;
+  font-size: 36px;
+}

old/app.css

@@ -0,0 +1,251 @@
+/*master styles*/
+body {
+    font-family: "Lato", sans-serif;
+    margin: 40px;
+    background-image: linear-gradient(147deg, transparent 0%, transparent 8%,rgba(63, 106, 202,0.08) 8%, rgba(63, 106, 202,0.08) 46%,transparent 46%, transparent 100%),linear-gradient(107deg, transparent 0%, transparent 21%,rgba(63, 106, 202,0.08) 21%, rgba(63, 106, 202,0.08) 53%,transparent 53%, transparent 100%),linear-gradient(288deg, transparent 0%, transparent 35%,rgba(63, 106, 202,0.08) 35%, rgba(63, 106, 202,0.08) 91%,transparent 91%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));}
+
+.container {
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+.nav-wrapper {
+
+    display: flex;
+    justify-content: space-between;
+    padding: 40px;
+}
+
+.left-side {
+    display: flex;
+}
+
+.nav-wrapper > .left-side > div {
+   margin-right: 40px;
+   font-size: 0.8m;
+   color: gray;
+}
+.nav-wrapper > .right-side > div {
+    margin-right: 40px;
+    font-size: 0.8m;
+    color: gray;
+ }
+
+.nav-link-wrapper {
+    height: 22px;
+}
+
+.nav-link-wrapper a {
+    color: #8a8a8a;
+    text-decoration: none;
+    transition: color 0.5s;
+}
+
+.nav-link-wrapper:hover {
+}
+
+.nav-link-wrapper a:hover {
+    color: black;
+}
+
+.active-nav-link {
+}
+
+.active-nav-link a {
+    color: black !important;
+}
+
+.portfolio-items-wrapper {width: 100%;}
+
+.portfolio-items-wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+}
+.contact-wrapper h1 {
+    font-size: 70px;
+}
+
+.portfolio-item-wrapper {
+    position: relative;
+}
+
+.portfolio-img-backround {
+    height: 430px;
+    width: 100%;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.image-text-wrapper {
+    position: absolute;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    text-align: center;
+    padding-left: 100px;
+    padding-right: 100px;
+}
+
+.logo-wrapper img{
+    width: 50%;
+    margin-bottom: 20px;
+}
+
+.image-text-wrapper .subtitle {
+    transition: 1s;
+    font-weight: 600;
+    color: transparent;
+}
+/*needs to be more specific with selector*/
+.image-text-wrapper:hover .subtitle {
+    font-weight: 600;
+    color: lightblue;
+}
+
+.img-darken {
+    transition: 1s ease-in-out;
+    filter: brightness(10%);
+}
+
+/*about page*/
+
+.two-column-wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding-bottom: 15px;
+}
+
+.profile-image-wrapper img{
+    height: 600px;
+    width: auto;
+    place-items: center;
+    padding-left: auto;
+}
+
+.profile-content-wrapper{
+    text-align: center;
+    line-height: 30px;
+    padding: 100px;
+}
+
+.profile-content-wrapper h1 {
+    font-size: 50px;
+    text-align: center;
+    color: black;
+}
+.dane-tsao h1 {
+    color: #0066cc;
+    text-align: center;
+}
+
+.profile-content-wrapper p1 {
+    font-size: 20px;
+    text-align: center;
+    color: gray;
+}
+
+.content-wrapper h1 {
+    font-size: 50px;
+}
+
+.social-icon a {
+    margin-top: 30px;
+    margin-bottom: 30px;
+    height: 0px;
+    display: inline-flex;
+    padding: 10px;
+    color: black;
+    transition: color .2s;
+    text-decoration: none;
+    margin: 0 10px;
+    font-size: 45px;
+}
+.social-icon a :hover {
+    transition: .5s;
+    color: rgb(83, 120, 164);
+}
+.contact-wrapper {
+    grid: 1fr 1fr;
+}
+.contact-wrapper h1 {
+    font-size: 50px;
+    color: black;
+    text-align: center;
+    margin-bottom: 10px;
+}
+.contact-wrapper p1 {
+    font-size: 25px;
+    color: gray;
+    margin-bottom: 30px;
+}
+
+  .project-item {
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin: 10px;
+    width: 300px;
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: .6s ease;
+  }
+    .project-item:hover {
+        transform: scale(1.1, 1.1);
+    }
+
+  .project-item img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 8px;
+    margin-bottom: 20px;
+  }
+  .project-item h2 {
+    font-size: 24px;
+    margin-bottom: 10px;
+  }
+  .project-item p {
+    font-size: 16px;
+    line-height: 1.5;
+    margin-bottom: 20px;
+  }
+  .project-item a {
+    background-color: #63a3e8;
+    color: #fff;
+    text-decoration: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    align-self: flex-center;
+  }
+  .project-item a:hover {
+    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
+  }
+  #projects-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    justify-content: center;
+    text-align: center;
+    margin-top: 20px;
+  }
+  html {
+    scroll-behavior: smooth;
+  }
+  h3{
+    font-size: 75px;
+  }
+  p2 {
+    font-size: 40px;
+  }
+  footer {
+    margin: 50px;
+  }

old/app.js

@@ -0,0 +1,50 @@
+fetch('projects.json')
+  .then(response => response.json())
+  .then(data => {
+    const projectsList = document.querySelector('#projects-list');
+    var count = 0;
+
+    data.forEach(project => {
+        count++;
+        const projectLink = document.createElement('a');
+        projectLink.href = project.link;
+        projectLink.textContent = project.name;
+
+        const projectDescription = document.createElement('p');
+        projectDescription.textContent = project.description;
+
+        const projectImage = document.createElement('img');
+        projectImage.src = project.image;
+
+        const projectItem = document.createElement('li');
+        projectItem.classList.add('project-item');
+
+        projectItem.appendChild(projectLink);
+        projectItem.appendChild(projectDescription);
+        projectItem.appendChild(projectImage);
+
+        projectsList.appendChild(projectItem);
+    });
+    /*while (count < 6) {
+        const projectLink = document.createElement('a');
+        projectLink.href = "https://github.com/danetsao";
+        projectLink.textContent = "Coming Soon";
+  
+        const projectDescription = document.createElement('p');
+        projectDescription.textContent = "";
+  
+        //const projectImage = document.createElement('img');
+        //projectImage.src = "images/question.jpg";
+  
+        const projectItem = document.createElement('li');
+        projectItem.classList.add('project-item');
+  
+        projectItem.appendChild(projectLink);
+        projectItem.appendChild(projectDescription);
+        //projectItem.appendChild(projectImage);
+  
+        projectsList.appendChild(projectItem);
+        count++;
+      }
+      */
+});