Fekler/fekler.github.io

Personal website, fekler.tech, where I showcase my projects and share my thoughts. This site is built with HTML, CSS, and pure JavaScript, providing a smooth scrolling experience, language selection, and seamless integration with social media platforms.

Landing Page fekler.tech

Overview

Welcome to the repository of my personal website, fekler.tech, where I showcase my projects and share my thoughts. This site is built with HTML, CSS, and pure JavaScript, providing a smooth scrolling experience, language selection, and seamless integration with social media platforms.

Features

• Smooth Scrolling: Enjoy a seamless scrolling experience as you navigate through the different sections of the website.
• Social Media Integration: Easily connect with me through various social media platforms. The website includes direct links to my profiles.
• Language Selection: Choose your preferred language directly from the website. The language selector is seamlessly integrated for a user-friendly experience.
• Icon Presentation Logic: Icons are strategically presented to enhance the visual appeal and provide a clear representation of different sections.

Access the Site

• https://fekler.tech/

Screenshots

Desktop View

Mobile View

Language Selector

---

Table of Contents

• Description
• Scripts
  • Localizationstrings.js
  • SmothScroll.js
  • CalculatorHeight.js
  • Navbar.js
  • Divskills.js
  • Divcontact.js

Scripts

Localizationstrings.js

The Localizationstrings.js script handles language localization for the website. It includes static content in both English and Portuguese, allowing users to toggle between languages. The changeLanguage function dynamically updates the content based on the selected language.

SmothScroll.js

The SmothScroll.js script enables smooth scrolling behavior for navigation links. It selects specific elements on the page (e.g., links with class "smooth" or "name") and adds click event listeners to scroll smoothly to the corresponding section.

CalculatorHeight.js

The CalculatorHeight.js script adjusts the height of an image container (img-perfil) based on the window width. It ensures a responsive design by setting the image height equal to the height of a specified container (greetings-text-content) when the window width is greater than 767px.

Navbar.js

The Navbar.js script provides functionality for a responsive navigation bar. The NavBarClick function toggles the responsive class for the navigation bar, allowing for a mobile-friendly menu. It also closes the mobile menu when a navigation link is clicked.

Divskills.js

The Divskills.js script manages the visibility of a set of skill images based on the window width. It includes functionality to show a specific number of images depending on the screen size. The script also adds previous and next buttons to navigate through the set of skill images.

Divcontact.js

Similar to Divskills.js, the Divcontact.js script controls the visibility of a set of contact icons. It adjusts the number of visible icons based on the window width and provides navigation through the set using previous and next buttons.

Note: Ensure that all scripts are linked appropriately in your HTML files.

Hosting on GitHub Pages

The website is hosted on GitHub Pages, making it easily accessible to users. GitHub Pages is a free hosting service provided by GitHub, allowing users to showcase their static websites, documentation, or project pages directly from a GitHub repository.

Access the Hosted Site

• https://fekler.github.io/

Steps to Host Your Site on GitHub Pages

1. GitHub Repository Setup:

   • Ensure your website code is in a dedicated repository on GitHub.

2. Branch Selection:

   • If you have multiple branches, set the branch containing your production-ready code as the GitHub Pages source. This is typically the main or master branch.

3. Navigate to Repository Settings:

   • Go to your GitHub repository and click on the "Settings" tab.

4. GitHub Pages Section:

   • Scroll down to the "GitHub Pages" section in the Settings.

5. Source Selection:

   • In the GitHub Pages section, choose the branch you want to use for GitHub Pages (e.g., main).

6. Save Changes:

   • Save your changes. GitHub Pages will generate a URL for your hosted site.

7. Access Your Site:

   • Once the settings are saved, your site will be available at the generated GitHub Pages URL. It might take a few minutes for the changes to take effect.

8. Custom Domain (Optional):

   • If you have a custom domain, you can configure it in the GitHub Pages settings for a more personalized URL.

Note: Ensure that your repository is public if you want to host a GitHub Pages site. Private repositories require a GitHub Pro or higher subscription for private repository GitHub Pages hosting.

🤝 Contributors

Felipe Queiroz