fix color definitions, add subtitle, better about page

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

View file

@ -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 = {

View file

@ -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>

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";
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>

View file

@ -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

View file

@ -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>

View file

@ -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

View file

@ -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>

View file

@ -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" />
</>
);
})

View file

@ -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">

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">
{
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>

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} */
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)"],
},
},