+
-
+
{/* 
-
-
+
-
-
+
awangran
*/}
hi! im ash. i like cats and creating stuff.
page under construction
- +about me
-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.
in my free time i normally play violin, water plants, draw or cultivate to go beyond mortal limits.
+
about me
+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.
in my free time i normally play violin, water plants, draw or cultivate to go beyond mortal limits.
skills
+skills
@@ -44,10 +64,10 @@ function App() {
-
projects
+projects
-
+
-
Niveles de Niveles
@@ -60,7 +80,7 @@ function App() {
+
-
Devoided
@@ -73,7 +93,7 @@ function App() {
+
-
Flower pcb nfc card
@@ -84,7 +104,7 @@ function App() {
+
-
Hackathon projects
@@ -95,7 +115,7 @@ function App() {
+
-
+
Shu
@@ -111,10 +131,10 @@ function App() { -awards/experience
+awards / experience
-
+
)
}
diff --git a/awangran-site/src/animation/index.js b/awangran-site/src/animation/index.js
new file mode 100644
index 0000000..6b887c7
--- /dev/null
+++ 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",
+ });
+};
\ No newline at end of file
diff --git a/awangran-site/src/assets/cat1.svg b/awangran-site/src/assets/cat1.svg
new file mode 100644
index 0000000..5a42705
--- /dev/null
+++ b/awangran-site/src/assets/cat1.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/awangran-site/src/assets/cat2.svg b/awangran-site/src/assets/cat2.svg
new file mode 100644
index 0000000..4b38c6a
--- /dev/null
+++ b/awangran-site/src/assets/cat2.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/awangran-site/src/assets/cat3.svg b/awangran-site/src/assets/cat3.svg
new file mode 100644
index 0000000..da8f668
--- /dev/null
+++ b/awangran-site/src/assets/cat3.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/awangran-site/src/component/PreLoader.jsx b/awangran-site/src/component/PreLoader.jsx
new file mode 100644
index 0000000..c040e5c
--- /dev/null
+++ 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 (
+ -
+
- 1st Place VI Colombian National High School Programming Contest
- 1st LIT Enviromental Engineering Contest Anahuac Merida University
- Bow Seat Future Blue Youth Council Member '22 @@ -134,7 +154,7 @@ function App() { -
+
+ )
+}
+
+export default PreLoader
diff --git a/awangran-site/src/component/preloader.css b/awangran-site/src/component/preloader.css
new file mode 100644
index 0000000..4d0ec60
--- /dev/null
+++ b/awangran-site/src/component/preloader.css
@@ -0,0 +1,31 @@
+.preloader{
+ height: 100vh;
+ width: 100vw;
+ background-color: rgba(255,146,139,1);
+ color: aliceblue;
+ position: fixed;
+ bottom: 0;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 55;
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ justify-content: center;
+}
+
+.text-container{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 60px;
+ width: 280px;
+ font-size: 40px;
+ overflow: hidden;
+}
+
+.cats{
+ display: flex;
+
+}
\ No newline at end of file
diff --git a/awangran-site/src/index.css b/awangran-site/src/index.css
index 9662946..b350251 100644
--- a/awangran-site/src/index.css
+++ b/awangran-site/src/index.css
@@ -4,10 +4,15 @@
:root {
background: rgba(255,146,139,1);
-
+ -webkit-box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ height: 100vh;
+ width: 100vw;
+ scroll-behavior: smooth;
+ overflow-x: clip;
+
}
.ubuntu-mono-regular {
@@ -44,15 +49,15 @@
body {
margin: 0;
display: flex;
- min-width: 320px;
+ min-width: 100vw;
min-height: 100vh;
justify-content: center;
- background: linear-gradient(180deg, rgba(242,255,236,1) 0%, rgba(205,234,192,1) 20%, rgba(225,209,166,1) 40%, rgba(255,172,129,1) 60%, rgba(255,146,139,1) 81%);
-
+ background: linear-gradient(180deg, rgb(242, 255, 236) 0%, rgba(205,234,192,1) 20%, rgba(225,209,166,1) 40%, rgba(255,172,129,1) 60%, rgba(255,146,139,1) 81%);
+ -webkit-box-sizing: border-box;
+ overflow-x: hidden;
}
#main {
- display: flex;
background-color: #FFF5E7;
justify-content: center;
width: 90vw;
@@ -61,6 +66,7 @@ body {
border-radius: 50px;
box-sizing: border-box;
height: 100%;
+ display: flex;
}
#inner{
diff --git a/awangran-site/src/main.tsx b/awangran-site/src/main.tsx
index 3d7150d..d9af151 100644
--- a/awangran-site/src/main.tsx
+++ b/awangran-site/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
+
ReactDOM.createRoot(document.getElementById('root')!).render(
+ 
+ 
+ 
+
+
+
+
+
+
socials
interested in what i do? send an email to work together
or stalk my social media