JohnCosta27/JohnTech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrating to astro

Browse Source
This commit is contained in:
John Costa
2022-08-15 22:29:21 +01:00
parent a5b8a6a3e0
commit a3a94feb7a
8 changed files with 3186 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/core/FadeComponent.jsx
View File

@@ -1,34 +1,13 @@
//============================================================
// Essential Imports
//============================================================
import clsx from "clsx";
import React, { useEffect, useState } from "react";
//============================================================
// Component
//============================================================
import React from "react";
const FadeComponent = ({ delay, children }) => {
const [showComponent, setShowComponent] = useState("opacity-0");
useEffect(() => {
const timer = setTimeout(() => {
setShowComponent("opacity-100");
}, delay);
return () => {
clearTimeout(timer);
};
}, []);
return (
<div className="w-full bg-polar-night-400">
<div
className={clsx(
"w-full transition-all ease-in-out duration-500 ",
showComponent
)}
className={
"w-full transition-all ease-in-out duration-500"
}
>
{children}
</div>

3
src/components/pages/Front.page.jsx → src/components/pages/FrontPage.jsx
View File

@@ -3,6 +3,7 @@
//============================================================
import React from "react";
import '../../index.css';
//============================================================
// Imported Components
@@ -19,7 +20,7 @@ import Projects from '../sections/Projects';
// Component
//============================================================
const DELAY = 750;
const DELAY = 0;
const FrontPage = () => {
return (

29
src/components/text/AppearText.jsx
View File

@@ -1,35 +1,10 @@
//============================================================
// Essential Imports
//============================================================
import React, { useState, useEffect } from "react";
import clsx from "clsx";
//============================================================
// Component
//============================================================
import clsx from 'clsx';
const AppearText = ({ text, delay, className }) => {
const [showText, setShowText] = useState("opacity-0");
useEffect(() => {
const timer = setTimeout(() => {
setShowText("opacity-100");
}, delay);
return () => {
clearTimeout(timer);
};
}, []);
return (
<>
<h1
className={clsx(
"transition-all ease-in-out duration-500",
className,
showText
)}
className={clsx("transition-all ease-in-out duration-500", className)}
>
{text}
</h1>

11
src/pages/index.astro Normal file
View File

@@ -0,0 +1,11 @@
---
import FrontPage from '../components/pages/FrontPage';
---
<html>
<head>
<title>My Homepage</title>
</head>
<body>
<FrontPage></FrontPage>
</body>
</html>

5
src/pages/test.md Normal file
View File

@@ -0,0 +1,5 @@
---
---
# Hello world
## Just testing