<p align="center"> <a href="https://karamazfolio.xyz/"><img src="https://raw.githubusercontent.com/JuditKaramazov/JuditKaramazfolio/main/public/karAvatar.png" width="300" height="300" alt="Main avatar." /></a> </p> <h1 align="center"> Karamazfolio, v.1.0 </h1> <div align="center"> <a href="https://codeclimate.com/github/JuditKaramazov/JuditKaramazfolio/maintainability"><img src="https://api.codeclimate.com/v1/badges/5fc37bddddf76f58ffab/maintainability" /></a> <a href="https://codeclimate.com/github/JuditKaramazov/JuditKaramazfolio/test_coverage"><img src="https://api.codeclimate.com/v1/badges/5fc37bddddf76f58ffab/test_coverage" /></a> <a href="https://github.com/JuditKaramazov/JuditKaramazfolio/actions/workflows/ci.yml"><img src="https://github.com/JuditKaramazov/JuditKaramazfolio/actions/workflows/ci.yml/badge.svg" /></a> </div> <div align="center"> <img src="https://img.shields.io/badge/HTML-HTML5-E34F26?logo=html5" alt="HTML" title="HTML" /> <img src="https://img.shields.io/badge/CSS-CSS3-1572B6?logo=css3" alt="CSS" title="CSS" /> <img src="https://img.shields.io/badge/TypeScript-007ACC?logo=typescript" alt="TypeScript" title="TypeScript" /> <img src="https://img.shields.io/badge/React.js-61DAFB?logo=react" alt="React.js" title="React.js" /> <img src="https://img.shields.io/badge/Next.js-000000?logo=next.js" alt="Next.js" title="Next.js" /> <img src="https://img.shields.io/badge/YAML-2C8EBB?logo=yaml" alt="YAML" title="YAML" /> </div> <br /> <p align="center"> <a href="https:/github.com/JuditKaramazov">🐱 /JuditKaramazov</a> </p> <p align="center"> <a href="https://www.karamazfolio.xyz">📍 Personal site</a> </p> <p align="center"> <a href="https://karamablog.xyz">☕ Blog</a> </p>

---

• 1️⃣. Introduction
• 2️⃣. Getting Started
• 3️⃣. Structure
• 4️⃣. Features
  • ↘️ YAML file
  • ↘️ Geek resume
  • ↘️ Repositories
  • ↘️ Theme switcher
  • ↘️ vCard
• 5️⃣. Scripts
  • ↘️ New projects
• 6️⃣. Future Updates
• 7️⃣. Style
• 8️⃣. Learn More

Introduction

There was a time when I thought we were all shackled to the labels apparently describing our persona. According to them, I was destined to become a Spanish Literature professor, but time proved that as polyhedral, multifaceted beings, it is not possible to capture the essence of who we are and confine it into a couple of adjectives and life experiences. Do not get me wrong: whatever happened in our lives, it did matter and leave its unique marks. However, such details can't contain in its margins the immensity of our curiosity, failures, successes, memories, and future goals.

Many years ago, I convinced myself that I could only be this Philologist side of me, but today I wanted to remind this complex being called Judit that she's something more than that, too - she's way too many other things, including a programmer.

Getting Started

This is a Next.js project bootstrapped with create-next-app. Considering this, remember to follow the next steps:

1. First, clone this repository:

$ git clone https://github.com/JuditKaramazov/JuditKaramazfolio.git

2. Take into account that a GITHUB_TOKEN is required (learn more here), so you'll have to create a .env.local file containing it before proceeding.

3. Then, install the right dependencies:

$ npm install

4. Finally, start the project:

$ npm start

Structure

Initially, the main goal that I pursued was keeping this site as clean, scalable, and maintainable as possible while keeping in mind my limited tools and knowledge, and that's the reason why each section and component follows a minimal (and yet descriptive enough) approach. I know it pretty much well: there is a global tendency to display the entire formation, work experience, languages, and overall paths and decisions that built the person we are today. However, and since this portfolio focuses on practicality rather than pure data, what you'll find by cloning this repository or simply having a look at the deployment site is:

1. A header containing a brief introduction of who Judit is: a tightrope walker, indeed.
2. A general view of my technology stack.
3. A downloadable CV, just in case you'd want to know more about my previous experience and relevant formation.
4. A preview of the main projects I've been working on so far.
5. A detailed description of my already-mentioned projects, illustrations, links to docs regarding the consulted technologies, and an accessible, visual approach to the rest of my work.
6. Some of the most relevant repositories I'm contributing to.
7. A footer containing some relevant links for us to stay in touch, schedule interviews (as well as some coffee moments), and contribute to maintaining this site by letting me know about potential problems and bugs.

Features

Although it may seem there's nothing much to clarify other than noting that I finally decided to create a portfolio, I find it relevant to mention that this project is a React-based single page app in TypeScript, using only statically generated pages.

Considering this, it's also important to highlight that Next.js creates pages from each item automatically thanks to the src/pages/[slug].tsx template you'll find if you dive into the repository's very essence and guts. With this said, let's now discuss a feature closely related to this idea:

YAML file

The entire definition of the projects displayed in this portfolio is contained by a YAML file, which allows the user to convert Markdown into HTML on build time; that's what possibilitates Next.js to automatically generate pages from each item. In other words, the YAML file serves as a central repository for all project-related information, allowing us to define project details, descriptions, and metadata in a clear and organized manner. Since the use of YAML allows for easy data manipulation, it makes it an ideal choice for structuring content and storing data:

• Readability: It's human-readable and easy to write.
• Structured: YAML is designed to represent complex data structures, which makes it suitable for storing structured information like project details.
• Integration: Many programming languages have libraries and tools for working with YAML, which allows easy integration into web applications.

To define project details in the YAML file, follow a specific format that the project uses for data retrieval. Here's an example of a project entry in YAML:

- title: My Awesome Project
  description: This project is amazing!
  techStack:
    - React
    - Next.js
  url: https://example.com/my-project
  image: /images/project-image.png

To learn more about how it's integrated in the portfolio, don't hesitate to have a look at the following file:

• _content/projects.yml

And as we'll mention in a while, please, remember the importance of structuring our site correctly for our latest work to be in the spotlight.

Geek resume

Because who doesn't want to be embrace the warmth of them bright lights, right? Actually, and as you probably assumed after getting a clearer idea of this project's goals, development and skeleton, I am not the kind of person who particularly enjoys describing her strengths, highlights or aptitudes. Even though that's an undenniable reality that I'm still trying to fight, and independently of this portfolio aiming to define and represent a more practical approach, I still incorporated a second (and hidden) resume. Would you describe yourself as an archeologist of the code? That's perfect, then! If you'd want to know more about me and still avoid the idea of a conventional CV or resume, feel free to investigate the depths of my code. You might find something, if not surprising, at least minimally interesting by doing so!

Repositories

As for the repositories themselves, all of them are fetched on build time directly from GitHub, filtered, sorted, and finally displayed on the front page. Here's how it works:

1. Fetching Repositories: The process begins by requesting information about GitHub repositories directly from GitHub. This is done with proper authorization using a GITHUB_TOKEN and setting a User-Agent in the request header. The repositories are retrieved from GitHub's API.

2. Filtering and Sorting: The fetched repositories are filtered and sorted to ensure only relevant repositories are displayed. This involves comparing the retrieved repositories with the ones defined in the YAML file that powers this portfolio.

3. Displaying Repositories: Finally, the sorted repositories are displayed on the site, providing visitors with a quick overview of the projects you've worked on.

The repositories are sorted based on their last push date, with the most recently updated repositories appearing at the top, which allows to showcase our most recent work effectively. Some interesting open-source projects will definitely be added in the future, so don't forget to check from time to time if there are any news!

Theme switcher

Because having a look every now and then stops us from staying in the dark, right...? In this case, and since I myself am quite sensitive whenever a powerful light attacks my eyes, incorporating a theme switcher capable of automati