nikolovlazar/v1.nikolovlazar.com

V1 of my personal site. If you're looking for v2: https://github.com/nikolovlazar/nikolovlazar.com

V1 nikolovlazar.com

• Framework: Next.js
• Database: PlanetScale
• ORM: Prisma
• Deployment: Vercel
• Content: MDX
• Styling: Chakra UI
• Services:
  • Raindrop for Bookmarks
  • ConvertKit for Newsletter and Course Subscriptions
  • AirTable for Books
  • Plausible for Analytics

If you're looking for V2: https://github.com/nikolovlazar/v2-nikolovlazar.com

Running Locally

$ git clone https://github.com/nikolovlazar/v1.nikolovlazar.com.git
$ cd nikolovlazar.com
$ yarn
$ yarn dev

Create a .env file similar to .env.example.

v1.nikolovlazar.com's Issues

Suggestion: Add ScrollToTop Button

Since pages on posts or in general can get very long it's a bit tough to scroll up when you are midway and no footer with links is in sight 😀

/src/components/ScrollButton/index.jsx

import React from 'react';
import { BiArrowToTop } from 'react-icons/bi';
import { IconButton } from '@chakra-ui/react';

export default function ScrollButton() {
    const [showScrollToTop, setScrollToTop] = React.useState(false);

    React.useEffect(() => {
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                setScrollToTop(true);
            } else {
                setScrollToTop(false);
            }
        });
    }, []);

    const scrollTop = () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth',
        });
    };
    
    return (
        <>
            {showScrollToTop && (
                <IconButton
                    position='fixed'
                    bottom={20}
                    right={20}
                    aria-label='back to the top'
                    variant='solid'
                    size='md'
                    onClick={scrollTop}
                    icon={<BiArrowToTop />}
                />
            )}
        </>
    );
}

Also your recreation of your personal website inspired me to do the same :)

[ Problem ] Dark Mode

ayyyy, nice to meet u!

I met a problem about your website. If I selected dark mode, and reflash page, then it will restore to light mode.

Search would not show posts if query is typed in all lowercase

Would have done the the search-query on /pages/blog/index.tsx differently since it will not show any posts if you type the title all in lowercase.

const filteredPosts = posts.filter((post) =>
  post.title.toLowerCase().includes(query.toLowerCase())
);
setDisplayPosts(filteredPosts);

Anyways beautiful site 😀

Migration to gatsby

How we can convert this site into gatsby version ?