Add files via upload

bob-feracho · Nov 19, 2024 · 50bcb80 · 50bcb80
1 parent 731b734
commit 50bcb80
Show file tree

Hide file tree

Showing 11 changed files with 344 additions and 0 deletions.
diff --git a/assets/angular-1.jpg b/assets/angular-1.jpg
diff --git a/assets/angular-2.jpg b/assets/angular-2.jpg
diff --git a/assets/angular-3.jpg b/assets/angular-3.jpg
diff --git a/assets/angular-logo.jpg b/assets/angular-logo.jpg
diff --git a/assets/angular-logo.png b/assets/angular-logo.png
diff --git a/assets/coding-background.jpg b/assets/coding-background.jpg
diff --git a/assets/computer-bg.jpg b/assets/computer-bg.jpg
diff --git a/assets/me-1.jpg b/assets/me-1.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Micah Lin- Aspiring Software Engineer</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:[email protected]&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <!-- <div class="navbar">
+      <div class="navbar__about">About</div>
+      <div class="navbar__projects">Projects</div>
+      <div class="navbar__contact">Contact Me</div>
+    </div> -->
+    <header class="header">
+      <div class="header__name" id="name"></div>
+      <div class="header__desc1" id="desc-1"></div>
+      <div class="header__desc2" id="desc-2"></div>
+      <div class="btn btn__scroll--white" id="btn__scroll--white">Profile</div>
+    </header>
+
+    <h2 class="heading__about">About Me</h2>
+    <div class="container__about">
+      <p>
+        My name is Micah Lin. I am a Texas native and have been my whole life. I
+        am a United States Marine Corps Reservist and B.S. Computer Science
+        student looking to break into the software engineering industry. I
+        currently code in C, C++, Java, and a bit of Angular and SQL. I love to
+        do both embedded and web related projects. Some of my hobbies include
+        working out, video games, reading about operating systems, piano, and
+        studying the Bible.
+      </p>
+      <div>
+        <img src="assets/me-1.jpg" />
+      </div>
+    </div>
+
+    <h2 class="heading__goals">My Goals</h2>
+    <div class="container__goals">
+      <p>
+        I have a passion for any type of software engineering. Whether it be
+        tinkering with microcontrollers or studying Operating Systems to
+        designing the CSS on Angular components, I strive to become a better
+        software engineer everyday. I would love any opportunity to gain
+        experience in the software engineering world and showcase my skills.
+      </p>
+    </div>
+
+    <div class="container__work">
+      <div class="container__work--box1">My Work</div>
+      <div class="container__work--box2"></div>
+      <div class="container__work--angular">
+        <h2>Angular</h2>
+        <p>
+          I've recently worked on mock community college database application
+          where students, courses, and professors are all relationally mapped
+          together. I used MariaDB to create all the tables and then used Java
+          Spring to push REST API endpoints using JPARespository. Lastly, I used
+          Angular to create a frontend, access such endpoints and display the
+          data accordingly.
+        </p>
+      </div>
+      <div class="container__work--angularbg"></div>
+      <img id="angular-logo" src="assets/angular-logo.png" />
+      <img id="angular-college-img" src="assets/angular-3.jpg" />
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,44 @@
+let i =0;
+let j= 0;
+let k= 0;
+const theName = "Micah Lin";
+const theDesc = "Aspiring Software Engineer 🖥️";
+const theDescTwo = "USMC Reservist ⚔️";
+typingAnimation();
+document.getElementById("btn__scroll--white").addEventListener("click", scrollDown);
+
+
+function typingAnimation(){
+    if(i<theName.length) {
+        document.getElementById("name").innerHTML += theName.charAt(i);
+        i++;
+        setTimeout(typingAnimation, 140);
+    }
+    if(i == theName.length){
+        typingAnimationDescOne();
+    }
+
+
+}
+
+function typingAnimationDescOne(){
+    if(j<theDesc.length) {
+        document.getElementById("desc-1").innerHTML += theDesc.charAt(j);
+        j++;
+        setTimeout(typingAnimationDescOne, 180);
+    }
+    if( j == theDesc.length){
+        typingAnimationDescTwo();
+    }
+}
+function typingAnimationDescTwo(){
+    if(k<theDescTwo.length) {
+        document.getElementById("desc-2").innerHTML += theDescTwo.charAt(k);
+        k++;
+        setTimeout(typingAnimationDescTwo, 160);
+    }
+}
+
+function scrollDown(){
+    window.scrollTo({top:980, behavior: 'smooth'});
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,226 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+html{
+    font-family: 'Geist Mono', monospace;
+    font-size: 16px;
+    padding: 1.9rem;
+}
+
+
+
+.header{
+    height: 95vh;
+    background-image: linear-gradient(to right bottom,rgba(255, 255, 255, 0.8), rgb(204, 218, 225, .85)),
+    url(./assets/computer-bg.jpg);
+    background-size: cover;
+    background-position: top;
+
+}
+
+
+.header__name{
+    overflow: hidden;
+    white-space: nowrap;
+    font-size: 3rem;
+    text-align: center;
+    display:block;
+    position: relative;
+    top:30%;
+    left:50%;
+    transform: translate(-50%, -50%);
+}
+.header__desc1{
+    font-size: 2rem;
+    text-align: center;
+    position: relative;
+    top:32%;
+    left: 50%;
+
+
+    transform: translate(-50%, -50%);
+}
+
+.header__desc2{
+    font-size: 2rem;
+    text-align: center;
+    position: relative;
+    top:35%;
+    left: 50%;
+
+
+    transform: translate(-50%, -50%);
+}
+
+.btn{
+    border-radius: 1rem;
+    white-space: nowrap;
+    text-align: center;
+    height: 3rem;
+    padding-top:.5rem;
+
+}
+.btn__scroll--white{
+    z-index: 5;
+    width: 7rem;
+    position: relative;
+    left:50%;
+    top: 50%;
+    width: 5rem;
+    height: 3rem;
+    transform: translate(-50%, -50%);
+    background-color: white;
+
+
+}
+
+.btn__scroll--white::after{
+    padding-top: .8rem;
+    padding-bottom: .7rem;
+    content: "Click to get started";
+    white-space: wrap ;
+    font-size: .8rem;
+    position: absolute;
+    height: 3rem;
+    width: 5rem;
+    bottom:0; 
+    left: 0;
+    background-color: antiquewhite;
+    clip-path: polygon(0 20%, 20% 20%, 40% 0, 100% 0, 100% 100%, 0 100%); 
+    transform: scale(0);
+    transition: transform ease-in .5s,
+                bottom ease-out .5s;
+}
+
+.btn__scroll--white:hover::after{
+    z-index: 1;
+    transform: scale(1);
+    bottom: 150%;
+}
+
+.heading__about{
+    position: relative;
+    top:5rem;
+    font-size:2.5rem;
+    margin-bottom: 1rem;
+}
+
+.container__about{
+    display:flex;
+    height: 30vh;
+    width: 90%;
+    padding-top:5rem;
+    font-size: 1.5rem;
+    justify-content: space-around;
+    gap: 2rem;
+}
+.container__about img{
+    object-fit: cover;
+    height: 20rem;
+    width: 30rem;
+
+
+}
+
+.heading__goals{
+    display: block;
+    text-align: center;
+    position: relative;
+    font-size:2.5rem;
+    margin-bottom: 5rem;
+    margin-top: 18rem;
+}
+
+.container__goals{
+    display: block;
+    position:relative;
+    text-align: center;
+    left:50%;
+    width: 65%;
+    padding-top:5rem;
+    font-size: 1.5rem;
+    margin-bottom: 5rem;
+    justify-content: space-around;
+    gap: 2rem;
+    transform: translate(-50%, -50%);
+}
+
+.container__work{
+    z-index: 1;
+    position: relative;
+    background-color: rgb(211, 237, 247);
+    height: 400vh;
+}
+
+.container__work--box1{
+    z-index: 3;
+    position: absolute;
+    background-color: white;
+    height: 40rem;
+    width: 40rem;
+    top: 4rem;
+    left: 15rem;
+    font-size: 10rem;
+    font-weight: 550;
+    text-align: center;
+}
+.container__work--box2{
+    z-index: 2;
+    position: absolute;
+    background-color: black;
+    height: 40rem;
+    width: 40rem;
+    top: 10rem;
+    left: 35rem;
+}
+
+.container__work--angular{
+    z-index: 3;
+    background-color: white;
+    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
+    position:absolute;
+    font-size: 2rem;
+    line-height: 3rem;
+    height: 30rem;
+    width:70rem;
+    top: 70rem;
+}
+#angular-logo{
+    position: absolute;
+    top: 70rem;
+    left: 80rem;
+    width: 30rem;
+    height: 30rem;
+}
+.container__work--angularbg{
+    z-index: 2;
+    background-image: linear-gradient(to right bottom, rgba(255,0,0), rgba(164,64,119,0.8));
+    position: absolute;
+    height: 30rem;
+    width:70rem;
+    top: 70rem;
+}
+
+#angular-college-img{
+    position: absolute;
+    object-fit: contain;
+    top: 130rem;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100rem;
+    height: 40rem;
+}
+
+
+
+
+
+
+
+
+
+
+