Skip to content

Commit

Permalink
devloping light-dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
Kato committed Apr 2, 2024
1 parent bfc6ce0 commit b9b2b5e
Show file tree
Hide file tree
Showing 3 changed files with 178 additions and 173 deletions.
183 changes: 91 additions & 92 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,7 @@
</head>
<body>
<header class="header" id="myHeader">



<div class="lang">
<div id="lang">
<nav role="navigation" class="primary-navigation">
<ul>
<li><a href="#"><i class="fa-solid fa-language"></i></a>
Expand All @@ -28,8 +25,8 @@
<div class="ldbutton">
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="checkbox-label">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<i class="fa-solid fa-sun"></i>
<i class="fa-solid fa-moon"></i>
<span class="ball"></span>
</label>
</div>
Expand All @@ -43,66 +40,67 @@
</div>
</div>
</header>
<!--Sobre mí-->
<section class="section" id="sobreMi">
<div class="section-title">
<h2><i class="fa-solid fa-magnifying-glass"></i> Damián Ferreyra</h2>
</div>
<div class="containter">
<div class="row">
<div class="column">
<h4>Nacionality and residency</h4>
<p><i class="fi fi-ar"></i> Argentina - (2002-Now)</p>
<p><i class="fi fi-us"></i> United States - (Next target location)</p>
<div id="background">
<!--Sobre mí-->
<section class="section" id="sobreMi">
<div class="section-title">
<h2><i class="fa-solid fa-magnifying-glass"></i> Damián Ferreyra</h2>
</div>
<div class="containter">
<div class="row">
<div class="column">
<h4>Nacionality and residency</h4>
<p><i class="fi fi-ar"></i> Argentina - (2002-Now)</p>
<p><i class="fi fi-us"></i> United States - (Next target location)</p>
</div>
<div class="column">
<img class="column_img" src="images/arg_flag.jpg" alt="argentina flag" width="300px">
</div>
</div>
<div class="column">
<img class="column_img" src="images/arg_flag.jpg" alt="argentina flag" width="300px">
<div class="row">
<div class="column">
<h4>Why do I code?</h4>
<p>When I was in highschool, with a G-Code course I dicovered computing. But I had heard about that Minecraft was programmed in Java while playing it. After that, in 2020, I have taken a FrontEnd introduction course and I maked <a href="/myFirstWeb/index.html">my first web</a>. Years later, University was not for me when we taked TurboPascal by the first programming language but two years later I decided to better get my diploma soon while I spend my time programming.</p>
</div>
<div class="column">
<img class="column_img" src="/images/g-code.jpg" alt="G-code img" width="300px">
<h4 class="column_text">¡Say Hi, I'm G-Code! :)</h4>
<h5 class="column_text">¡They use me in CNC machines since 1958! <a href="https://gcodetutor.com/gcode-tutorial/history-of-gcode.html#:~:text=The%20birth%20of%20G%2DCode&text=This%20is%20possibly%20the%20oldest,)%20was%20invented%2C%20in%201958."><i id="wikimage" class="fa-brands fa-wikipedia-w"></i></a></h5>
</div>
</div>
</div>
</section>
<!--Tecnologías que uso-->
<section class="section" id="tecnologias">
<div class="section-title">
<h2><i class="fa-solid fa-code"></i> Software</h2>
</div>
<div class="container">
<div class="row">
<div class="column">
<h4>Why do I code?</h4>
<p>When I was in highschool, with a G-Code course I dicovered computing. But I had heard about that Minecraft was programmed in Java while playing it. After that, in 2020, I have taken a FrontEnd introduction course and I maked <a href="/myFirstWeb/index.html">my first web</a>. Years later, University was not for me when we taked TurboPascal by the first programming language but two years later I decided to better get my diploma soon while I spend my time programming.</p>
<div class="column-33">
<h4>FrontEnd</h4>
<ul>
<li><i class="fa-brands fa-js"></i> JavaScript</li>
</ul>
</div>
<div class="column">
<img class="column_img" src="/images/g-code.jpg" alt="G-code img" width="300px">
<h4 class="column_text">¡Say Hi, I'm G-Code! :)</h4>
<h5 class="column_text">¡They use me in CNC machines since 1958! <a href="https://gcodetutor.com/gcode-tutorial/history-of-gcode.html#:~:text=The%20birth%20of%20G%2DCode&text=This%20is%20possibly%20the%20oldest,)%20was%20invented%2C%20in%201958."><i id="wikimage" class="fa-brands fa-wikipedia-w"></i></a></h5>
<div class="column-33">
<h4>BackEnd</h4>
<ul>
<li><i class="fa-brands fa-python"></i> Python</li>
<li><i class="fa-brands fa-java"></i> Java</li>
</ul>
</div>
<div class="column-33">
<h4>FrameWorks</h4>
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!--Tecnologías que uso-->
<section class="section" id="tecnologias">
<div class="section-title">
<h2><i class="fa-solid fa-code"></i> Tecnologías</h2>
</div>
<div class="container">
<div class="row">
<div class="column-33">
<h4>FrontEnd</h4>
<ul>
<li><i class="fa-brands fa-js"></i> JavaScript</li>
</ul>
</div>
<div class="column-33">
<h4>BackEnd</h4>
<ul>
<li><i class="fa-brands fa-python"></i> Python</li>
<li><i class="fa-brands fa-java"></i> Java</li>
</ul>
</div>
<div class="column-33">
<h4>FrameWorks</h4>
<ul>
<li></li>
</ul>
</div>
</div>
</section>
<!--Proyectos-->
<section class="section" id="proyectos">
</section>
<!--Proyectos-->
<section class="section" id="proyectos">
<div class="section-title">
<h2><i class="fa-solid fa-code-branch"></i> Projects</h2>
</div>
Expand All @@ -127,43 +125,44 @@ <h4>Hey! I'm the title's project</h4>
</div>
</div>
</div>
</section>
</section>
</div>
<!--Footer-->
<footer class="footer" id="footer">
<div class="container">
<div class="footer-row">
<div class="footer-links">
<h4>Work</h4>
<ul>
<li><a href="#">Work experience</a></li>
<li><a href="#">My services</a></li>
<li><a href="#">Terms and conditions</a></li>
</ul>
</div>
<div class="footer-links">
<h4>Social media</h4>
<ul>
<li><a href="https://www.linkedin.com/in/dami%C3%A1n-ferreyra-b2453828a/"><i class="fab fa-linkedin"> LI</i></a></li>
<li><a href="https://twitter.com/DFKato"><i class="fab fa-twitter"> X</i></a></li>
<li><a href="https://github.com/KatoDF"><i class="fab fa-github"> GH</i></a></li>
<li><a href="https://discord.com/users/1088883078405038151"><i class="fab fa-discord"> Dc</i></a></li>
</ul>
</div>
<div class="footer-links">
<h4>Mail</h4>
<ul>
<li><p class="footer-text">¡Copy-paste!</p></li>
<li><button class="button" id="Mail">[email protected]</p></li>
<li><a id="mailTo" href="mailto:[email protected]">Send mail</a></li>
</div>
<footer class="footer" id="footer">
<div class="container">
<div class="footer-row">
<div class="footer-links">
<h4>Work</h4>
<ul>
<li><a href="#">Work experience</a></li>
<li><a href="#">My services</a></li>
<li><a href="#">Terms and conditions</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="message">
<h4>Copyright ©2024; Designed by Damián Ferreyra</h4>
<div class="footer-links">
<h4>Social media</h4>
<ul>
<li><a href="https://www.linkedin.com/in/dami%C3%A1n-ferreyra-b2453828a/"><i class="fab fa-linkedin"> LI</i></a></li>
<li><a href="https://twitter.com/DFKato"><i class="fab fa-twitter"> X</i></a></li>
<li><a href="https://github.com/KatoDF"><i class="fab fa-github"> GH</i></a></li>
<li><a href="https://discord.com/users/1088883078405038151"><i class="fab fa-discord"> Dc</i></a></li>
</ul>
</div>
<div class="footer-links">
<h4>Mail</h4>
<ul>
<li><p class="footer-text">¡Copy-paste!</p></li>
<li><button class="button" id="Mail">[email protected]</p></li>
<li><a id="mailTo" href="mailto:[email protected]">Send mail</a></li>
</div>
</div>
</div>
<div class="container">
<div class="message">
<h4>Copyright ©2024; Designed by Damián Ferreyra</h4>
</div>
</footer>
<script src="scripts.js"></script>
</div>
</footer>
<script src="scripts.js"></script>
</body>
</html>
12 changes: 9 additions & 3 deletions scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,13 @@ function myFunction() {
}
}

const checkbox = document.getElementById("checkbox")
const checkbox = document.getElementById("checkbox");

checkbox.addEventListener("change", () => {
document.body.classList.toggle("dark")
})
document.body.classList.toggle("dark");
var sections = document.getElementsByClassName('section');
var seclen = sections.length;
for(var i = 0; i <= seclen; i++) {
sections[i].className = "sectiongray";
}
});
Loading

0 comments on commit b9b2b5e

Please sign in to comment.