andre-kmp.github.io/index.html at main · andre-kmp/andre-kmp.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="André Klaic - Data Scientist from Tupã, SP, Brazil. This site is a hub for case studies, ideas and experiments. Feel free to reach me!" />
    <title>André Klaic | Data Scientist, Analyst and Researcher in Tupã, São Paulo, Brazil</title>
    <link rel="icon" type="image/png" href="images/favicon.png" />
    <link rel="stylesheet" href="style.css" />

    <style>
        @font-face {
            font-family: "EvilEmpire";
            src: url("fonts/Evil Empire.otf") format("truetype");
        }
        @font-face {
            font-family: "Unageo";
            src: url("fonts/Unageo-Regular.ttf") format("truetype");
        }
        @font-face {
            font-family: "UnageoBold";
            src: url("fonts/Unageo-Bold.ttf") format("truetype");
        }
        @font-face {
            font-family: "UnageoBlack";
            src: url("fonts/Unageo-Black.ttf") format("truetype");
        }
    </style>
</head>
<body>

	<header id="top">
	  <div class="header-container">
	    <div class="logo"><a href="https://andre-kmp.github.io">André Klaic</a></div>

	    <nav>
	      <a href="#portfolio">Case studies</a>
	      <a href="#aboutme">About me</a>
	      <a href="#contact">Contact</a>
		  <div class="language-selector">
		    <button class="lang-btn"><img src="images/icon-en.png" alt="English" class="flag-icon"> English ▾</button>
		    <ul class="lang-menu">
		      <li><a href="#"><img src="images/icon-en.png" alt="English" class="flag-icon"> English</a></li>
		      <li><a href="#"><img src="images/icon-pt.png" alt="Português" class="flag-icon"> Portuguese</a></li>
		    </ul>
		  </div>
	    </nav>

	    <div class="menu-toggle" onclick="toggleMenu()">☰</div>
	  </div>
	</header>


	<script src="js/menu.js"></script>


	<div class="content-wrapper">
	    <canvas id="bubbles"></canvas>
	    <main class="main-container">

	        <section class="intro">
	            <h1>André Klaic</h1>
                <p>Data professional — with a focus on exploratory data analysis and predictive modeling.
                My journey began in 2019 with <b>applied statistics in scientific research</b>.
                Since then, I have worked with data in different fields, with the last three years
                dedicated to market research. As a Biosystems Engineer, I bring <b>systemic thinking to problem-solving</b>.
                Currently studying Data Science at UNIVESP (Brazil). I also love to code :)<br><br>
                <b>This website is still under construction</b>.
	        </section>

	        <section class="portfolio">
	            <h2>Case studies</h2>
	            <div class="portfolio-grid">
	                <a href="#" class="portfolio-item">
	                    <img src="images/project1.jpg" alt="Projeto 1">
	                    <div class="divider"></div>
	                    <h3>Climate forecasting</h3>
	                    <p>Título e imagem meramente ilustrativos, pois esse site ainda não está oficialmente no ar :)</p>
	                </a>
	                <a href="#" class="portfolio-item">
	                    <img src="images/project2.jpg" alt="Projeto 2">
	                    <div class="divider"></div>
	                    <h3>Getting insights from categorical data</h3>
	                    <p>Título e imagem meramente ilustrativos, pois esse site ainda não está oficialmente no ar :)</p>
	                </a>
	                <a href="#" class="portfolio-item">
	                    <img src="images/project3.jpg" alt="Projeto 3">
	                    <div class="divider"></div>
	                    <h3>Setting up the environment</h3>
	                    <p>Título e imagem meramente ilustrativos, pois esse site ainda não está oficialmente no ar :)</p>
	                </a>
	            </div>
	        </section>

	        <!-- TERCEIRA SECTION -->
	        <section id="contact" class="contact">
	            <h2>Contact</h2>
	            <p>
	            I’m open to discussing any of the topics featured here, at any level.<br>
	            You can reach me <a href="mailto:andreklaic@gmail.com" aria-label="Send an email to André Klaic">by email</a> or through social media:<br><br>
	            </p>
	            <p>
	                <a href="https://github.com/andre-kmp">GitHub</a> |
	                <a href="https://linkedin.com/in/andreklaic">LinkedIn</a> |
	                <a href="https://www.kaggle.com/andrekmp">Kaggle</a>
	            </p>

               <div class="back-to-top">
                   <a href="#top"> ↑ Back to top</a>
               </div>

	        </section>
	    </main>
	</div>

    <footer>
        <p>© 2025 andre-kmp — Inspired by <a href="https://www.jeyausten.com/">Jey Austen</a>. Built with the help of ChatGPT (GPT-5, OpenAI) for CSS and HTML.</p>
    </footer>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="js/bubbles.js"></script>

</body>
</html>