tchojnacki.dev – a personal website 🧑‍💻

tchojnacki.dev is a modern personal portfolio and blog that highlights my projects, skills, and social links. It features interactive blog posts, a responsive design with multiple themes, and fast-loading pages. It receives around 50-100 unique monthly visitors (mainly from Google) through SEO-optimized and engaging content and has been maintained and actively updated since 2021. Furthermore, it achieves top-tier performance, with 100s across Google PageSpeed Insights and a 100 RES in Vercel Speed Insights. The main technologies used in the website comprise Astro, React, TypeScript, and Tailwind CSS. Additionally, a custom blog framework built on top of MDX enables the creation of interactive posts on various technical topics.

Technology 🔧

• Core: Astro, React, TypeScript
• Design: Tailwind CSS, Tabler Icons, Simple Icons, Figma
• Blog: MDX, KaTeX, nanostores
• Helpers: Lodash, clsx, tailwind-merge
• Tools: Vitest, Storybook, Vite, Git
• CI/CD: GitHub Actions, Codecov
• Formatting: Prettier, commitlint, Husky
• Platforms: Vercel, Squarespace

Repository 🗃️

• /.github - GitHub Actions workflows and Codecov configuration
• /src - project source code
  • /assets - emojis, images, and other bundled assets
  • /components - reusable UI components
  • /consts - various configuration flags used across the project
  • /content - Astro content definitions
    • /posts - blog posts written in MDX
    • /projects - projects from my portfolio
    • /skills - short technology definitions
  • /hooks - custom, reusable React hooks
  • /layouts - page layouts
  • /lib - domain logic and utilities
  • /pages - routes used by Astro for static site generation
• /CONTRIBUTING.md - guidelines for external contributors

Deployment 🚀

Production 🌐

The website is available online at tchojnacki.dev, deployed through Vercel.

Development 🏗

Run the development server:

npm run dev

Open http://localhost:4321 with your browser to see the result.

You can build the project and preview an optimized version using:

npm run build
npm run preview

Testing 🧪

Enter the following command:

npm run test

Test results will be printed alongside a coverage report. The tests are also run as part of the CI/CD process on every pull request. Note that only the logic is tested - there are no visual tests.

Storybook 📚

Storybook documents the components written in React (due to technical limitations, Astro components cannot be documented). To run Storybook locally, use:

npm run storybook