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";
}
}

54
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
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. management and network optimization for organizations like Oracle.
</span>
</p> </p>
<p> <p>
<span id="more" class="hidden">
My career took another pivotal step during my time at UPMC My career took another pivotal step during my time at UPMC
CancerCenters, where I realized that technology could have a profound CancerCenters, where I realized that technology could have a
impact on people's lives. Although I wasn't directly helping patients, profound impact on people's lives. Although I wasn't directly
ensuring that the doctors and nurses had reliable technology helping patients, ensuring that the doctors and nurses had reliable
reaffirmed my belief that the tech field is where I could do the most technology reaffirmed my belief that the tech field is where I could
good for humanity. Recently, I graduated from Code Platoon's do the most good for humanity. Recently, I graduated from Code
Full-Stack Software Engineering program and am currently participating Platoon's Full-Stack Software Engineering program and am currently
in their part-time DevOps & Cloud Engineering course. My passion for participating in their part-time DevOps & Cloud Engineering course.
technology extends to AI, machine learning, and innovative solutions My passion for technology extends to AI, machine learning, and
in healthcare. I'm excited to continue expanding my expertise and innovative solutions in healthcare. I'm excited to continue
collaborating with like-minded professionals. Whether you're looking expanding my expertise and collaborating with like-minded
to discuss projects, career opportunities, or simply exchange professionals. Whether you're looking to discuss projects, career
knowledge in the tech space, I'd love to connect! 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": {}
}