home-page
Ajout d'une page accueil
This commit is contained in:
parent
16252ee5a2
commit
d8d5562224
4 changed files with 45 additions and 6 deletions
4
.vscode/settings.json
vendored
4
.vscode/settings.json
vendored
|
@ -1,4 +1,4 @@
|
||||||
{
|
{
|
||||||
"typescript.tsdk": "node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
|
"typescript.tsdk": "node_modules\\.pnpm\\typescript@4.9.5\\node_modules\\typescript\\lib",
|
||||||
"typescript.enablePromptUseWorkspaceTsdk": true
|
"typescript.enablePromptUseWorkspaceTsdk": true
|
||||||
}
|
}
|
37
app/page.tsx
37
app/page.tsx
|
@ -1,15 +1,46 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
import AppLink from '@/ui/AppLink';
|
import AppLink from '@/ui/AppLink';
|
||||||
|
import { HtmlHTMLAttributes, useEffect } from 'react';
|
||||||
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
|
useEffect(() => {
|
||||||
|
let visible:boolean = true;
|
||||||
|
let animation:boolean = true; //TODO ajouter un bouton pour arreter l'animation
|
||||||
|
let con: HTMLElement | null = document.getElementById('console');
|
||||||
|
window.setInterval(function() {
|
||||||
|
if(con !== null && visible === true && animation === true){
|
||||||
|
con.className = 'console invisible';
|
||||||
|
visible = false;
|
||||||
|
}else if(con !== null && animation ===true){
|
||||||
|
con.className = 'console';
|
||||||
|
visible = true;
|
||||||
|
}
|
||||||
|
}, 400);
|
||||||
|
let word:HTMLElement | null = document.getElementById('text')
|
||||||
|
let text: string= "Peer-at-Code";
|
||||||
|
for (let i:number = 0; i < text.length; i++) {
|
||||||
|
setTimeout(function(){
|
||||||
|
if(word !== null)
|
||||||
|
word.innerHTML += text.charAt(i);
|
||||||
|
}, 410 * i )
|
||||||
|
}
|
||||||
|
} , []);
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen w-full">
|
<div className="flex h-screen w-full">
|
||||||
<div className="m-auto flex flex-col">
|
<div className="m-auto flex flex-col">
|
||||||
<h1 className="text-center text-4xl font-bold">
|
<h1 className="text-center text-6xl font-bold">
|
||||||
Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '}
|
Bienvenu sur
|
||||||
<span className="text-blue-500">Tailwindcss</span> !
|
|
||||||
</h1>
|
</h1>
|
||||||
|
<h1 className='flex text-4xl' >
|
||||||
|
<span id="text"></span>
|
||||||
|
<div className='console' id="console">_</div>
|
||||||
|
</h1>
|
||||||
|
<br></br>
|
||||||
<AppLink href="/dashboard">Dashboard</AppLink>
|
<AppLink href="/dashboard">Dashboard</AppLink>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
/** @type {import('next').NextConfig} */
|
/** @type {import('next').NextConfig} */
|
||||||
const nextConfig = {
|
const nextConfig = {
|
||||||
reactStrictMode: true, // Recommended for the `pages` directory, default in `app`.
|
reactStrictMode: false, // Recommended for the `pages` directory, default in `app`.
|
||||||
swcMinify: true,
|
swcMinify: true,
|
||||||
experimental: {
|
experimental: {
|
||||||
appDir: true
|
appDir: true
|
||||||
|
|
|
@ -1,3 +1,11 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
.console{
|
||||||
|
display:inline-block;
|
||||||
|
position:relative;
|
||||||
|
top:-0.14em;
|
||||||
|
left:5px;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue