awangran · awangran · Aug 4, 2024 · Aug 7, 2024 · Aug 8, 2024 · Aug 8, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/awangran-site/index.html b/awangran-site/index.html
@@ -8,6 +8,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Single+Day&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
     <title>awangran</title>
     <script src="https://kit.fontawesome.com/67434467bc.js" crossorigin="anonymous"></script>
+
+
   </head>
   <body>
     <div id="root"></div>

diff --git a/awangran-site/package-lock.json b/awangran-site/package-lock.json
diff --git a/awangran-site/package.json b/awangran-site/package.json
@@ -10,11 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
+    "aos": "^2.3.4",
+    "bootstrap": "^5.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "three": "^0.167.0"
   },
   "devDependencies": {
+    "@types/aos": "^3.0.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.15.0",

diff --git a/awangran-site/src/App.css b/awangran-site/src/App.css
@@ -75,6 +75,7 @@ ul{
     padding: 30px 0 0 0;
     white-space: nowrap;
     position: relative;
+    width: 90vw;
 
 }
 
@@ -95,6 +96,13 @@ ul{
     margin: 0 40px;
 }
 
+@media only screen and (max-width: 768px){
+  .logos-slide img {
+    width: 163px;
+    height: 63px;
+    margin: 0 20px;
+}
+}
 
 @keyframes slide {
     from {
@@ -186,4 +194,8 @@ ul{
   border-width: 10px;
   border-color: #EFE9AE;
   border-radius: 50%;
+}
+
+.overflow{
+  overflow-wrap: break-word;
 }
diff --git a/awangran-site/src/App.tsx b/awangran-site/src/App.tsx
@@ -1,28 +1,48 @@
-import { useState } from 'react'
-import './App.css'
+import { useEffect, useRef } from 'react';
+import './App.css';
+import Aos from 'aos'
+import 'aos/dist/aos.css'
+import PreLoader from './component/PreLoader.jsx'
 
 function App() {
-
+  useEffect(()=>{
+    Aos.init({
+      duration:2000
+    });
+  }, [])
+
+
+  const ref = useRef<HTMLDivElement | null>(null);
+  const handleClick = () => {
+    ref.current?.scrollIntoView({behavior: 'smooth'});
+  };
+
+
   return (
+    <>
+    <PreLoader/>
+
+
     <div id='main'>
-      <div id="inner" className="bg-[url('/assets/texture.png')]">
+      <div id="inner">
 
-    <section id='landing'>
+    <section id='landing' data-aos='fade-up'>
       {/* <h1 className='text-9xl	mt-4'>awangran</h1> */}
       <img className='title' src='src/assets/title.png'></img>
       <h3 className='text-4xl	m-3'>hi! im ash. i like cats and creating stuff.  </h3>
       <p className='underline'>page under construction</p>
-      <button className="btn m-5">get to know me</button>
+      <button className="btn m-5" onClick={handleClick}>get to know me</button>
     </section>
 
-    <section id='about-me'>
-      <h2 className='text-6xl'>about me</h2>
-      <p className='text-xl mx-20'>im a freshman comp sci student @ universidad de los andes. im into front-end development, quantum computing and electronics. i like doing hackathons and reading wuxia novels. i hope to learn more about cybersec and do more hardware projects. <br></br> in my free time i normally play violin, water plants, draw or cultivate to go beyond mortal limits.</p>
-
+    <section data-aos='fade-up'>
+      <div id='about-me' ref={ref}>
+       <h2 className='text-6xl'>about me</h2>
+        <p className='text-xl mx-6'>im a freshman comp sci student @ universidad de los andes. im into front-end development, quantum computing and electronics. i like doing hackathons and reading wuxia novels. i hope to learn more about cybersec and do more hardware projects. <br></br> in my free time i normally play violin, water plants, draw or cultivate to go beyond mortal limits.</p>
+      </div>
     </section>
 
-    <section id='skills'>
-    <h2 className='text-6xl'>skills</h2>
+    <section id='skills' data-aos='fade-up'>
+    <h2 className='text-6xl wow bounceIn'>skills</h2>
 
     <div className="logo-slider" id='logo-slider'>
       <div className="logos-slide" id='logos-slide'>
@@ -44,10 +64,10 @@ function App() {
     </section>
 
     <section id='proyects'>
-    <h2 className='text-6xl'>projects</h2>
+    <h2 className='text-6xl' data-aos='fade-up'>projects</h2>
     <div className='cards'>
 
-      <div className='card text-4xl text-center bg-pink my-6'>
+      <div className='card text-4xl text-center bg-pink my-6' data-aos="fade-left">
         <img className='banner' src='src/assets/banners/1.png'></img>
 
             <h3 className='mt-4 ml-6 text-yellow'>Niveles de Niveles</h3>
@@ -60,7 +80,7 @@ function App() {
             </div>
       </div>
 
-      <div className='card text-4xl text-center bg-salmon my-6'>
+      <div className='card text-4xl text-center bg-salmon my-6' data-aos="fade-right">
         <img className='banner' src='src/assets/banners/2.png'></img>
 
             <h3 className='mt-4 ml-6 text-pink'>Devoided</h3>
@@ -73,7 +93,7 @@ function App() {
             </div>
       </div>
 
-      <div className='card text-4xl text-center bg-yellow my-6'>
+      <div className='card text-4xl text-center bg-yellow my-6' data-aos="fade-left">
         <img className='banner' src='src/assets/banners/3.png'></img>
 
             <h3 className='mt-4 ml-6 text-orange'>Flower pcb nfc card</h3>
@@ -84,7 +104,7 @@ function App() {
             </div>
       </div>
 
-      <div className='card text-4xl text-center bg-lime my-6'>
+      <div className='card text-4xl text-center bg-lime my-6' data-aos="fade-right">
         <img className='banner' src='src/assets/banners/4.png'></img>
 
             <h3 className='mt-4 ml-6 text-orange'>Hackathon projects</h3>
@@ -95,7 +115,7 @@ function App() {
             </div>
       </div>
 
-      <div className='card text-4xl text-center bg-green my-6'>
+      <div className='card text-4xl text-center bg-green my-6' data-aos="fade-left">
         <img className='banner' src='src/assets/banners/5.png'></img>
 
             <h3 className='mt-4 ml-6 text-pink'>Shu</h3>
@@ -111,10 +131,10 @@ function App() {
 
     </section>
 
-    <section id='awards'>
-    <h2 className='text-6xl'>awards/experience</h2>
+    <section id='awards' data-aos='fade-up'>
+    <h2 className='text-6xl overflow'>awards / experience</h2>
     <div>
-      <ul>
+      <ul className='px-6'>
         <li>1st Place VI Colombian National High School Programming Contest </li>
         <li>1st LIT Enviromental Engineering Contest Anahuac Merida University</li>
         <li>Bow Seat Future Blue Youth Council Member '22</li>
@@ -134,7 +154,7 @@ function App() {
     </section>
 
 
-    <section id='socials'>
+    <section id='socials' data-aos='fade-up'>
     <h2 className='text-6xl'>socials</h2>
     <p className=''>interested in what i do? send an email to work together <br></br>or stalk my social media</p>
     <div className='my-socials my-10'>
@@ -163,6 +183,7 @@ function App() {
 
     </div>
     </div>
+    </>
   )
 }
 

diff --git a/awangran-site/src/animation/index.js b/awangran-site/src/animation/index.js
@@ -0,0 +1,123 @@
+import {gsap} from "gsap";
+
+
+const tl = gsap.timeline();
+
+// Preloader Animation
+export const preLoaderAnim = () => {
+  tl.to("body", {
+    duration: 0.1,
+    css: { overflowY: "hidden" },
+    ease: "power3.inOut",
+  })
+    .to(".landing", {
+      duration: 0.05,
+      css: { overflowY: "hidden", height: "100vh" },
+    })
+    .to(".text-container", {
+      duration: 0,
+      opacity: 1,
+      ease: "Power3.easeOut",
+    })
+    .from(".text-container span img", {
+      duration: 1.5,
+      delay: 1,
+      y: 70,
+      skewY: 10,
+      stagger: 0.4,
+      ease: "Power3.easeOut",
+    })
+    .to(".text-container span img", {
+      duration: 1,
+      y: 70,
+      skewY: -20,
+      stagger: 0.2,
+      ease: "Power3.easeOut",
+    })
+
+    .to(".landing", {
+      duration: 0.05,
+      css: { overflowY: "hidden", height: "unset" },
+    })
+    .to("body", {
+      duration: 0.1,
+      css: { overflowY: "scroll" },
+      ease: "power3.inOut",
+    })
+    .from(".landing__top .sub", {
+      duration: 1,
+      opacity: 0,
+      y: 80,
+      ease: "expo.easeOut",
+    })
+    .to(
+      ".preloader",
+      {
+        duration: 1.5,
+        height: "0vh",
+        ease: "Power3.easeOut",
+        onComplete: mobileLanding(),
+      },
+      "-=2"
+    )
+    .from(".landing__main .text", {
+      duration: 2,
+      // scale: 0,
+      y: 10,
+      opacity: 0,
+      stagger: {
+        amount: 2,
+      },
+      ease: "power3.easeInOut",
+    })
+
+    .to(".preloader", {
+      duration: 0,
+      css: { display: "none" },
+    });
+};
+
+
+
+
+// recurrent animations
+export const fadeUp = (el, delay = 0) => {
+  tl.from(el, {
+    y: 150,
+    duration: 1,
+    delay,
+    opacity: 0,
+    ease: "power3.Out",
+  });
+};
+
+export const mobileLanding = () => {
+  window.innerWidth < 763 &&
+    tl.from(".landing__main2", {
+      duration: 1,
+      delay: 0,
+      opacity: 0,
+      y: 0,
+      ease: "expo.easeOut",
+    });
+};
+
+
+
+export const fadeIn = (el) => {
+  gsap.to(el, {
+    duration: 2,
+    opacity: 1,
+    y: -60,
+    ease: "power4.out",
+  });
+};
+
+export const fadeOut = (el) => {
+  gsap.to(el, {
+    duration: 1,
+    opacity: 0,
+    y: -20,
+    ease: "power4.out",
+  });
+};
diff --git a/awangran-site/src/assets/cat1.svg b/awangran-site/src/assets/cat1.svg
diff --git a/awangran-site/src/assets/cat2.svg b/awangran-site/src/assets/cat2.svg
diff --git a/awangran-site/src/assets/cat3.svg b/awangran-site/src/assets/cat3.svg
diff --git a/awangran-site/src/component/PreLoader.jsx b/awangran-site/src/component/PreLoader.jsx
@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react'
+import './preloader.css'
+import { preLoaderAnim } from '../animation'
+const PreLoader = () => {
+
+  useEffect(()=>{
+    preLoaderAnim()
+  },[]);
+
+  return (
+    <div className='preloader'>
+      <div className='text-container'>
+      <span><img className='cats' src='src/assets/cat1.svg'></img></span>
+      <span><img className='cats' src='src/assets/cat2.svg'></img></span>
+      <span><img className='cats' src='src/assets/cat3.svg'></img></span>
+      </div>
+
+    </div>
+  )
+}
+
+export default PreLoader