VeltronNET/homepage.old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

switch to ionicons

Browse source
This commit is contained in:
saboooor 2023-05-02 13:56:01 -06:00
commit 151c883f61
5 changed files with 981 additions and 1971 deletions
Download patch file Download diff file Expand all files Collapse all files

28
package.json
View file

@ -18,30 +18,28 @@
"qwik": "qwik"
},
"devDependencies": {
"@builder.io/qwik": "0.101.0",
"@builder.io/qwik-city": "0.101.0",
"@qwikest/icons": "^0.0.5",
"@builder.io/qwik": "1.0.0",
"@builder.io/qwik-city": "1.0.0",
"@types/eslint": "8.37.0",
"@types/node": "latest",
"@typescript-eslint/eslint-plugin": "5.57.1",
"@typescript-eslint/parser": "5.57.1",
"@typescript-eslint/eslint-plugin": "5.59.2",
"@typescript-eslint/parser": "5.59.2",
"autoprefixer": "10.4.14",
"eslint": "8.37.0",
"eslint-plugin-qwik": "0.101.0",
"eslint": "8.39.0",
"eslint-plugin-qwik": "1.0.0",
"express": "^4.18.2",
"path": "^0.12.7",
"postcss": "^8.4.21",
"postcss": "^8.4.23",
"qwik-ionicons": "^1.0.5",
"rehype-stringify": "^9.0.3",
"remark-gfm": "^3.0.1",
"remark-parse": "^10.0.1",
"remark-rehype": "^10.1.0",
"tailwindcss": "^3.3.1",
"typescript": "5.0.3",
"undici": "^5.21.0",
"tailwindcss": "^3.3.2",
"typescript": "5.0.4",
"undici": "^5.22.0",
"unified": "^10.1.2",
"vite": "4.2.1",
"vite-tsconfig-paths": "4.0.8",
"wrangler": "latest",
"zod": "^3.21.4"
"vite": "4.3.4",
"vite-tsconfig-paths": "4.2.0"
}
}

2779
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

24
src/components/Nav.tsx
View file

@ -1,50 +1,50 @@
import { component$, Slot } from '@builder.io/qwik';
import { Link, useNavigate } from '@builder.io/qwik-city';
import { InDiscord, InGithub, InMenu, InCode, InGitFork } from '@qwikest/icons/iconoir';
import { LogoDiscord, LogoGithub, Menu, Code, GitBranchOutline } from 'qwik-ionicons';
import Logo from '~/components/elements/Logo';
export default component$(() => {
return (
<Nav>
<MainNav>
<NavButton href="/forks" extraClass="hidden xl:flex gap-2">
<InGitFork class="text-2xl" />
<NavButton href="/forks" extraClass="hidden xl:flex gap-3">
<GitBranchOutline width="24" class="fill-current" />
Fork Graph
</NavButton>
<NavButton href="/projects" extraClass="hidden xl:flex gap-2">
<InCode class="text-2xl" />
<NavButton href="/projects" extraClass="hidden xl:flex gap-4">
<Code width="24" class="fill-current" />
Projects
</NavButton>
<NavButton external icon href="https://github.com/LuminescentDev" title="GitHub" extraClass="hidden xl:flex">
<InGithub />
<LogoGithub width="24" class="fill-purple-200" />
</NavButton>
<NavButton icon href="/discord" title="Discord" extraClass="hidden xl:flex">
<InDiscord />
<LogoDiscord width="24" class="fill-indigo-200" />
</NavButton>
<button id="mobile-menu-button" type="button" title="Menu" onClick$={() => {
const classList = document.getElementById('mobile-menu')?.classList;
if (classList?.contains('hidden')) classList.replace('hidden', 'flex');
else classList?.replace('flex', 'hidden');
}} class="transition duration-200 ease-in-out hover:bg-gray-800 hover:text-white px-4 py-2 rounded-lg text-3xl xl:hidden">
<InMenu />
<Menu width="24" class="fill-current"/>
</button>
</MainNav>
<MobileNav>
<NavButton mobile href="/forks" extraClass="flex xl:hidden gap-2">
<InGitFork class="text-2xl" />
<GitBranchOutline width="24" class="fill-current" />
Fork Graph
</NavButton>
<NavButton mobile href="/forks" extraClass="flex xl:hidden gap-2">
<InCode class="text-2xl" />
<Code width="24" class="fill-current" />
Projects
</NavButton>
<div class="flex flex-row">
<NavButton external mobile icon href="https://github.com/LuminescentDev" title="GitHub" extraClass="flex xl:hidden">
<InGithub />
<LogoGithub width="24" class="fill-purple-200" />
</NavButton>
<NavButton mobile icon href="/discord" title="Discord" extraClass="flex xl:hidden">
<InDiscord />
<LogoDiscord width="24" class="fill-indigo-200" />
</NavButton>
</div>
</MobileNav>

6
src/components/elements/Card.tsx
View file

@ -1,5 +1,5 @@
import { component$, Slot } from '@builder.io/qwik';
import { InGithub, InGlobe } from '@qwikest/icons/iconoir';
import { LogoGithub, GlobeOutline } from 'qwik-ionicons';
export default component$(({ link, name, icon, github }: any) => {
return (
@ -7,13 +7,13 @@ export default component$(({ link, name, icon, github }: any) => {
<div class="grid absolute w-full h-full bg-gray-900/50 opacity-0 group-hover:opacity-100 group-hover:backdrop-blur-sm duration-300">
{link && (
<a href={link} class="flex flex-col justify-center transition duration-200 hover:bg-luminescent-900/20 text-white rounded-xl font-bold items-center gap-4">
<InGlobe class="text-xl" />
<GlobeOutline width="24" class="fill-current" />
Visit page
</a>
)}
{github && (
<a href={github} class="flex flex-col justify-center transition duration-200 hover:bg-luminescent-900/20 text-white rounded-xl font-bold items-center gap-4">
<InGithub class="text-xl" />
<LogoGithub width="24" class="fill-current" />
Github
</a>
)}

13
src/routes/index.tsx
View file

@ -1,7 +1,7 @@
import { component$ } from '@builder.io/qwik';
import { DocumentHead, Link } from '@builder.io/qwik-city';
import { InGithub, InDiscord, InCode } from '@qwikest/icons/iconoir';
import { LogoGithub, LogoDiscord, Code } from 'qwik-ionicons';
import Logo from '~/components/elements/Logo';
export default component$(() => {
@ -15,14 +15,15 @@ export default component$(() => {
<p class="text-xl sm:text-3xl text-white">Welcome to our website idk</p>
<div class="mx-auto flex flex-col gap-3 justify-center items-center max-w-6xl" >
<Link href="/projects" class="flex justify-center sm:justify-start transition duration-200 rounded-2xl shadow-lg backdrop-blur-lg bg-gray-800 hover:bg-gray-700 border-2 border-gray-700 px-6 py-3 font-bold text-gray-100 md:py-4 md:px-8 text-sm md:text-lg whitespace-nowrap gap-4 items-center">
<InCode class="text-xl md:text-3xl"/> Projects
<Code width="24" class="fill-current" />
Projects
</Link>
<div class="flex gap-3">
<a href="https://github.com/LuminescentDev" class="flex justify-center sm:justify-start transition duration-200 rounded-2xl shadow-lg backdrop-blur-lg bg-gray-800 hover:bg-gray-700 border-2 border-gray-700 px-6 py-3 font-bold text-gray-100 md:py-4 md:px-8 text-xl md:text-3xl whitespace-nowrap gap-4 items-center">
<InGithub/>
<a href="https://github.com/LuminescentDev" class="flex justify-center sm:justify-start transition duration-200 rounded-2xl shadow-lg backdrop-blur-lg bg-gray-800 hover:bg-gray-700 border-2 border-gray-700 px-6 py-3 font-bold text-purple-100 md:py-4 md:px-8 text-xl md:text-3xl whitespace-nowrap gap-4 items-center">
<LogoGithub width="24" class="fill-current" />
</a>
<a href="/discord" class="flex justify-center sm:justify-start transition duration-200 rounded-2xl shadow-lg backdrop-blur-lg bg-gray-800 hover:bg-gray-700 border-2 border-gray-700 px-6 py-3 font-bold text-gray-100 md:py-4 md:px-8 text-xl md:text-3xl whitespace-nowrap gap-4 items-center">
<InDiscord/>
<a href="/discord" class="flex justify-center sm:justify-start transition duration-200 rounded-2xl shadow-lg backdrop-blur-lg bg-gray-800 hover:bg-gray-700 border-2 border-gray-700 px-6 py-3 font-bold text-indigo-100 md:py-4 md:px-8 text-xl md:text-3xl whitespace-nowrap gap-4 items-center">
<LogoDiscord width="24" class="fill-current"/>
</a>
</div>
</div>