mvaa.github.io/index.html at main · MarcosAndradeV/mvaa.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marcos Vinicius Andrade Almeida</title>
    <link rel="icon" type="image/png" href="assets/mvaa_icon.png" />
    <link rel="stylesheet" href="style.css" />

    <meta property="og:site_name" content="mvaa" />
    <meta property="og:title" content="Marcos Vinicius Andrade Almeida" />
    <meta property="og:url" content="https://mvaa.github.io/" />
    <meta property="og:image" content="https://mvaa.github.io/mvaa_icon.png" />
</head>
<body>
    <div class="theme-toggle">
        <button id="dark-mode-toggle" class="theme-button" title="Toggle dark mode">🌙</button>
    </div>

    <button class="logo" onclick="location.reload()"></button>

    <!--<h1 id="title"><a href="#title">WIP</a></h1>-->

    <p id="greeting">Hi! My name is <strong>Marcos Vinicius Andrade Almeida</strong>.</p>

    <div class="social-links">
        <a href="https://github.com/MarcosAndradeV" target="_blank" class="link-item">GitHub</a>
        <a href="https://linkedin.com/in/marcos-v-andrade-almeida" target="_blank" class="link-item">LinkedIn</a>
        <a href="mailto:mastermarcos1212@hotmail.com" class="link-item">Email</a>
        <!--<a href="#" class="link-item">Curriculum</a>-->
    </div>

    <small>&copy; 2026 Marcos Vinicius Andrade Almeida</small>

    <script>
        // Language detection and translation
        const translations = {
            'pt-BR': 'Oi! Meu nome é <strong>Marcos Vinicius Andrade Almeida</strong>.',
            'pt': 'Oi! Meu nome é <strong>Marcos Vinicius Andrade Almeida</strong>.',
            'en': 'Hi! My name is <strong>Marcos Vinicius Andrade Almeida</strong>.',
            'en-US': 'Hi! My name is <strong>Marcos Vinicius Andrade Almeida</strong>.',
            'en-GB': 'Hi! My name is <strong>Marcos Vinicius Andrade Almeida</strong>.',
            'es': 'Hola! Mi nombre es <strong>Marcos Vinicius Andrade Almeida</strong>.',
            'es-ES': 'Hola! Mi nombre es <strong>Marcos Vinicius Andrade Almeida</strong>.',
            'fr': 'Salut! Mon nom est <strong>Marcos Vinicius Andrade Almeida</strong>.',
            'fr-FR': 'Salut! Mon nom est <strong>Marcos Vinicius Andrade Almeida</strong>.',
            'de': 'Hallo! Mein Name ist <strong>Marcos Vinicius Andrade Almeida</strong>.',
            'de-DE': 'Hallo! Mein Name ist <strong>Marcos Vinicius Andrade Almeida</strong>.',
            'ja': 'こんにちは！私の名前はマルコス・ビニシウス・アンドラーデ・アルメイダです。',
            'zh': '你好！我的名字是<strong>Marcos Vinicius Andrade Almeida</strong>。',
            'zh-CN': '你好！我的名字是<strong>Marcos Vinicius Andrade Almeida</strong>。',
            'it': 'Ciao! Il mio nome è <strong>Marcos Vinicius Andrade Almeida</strong>.',
            'it-IT': 'Ciao! Il mio nome è <strong>Marcos Vinicius Andrade Almeida</strong>.',
            'ko': '안녕하세요! 제 이름은 <strong>Marcos Vinicius Andrade Almeida</strong>입니다.',
            'ru': 'Привет! Меня зовут <strong>Маркос Винисиус Андраде Алмейда</strong>.',
        };

        // Get user's language
        const userLanguage = navigator.language || navigator.userLanguage;
        const greeting = document.getElementById('greeting');
        const translatedText = translations[userLanguage] || translations[userLanguage.split('-')[0]] || translations['en'];
        greeting.innerHTML = translatedText;

        // Dark mode toggle
        const darkModeToggle = document.getElementById('dark-mode-toggle');
        const html = document.documentElement;

        // Check for saved preference or system preference
        const isDarkMode = localStorage.getItem('dark-mode') === 'true' ||
                          (window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('dark-mode') !== 'false');

        if (isDarkMode) {
            html.classList.add('dark-mode');
            darkModeToggle.textContent = '☀️';
        }

        // Toggle dark mode
        darkModeToggle.addEventListener('click', () => {
            html.classList.toggle('dark-mode');
            const isDark = html.classList.contains('dark-mode');
            localStorage.setItem('dark-mode', isDark);
            darkModeToggle.textContent = isDark ? '☀️' : '🌙';
        });
    </script>
</body>
</html>