mirror of
https://github.com/xHyroM/website.git
synced 2024-11-21 22:41:06 +01:00
fix color definitions, add subtitle, better about page
This commit is contained in:
xHyroM
parent
e1c350b0e6
commit
17815a5678
11 changed files with 66 additions and 70 deletions
|
|
@ -1,13 +1,15 @@
|
|||
export interface Docs {
|
||||
sidebar: SidebarItem[];
|
||||
sidebar: Sidebar[];
|
||||
}
|
||||
|
||||
export interface SidebarItem {
|
||||
text: string;
|
||||
items: {
|
||||
text: string;
|
||||
link: string;
|
||||
}[];
|
||||
link: string;
|
||||
}
|
||||
|
||||
export interface Sidebar {
|
||||
text: string;
|
||||
items: SidebarItem[];
|
||||
}
|
||||
|
||||
export const docs: Docs = {
|
||||
|
|
|
|||
|
|
@ -30,12 +30,12 @@ const navItems = [
|
|||
<a class="text-2xl font-extrabold" href="/">xHyroM</a>
|
||||
<nav>
|
||||
<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) => (
|
||||
<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}
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,10 @@ const getLinkClasses = (link: SidebarItem) => {
|
|||
const baseClasses = "py-1 px-6 my-1 transition-colors border-l -ml-px pl-4";
|
||||
|
||||
if (isCurrentPage(link)) {
|
||||
return baseClasses + " border-gold text-gold";
|
||||
return baseClasses + " border-gold-500 text-gold-500";
|
||||
} else {
|
||||
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 }) => (
|
||||
<>
|
||||
<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) => (
|
||||
<li class={getLinkClasses(item)}>
|
||||
<a href={item.link}>{item.text}</a>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
|
|||
};
|
||||
|
||||
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">
|
||||
On this page
|
||||
</li>
|
||||
|
|
@ -99,8 +99,8 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
|
|||
<li
|
||||
className={`border-l py-1 ${
|
||||
currentId === slug
|
||||
? "border-gold text-gold"
|
||||
: "border-transparent text-gray-100 hover:text-gray-200"
|
||||
? "border-gold-500 text-gold-500"
|
||||
: "border-transparent text-gray-500 hover:text-gray-400"
|
||||
}`}
|
||||
>
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const { title, description, keywords, schemaOrg } = {
|
|||
)
|
||||
}
|
||||
</head>
|
||||
<body class="overflow-x-hidden bg-dark font-sans">
|
||||
<body class="overflow-x-hidden bg-dark-900 font-sans">
|
||||
<slot />
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ import Layout from "@layouts/Layout.astro";
|
|||
|
||||
<p class="mb-4">
|
||||
In the meantime, why not take a look around our <a
|
||||
class="text-gold"
|
||||
class="text-gold-500"
|
||||
href="/">homepage</a
|
||||
> 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
|
||||
|
|
|
|||
|
|
@ -35,17 +35,15 @@ import { SKILLS } from "~/config";
|
|||
<main class="text-2xl text-white">
|
||||
<section>
|
||||
<p class="mb-4">
|
||||
My name is <span class="text-gold">Jozef Steinhübl</span> ("bl" - not "bel",
|
||||
I'm not a bell), but you may know me by my pseudonyms, <span
|
||||
class="text-gold"
|
||||
Hey, my name is <span class="text-gold-500">Jozef Steinhübl</span> ("bl"
|
||||
- not "bel", I'm not a bell), alias <span class="text-gold-500"
|
||||
>Hyro, xHyroM, or general_kubo
|
||||
</span>. I am a developer with a passion for creating innovative
|
||||
solutions, and I am currently engaged in various projects. Most of my
|
||||
work is open-source and accessible on <a
|
||||
class="text-gold"
|
||||
work is open-source and on <a
|
||||
class="text-gold-500"
|
||||
href="https://github.com/xHyroM">GitHub</a
|
||||
>, where I contribute to the development of cutting-edge software
|
||||
solutions. You can also check <a class="text-gold" href="/projects"
|
||||
>. You can also check <a class="text-gold-500" href="/projects"
|
||||
>Projects</a
|
||||
> page on this website.
|
||||
</p>
|
||||
|
|
@ -53,17 +51,17 @@ import { SKILLS } from "~/config";
|
|||
<p class="mb-4">
|
||||
Apart from my open-source projects, I'm working/have also worked on
|
||||
other notable projects such as <a
|
||||
class="text-gold"
|
||||
class="text-gold-500"
|
||||
href="https://rajce.pro">rajce.pro</a
|
||||
>, <a class="text-gold" href="https://lendmark.sk">LendMark</a>, <a
|
||||
class="text-gold"
|
||||
>, <a class="text-gold-500" href="https://lendmark.sk">LendMark</a>, <a
|
||||
class="text-gold-500"
|
||||
href="https://discord.com/api/oauth2/authorize?client_id=720321585625694239&permissions=8&scope=applications.commands%20bot"
|
||||
>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
|
||||
> and for different content creators and influencers. My keen interest
|
||||
in the latest technologies motivates me to contribute to diverse projects
|
||||
on Github, where I hone my skills and expand my knowledge base.
|
||||
> and for different youtubers. My keen interest in the latest technologies
|
||||
motivates me to contribute to diverse projects on Github, where I hone
|
||||
my skills and expand my knowledge base.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
|
|
@ -91,8 +89,8 @@ import { SKILLS } from "~/config";
|
|||
}
|
||||
</ul>
|
||||
|
||||
I'm still learning with some things like Go and Rust, so I don't have
|
||||
a perfect grasp of them, but I've included them in this list anyway.
|
||||
I'm still learning with some things like Go and Rust, so I don't know
|
||||
them perfectly, but I've included them in this list anyway.
|
||||
</div>
|
||||
|
||||
<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,
|
||||
my expertise in various languages is continually evolving. As a
|
||||
contributor and moderator for the <a
|
||||
class="text-gold"
|
||||
class="text-gold-500"
|
||||
href="https://bun.sh">Bun</a
|
||||
> project, I collaborated with my friend <a
|
||||
class="text-gold"
|
||||
class="text-gold-500"
|
||||
href="https://github.com/Fire-The-Fox">@FireTheFox</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
|
||||
>.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const posts = page.data as {
|
|||
return (
|
||||
<>
|
||||
<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}
|
||||
>
|
||||
{post.frontmatter.title}
|
||||
|
|
@ -67,7 +67,7 @@ const posts = page.data as {
|
|||
<p class="text-1xl break-all text-white">
|
||||
{post.frontmatter.description}
|
||||
</p>
|
||||
<hr class="mb-4 mt-4 text-dark-200" />
|
||||
<hr class="mb-4 mt-4 text-dark-600" />
|
||||
</>
|
||||
);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -42,8 +42,11 @@ import { SOCIALS } from "../config";
|
|||
/>
|
||||
</div>
|
||||
<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>
|
||||
<p class="mt-2 text-xl text-gray-400">
|
||||
Software engineer, computer enthusiast
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="my-5 flex justify-center text-white md:justify-start">
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ PROJECTS.sort((a, b) => a.name.localeCompare(b.name));
|
|||
<section class="flex flex-wrap justify-center gap-12 pb-4">
|
||||
{
|
||||
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">
|
||||
<h2 class="mb-4 break-words text-3xl font-bold">
|
||||
{project.name}
|
||||
|
|
@ -114,7 +114,7 @@ PROJECTS.sort((a, b) => a.name.localeCompare(b.name));
|
|||
<section class="text-center text-xl">
|
||||
<p>
|
||||
You can also look at my repositories on <a
|
||||
class="text-gold"
|
||||
class="text-gold-500"
|
||||
href="https://github.com/xHyroM">github</a
|
||||
>. 👀
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -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} */
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
dark: "#0D0D0D",
|
||||
"dark-50": "#131313",
|
||||
"dark-100": "#1A1A1A",
|
||||
"dark-200": "#242424",
|
||||
"dark-300": "#2E2E2E",
|
||||
dark: "#6A6A6A",
|
||||
"dark-50": "#606060",
|
||||
"dark-100": "#565656",
|
||||
"dark-200": "#4C4C4C",
|
||||
"dark-300": "#424242",
|
||||
"dark-400": "#383838",
|
||||
"dark-500": "#424242",
|
||||
"dark-600": "#4C4C4C",
|
||||
"dark-700": "#565656",
|
||||
"dark-800": "#606060",
|
||||
"dark-900": "#6A6A6A",
|
||||
gray: "#808080",
|
||||
"gray-100": "#999999",
|
||||
"gray-200": "#B3B3B3",
|
||||
"dark-500": "#2E2E2E",
|
||||
"dark-600": "#242424",
|
||||
"dark-700": "#1A1A1A",
|
||||
"dark-800": "#131313",
|
||||
"dark-900": "#0D0D0D",
|
||||
|
||||
"gray-100": "#F2F2F2",
|
||||
"gray-200": "#E6E6E6",
|
||||
"gray-300": "#CCCCCC",
|
||||
"gray-400": "#E6E6E6",
|
||||
"gray-500": "#F2F2F2",
|
||||
gold: "#fbc119",
|
||||
"gold-100": "#f9b84c",
|
||||
"gold-200": "#f8ad3e",
|
||||
"gold-300": "#f7a22f",
|
||||
"gold-400": "#f69721",
|
||||
"gold-500": "#f58c12",
|
||||
"gray-400": "#B3B3B3",
|
||||
"gray-500": "#999999",
|
||||
gray: "#808080",
|
||||
|
||||
"gold-100": "#f69721",
|
||||
"gold-200": "#f7a22f",
|
||||
"gold-300": "#f8ad3e",
|
||||
"gold-400": "#f9b84c",
|
||||
"gold-500": "#fbc119",
|
||||
gold: "#f58c12",
|
||||
},
|
||||
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)"],
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue