develop
readme
LastModifiedDate01 Sep 2024
blog(2022-07)

my blog

📂 Intro

I used a customized Jekyll blog theme before developing my blog. When I wanted to refresh my blog, I found some free time and used that time to design and develop it myself.


🖥️ main page

main page of blogmain page of blog

🖥️ about page

The about page, which guided visitors to my blog and portfolio site, is currently not in use. This is because I decided to delete the portfolio site and focus on managing the blog.

about page of blog

🖥️ 404 page

404 page of blog

📝 Update

2023-11-18

  • Improved the GitHub Actions for blog
    • Reduced the build time from 11 minutes to 2 minutes

2023-07-06

  • Added support for DESC sorting of search results

2023-07-02

  • Fixed the animation for the post list

2023-05-25

  • Added meta tags for SEO

2023-05-25

  • Added feature to display the last modified date.
    • Added icon for publish date. When publish date and last modified date are the same, publish date is displayed.
    • Added an icon for last modified Date. When publish date and last modified date are different, last modified date is displayed.

2023-05-23

  • Added a field to the GraphQL schema
    • Added a lastMod field for SEO purposes

2023-05-22

  • Added PostCSS plugin to support multiple browsers

2023-05-21

  • Updated UI(search bar and header) and layout
  • Updated GitHub Actions to automatically generate the sitemap
  • Fixed a plugin error

2023-04-12

  • Added a search feature using fuse.js, enabling users to find posts by searching titles and content
  • Added plainTextContent filed into the GraphQL schema, which allows for the storage of pure text, encompassing HTML and various other formats.

2023-04-10

  • Made overall changes to the UI
    • I created the images made during the changes using Adobe Illustrator.

2022-12-04

  • Optimized font loading and rendering
  • I configured <link rel='preload'>, font-display, and formats (woff2, woff, truetype). As a result of testing on PC/mobile in LTE/Wi-Fi environments and measuring with Lighthouse, the font loading speed has improved.

2022-10-02

  • I carefully hand-drew the thumbnail image for the redesign.

2022-09-23

  • Added an image plugin for better readability. Visitor can see the applied image plugin in movielog.log(2022-05-17) post.

2022-09-18

  • There was a problem where the text got too big in the code blocks and plugins, so some of it disappeared. It was hard to see the problem because the text looked okay when I opened the tools or refreshed the page. This made it take longer to fix. While I was fixing it, I noticed the words were slow to show up, so I made them show up faster.
src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@300') format('woff2');
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300');
src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@300') format('woff2');
}

I added the font using an import method before. It is easy to use a way that does not need web fonts, but I wanted to learn how to use web fonts.

I read on Stack Overflow that if I want to use web fonts and make them load faster, I should use font-display: swap;. When I tried it, the font loading speed got much better.

I thought the font loading problem might also be about code blocks. When I checked, the issue was fixed. I learned that if the font loads slowly, it can cause problems with CSS. This happens because of how the CSSOM tree and DOM tree are created.

© 2024

Park Gadan

33°06'56.2"-38°34'03.5"