oskar-gmerek / oskargmerek.com

Source code of my personal website oskargmerek.com

👋 Hi there! I'm Oskar.

I'm Oskar Gmerek, a passionate programmer with a strong interest in frontend development. I'm eager to break into the industry and make my mark by creating clean, efficient, and user-friendly web applications. My goal is to learn from experienced professionals and contribute to the success of innovative projects.

💻 Workplace

• ❗️❗️ 🔍 I am actively seeking my first full-time role in the IT industry, with a preference for remote or hybrid positions based in West Sussex or London, ideally in an environment open to individuals without commercial experience, that invests in employee training, and utilizes a modern technology stack.

🎓 Education & Bootcamp Experience

• 🖥️ Software Engineering (Fundamentals) by HyperionDev [In Progress]
  • Actively participating, developing, and validating my skills
  • Check out my progress: Bootcamp Portfolio
  • Aiming to complete the program with a certificate
• 🌐 LinkedIn Learning
  • Participated in various courses and earned certificates to confirm my acquired skills
• 🦉 Continuous self-learning based on documentation, articles, blogs, videos, open-source repositories, etc.

💼 Experience

• 🚚 Last Mile Delivery Supply Chain Industry
  • Gained valuable insights into the importance of utilizing modern technologies and adapting to changing market conditions
  • Gained experience in building and leading teams

🛠️ Technical Skills

• 🌟 Preferred technology stack:
  • Svelte, SvelteKit
  • MasterCSS
  • SurrealDB
• 🌐 Web Development: HTML, CSS, JavaScript
• 📚 Version Control: Git, GitHub

🌟 Soft Skills

• 🏆 Determination and continuous development mindset
• 🌱 Ability to learn quickly
• 🤝 Experience as both a team member and team leader

📫 Get in Touch

• 💼 LinkedIn: Check out my profile

📊 My GitHub Stats

oskargmerek.com's Issues

Contact

Seo for homepage

Meta tags:

• title
• description
• keywords
• canonical link
• robots tags
• microdata schema

Content:

• Rewrite the intro to use keywords.

Fix HTML & CSS:

• Missing space overflow:hiddenbanner
• attribute name on element select must not be empty.
• Attribute placeholder not allowed on element select
• Attribute disablepictureinpicture not allowed on element video
• Attribute disableremoteplayback not allowed on element video
• Element track is missing required attribute src

Collaboration (contact form)

Translate Homepage, contact page and components

Places need to be translated:

Components:

• TextArea #44
• #63

Modules:

• #65
  • titles
  • alts

Pages:

• #64
  +page.server.ts:
  • Error Messages
    +page.svelte:
  • subject options
  • deadline options
  • work mode options
  • h1
  • labels
  • placeholders
  • h2
• #66
  +page.svelte:
  • Button

Unwanted extra `padding-right` on `TextInput` component

The padding value should be the same from every side.

PostHog integration

This project is a good reason to test a session replay from PostHog

Seo for contact page

Meta tags:

• title
• description
• keywords
• canonical link
• robots tags
• microdata schema

Fix HTML & CSS:

• Bad value for attribute name on element select must not be empty
• Attribute placeholder not allowed on element select
• Attribute placeholder not allowed on element select

Integrate analytics library

Automation: Pull translations

Description:
Prevent production releases with missing translations.

Roadmap:

• Add Tolgee API key to GitHub secrets
• Add package.json script: tolgee:pull
• Add .tolgeerc config file to determine project ID
• Move translation files to json folder to prevent unwanted overwriting of locales.ts file
• Modify release action to pull translation files on release

Convert text to translation keys

TODO:

• Convert text mock-up to translation keys

Part of #11

Newsletter

`LangSelect` language abbreviation not visible on small screen

Current behaviour:

When the viewport is less than 776px wide,
the language abbreviation becomes hidden by ⋁ symbol of a select component.

Expected behavior:

The language abbreviation and ⋁ symbol should be always visible, on every screen.

Registration form

Create a component to select different languages

#11

Business Partnership (contact form)

Integration with transactional email service

Sending email is one thing, but make them to be devilabry is different thing.
Implementation of this functionality on its own may be expensive and difficult. As this website is not a email service, there is no sense to try implementing anything. Much better option is to use 3rd party specialized service, especially as it will fit for a free quote for a long time or even forever.

Integrate one of services for email sending functionality:

• Sendinblue
• Mailgun
• SendGrid
• Amazon SES
• Postmark
• Mailjet
• MailerSend
• Moosend
• Mailgun
• Mailchimp

Criteria:

• Highest user rating is better
• Highest free quota limit is better
• Lower price is better
• Simpler integration is better
• No charge for inbound emails is required

Login form

Engaging landing page

mobile `menu`

Implementation of „hamburger” menu for mobile

`slide` animation not apply on change between `emailSubject` other than initial

Current behaviour:
If I choose the job_offer subject, and then switch it to collaboration then will be no slide animation triggered

Expected behaviour:
slide animation should be triggered every time the subject is changed

How to fix this:
All form parts related to each subject need to be in the container triggering a slide animation

Image optimization

Homepage

Choose the right hosting that won't devastate my wallet

Blog

Translations for `TextArea`

Phrase "Max {maxlength} characters" need to be translated

Default language always redirect to the main page

[BUG] Default language always redirect to the main page

Current behavior:

When the user type by hand an URL to a subpage under the default language, then will be redirected to the main page instead of seeing an expected subpage.

Wanted behavior:

When the user type for example https://oskargmerek.com/en/contact then should be redirected to the https://oskargmerek.com/contact subpage.

`CI` Release automation for changelog purposes

Let's integrate a version control system to manage our software releases effectively.

Default changeset-bot is not automated enough.

intuit/auto - I have used it in at least one project and it performed well.

Project page

`TopNav`

BannerMe

Hover area for `BannerMe` is broken

When user hover even 200px under the banner, its still recognized as a hover area of this banner.

Expected behavior:

• Hover only over the banner section and his overflowed elements should trigger hover event on BannerMe animated parts.

Other Inquiries (contact form)

Logo & Favicon

On the subpages on default language html `lang` get wrong assignment

Current behaviour:
When visiting /contact
contact is assigned to HTML lang attribute

Expected behaviour:
Default language code should be assigned to HTML lang attribute, e.g. lang="en"

Integrate with `@tolgee/svelte` library as an i18n engine

#11

Scaling of `TextArea` component fails

When the value of TextArea contains line breakers enters \n then works as expected.
But if the value contains long text with just spaces (or without them), the height of the textarea is not adjusted.

Current behaviour:
If we copy

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

and paste it into TextArea then we will see just the first two lines and scroll area will be active.

Expected behaviour
When we copy and paste the above text then height of TextArea should be adjusted and the whole text should be visible. No scroll area should be active in the input field.

`LinkedIn` and `GitHub` links

Translations are not updated on the first visit

Current behavior:

After selecting different than the default language on the first visit:

• ✅ url is updated correctly
• ✅ local storage is updated correctly
• ✅ translations file is loaded
• ❌ text on the page is not updated

• Text is updated correctly even on the first visit if it was visited firstly at not default language url, or page was refreshed on not default url

Investment Opportunity (contact form)

Navigation - Mobile

Internationalization of website

This is a roadmap for implementing Internationalization:

Steps:

• Integrate with @tolgee/svelte library as an i18n engine
• Add initial translation files for English and Polish
• Convert text to translation keys
• Create a component to select different languages

Contact form

The contact form should send two emails after submission:

1. The first email with the form content should go to my email box.
2. The second email should confirm submission and go to the user if email is provided.

The form should look different depending on the subject of contact. The starting list of subjects:

• Web Development

  • Project Name text input
  • Project Details textarea
  • Budget text input
  • Deadline select / text input
  • Additional Requirements textarea

• Job Offer

  • Company Name text input
  • Company Website text input
  • Position text input
  • Job Description textarea
  • Work Mode select onsite | hybrid | flexible | remote
  • Location text input *hidden for remote
  • Salary text input
  • Additional Information textarea

• #46

  • Company Name text input
  • Company Website text input
  • Nature of Partnership textarea
  • Expected Benefits textarea
  • Additional Information textarea

• #47

  • Organization Type select company | charity | freelance | other
    • Company Name text input *only for company
    • Organisation Name text input *only for charity
  • Collaboration Details textarea
  • Expected Outcomes textarea
  • Additional Information textarea

• #48

  • Company Name text input
  • Company Website text input
  • Investment Details textarea
  • Expected Returns textarea
  • Additional Information textarea

• #49

  • Message textarea
  • Additional Information textarea

For all subjects there should be contact details:

• #50
  • Full name text input
  • Email Address text input *with validation for valid email format
  • Mobile Number text input
  • Other contact ways textarea

There is no need to require to fill in more fields than Full name + one option of contact.
The fields are meant to suggest what information I expect, but in no way do I want to force users to fill in the information they do not want to provide. So the form will be validated only if the name of the user was provided and any of the contact ways. Additionally, I will validate if email is correctly typed and all other fields will be left as they are.

Contact Details (contact form)

Navigation - Desktop

Choose fonts and integrate them

Add initial translation files for `English` and `Polish`

#11