Skip to content

Commit 35aeb01

Browse files
authored
Merge pull request #35 from khaykingleb/few-improvements
Few improvements
2 parents 9f1ff27 + f4ce26b commit 35aeb01

19 files changed

+170
-81
lines changed

app/components/atoms/Avatar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const Avatar = () => {
77
return (
88
<div className="h-48 w-48 overflow-hidden rounded-full sm:h-64 sm:w-64">
99
<img
10-
src="/avatar.jpg"
10+
src="/avatar.webp"
1111
alt="Avatar"
1212
className="h-full w-full object-cover"
1313
/>

app/components/atoms/Copyright.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66
export const Copyright = () => {
77
return (
8-
<div className="font-gill-sans-regular mb-2 text-center">
8+
<div className="font-gill-sans mb-2 text-center">
99
<p>&copy; 2024 Gleb Khaykin</p>
1010
</div>
1111
);

app/components/molecules/MenuItems.tsx

+23-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Link } from "@remix-run/react";
1+
import { NavLink } from "@remix-run/react";
22

33
/**
44
* Menu items component
@@ -9,24 +9,39 @@ export const MenuItems = () => {
99
return (
1010
<ul className="menu menu-horizontal menu-md">
1111
<li>
12-
<Link to="/blog" className="btn btn-ghost text-xl sm:text-2xl">
12+
<NavLink
13+
to="/blog"
14+
className={({ isActive }) =>
15+
`btn btn-ghost text-lg sm:text-xl ${isActive ? "active" : "no-animation"}`
16+
}
17+
style={{ fontWeight: "bold" }}
18+
>
1319
Blog
14-
</Link>
20+
</NavLink>
1521
</li>
1622
<li>
17-
<Link
23+
<NavLink
1824
to="/Gleb_Khaykin.pdf"
1925
prefetch="intent"
2026
target="_blank"
21-
className="btn btn-ghost text-xl sm:text-2xl"
27+
className={({ isActive }) =>
28+
`btn btn-ghost text-lg sm:text-xl ${isActive ? "active" : "no-animation"}`
29+
}
30+
style={{ fontWeight: "bold" }}
2231
>
2332
CV
24-
</Link>
33+
</NavLink>
2534
</li>
2635
<li>
27-
<Link to="/" className="btn btn-ghost text-xl sm:text-2xl">
36+
<NavLink
37+
to="/"
38+
className={({ isActive }) =>
39+
`btn btn-ghost text-lg sm:text-xl ${isActive ? "active" : "no-animation"}`
40+
}
41+
style={{ fontWeight: "bold" }}
42+
>
2843
About
29-
</Link>
44+
</NavLink>
3045
</li>
3146
</ul>
3247
);

app/components/molecules/TagSearchBar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ const TagItem = ({ name, onClick, checked, isFocused }: TagItemProps) => {
8787
>
8888
{checked && <FaCheck className="text-xs text-white" />}
8989
</span>
90-
<span className="font-gill-sans-regular text-sm">{name}</span>
90+
<span className="font-gill-sans text-sm">{name}</span>
9191
</div>
9292
);
9393
};
@@ -220,7 +220,7 @@ export const TagSearchBar = ({
220220

221221
return (
222222
<div
223-
className="font-gill-sans-light relative mx-auto mt-4 w-full max-w-xs"
223+
className="font-gill-sans relative mx-auto mt-4 w-full max-w-xs font-light"
224224
ref={TagSearchBarRef}
225225
onKeyDown={handleKeyDown}
226226
role="combobox"

app/components/organisms/Carousel.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@ export const Carousel = ({ items }: { items: Post[] }) => {
2121
>
2222
<div className="flex w-full items-center p-3">
2323
<div className="flex-grow">
24-
<h2 className="font-gill-sans-semibold mb-1 text-base sm:text-lg">
24+
<h2 className="font-gill-sans mb-1 text-base font-semibold sm:text-base">
2525
{item.title}
2626
</h2>
27-
<p className="font-gill-sans-regular mb-2 text-sm">
27+
<p className="font-gill-sans mb-1 text-sm">
2828
Created at {item.publishDate.replace(/-/g, "/")}
2929
</p>
30-
<div className="font-gill-sans-regular">
30+
<div className="font-gill-sans">
3131
{item.tags.map((tag) => (
3232
<span
3333
key={tag}
34-
className="badge badge-ghost mr-1 bg-blue-100 bg-opacity-50 px-1.5 py-0.5 text-xs"
34+
className="badge badge-ghost ml-[-0.2rem] mr-1 bg-blue-100 bg-opacity-50 px-1.5 py-0.5 text-xs"
3535
>
3636
{tag}
3737
</span>
@@ -49,7 +49,7 @@ export const Carousel = ({ items }: { items: Post[] }) => {
4949
</div>
5050
) : (
5151
<div className="pt-40 text-center">
52-
<p className="font-gill-sans-bold text-lg">No posts found</p>
52+
<p className="font-gill-sans text-lg font-semibold">No posts found</p>
5353
</div>
5454
)}
5555
</div>

app/components/organisms/Header.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,28 @@ interface HeaderProps {
66
}
77

88
/**
9-
* Header component
9+
* Header component used to display the header of the application.
1010
*
1111
* @param backgroundImageUrl - The background image URL
1212
* @returns Header component
1313
*/
1414
export const Header = ({ backgroundImageUrl }: HeaderProps) => {
1515
return (
16-
<header className="h-18 relative flex items-center px-4 sm:px-6 lg:px-8">
16+
<header className="h-18 relative">
1717
<div
1818
className="absolute inset-0 bg-cover bg-center"
1919
style={{
2020
backgroundImage: `url(${backgroundImageUrl})`,
2121
}}
2222
></div>
2323
<div className="absolute inset-0 bg-gradient-to-b from-black/20 to-black/20"></div>
24-
<div className="font-gill-sans-bold relative z-10 mx-auto flex w-full max-w-[750px] items-center justify-between text-white">
25-
<span className="text-xl sm:text-2xl">~/khaykingleb</span>
24+
<div className="font-gill-sans relative z-10 mx-auto flex w-full max-w-[750px] items-center justify-between text-white">
25+
<span
26+
className="btn btn-ghost no-animation text-lg sm:text-xl"
27+
style={{ fontWeight: "bold" }}
28+
>
29+
~/khaykingleb
30+
</span>
2631
<nav className="hidden sm:block">
2732
<MenuItems />
2833
</nav>

app/components/organisms/Pagination.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const Pagination = ({
2424
const endPage = Math.min(startPage + MAX_PAGES_PER_PAGE, pagesInTotal);
2525

2626
return (
27-
<div className="font-gill-sans-regular join mt-auto flex justify-center space-x-0">
27+
<div className="font-gill-sans join mt-auto flex justify-center space-x-0">
2828
<button
2929
className="btn join-item btn-sm"
3030
onClick={() => onPageChange(currentPage - 1)}

app/data/posts.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const posts: Post[] = [
1414
id: 1,
1515
imageUrl: "/img/posts/introduction-to-digital-signal-processing.webp",
1616
title: "Introduction to Digital Signal Processing",
17-
tags: ["notes", "speech", "dsp"],
17+
tags: ["notes", "speech"],
1818
notionPageId: "5987cc697c874323920215fbaad8cbbd", // pragma: allowlist secret
1919
slug: "introduction-to-digital-signal-processing",
2020
publishDate: "2024-09-22",

app/root.tsx

+7-12
Original file line numberDiff line numberDiff line change
@@ -66,21 +66,16 @@ export const links: LinksFunction = () => {
6666
href: "/site.webmanifest",
6767
},
6868

69-
// Prefetch PDF and images
69+
// Images
7070
{
71-
rel: "prefetch",
72-
href: "/Gleb_Khaykin.pdf",
73-
as: "document",
74-
},
75-
{
76-
rel: "prefetch",
71+
rel: "preload",
7772
as: "image",
78-
href: "/avatar.jpg",
73+
href: "/avatar.webp",
7974
},
8075
{
81-
rel: "prefetch",
76+
rel: "preload",
8277
as: "image",
83-
href: "/img/van_gogh_wheatfield_with_crows.jpg",
78+
href: "/img/van_gogh_wheatfield_with_crows.webp",
8479
},
8580
];
8681
};
@@ -104,8 +99,8 @@ export function ErrorBoundary() {
10499
<Links />
105100
</head>
106101
<body className="flex min-h-screen flex-col">
107-
<Header backgroundImageUrl="/img/van_gogh_wheatfield_with_crows.jpg" />
108-
<main className="font-gill-sans-regular flex flex-grow flex-col items-center justify-center text-center">
102+
<Header backgroundImageUrl="/img/van_gogh_wheatfield_with_crows.webp" />
103+
<main className="font-gill-sans flex flex-grow flex-col items-center justify-center text-center">
109104
{isRouteErrorResponse(error) && error.status === 404 ? (
110105
<h2 className="mb-4 text-2xl font-semibold">
111106
Page doesn&apos;t exist

app/routes/_index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const meta: MetaFunction = () => {
3939
},
4040
{
4141
property: "og:image",
42-
content: "/img/avatar.jpg",
42+
content: "/avatar.webp",
4343
},
4444
];
4545
};
@@ -63,12 +63,12 @@ export const handle: SEOHandle = {
6363
export default function IndexRoute() {
6464
return (
6565
<div className="flex min-h-screen flex-col">
66-
<Header backgroundImageUrl="/img/van_gogh_wheatfield_with_crows.jpg" />
66+
<Header backgroundImageUrl="/img/van_gogh_wheatfield_with_crows.webp" />
6767
<div className="avatar mb-6 mt-6 flex items-center justify-center">
6868
<Avatar />
6969
</div>
7070
<div className="flex-grow">
71-
<div className="font-gill-sans-regular mx-auto max-w-[550px] px-4 text-center text-sm sm:text-base">
71+
<div className="font-gill-sans mx-auto max-w-[550px] px-4 text-center text-sm sm:text-base">
7272
<p className="mb-3">
7373
Hi there! I&apos;m Gleb, a full-stack developer specializing in
7474
DevOps and MLOps engineering. My background includes distributed

app/routes/blog.$slug.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export const meta: MetaFunction = ({ data }: { data: { post: Post } }) => {
157157
},
158158
{
159159
property: "og:image",
160-
content: post.imageUrl || "/img/van_gogh_wheatfield_with_crows.jpg",
160+
content: post.imageUrl || "/img/van_gogh_wheatfield_with_crows.webp",
161161
},
162162
{
163163
property: "og:title",
@@ -192,7 +192,7 @@ export default function BlogPostRoute() {
192192

193193
return (
194194
<div className="flex min-h-screen flex-col">
195-
<Header backgroundImageUrl="/img/van_gogh_wheatfield_with_crows.jpg" />
195+
<Header backgroundImageUrl="/img/van_gogh_wheatfield_with_crows.webp" />
196196
<main className="flex-grow px-4 sm:px-6 lg:px-8">
197197
<div className="mx-auto flex max-w-[750px] flex-col">
198198
<Suspense fallback={<LoadingSpinner />}>

app/routes/blog._index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const meta: MetaFunction = () => {
5454
},
5555
{
5656
property: "og:image",
57-
content: "/img/van_gogh_wheatfield_with_crows.jpg",
57+
content: "/img/van_gogh_wheatfield_with_crows.webp",
5858
},
5959
];
6060
};
@@ -124,7 +124,7 @@ export default function BlogRoute() {
124124

125125
return (
126126
<div className="flex min-h-screen flex-col">
127-
<Header backgroundImageUrl="/img/van_gogh_wheatfield_with_crows.jpg" />
127+
<Header backgroundImageUrl="/img/van_gogh_wheatfield_with_crows.webp" />
128128
<main className="flex flex-grow flex-col px-4 sm:px-6 lg:px-8">
129129
<div className="mx-auto flex w-full max-w-[750px] flex-grow flex-col">
130130
<TagSearchBar tagOptions={tagOptions} setTagOptions={setTagOptions} />

app/styles/tailwind.css

+1-39
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,7 @@
33
@tailwind utilities;
44

55
@layer utilities {
6-
.font-gill-sans-thin {
6+
.font-gill-sans {
77
font-family: "Gill Sans", sans-serif;
8-
font-weight: 100;
9-
font-style: normal;
10-
}
11-
12-
.font-gill-sans-light {
13-
font-family: "Gill Sans", sans-serif;
14-
font-weight: 300;
15-
font-style: normal;
16-
}
17-
18-
.font-gill-sans-regular {
19-
font-family: "Gill Sans", sans-serif;
20-
font-weight: 400;
21-
font-style: normal;
22-
}
23-
24-
.font-gill-sans-medium {
25-
font-family: "Gill Sans", sans-serif;
26-
font-weight: 500;
27-
font-style: normal;
28-
}
29-
30-
.font-gill-sans-semibold {
31-
font-family: "Gill Sans", sans-serif;
32-
font-weight: 600;
33-
font-style: normal;
34-
}
35-
36-
.font-gill-sans-bold {
37-
font-family: "Gill Sans", sans-serif;
38-
font-weight: 700;
39-
font-style: normal;
40-
}
41-
42-
.font-gill-sans-extrabold {
43-
font-family: "Gill Sans", sans-serif;
44-
font-weight: 800;
45-
font-style: normal;
468
}
479
}

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@remix-run/node": "^2.11.2",
1919
"@remix-run/react": "^2.11.2",
2020
"@remix-run/serve": "^2.11.2",
21+
"@supabase/supabase-js": "^2.46.1",
2122
"@vercel/analytics": "^1.3.1",
2223
"@vercel/speed-insights": "^1.0.12",
2324
"isbot": "^4.4.0",

0 commit comments

Comments
 (0)