hyro/website
1
0
Fork 0
mirror of https://github.com/xHyroM/website.git synced 2024-11-22 06:51:05 +01:00
Code Issues Projects Releases Wiki Activity Actions

fix color definitions, add subtitle, better about page

Browse source
This commit is contained in:
xHyroM 2023-07-21 09:31:27 +02:00
parent e1c350b0e6
commit 17815a5678
No known key found for this signature in database
GPG key ID: BE0423F386C436AA
11 changed files with 66 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
docs/config.ts
View file

@ -1,13 +1,15 @@
export interface Docs { export interface Docs {
sidebar: SidebarItem[]; sidebar: Sidebar[];
} }
export interface SidebarItem { export interface SidebarItem {
text: string; text: string;
items: { link: string;
text: string; }
link: string;
}[]; export interface Sidebar {
text: string;
items: SidebarItem[];
} }
export const docs: Docs = { export const docs: Docs = {

4
src/components/widgets/Navbar.astro
View file

@ -30,12 +30,12 @@ const navItems = [
<a class="text-2xl font-extrabold" href="/">xHyroM</a> <a class="text-2xl font-extrabold" href="/">xHyroM</a>
<nav> <nav>
<ul <ul
class="nav-links absolute left-0 top-0 z-20 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-dark-50 transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4" class="nav-links absolute left-0 top-0 z-20 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-dark-800 transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4"
> >
{ {
navItems.map((item) => ( navItems.map((item) => (
<li class=" transition-all hover:-translate-y-[2px]"> <li class=" transition-all hover:-translate-y-[2px]">
<a href={item.link} class="text-neutral-300 hover:text-gold"> <a href={item.link} class="text-neutral-300 hover:text-gold-500">
{item.name} {item.name}
</a> </a>
</li> </li>

6
src/components/widgets/docs/LeftSidebar.astro
View file

@ -16,10 +16,10 @@ const getLinkClasses = (link: SidebarItem) => {
const baseClasses = "py-1 px-6 my-1 transition-colors border-l -ml-px pl-4"; const baseClasses = "py-1 px-6 my-1 transition-colors border-l -ml-px pl-4";
if (isCurrentPage(link)) { if (isCurrentPage(link)) {
return baseClasses + " border-gold text-gold"; return baseClasses + " border-gold-500 text-gold-500";
} else { } else {
return ( return (
baseClasses + " border-transparent text-gray-100 hover:text-gray-200" baseClasses + " border-transparent text-gray-500 hover:text-gray-400"
); );
} }
}; };
@ -47,7 +47,7 @@ const getLinkClasses = (link: SidebarItem) => {
docs.sidebar.map(({ text, items }) => ( docs.sidebar.map(({ text, items }) => (
<> <>
<li class="mt-4 font-semibold text-white">{text}</li> <li class="mt-4 font-semibold text-white">{text}</li>
<ul class="border-l border-dark-300"> <ul class="border-l border-dark-500">
{items.map((item) => ( {items.map((item) => (
<li class={getLinkClasses(item)}> <li class={getLinkClasses(item)}>
<a href={item.link}>{item.text}</a> <a href={item.link}>{item.text}</a>

6
src/components/widgets/docs/TableOfContents.tsx
View file

@ -90,7 +90,7 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
}; };
return ( return (
<ul ref={toc} className={"border-l border-dark-300"}> <ul ref={toc} className={"border-l border-dark-500"}>
<li id={onThisPageId} className="mt-4 pl-4 font-semibold text-white"> <li id={onThisPageId} className="mt-4 pl-4 font-semibold text-white">
On this page On this page
</li> </li>
@ -99,8 +99,8 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
<li <li
className={`border-l py-1 ${ className={`border-l py-1 ${
currentId === slug currentId === slug
? "border-gold text-gold" ? "border-gold-500 text-gold-500"
: "border-transparent text-gray-100 hover:text-gray-200" : "border-transparent text-gray-500 hover:text-gray-400"
}`} }`}
> >
<a <a

2
src/layouts/Layout.astro
View file

@ -39,7 +39,7 @@ const { title, description, keywords, schemaOrg } = {
) )
} }
</head> </head>
<body class="overflow-x-hidden bg-dark font-sans"> <body class="overflow-x-hidden bg-dark-900 font-sans">
<slot /> <slot />
<script> <script>

2
src/pages/404.astro
View file

@ -31,7 +31,7 @@ import Layout from "@layouts/Layout.astro";
<p class="mb-4"> <p class="mb-4">
In the meantime, why not take a look around our <a In the meantime, why not take a look around our <a
class="text-gold" class="text-gold-500"
href="/">homepage</a href="/">homepage</a
> and see if you can find something else that piques your interest? Who knows, > and see if you can find something else that piques your interest? Who knows,
you might just stumble upon something even better than what you were originally you might just stumble upon something even better than what you were originally

36
src/pages/about.astro
View file

@ -35,17 +35,15 @@ import { SKILLS } from "~/config";
<main class="text-2xl text-white"> <main class="text-2xl text-white">
<section> <section>
<p class="mb-4"> <p class="mb-4">
My name is <span class="text-gold">Jozef Steinhübl</span> ("bl" - not "bel", Hey, my name is <span class="text-gold-500">Jozef Steinhübl</span> ("bl"
I'm not a bell), but you may know me by my pseudonyms, <span - not "bel", I'm not a bell), alias <span class="text-gold-500"
class="text-gold"
>Hyro, xHyroM, or general_kubo >Hyro, xHyroM, or general_kubo
</span>. I am a developer with a passion for creating innovative </span>. I am a developer with a passion for creating innovative
solutions, and I am currently engaged in various projects. Most of my solutions, and I am currently engaged in various projects. Most of my
work is open-source and accessible on <a work is open-source and on <a
class="text-gold" class="text-gold-500"
href="https://github.com/xHyroM">GitHub</a href="https://github.com/xHyroM">GitHub</a
>, where I contribute to the development of cutting-edge software >. You can also check <a class="text-gold-500" href="/projects"
solutions. You can also check <a class="text-gold" href="/projects"
>Projects</a >Projects</a
> page on this website. > page on this website.
</p> </p>
@ -53,17 +51,17 @@ import { SKILLS } from "~/config";
<p class="mb-4"> <p class="mb-4">
Apart from my open-source projects, I'm working/have also worked on Apart from my open-source projects, I'm working/have also worked on
other notable projects such as <a other notable projects such as <a
class="text-gold" class="text-gold-500"
href="https://rajce.pro">rajce.pro</a href="https://rajce.pro">rajce.pro</a
>, <a class="text-gold" href="https://lendmark.sk">LendMark</a>, <a >, <a class="text-gold-500" href="https://lendmark.sk">LendMark</a>, <a
class="text-gold" class="text-gold-500"
href="https://discord.com/api/oauth2/authorize?client_id=720321585625694239&permissions=8&scope=applications.commands%20bot" href="https://discord.com/api/oauth2/authorize?client_id=720321585625694239&permissions=8&scope=applications.commands%20bot"
>Mr. Infinity</a >Mr. Infinity</a
>, <a class="text-gold" href="http://github.com/xHyroM/roles-bot" >, <a class="text-gold-500" href="http://github.com/xHyroM/roles-bot"
>Roles Bot</a >Roles Bot</a
> and for different content creators and influencers. My keen interest > and for different youtubers. My keen interest in the latest technologies
in the latest technologies motivates me to contribute to diverse projects motivates me to contribute to diverse projects on Github, where I hone
on Github, where I hone my skills and expand my knowledge base. my skills and expand my knowledge base.
</p> </p>
</section> </section>
@ -91,8 +89,8 @@ import { SKILLS } from "~/config";
} }
</ul> </ul>
I'm still learning with some things like Go and Rust, so I don't have I'm still learning with some things like Go and Rust, so I don't know
a perfect grasp of them, but I've included them in this list anyway. them perfectly, but I've included them in this list anyway.
</div> </div>
<p class="mb-4"> <p class="mb-4">
@ -100,13 +98,13 @@ import { SKILLS } from "~/config";
and while I do not claim to be a master of any programming language, and while I do not claim to be a master of any programming language,
my expertise in various languages is continually evolving. As a my expertise in various languages is continually evolving. As a
contributor and moderator for the <a contributor and moderator for the <a
class="text-gold" class="text-gold-500"
href="https://bun.sh">Bun</a href="https://bun.sh">Bun</a
> project, I collaborated with my friend <a > project, I collaborated with my friend <a
class="text-gold" class="text-gold-500"
href="https://github.com/Fire-The-Fox">@FireTheFox</a href="https://github.com/Fire-The-Fox">@FireTheFox</a
> to develop a native implementation of the <a > to develop a native implementation of the <a
class="text-gold" class="text-gold-500"
href="https://github.com/oven-sh/bun/pull/1115">node:os module</a href="https://github.com/oven-sh/bun/pull/1115">node:os module</a
>. >.
</p> </p>

4
src/pages/blog/[...page].astro
View file

@ -52,7 +52,7 @@ const posts = page.data as {
return ( return (
<> <>
<a <a
class="mb-4 break-all text-2xl font-semibold text-gold text-opacity-80" class="mb-4 break-all text-2xl font-semibold text-gold-500 text-opacity-80"
href={post.url} href={post.url}
> >
{post.frontmatter.title} {post.frontmatter.title}
@ -67,7 +67,7 @@ const posts = page.data as {
<p class="text-1xl break-all text-white"> <p class="text-1xl break-all text-white">
{post.frontmatter.description} {post.frontmatter.description}
</p> </p>
<hr class="mb-4 mt-4 text-dark-200" /> <hr class="mb-4 mt-4 text-dark-600" />
</> </>
); );
}) })

5
src/pages/index.astro
View file

@ -42,8 +42,11 @@ import { SOCIALS } from "../config";
/> />
</div> </div>
<section class="text-center md:ml-6 md:text-left"> <section class="text-center md:ml-6 md:text-left">
<div class="flex drop-shadow-yellow"> <div class="flex flex-col drop-shadow-yellow">
<h1 class="text-6xl font-extrabold text-white">xHyroM</h1> <h1 class="text-6xl font-extrabold text-white">xHyroM</h1>
<p class="mt-2 text-xl text-gray-400">
Software engineer, computer enthusiast
</p>
</div> </div>
<ul class="my-5 flex justify-center text-white md:justify-start"> <ul class="my-5 flex justify-center text-white md:justify-start">

4
src/pages/projects.astro
View file

@ -62,7 +62,7 @@ PROJECTS.sort((a, b) => a.name.localeCompare(b.name));
<section class="flex flex-wrap justify-center gap-12 pb-4"> <section class="flex flex-wrap justify-center gap-12 pb-4">
{ {
PROJECTS.map((project) => ( PROJECTS.map((project) => (
<section class="flex min-h-max w-80 flex-col justify-between rounded-md border-[1px] border-neutral-800 bg-dark-50 p-6 md:w-96"> <section class="flex min-h-max w-80 flex-col justify-between rounded-md border-[1px] border-neutral-800 bg-dark-800 p-6 md:w-96">
<div class="flex"> <div class="flex">
<h2 class="mb-4 break-words text-3xl font-bold"> <h2 class="mb-4 break-words text-3xl font-bold">
{project.name} {project.name}
@ -114,7 +114,7 @@ PROJECTS.sort((a, b) => a.name.localeCompare(b.name));
<section class="text-center text-xl"> <section class="text-center text-xl">
<p> <p>
You can also look at my repositories on <a You can also look at my repositories on <a
class="text-gold" class="text-gold-500"
href="https://github.com/xHyroM">github</a href="https://github.com/xHyroM">github</a
>. 👀 >. 👀
</p> </p>

55
tailwind.config.cjs
View file

@ -1,44 +1,37 @@
function withOpacity(variableName) {
return ({ opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(${variableName}), ${opacityValue})`;
}
return `rgb(var(${variableName}))`;
};
}
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: { theme: {
extend: { extend: {
colors: { colors: {
dark: "#0D0D0D", dark: "#6A6A6A",
"dark-50": "#131313", "dark-50": "#606060",
"dark-100": "#1A1A1A", "dark-100": "#565656",
"dark-200": "#242424", "dark-200": "#4C4C4C",
"dark-300": "#2E2E2E", "dark-300": "#424242",
"dark-400": "#383838", "dark-400": "#383838",
"dark-500": "#424242", "dark-500": "#2E2E2E",
"dark-600": "#4C4C4C", "dark-600": "#242424",
"dark-700": "#565656", "dark-700": "#1A1A1A",
"dark-800": "#606060", "dark-800": "#131313",
"dark-900": "#6A6A6A", "dark-900": "#0D0D0D",
gray: "#808080",
"gray-100": "#999999", "gray-100": "#F2F2F2",
"gray-200": "#B3B3B3", "gray-200": "#E6E6E6",
"gray-300": "#CCCCCC", "gray-300": "#CCCCCC",
"gray-400": "#E6E6E6", "gray-400": "#B3B3B3",
"gray-500": "#F2F2F2", "gray-500": "#999999",
gold: "#fbc119", gray: "#808080",
"gold-100": "#f9b84c",
"gold-200": "#f8ad3e", "gold-100": "#f69721",
"gold-300": "#f7a22f", "gold-200": "#f7a22f",
"gold-400": "#f69721", "gold-300": "#f8ad3e",
"gold-500": "#f58c12", "gold-400": "#f9b84c",
"gold-500": "#fbc119",
gold: "#f58c12",
}, },
dropShadow: { dropShadow: {
yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"], yellow: ["0 45px 35px rgba(250, 193, 25, 0.5)"],
yellowalt: ["0 4px 12px rgba(250, 193, 25, 0.8)"], yellowalt: ["0 4px 12px rgba(250, 193, 25, 0.8)"],
}, },
}, },