<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Claudia Tobias</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="mediaqueries.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FNNY2CKTY8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-FNNY2CKTY8');
</script>
<body>
<nav id="desktop-nav">
<div class="logo">Claudia Tobias</div>
<div>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<nav id="hamburger-nav">
<div class="logo">Claudia Tobias</div>
<div class="hamburger-menu">
<div class="hamburger-icon" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu-links">
<li><a href="#about" onclick="toggleMenu()">About</a></li>
<li><a href="#projects" onclick="toggleMenu()">Projects</a></li>
<li><a href="#contact" onclick="toggleMenu()">Contact</a></li>
</div>
</div>
</nav>
<!--YO-->
<section id="profile">
<div class="section__pic-container">
<img src="./assets/pfp_me.png" alt="profile picture" />
</div>
<div class="section__text">
<p class="section__text__p1">Hello, I'm</p>
<h1 id="name" class="title">Claudia Tobias</h1>
<p class="section__text__p2">Computer Science Student</p>
<script>
var targetWords = ["Claudia Tobias", "Creative", "Web Developer", "Curious"];
var currentWordIndex = 0;
var currentIndex = 0;
var typingDirection = 1; // 1 for typing, -1 for untyping
function typeEffect() {
var nameElement = document.getElementById("name");
var currentText = targetWords[currentWordIndex].substring(0, currentIndex + 1);
nameElement.textContent = currentText;
if (currentIndex === targetWords[currentWordIndex].length - 1 && typingDirection === 1) {
// If typing is complete, switch to untyping
typingDirection = -1;
setTimeout(typeEffect, 1000); // Wait for a second before untyping
} else if (currentIndex === 0 && typingDirection === -1) {
// If untyping is complete, switch to typing the next word
typingDirection = 1;
currentWordIndex = (currentWordIndex + 1) % targetWords.length;
setTimeout(typeEffect, 1000); // Wait for a second before typing the next word
} else {
// Continue typing or untyping
currentIndex += typingDirection;
setTimeout(typeEffect, 100); // Adjust the typing speed as needed
}
}
typeEffect();
</script>
<div class="btn-container">
<button
class="btn btn-color-2"
onclick="window.open('./assets/resume.pdf')"
>
Download CV
</button>
<button class="btn btn-color-1" onclick="location.href='./#contact'">
Contact Info
</button>
</div>
<div id="socials-container">
<img
src="./assets/linkedin.png"
alt="My LinkedIn profile"
class="icon"
onclick="location.href='https://www.linkedin.com/in/claudia-tobias/'"
/>
<img
src="./assets/github.png"
alt="My Github profile"
class="icon"
onclick="location.href='https://github.com/Fl4utia'"
/>
</div>
</div> <!--YO-->
</section>
<section id="about">
<p class="section__text__p1">Get To Know More</p>
<h1 class="title title-about">About Me</h1>
<div class="section-container">
<div class="section__pic-container">
<img
src="./assets/pfp.png"
alt="Profile picture"
class="about-pic"
/>
</div>
<div class="about-details-container">
<div class="about-containers">
<div class="details-container">
<img
src="./assets/experience.png"
alt="Experience icon"
class="icon"
/>
<h3>Skills</h3>
<p>Programming Languages: C++, HTML, CSS, JavaScript, SQL, R. <br>
Other Skills: Data Analysis, Project Management, Creativity, Self-Learning.
</p>
</div>
<div class="details-container">
<img
src="./assets/education.png"
alt="Education icon"
class="icon"
/>
<h3>Education</h3>
<p>B.S Computer Science<br />Tec de Monterrey</p>
</div>
</div>
<div class="text-container">
<p>
I am a student with a strong interest in technology and problem-solving, currently pursuing studies in Computer Science. Actively involved in project management, I demonstrate organizational and leadership skills. My technical proficiency includes data analysis and programming languages such as C++, HTML, CSS, and JavaScript, with practical experience in SQL for databases. Complemented by strong soft skills, such as teamwork and effective communication, I am eager to contribute to dynamic and innovative projects.
</p>
</div>
</div>
</div>
</section>
</section>
<section id="projects">
<h2 class="title title-projects">Projects</h2>
<div class="container">
<!-- Project 1 -->
<div class="project">
<a href="https://github.com/Fl4utia/Formula-1-Simulation" target="_blank" rel="noopener noreferrer">
<img loading="lazy" src="assets/formula1.png" alt="Project Image" class="project-image" />
<h3 class="project-title">F1 Simulation</h3>
<div class="project-container">
<p class="project-description">
Simulation that replicates the high-speed dynamics of a car navigating a curve and simulates potential crashes.
</p>
</a>
</div>
</div>
<!-- Project 2 -->
<div class="project">
<a href="https://github.com/Fl4utia/Malaria_Diagnosis" target="_blank" rel="noopener noreferrer">
<img loading="lazy" src="assets/malaria.png" alt="Project Malaria Diagnosis Image" class="project-image" />
<h3 class="project-title">Malaria Diagnosis</h3>
<div class="project-container">
<p class="project-description">
Malaria diagnosis using MATLAB Dielectrophoresis—simulating electric fields for advanced healthcare solutions.
</p>
</div>
</a>
</div>
<!-- Project 3 -->
<div class="project">
<a href="https://github.com/Fl4utia/Davalo-s_Magic_House" target="_blank" rel="noopener noreferrer">
<img loading="lazy" src="assets/magic_house.png" alt="Project Image" class="project-image" />
<h3 class="project-title">Davalo´s Magic House</h3>
<p class="project-description">
IoT smart home solution to enhance elder care, ensuring safety, independence, and remote monitoring.
</p>
</a>
</div>
<!-- Project 4 -->
<div class="project">
<a href="https://github.com/Fl4utia/Festival" target="_blank" rel="noopener noreferrer">
<img loading="lazy" src="assets/festival.png" alt="Project Image" class="project-image" />
<h3 class="project-title">Rock & EDM Fest</h3>
<p class="project-description">
A website where users can view information about an upcoming rock event.
</p>
</a>
</div>
<div class="project">
<a href="https://github.com/Fl4utia" target="_blank" rel="noopener noreferrer">
<img loading="lazy" src="assets/camp.png" alt="Project Image" class="project-image" />
<h3 class="project-title">DevWeb Camp</h3>
<p class="project-description">
Website for a conference where users can pay for tickets and reserve their spots. Using HTML, CSS, JS, Fetch, SASS, PHP, and MySQL.
</p>
</a>
</div>
<div class="project">
<a href="https://github.com/Fl4utia/Streaming_service" target="_blank" rel="noopener noreferrer">
<img loading="lazy" src="assets/netflix.png" alt="Project Image" class="project-image" />
<h3 class="project-title">Streaming System</h3>
<p class="project-description">
Efficient and scalable streaming service like Netflix using C++.
</p>
</a>
</div>
<div class="project">
<a href="https://github.com/Fl4utia/Real-state-agency" target="_blank" rel="noopener noreferrer">
<img loading="lazy" src="assets/real_state_page.png" alt="Project Image" class="project-image" />
<h3 class="project-title">Real State Agency</h3>
<p class="project-description">
Website for a real estate agency specializing in property services and solutions.
</p>
</a>
</div>
<div class="project">
<a href="https://github.com/Fl4utia" target="_blank" rel="noopener noreferrer">
<img src="assets/task.png" alt="Project Image" class="project-image" />
<h3 class="project-title">UpTask</h3>
<p class="project-description">
Project Manager in Ajax, PHP, MySQL, and JavaScript.
</p>
</a>
</div>
</div>
</section>
<section id="contact">
<p class="section__text__p1">Get in Touch</p>
<h1 class="title">Contact Me</h1>
<div class="contact-info-upper-container">
<div class="contact-info-container">
<img
src="./assets/email.png"
alt="Email icon"
class="icon contact-icon email-icon"
/>
<p><a href="mailto:ximenatobias1@gmail.com">ximenatobias1@gmail.com</a></p>
</div>
<div class="contact-info-container">
<img
src="./assets/linkedin.png"
alt="LinkedIn icon"
class="icon contact-icon"
/>
<p><a href="https://www.linkedin.com/in/claudia-tobias/">LinkedIn</a></p>
</div>
</div>
</section>
<footer>
<nav>
<div class="nav-links-container">
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<p>Copyright © 2024 Claudia Tobias. All Rights Reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>