renttrent/peroxy_site
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

organized asf

Browse Source
This commit is contained in:
Rei
2022-12-26 14:24:16 +01:00
parent 93dc624378
commit 1a29c39741
10 changed files with 113 additions and 2251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
components/Navbar.tsx Normal file
View File

@@ -0,0 +1,52 @@
import Link from "next/link";
import { IoMenu as MenuIcon, IoClose as CloseIcon } from "react-icons/io5";
import { useState } from "react";
export const Navbar = () => {
const [showMenu, setShowMenu] = useState(false);
return (
<nav className="lg:p-4 p-2 lg:py-10 mx-10 flex flex-row justify-between">
<Link href="/" id="logo" className="flex flex-row gap-2 items-end">
<div className="text-action font-bold text-4xl font-mono">peroxy</div>
<span className="text-secondary font-mono font-bold">dev</span>
</Link>
<div className="hidden lg:flex flex-row gap-10 items-center font-medium font-mono">
<Link href="/blog">
<button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
blog
</button>
</Link>
<Link href="/pidhsome">
<button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
projects
</button>
</Link>
<Link href="/pidhsome">
<button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
github
</button>
</Link>
</div>
<div className="lg:hidden flex">
<button onClick={() => setShowMenu(true)} className="text-2xl">
<MenuIcon />
</button>
<div
className={`absolute w-96 bg-blue-900
top-0 px-10 py-6 h-screen ${showMenu ? "right-0" : "-right-full"}
transition-all ease-in duration-200`}
>
<button onClick={() => setShowMenu(false)} className="text-2xl">
<CloseIcon />
</button>
<div className="flex flex-col gap-10 mt-10 font-bold font-mono">
<div>Link 1</div>
<div>Link 1</div>
<div>Link 1</div>
</div>
</div>
</div>
</nav>
);
};

11
layouts/MainLayout.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { PropsWithChildren } from "react";
import { Navbar } from "../components/Navbar";
export const MainLayout = ({ children }: PropsWithChildren) => {
return (
<div className="h-screen w-11/12 xl:w-2/3 mx-auto overflow-x-hidden">
<Navbar />
<main className="mx-10">{children}</main>
</div>
);
};

2193
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -15,6 +15,7 @@
"next": "13.0.6", "next": "13.0.6",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-icons": "^4.7.1",
"typescript": "4.9.3" "typescript": "4.9.3"
}, },
"devDependencies": { "devDependencies": {

11
pages/blog/index.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { MainLayout } from "../../layouts/MainLayout";
const Blog = () => {
return (
<MainLayout>
<h1>Blog</h1>
</MainLayout>
);
};
export default Blog;

67
pages/index.tsx
View File

@@ -1,53 +1,26 @@
import Link from "next/link"; import { MainLayout } from "../layouts/MainLayout";
export default function Home() { export default function Home() {
return ( return (
<div className="h-screen"> <MainLayout>
<nav className="p-4 mx-10 flex flex-row justify-between"> <div className="grid lg:grid-cols-2 grid-cols-1 mt-20 gap-10">
<div id="logo" className="flex flex-row gap-2 items-end"> <div className="bg-primary-dark p-10 rounded-lg flex flex-col justify-between h-96 lg:w-2/3 w-full text-lg text-primary-text/90">
<div className="text-action font-bold text-4xl font-mono">peroxy</div> <div>
<span className="text-secondary font-mono font-bold">dev</span> <span className="font-bold text-xl text-primary-text">
</div> Lorem ipsum dolor{" "}
<div className="flex flex-row gap-10 items-center font-medium font-mono"> </span>{" "}
<Link href="/pidhsome"> sit amet consectetur adipisicing elit. Laboriosam ab quia quae
<button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out"> reiciendis. Nostrum corrupti laboriosam quae vero repudiandae
link 1 dolorem quos dolores laborum recusandae atque itaque illo autem
</button> neque odit, in soluta sit alias necessitatibus fugit veniam sunt at.
</Link>
<Link href="/pidhsome">
<button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
link 2
</button>
</Link>
<Link href="/pidhsome">
<button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
link 3
</button>
</Link>
</div>
</nav>
<main className="mx-10">
<div className="grid grid-cols-2 xs:grid-cols-1 mt-20">
<div className="bg-primary-dark p-10 rounded-lg flex flex-col justify-between h-96 w-2/3 xs:w-full text-lg text-primary-text/90">
<div>
<span className="font-bold text-xl text-primary-text">
Lorem ipsum dolor{" "}
</span>{" "}
sit amet consectetur adipisicing elit. Laboriosam ab quia quae
reiciendis. Nostrum corrupti laboriosam quae vero repudiandae
dolorem quos dolores laborum recusandae atque itaque illo autem
neque odit, in soluta sit alias necessitatibus fugit veniam sunt
at.
</div>
<button className="px-4 py-2 rounded-lg bg-primary hover:bg-primary/50 transition-all ease-out duration-150 font-bold w-fit">
Action
</button>
</div>
<div id="showcase" className="w-full h-96 bg-primary-text">
<div className="text-primary-dark m-auto w-fit">showcase</div>
</div> </div>
<button className="px-4 py-2 rounded-lg bg-primary hover:bg-primary/50 transition-all ease-out duration-150 font-bold w-fit text-white">
Action
</button>
</div> </div>
</main> <div id="showcase" className="w-full h-96 bg-primary-text">
</div> <div className="text-primary-dark m-auto w-fit">showcase</div>
</div>
</div>
</MainLayout>
); );
} }

20
tailwind.config.js
View File

@@ -5,15 +5,17 @@ module.exports = {
"./components/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}",
], ],
theme: { theme: {
colors: { extend: {
"gradient-dark": "#161926", colors: {
"gradient-light": "#1b2034", "gradient-dark": "#161926",
primary: "#1E96FC", "gradient-light": "#1b2034",
"primary-dark": "#1B264F", primary: "#1E96FC",
action: "#FF3366", "primary-dark": "#1B264F",
secondary: "#FFE600", action: "#FF3366",
"primary-text": "#D9D9D9", secondary: "#FFE600",
}, "primary-text": "#D9D9D9",
},
}
}, },
plugins: [], plugins: [],
}; };

5
yarn.lock
View File

@@ -553,6 +553,11 @@ react-dom@18.2.0:
loose-envify "^1.1.0" loose-envify "^1.1.0"
scheduler "^0.23.0" scheduler "^0.23.0"
react-icons@^4.7.1:
version "4.7.1"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.7.1.tgz#0f4b25a5694e6972677cb189d2a72eabea7a8345"
integrity sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==
react@18.2.0: react@18.2.0:
version "18.2.0" version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"