diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..dd07a1c --- /dev/null +++ b/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; +} diff --git a/old/app.css b/old/app.css new file mode 100644 index 0000000..8058409 --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/old/app.js b/old/app.js new file mode 100644 index 0000000..c0ba367 --- /dev/null +++ b/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++; + } + */ +}); diff --git a/old/images/201.jpg b/old/images/201.jpg new file mode 100644 index 0000000..277dcb7 Binary files /dev/null and b/old/images/201.jpg differ diff --git a/old/images/DSC_0507.jpg b/old/images/DSC_0507.jpg new file mode 100644 index 0000000..b82cdf8 Binary files /dev/null and b/old/images/DSC_0507.jpg differ diff --git a/old/images/agora.jpg b/old/images/agora.jpg new file mode 100644 index 0000000..263febf Binary files /dev/null and b/old/images/agora.jpg differ diff --git a/old/images/camera.jpg b/old/images/camera.jpg new file mode 100644 index 0000000..f5df118 Binary files /dev/null and b/old/images/camera.jpg differ diff --git a/old/images/color_pixels.jpg b/old/images/color_pixels.jpg new file mode 100644 index 0000000..075d0b5 Binary files /dev/null and b/old/images/color_pixels.jpg differ diff --git a/old/images/imagecoding.jpg b/old/images/imagecoding.jpg new file mode 100644 index 0000000..ee9d651 Binary files /dev/null and b/old/images/imagecoding.jpg differ diff --git a/old/images/imagecoding2.jpg b/old/images/imagecoding2.jpg new file mode 100644 index 0000000..96ef541 Binary files /dev/null and b/old/images/imagecoding2.jpg differ diff --git a/old/images/imgproccesor.jpg b/old/images/imgproccesor.jpg new file mode 100644 index 0000000..1776d12 Binary files /dev/null and b/old/images/imgproccesor.jpg differ diff --git a/old/images/mountains.jpg b/old/images/mountains.jpg new file mode 100644 index 0000000..8519510 Binary files /dev/null and b/old/images/mountains.jpg differ diff --git a/old/images/question.jpg b/old/images/question.jpg new file mode 100644 index 0000000..6ed12ff Binary files /dev/null and b/old/images/question.jpg differ diff --git a/old/images/recipe.jpg b/old/images/recipe.jpg new file mode 100644 index 0000000..25dc255 Binary files /dev/null and b/old/images/recipe.jpg differ diff --git a/old/index.html b/old/index.html new file mode 100644 index 0000000..1106667 --- /dev/null +++ b/old/index.html @@ -0,0 +1,72 @@ + + + + + + Dane Tsao + + + +
+
+
+
+ Home +
+ +
+
+
+ Contact +
+
+
+
+
+
+
+ +
+
+

Hello, I'm

+
+

Dane Tsao

+
+ A dedicated computer science student from Illinois. I am seeking internship oppurtunities for summer 2023 and have a passion for innovation. +
+
+
+
+

Projects

+
+ +
+
+
+
+

Get in Touch

+ I would be happy to further discuss any potential oppurutinties or questions you have for me. Feel free to shoot me an email or reach out to me on any socials + +
+
+ + +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/old/notes.html b/old/notes.html new file mode 100644 index 0000000..c9177c2 --- /dev/null +++ b/old/notes.html @@ -0,0 +1,77 @@ +
+ +
+
+ +
+
+
+
+ This is a test +
+
+
+ +
+
+ +
+
+
+
+ PPM Image Proccesor - Utilized knowledge of structures and 2D arrays to store and manipulate a color image that is stored in the PPM (Portable PixMap) format. +
+
+
+
+
+ +
+
+
+ +
+ PPM Image Proccesor +
+ +
+
+
+
+ +
+
+
+
+ PPM Image Proccesor - Utilized knowledge of structures and 2D arrays to store and manipulate a color image that is stored in the PPM (Portable PixMap) format. +
+
+
+
+
+ +
+
+
+
+ PPM Image Proccesor - Utilized knowledge of structures and 2D arrays to store and manipulate a color image that is stored in the PPM (Portable PixMap) format. +
+
+
+ +
+
+ +
+
+ +
+
+ More projects coming soon... +
+
+
+ + + +
\ No newline at end of file diff --git a/old/projects.json b/old/projects.json new file mode 100644 index 0000000..b44c0a0 --- /dev/null +++ b/old/projects.json @@ -0,0 +1,27 @@ +[ + { + "name": "Data Structures Library", + "description": "A 3 phase, semester long project for my DSA class where I implemented 3 data structures using C++: Circular Dynamic Array, Red Black Tree, Heap/Binomial Heap.", + "link": "https://github.com/danetsao/CS201-Data-Structures-Library", + "image": "images/201.jpg" + }, + { + "name": "Recipe Search API", + "description": "A Next-js React app which uses the Spoontacular API to give users recipes for certain foods.", + "link": "https://recipebuddy-qzt74bu0u-danetsao.vercel.app/", + "image": "images/recipe.jpg" + }, + { + "name": "Agora", + "description": "A full stack web app using PERN stack to model user CRUD operations. Idea was to build a employee food marketplace trading platform.", + "link": "https://github.com/danetsao/Agora", + "image": "images/agora.jpg" + }, + { + "name": "Image PPM Processor", + "description": "A PPM image processor using C programming language that allows for manipulation and modification of PPM image files.", + "link": "https://github.com/danetsao/PPM-Image-Processor", + "image": "images/color_pixels.jpg" + } + +]