cptluke76/Simple_Portfolio
1
0
Fork 0
mirror of https://github.com/its-michaelroy/Simple_Portfolio.git synced 2026-06-03 23:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added Dark Mode and working on color scheme

Browse Source
This commit is contained in:
its-michaelroy
2024-09-05 11:14:46 -04:00
parent 7fee0c8fc0
commit e58af57ab3
5 changed files with 106 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
assets/css/main.css
View File

@@ -146,6 +146,31 @@ mark {
color: inherit; color: inherit;
} }
#theme-toggle {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
}
.fa-sun {
color: #ffc107;
}
.fa-moon {
color: #6c757d;
}
.dark-mode {
background-color: #222;
color: #ddd;
}
.dark-mode a {
color: #49bf9d;
}
input::-moz-focus-inner { input::-moz-focus-inner {
border: 0; border: 0;
padding: 0; padding: 0;
@@ -172,6 +197,10 @@ html {
box-sizing: inherit; box-sizing: inherit;
} }
.hidden {
display: none;
}
body { body {
background: #fff; background: #fff;
} }

19
assets/js/darkmode.js Normal file
View File

@@ -0,0 +1,19 @@
document.addEventListener("DOMContentLoaded", function () {
const body = document.body;
const themeToggle = document.getElementById("theme-toggle");
themeToggle.addEventListener("click", function () {
body.classList.toggle("dark-mode");
toggleThemeIcon();
});
function toggleThemeIcon() {
if (body.classList.contains("dark-mode")) {
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
} else {
themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
}
}
toggleThemeIcon(); // Set initial icon based on the current theme
});

14
assets/js/fullparagrph.js Normal file
View File

@@ -0,0 +1,14 @@
function toggleParagraph() {
var spans = document.querySelectorAll("#more");
var btnText = document.querySelector(".learn-more");
spans.forEach(function (span) {
span.classList.toggle("hidden");
});
if (spans[0].classList.contains("hidden")) {
btnText.textContent = "Learn More";
} else {
btnText.textContent = "Less";
}
}

58
index.html
View File

@@ -15,6 +15,16 @@
content="width=device-width, initial-scale=1, user-scalable=no" content="width=device-width, initial-scale=1, user-scalable=no"
/> />
<link rel="stylesheet" href="assets/css/main.css" /> <link rel="stylesheet" href="assets/css/main.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="inner">
<!-- ... existing header content ... -->
<div id="theme-toggle"></div>
</div>
</head> </head>
<body class="is-preload"> <body class="is-preload">
<!-- Header --> <!-- Header -->
@@ -56,32 +66,38 @@
problem-solving and innovation. My journey took a significant turn problem-solving and innovation. My journey took a significant turn
when I was deployed to Afghanistan, where I served as a military when I was deployed to Afghanistan, where I served as a military
police officer, working closely with the Afghan Army. This experience police officer, working closely with the Afghan Army. This experience
instilled in me a strong work ethic and discipline, and it was during instilled in me
this time I was encouraged by special ops personnel to pursue IT. This <span id="more" class="hidden">
advice set me on a path that led to critical roles in data center a strong work ethic and discipline, and it was during this time I
management and network optimization for organizations like Oracle. was encouraged by special ops personnel to pursue IT. This advice
set me on a path that led to critical roles in data center
management and network optimization for organizations like Oracle.
</span>
</p> </p>
<p> <p>
My career took another pivotal step during my time at UPMC <span id="more" class="hidden">
CancerCenters, where I realized that technology could have a profound My career took another pivotal step during my time at UPMC
impact on people's lives. Although I wasn't directly helping patients, CancerCenters, where I realized that technology could have a
ensuring that the doctors and nurses had reliable technology profound impact on people's lives. Although I wasn't directly
reaffirmed my belief that the tech field is where I could do the most helping patients, ensuring that the doctors and nurses had reliable
good for humanity. Recently, I graduated from Code Platoon's technology reaffirmed my belief that the tech field is where I could
Full-Stack Software Engineering program and am currently participating do the most good for humanity. Recently, I graduated from Code
in their part-time DevOps & Cloud Engineering course. My passion for Platoon's Full-Stack Software Engineering program and am currently
technology extends to AI, machine learning, and innovative solutions participating in their part-time DevOps & Cloud Engineering course.
in healthcare. I'm excited to continue expanding my expertise and My passion for technology extends to AI, machine learning, and
collaborating with like-minded professionals. Whether you're looking innovative solutions in healthcare. I'm excited to continue
to discuss projects, career opportunities, or simply exchange expanding my expertise and collaborating with like-minded
knowledge in the tech space, I'd love to connect! professionals. Whether you're looking to discuss projects, career
opportunities, or simply exchange knowledge in the tech space, I'd
love to connect!
</span>
</p> </p>
<ul class="actions"> <ul class="actions">
<li> <li>
<a href="https://mrcodewizard.com" class="button" target="_blank" <button class="button learn-more" onclick="toggleParagraph()">
>Learn More</a Learn More
> </button>
</li> </li>
</ul> </ul>
</section> </section>
@@ -365,6 +381,8 @@
<script src="assets/js/util.js"></script> <script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script> <script src="assets/js/main.js"></script>
<script src="assets/js/year.js"></script> <script src="assets/js/year.js"></script>
<script src="assets/js/fullparagrph.js"></script>
<script src="assets/js/darkmode.js"></script>
<script src="assets/js/formHandler.js" defer></script> <script src="assets/js/formHandler.js" defer></script>
<script> <script>
window.va = window.va =

6
package-lock.json generated Normal file
View File

@@ -0,0 +1,6 @@
{
"name": "Simple_Portfolio",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}