Skip to content

Commit

Permalink
loading animation, local metadata stale marker #1
Browse files Browse the repository at this point in the history
  • Loading branch information
@darsan-in
darsan-in committed Jul 6, 2024
1 parent 8ebee7e commit 72291c3
Show file tree
Hide file tree
Showing 10 changed files with 319 additions and 192 deletions.
127 changes: 3 additions & 124 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,130 +1,9 @@
"use client";

import { ShortInto, name, navigation, summary } from "meta";
import { useEffect } from "react";
import Skills from "./src/components/skills";
import { ShortMessage } from "./src/components/ui-utils";
import { getRandomColor } from "./src/components/utils";
import Works from "./src/components/works";
import style from "./src/styles/style.module.scss";

export default async function HomePage() {
useEffect(() => {
const skillIcons = document.querySelectorAll(`.${style.skillIcon}`);

const handleMouseOver = (event: MouseEvent) => {
const skillIcon = event.target as HTMLElement;
const randomColor = `${getRandomColor()}`;
skillIcon.style.fill = randomColor;
skillIcon.style.color = randomColor;
};

skillIcons.forEach((skillIcon: any) => {
skillIcon.addEventListener("mouseover", handleMouseOver);
});

return () => {
skillIcons.forEach((skillIcon: any) => {
skillIcon.removeEventListener("mouseover", handleMouseOver);
});
};
}, []);
import HomePage from "./src/components/home";

export default async function Root() {
return (
<>
<nav className="relative mt-9 items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 md:flex md:space-x-6">
<div className="flex justify-between font-jose pr-20">
<a href="">
<p className="block w-full mt-2 text-center text-primary font-bold duration-1000 hover:text-blue-700 active:bg-gray-200 rounded-lg sm:w-auto sm:mt-0 sm:text-sm lg:text-8xl">
{name}
</p>
</a>
</div>

<ul
className={`flex-1 justify-between mt-12 md:text-lg md:font-medium md:flex md:mt-0 ${"absolute inset-x-0 px-4 border-b bg-white md:border-none md:static"}`}>
<div className="items-center space-y-5 md:flex md:space-x-6 md:space-y-0 md:ml-12">
{navigation.map((item, idx) => (
<li
className="ml-5 text-black hover:text-primary uppercase hover:underline hover:font-900"
key={idx}>
<a href={item.path}>{item.title}</a>
</li>
))}
</div>
</ul>
</nav>

<section className="py-20">
<div className="max-w-screen-xl mx-auto text-gray-600 gap-x-12 justify-between overflow-hidden md:flex md:px-8">
<div className="flex-none space-y-5 px-4 sm:max-w-lg md:px-0 lg:max-w-xl">
<h1 className="text-primary font-medium">
<ShortMessage />
</h1>

<h2 className="text-4xl text-gray-800 font-extrabold md:text-5xl leading-loose">
<ShortInto />
</h2>

<p>{summary}</p>

<div className="items-center gap-x-3 space-y-3 sm:flex sm:space-y-0">
<a
href="#skills"
className="block py-2 px-4 text-center text-white font-medium bg-primary duration-150 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg shadow-lg hover:shadow-none">
Explore more
</a>
<a
href="#works"
className="flex items-center justify-center gap-x-2 py-2 px-4 text-gray-700 hover:text-gray-500 font-medium duration-150 active:bg-gray-100 border rounded-lg md:inline-flex">
Works
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="w-5 h-5">
<path
fillRule="evenodd"
d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z"
clipRule="evenodd"
/>
</svg>
</a>
</div>
</div>

<div className="flex-none mt-6 md:mt-0 md:max-w-xl">
<img
src="ai.jpg"
className=" md:rounded-tl-[108px] w-85"
alt=""
/>
</div>
</div>

<div
className="mt-14 px-4 md:px-8"
id="skills">
<p className="text-center text-2xl text-gray-700 font-semibold">
<span className="text-primary text-2xl font-bold">
Technical Skills:
</span>{" "}
Have Been Worked with numerous technolgies
</p>

<div
className={
"flex justify-center items-center text-center flex-wrap gap-x-12 gap-y-6 text-sm w-100 px-20 my-10"
}>
<Skills
color="#4B5563"
iconSize={40}
/>
</div>
</div>
</section>

<Works />
<HomePage />
</>
);
}
161 changes: 161 additions & 0 deletions app/src/components/home.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
"use client";

import { ShortInto, communication, name, navigation, summary } from "meta";
import { useEffect, useState } from "react";
import style from "../styles/style.module.scss";
import Loading from "./loading";
import Skills from "./skills";
import { ShortMessage } from "./ui-utils";
import { fetchGHMeta, getRandomColor, localMetaStructure } from "./utils";
import Works from "./works";

export default function HomePage() {
const [localMeta, setLocalMeta] = useState<localMetaStructure>(
{} as localMetaStructure,
);

useEffect(() => {
/* Skill hover animation */
const skillIcons = document.querySelectorAll(`.${style.skillIcon}`);

const handleMouseOver = (event: MouseEvent) => {
const skillIcon = event.target as HTMLElement;
const randomColor = `${getRandomColor()}`;
skillIcon.style.fill = randomColor;
skillIcon.style.color = randomColor;
};

skillIcons.forEach((skillIcon: any) => {
skillIcon.addEventListener("mouseover", handleMouseOver);
});
/* Skill hover animation ended*/

const getSetMeta = async () => {
const expiryInHours = 1;

const localMeta: localMetaStructure = await fetchGHMeta(
communication.github,
"Kinact",
expiryInHours,
);

setLocalMeta(localMeta);
};

getSetMeta().catch((err) => {
console.error(err);
});

/* Remove all skill animation event when ui unmounts */
return () => {
skillIcons.forEach((skillIcon: any) => {
skillIcon.removeEventListener("mouseover", handleMouseOver);
});
};
/* ------- */
}, []);

return (
<>
{Object.keys(localMeta).length === 0 ? (
<div className="flex w-full h-full justify-center mt-20">
<Loading />
</div>
) : (
<>
<nav className="relative mt-9 items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 md:flex md:space-x-6">
<div className="flex justify-between font-jose pr-20">
<a href="">
<p className="block w-full mt-2 text-center text-primary font-bold duration-1000 hover:text-blue-700 active:bg-gray-200 rounded-lg sm:w-auto sm:mt-0 sm:text-sm lg:text-8xl">
{name}
</p>
</a>
</div>

<ul
className={`flex-1 justify-between mt-12 md:text-lg md:font-medium md:flex md:mt-0 ${"absolute inset-x-0 px-4 border-b bg-white md:border-none md:static"}`}>
<div className="items-center space-y-5 md:flex md:space-x-6 md:space-y-0 md:ml-12">
{navigation.map((item, idx) => (
<li
className="ml-5 text-black hover:text-primary uppercase hover:underline hover:font-900"
key={idx}>
<a href={item.path}>{item.title}</a>
</li>
))}
</div>
</ul>
</nav>
<section className="py-20">
<div className="max-w-screen-xl mx-auto text-gray-600 gap-x-12 justify-between overflow-hidden md:flex md:px-8">
<div className="flex-none space-y-5 px-4 sm:max-w-lg md:px-0 lg:max-w-xl">
<h1 className="text-primary font-medium">
<ShortMessage count={localMeta.totalProjects ?? 0} />
</h1>

<h2 className="text-4xl text-gray-800 font-extrabold md:text-5xl leading-loose">
<ShortInto />
</h2>

<p>{summary}</p>

<div className="items-center gap-x-3 space-y-3 sm:flex sm:space-y-0">
<a
href="#skills"
className="block py-2 px-4 text-center text-white font-medium bg-primary duration-150 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg shadow-lg hover:shadow-none">
Explore more
</a>
<a
href="#works"
className="flex items-center justify-center gap-x-2 py-2 px-4 text-gray-700 hover:text-gray-500 font-medium duration-150 active:bg-gray-100 border rounded-lg md:inline-flex">
Works
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="w-5 h-5">
<path
fillRule="evenodd"
d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z"
clipRule="evenodd"
/>
</svg>
</a>
</div>
</div>

<div className="flex-none mt-6 md:mt-0 md:max-w-xl">
<img
src="ai.jpg"
className=" md:rounded-tl-[108px] w-85"
alt=""
/>
</div>
</div>

<div
className="mt-14 px-4 md:px-8"
id="skills">
<p className="text-center text-2xl text-gray-700 font-semibold">
<span className="text-primary text-2xl font-bold">
Technical Skills:
</span>{" "}
Have Been Worked with numerous technolgies
</p>

<div
className={
"flex justify-center items-center text-center flex-wrap gap-x-12 gap-y-6 text-sm w-100 px-20 my-10"
}>
<Skills
color="#4B5563"
iconSize={40}
/>
</div>
</div>
</section>
<Works projectsMeta={localMeta.projects ?? {}} />
</>
)}
</>
);
}
31 changes: 31 additions & 0 deletions app/src/components/loading.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import style from "../styles/loading.module.scss";

export default () => {
return (
<>
<svg
className={style.container + " text-primary"}
x="0px"
y="0px"
viewBox="0 0 50 21.1"
height="21.1"
width="50"
preserveAspectRatio="xMidYMid meet">
<path
className={style.track}
fill="none"
strokeWidth="4"
pathLength="100"
d="M26.7,12.2c3.5,3.4,7.4,7.8,12.7,7.8c5.5,0,9.6-4.4,9.6-9.5C49,5,45.1,1,39.8,1c-5.5,0-9.5,4.2-13.1,7.8l-3.4,3.3c-3.6,3.6-7.6,7.8-13.1,7.8C4.9,20,1,16,1,10.5C1,5.4,5.1,1,10.6,1c5.3,0,9.2,4.5,12.7,7.8L26.7,12.2z"
/>
<path
className={style.car}
fill="none"
strokeWidth="4"
pathLength="100"
d="M26.7,12.2c3.5,3.4,7.4,7.8,12.7,7.8c5.5,0,9.6-4.4,9.6-9.5C49,5,45.1,1,39.8,1c-5.5,0-9.5,4.2-13.1,7.8l-3.4,3.3c-3.6,3.6-7.6,7.8-13.1,7.8C4.9,20,1,16,1,10.5C1,5.4,5.1,1,10.6,1c5.3,0,9.2,4.5,12.7,7.8L26.7,12.2z"
/>
</svg>
</>
);
};
13 changes: 2 additions & 11 deletions app/src/components/ui-utils.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,9 @@
import { totalProjectkey } from "meta";
import { useEffect, useState } from "react";
import Spinner from "./spinner";

export const ShortMessage = () => {
const [state, setState] = useState<string | number>(0);

useEffect(() => {
const count: string = String(localStorage.getItem(totalProjectkey));
setState(count);
}, []);

export const ShortMessage = ({ count }: { count: number }) => {
return (
<>
{state ? `Over ${state} projects completed` : <Spinner size={20} />}
{count ? `Over ${count} projects completed` : <Spinner size={20} />}
</>
);
};
Loading

0 comments on commit 72291c3

Please sign in to comment.