From fdea20cafebee30d74f12bf51f443b69a32ddfb3 Mon Sep 17 00:00:00 2001 From: Gleb Khaykin Date: Mon, 6 Jan 2025 23:57:51 +0700 Subject: [PATCH 01/21] feat!: completly new layout --- app/components/atoms/Avatar.tsx | 16 -- app/components/atoms/Copyright.tsx | 4 +- app/components/atoms/LoadingSpinner.tsx | 12 -- app/components/molecules/Background.tsx | 20 ++ app/components/molecules/MenuItems.tsx | 42 ---- app/components/molecules/MobileMenuItems.tsx | 45 ----- app/components/molecules/SocialMedia.tsx | 10 +- app/components/organisms/Carousel.tsx | 27 ++- app/components/organisms/Footer.tsx | 6 +- app/components/organisms/Header.tsx | 40 ---- app/components/organisms/Pagination.tsx | 18 +- app/root.tsx | 38 ++-- app/routes/_index.tsx | 74 +++---- app/routes/blog.$slug.tsx | 71 +++---- app/routes/blog._index.tsx | 198 +++++++++++++------ app/styles/notion.css | 9 +- app/styles/tailwind.css | 5 + 17 files changed, 291 insertions(+), 344 deletions(-) delete mode 100644 app/components/atoms/Avatar.tsx delete mode 100644 app/components/atoms/LoadingSpinner.tsx create mode 100644 app/components/molecules/Background.tsx delete mode 100644 app/components/molecules/MenuItems.tsx delete mode 100644 app/components/molecules/MobileMenuItems.tsx delete mode 100644 app/components/organisms/Header.tsx diff --git a/app/components/atoms/Avatar.tsx b/app/components/atoms/Avatar.tsx deleted file mode 100644 index 73e34cf..0000000 --- a/app/components/atoms/Avatar.tsx +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Avatar component - * - * @returns Avatar component - */ -export const Avatar = () => { - return ( -
- Avatar -
- ); -}; diff --git a/app/components/atoms/Copyright.tsx b/app/components/atoms/Copyright.tsx index 3f8a732..f4daa5e 100644 --- a/app/components/atoms/Copyright.tsx +++ b/app/components/atoms/Copyright.tsx @@ -5,8 +5,8 @@ */ export const Copyright = () => { return ( -
-

© 2024 Gleb Khaykin

+
+

© 2025 Gleb Khaykin

); }; diff --git a/app/components/atoms/LoadingSpinner.tsx b/app/components/atoms/LoadingSpinner.tsx deleted file mode 100644 index f163542..0000000 --- a/app/components/atoms/LoadingSpinner.tsx +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Loading spinner component - * - * @returns Loading spinner component - */ -export const LoadingSpinner = () => { - return ( -
-
-
- ); -}; diff --git a/app/components/molecules/Background.tsx b/app/components/molecules/Background.tsx new file mode 100644 index 0000000..0a38228 --- /dev/null +++ b/app/components/molecules/Background.tsx @@ -0,0 +1,20 @@ +/** + * Background component + * + * @returns Background component + */ +export const Background = ({ + backgroundImageUrl, +}: { + backgroundImageUrl: string; +}) => { + return ( +
+
+
+
+ ); +}; diff --git a/app/components/molecules/MenuItems.tsx b/app/components/molecules/MenuItems.tsx deleted file mode 100644 index b448085..0000000 --- a/app/components/molecules/MenuItems.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { Link } from "@remix-run/react"; - -/** - * Menu items component - * - * @returns Menu items component - */ -export const MenuItems = () => { - return ( -
    -
  • - - Blog - -
    • -
  • - - CV - -
    • -
  • - - About - -
    • -
- ); -}; diff --git a/app/components/molecules/MobileMenuItems.tsx b/app/components/molecules/MobileMenuItems.tsx deleted file mode 100644 index b719521..0000000 --- a/app/components/molecules/MobileMenuItems.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Link } from "@remix-run/react"; -import { IoMdMenu } from "react-icons/io"; - -/** - * Mobile menu items component - * - * @returns Mobile menu items component - */ -export const MobileMenuItems = () => ( -
- - - -
    -
  • - - Blog - -
    • -
    -
  • - - CV - -
    • -
    -
  • - - About - -
    • -
-
-); diff --git a/app/components/molecules/SocialMedia.tsx b/app/components/molecules/SocialMedia.tsx index 35fed56..6094a70 100644 --- a/app/components/molecules/SocialMedia.tsx +++ b/app/components/molecules/SocialMedia.tsx @@ -1,7 +1,7 @@ -import { AiFillInstagram } from "react-icons/ai"; import { FaGithub, FaLinkedin, FaTelegram } from "react-icons/fa"; import { FaSquareXTwitter } from "react-icons/fa6"; import { ImMail4 } from "react-icons/im"; +import { RiInstagramFill } from "react-icons/ri"; /** * Social media component @@ -11,6 +11,9 @@ import { ImMail4 } from "react-icons/im"; export const SocialMedia = () => { return (
+ + + { rel="noopener noreferrer" aria-label="Instagram" > - - - - +
); diff --git a/app/components/organisms/Carousel.tsx b/app/components/organisms/Carousel.tsx index ec4e890..d214497 100644 --- a/app/components/organisms/Carousel.tsx +++ b/app/components/organisms/Carousel.tsx @@ -10,34 +10,31 @@ import { Tables } from "~/integrations/supabase/database.types"; */ export const Carousel = ({ posts }: { posts: Tables<"posts">[] }) => { return ( -
+
{posts.length > 0 ? ( -
+
{posts.map((post) => ( -
-
-

+
+
+

{post.title} -

-

+

+

{new Date(post.created_at).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", })}

-
+
{post.tags.map((tag) => ( - - {tag} + + #{tag} ))}
@@ -45,7 +42,7 @@ export const Carousel = ({ posts }: { posts: Tables<"posts">[] }) => { {post.title}
diff --git a/app/components/organisms/Footer.tsx b/app/components/organisms/Footer.tsx index f3581e1..ad94148 100644 --- a/app/components/organisms/Footer.tsx +++ b/app/components/organisms/Footer.tsx @@ -4,11 +4,13 @@ import { SocialMedia } from "../molecules/SocialMedia"; /** * Footer component * + * @param props - Component props + * @param props.textColor - Text color class for the footer * @returns Footer component */ -export const Footer = () => { +export const Footer = ({ textColor }: { textColor: string }) => { return ( -