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

2
.gitignore vendored
View File

@@ -33,4 +33,4 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
next-env.d.ts

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",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.7.1",
"typescript": "4.9.3"
},
"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() {
return (
<div className="h-screen">
<nav className="p-4 mx-10 flex flex-row justify-between">
<div 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>
</div>
<div className="flex flex-row gap-10 items-center font-medium font-mono">
<Link href="/pidhsome">
<button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
link 1
</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 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>
<MainLayout>
<div className="grid lg:grid-cols-2 grid-cols-1 mt-20 gap-10">
<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>
<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 text-white">
Action
</button>
</div>
</main>
</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>
</MainLayout>
);
}

2
styles/globals.css
View File

@@ -4,4 +4,4 @@
body {
@apply bg-gradient-to-b from-gradient-dark to-gradient-light text-primary-text;
}
}

20
tailwind.config.js
View File

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

5
yarn.lock
View File

@@ -553,6 +553,11 @@ react-dom@18.2.0:
loose-envify "^1.1.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:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"