lotte/website
1
Code Activity

build10

Browse source
This commit is contained in:
Charlotte Croce 2025-04-03 18:57:53 -04:00
parent a07ba80e7f
commit ac4a300a62
2 changed files with 510 additions and 519 deletions
Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -92,7 +92,7 @@
<div class="project-card">
<div class="card-content">
<h3>Champlain Tech Journals</h3>
<p>Notes, code, and lab write-ups from my Champlain College courses. Probably a useful resource if you also go here.</p>
<p>Notes, code, and lab write-ups from my Champlain College courses</p>
<a href="https://codeberg.org/charlottecroce/ChamplainTechJournals" target="_blank" rel="noopener noreferrer" class="source-link">
<span>Source Code</span>
<i data-lucide="external-link" class="icon-small"></i>
@ -102,7 +102,7 @@
<div class="project-card">
<div class="card-content">
<h3>Nøkken Health</h3>
<p>A mobile app to track and analyze health data. Track medications, bloodwork, symptoms, and more. Made with Flutter</p>
<p>A Flutter app to track and analyze health data</p>
<a href="https://codeberg.org/charlottecroce/nokken" target="_blank" rel="noopener noreferrer" class="source-link">
<span>Source Code</span>
<i data-lucide="external-link" class="icon-small"></i>
@ -125,6 +125,7 @@
<span class="footer-separator">•</span>
<a href="https://hachyderm.io/@charlotte200" target="_blank" rel="noopener noreferrer" class="footer-link">Mastodon</a>
</div>
<p>#55CDFC#F7A8B8#FFFFFF#F7A8B8#55CDFC</p>
<p>©<span id="current-year"></span> Charlotte Croce</p>
</footer>
</div>

72
style.css
View file

@ -9,12 +9,10 @@ TABLE OF CONTENTS
5. Navigation & Header
6. Mobile Menu
7. Button & Controls
8. Form Elements
9. Cards & Panels
10. Animations
11. Dark Mode
12. Utility Classes
13. Media Queries
8. Cards & Panels
9. Animations
10. Dark Mode
11. Media Queries
==============================================
*/
@ -108,6 +106,14 @@ TABLE OF CONTENTS
margin-bottom: 2rem;
}
.text-sage {
color: var(--color-sage-400);
}
.ml-1 {
margin-left: 0.25rem;
}
/*
==============================================
4. Layout & Container
@ -133,6 +139,10 @@ TABLE OF CONTENTS
text-align: center;
}
.site-footer p {
word-wrap: break-word;
}
.social-footer-links {
margin-bottom: 16px;
}
@ -184,10 +194,6 @@ TABLE OF CONTENTS
margin-left: auto;
}
.ml-1 {
margin-left: 0.25rem;
}
/*
==============================================
6. Mobile Menu
@ -259,7 +265,7 @@ TABLE OF CONTENTS
.icon-button {
border-radius: 9999px;
background-color: var(--color-pink-100);
background-color: var(--color-pink-300);
padding: 8px;
border: none;
display: flex;
@ -310,14 +316,7 @@ TABLE OF CONTENTS
/*
==============================================
8. Form Elements
==============================================
*/
/* No styles defined yet */
/*
==============================================
9. Cards & Panels
8. Cards & Panels
==============================================
*/
.intro-section {
@ -353,7 +352,7 @@ TABLE OF CONTENTS
flex-grow: 1;
height: 1px;
margin-left: 1rem;
background: linear-gradient(to right, var(--color-pink-200), transparent);
background: var(--color-sage-200);
}
.projects-grid {
@ -367,7 +366,6 @@ TABLE OF CONTENTS
background-color: white;
transition: all 0.2s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
margin-bottom: 1.5rem;
}
@ -396,18 +394,18 @@ TABLE OF CONTENTS
transform: scale(1.05);
}
.text-sage {
color: var(--color-sage-400);
}
/*
==============================================
10. Animations
9. Animations
==============================================
*/
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
.animate-float {
@ -416,7 +414,7 @@ TABLE OF CONTENTS
/*
==============================================
11. Dark Mode
10. Dark Mode
==============================================
*/
.dark-mode {
@ -476,7 +474,6 @@ TABLE OF CONTENTS
.dark-mode .intro-section,
.dark-mode .project-card {
background-color: #2d3748;
border-color: var(--color-sage-400);
}
.dark-mode button {
@ -495,27 +492,20 @@ TABLE OF CONTENTS
.dark-mode .navbar-button:hover,
.dark-mode .mobile-button:hover {
background-color: var(--color-pink-300);
background-color: var(--color-pink-200);
}
.dark-mode .icon-button {
background-color: #2d3748;
background-color: var(--color-sage-300);
}
.dark-mode .icon-button:hover {
background-color: var(--color-pink-300);
background-color: var(--color-pink-200);
}
/*
==============================================
12. Utility Classes
==============================================
*/
/* Additional utility classes included above with relevant components */
/*
==============================================
13. Media Queries
11. Media Queries
==============================================
*/
@media (max-width: 767px) {