https://marianacaldas.com/assets/js/main.js

1'use strict';
2
3(function ($) {
4  $(function () {
5    var $window = $(window);
6
7    // Scrolly.
8    $window.on('load', function () {
9      var x = parseInt($('.wrapper').first().css('padding-top')) - 15;
10
11      $('#nav a, .scrolly').scrolly({
12        speed: 1000,
13        offset: x,
14      });
15      $('#scroll-down a, .scrolly').scrolly({
16        speed: 1000,
17        offset: x,
18      });
19    });
20  });
21
22  const fadeDelay = window.innerWidth < 578 ? 0 : 5000;
23  $('.firstAngle').hide().fadeIn(fadeDelay);
24})(jQuery);
25
26//Header Effect -> Typep JS on Desktop
27const typedJS = function () {
28  new Typed('.typed-string', {
29    strings: ["Hi. I'm <strong>Mariana Caldas</strong>."],
30    typeSpeed: 13,
31    showCursor: false,
32  });
33  new Typed('.typed-string2', {
34    strings: [
35      "I'm a <strong>Digital Product Specialist</strong> passionate about delivering seamless web and mobile experiences. I specialize in driving cross-functional teams to build scalable, user-centric solutions across platforms such as web and mobile (Android & iOS), with a focus on agile development, accessibility, and performance optimization.",
36    ],
37    startDelay: 1000,
38    typeSpeed: 15,
39    showCursor: false,
40  });
41};
42
43typedJS();
44
45// Add copy year dynamically
46const copyYear = document.querySelector('[data-year]');
47copyYear.textContent = new Date().getFullYear();
48
49//Load project cards
50const loadProjects = async function () {
51  const response = await fetch('/data.json');
52  const data = await response.json();
53  const container = document.getElementById('projects');
54  data.map(p => {
55    const row = document.createElement('div');
56    row.classList.add('row');
57
58    const mobileWrapper = document.createElement('div');
59    mobileWrapper.classList.add('12u');
60    mobileWrapper.classList.add('12u(mobile)');
61
62    row.append(mobileWrapper);
63
64    const box = document.createElement('div');
65    box.classList.add('box');
66    box.classList.add('style2');
67
68    const url = document.createElement('a');
69    url.classList.add('image');
70    url.classList.add('featured');
71    url.href = p.url;
72    url.alt = p.url_title;
73    url.rel = 'noopener noreferrer';
74    url.target = '_blank';
75    url.title = p.title;
76
77    const img = document.createElement('img');
78    img.classList.add('lazy-img');
79    img.src = p.image_lazy;
80    img.dataset.src = p.image_full;
81    img.alt = p.image_alt;
82    img.width = '900';
83    img.height = '450';
84
85    url.append(img);
86    box.append(url);
87
88    const title = document.createElement('h3');
89
90    const titleURL = document.createElement('a');
91    titleURL.href = p.url;
92    titleURL.target = '_blank';
93    titleURL.rel = 'noopener noreferrer';
94    titleURL.innerText = p.title;
95    titleURL.title = p.title;
96
97    title.append(titleURL);
98
99    const content = document.createElement('p');
100    content.innerText = p.content;
101
102    if (p.content_url) {
103      const contentURL = document.createElement('a');
104      contentURL.href = p.content_url;
105      contentURL.target = '_blank';
106      contentURL.rel = 'noopener noreferrer';
107      contentURL.title = p.content_url_text;
108      contentURL.innerText = p.content_url_text;
109      contentURL.style.paddingLeft = '5px';
110      content.append(contentURL);
111    }
112
113    const stack = document.createElement('p');
114    stack.classList.add('tech');
115    stack.innerText = p.stack;
116
117    if (p.repo_url && p.repo_url !== '') {
118      const stackURL = document.createElement('a');
119      stackURL.href = p.repo_url;
120      stackURL.target = '_blank';
121      stackURL.rel = 'noopener noreferrer';
122      stackURL.title = p.repo_title;
123      stackURL.innerText = 'GitHub';
124      stackURL.style.paddingLeft = '5px';
125      stack.append(stackURL);
126    }
127
128    box.append(title);
129    box.append(content);
130    mobileWrapper.append(box);
131    row.append(stack);
132    container.append(row);
133  });
134  imageLazy();
135};
136loadProjects();
137
138// Lazy loading images with Intersection Observer API
139
140const imageLazy = function () {
141  const imgTargets = document.querySelectorAll('img[data-src]');
142
143  const loadImg = function (entries, observer) {
144    const [entry] = entries;
145
146    if (!entry.isIntersecting) return;
147
148    //Replace src with data-src
149    entry.target.src = entry.target.dataset.src;
150
151    entry.target.addEventListener('load', function () {
152      entry.target.classList.remove('lazy-img');
153    });
154
155    observer.unobserve(entry.target);
156  };
157
158  const imgObserver = new IntersectionObserver(loadImg, {
159    root: null,
160    threshold: 0,
161    rootMargin: '-100px', //Make images load before the thresold is reached
162  });
163

164  imgTargets.forEach(img => {
165    imgObserver.observe(img);
166  });
167};