About This Website

Tech Stack

This website is proudly crafted with the following technologies:

I purchased my domain avenmathias.com for this site from Hostinger, and the site is deployed on Vercel.

Typography

A carefully selected set of typefaces contributes to the website's visual identity:

• Karla: Used for the majority of the body content for readability.
• Geist: Used for the content of Blogs and Projects Slug Page.
• Peachi: Applied to headings to create a distinct and memorable visual hierarchy.
• Life of Apple: Elegantly displays my name, lending a personal touch.
• MonoLisa: Chosen for code snippets, ensuring clarity and legibility.
• Ride My Bike: Font for some special sections of the website.
• JetBrains Mono: Used for code blocks and technical content.

Design & Colors

The website's color palette is a result of deliberate selection and feedback, reflecting my personal aesthetic while prioritizing accessibility and a modern feel.

These colors are consistently applied throughout the site to maintain a cohesive and visually appealing experience.

External APIs & Libraries

This website leverages several external APIs and libraries to enhance functionality and user experience:

• Weather API: To dynamically display weather information.
• Joke API: To generate random jokes.
• Spotify API: To showcase listening activity.
• WakaTime API: To display coding statistics.
• Time API: To display time in the contact page.
• Umami API: For privacy-focused website analytics.
• Feedback.fish: Providing the feedback widget.

Additional Libraries & Functionality

Beyond the core tech stack, the website utilizes the following libraries to enhance specific features:

• Shadcn UI: For beautifully-designed, accessible components
• auth.js v2: For secure and streamlined user authentication.
• Icons: Sourced from both react-icons and react-feather, providing a diverse and consistent icon set.
• recharts: Used for data visualization in the dashboard.
• react-hot-toast: For displaying user-friendly toast notifications.
• react-canvas-confetti: To generate engaging confetti effects.
• Custom Cursor: For unique and personalized custom cursors.
• react-medium-image-zoom: Enables image zooming functionality.
• react-cookie: For Storing Blog Views and Likes.

Acknowledgements

I would like to express my sincere gratitude to the following individuals and their work, which have significantly inspired the design and development of this portfolio:

Beautiful flowers decoration used in the footer by Saira from 100 Day Design Challenge

• Manish Tamang
• Ouassim
• Jahir Fiquitiva
• Theodorus Clarence
• Bona Brian Siagian
• Lee Robinson
• Marc Bouchenoire
• Victor Eke
• Ryan Aulia
• Vijay Verma
• Raphaël Chelly
• danielwirtz
• DavidDarnes
• Sayan Dey
• Håvard Brynjulfsen

And to many more talented developers and designers whose work has unknowingly shaped my perspective and approach. Thank you all.