mirror of
https://github.com/Rainyy21/Rainyy21.github.io.git
synced 2026-10-10 23:00:16 -04:00
added project info and design to it
This commit is contained in:
Rainyy21
+2
-2
@@ -26,7 +26,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.pfp_placeholder svg {
|
||||
@@ -88,7 +88,7 @@
|
||||
padding: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
border-left: 5px solid var(--secondary-accent-color);
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.education_card h3 {
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
.project_container {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
border-left: 5px solid var(--secondary-accent-color);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
margin-bottom: 2rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.project_title {
|
||||
font-size: 1.8rem;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
color: var(--primary-accent-color);
|
||||
margin-bottom: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tool_bullet {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tool_bullet li {
|
||||
background: var(--secondary-accent-color);
|
||||
color: var(--text-color);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.9rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.project-body {
|
||||
color: var(--text-color);
|
||||
font-family: monospace;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.project-body li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.project-body p {
|
||||
margin: 0;
|
||||
}
|
||||
+24
-16
@@ -1,27 +1,35 @@
|
||||
// Function to apply the theme based on localStorage
|
||||
const applyTheme = () => {
|
||||
const darkmode = localStorage.getItem('dark');
|
||||
let darkmode = localStorage.getItem('dark');
|
||||
|
||||
// Default to 'inactive' (light mode) if no value is set
|
||||
if (darkmode === null) {
|
||||
localStorage.setItem('dark', 'inactive');
|
||||
darkmode = 'inactive';
|
||||
}
|
||||
|
||||
if (darkmode === 'active') {
|
||||
document.body.classList.add('dark');
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.body.classList.remove('dark');
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
};
|
||||
|
||||
// Run on initial load
|
||||
// Since the script is 'defer', document.body will be available
|
||||
applyTheme();
|
||||
|
||||
// Set up the toggle button listener
|
||||
const switch_button = document.getElementById("theme_switch");
|
||||
if (switch_button) {
|
||||
switch_button.addEventListener("click", () => {
|
||||
const darkmode = localStorage.getItem('dark');
|
||||
if (darkmode !== "active") {
|
||||
localStorage.setItem('dark', 'active');
|
||||
} else {
|
||||
localStorage.setItem('dark', 'inactive');
|
||||
}
|
||||
applyTheme();
|
||||
});
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const switch_button = document.getElementById("theme_switch");
|
||||
if (switch_button) {
|
||||
switch_button.addEventListener("click", () => {
|
||||
const darkmode = localStorage.getItem('dark');
|
||||
if (darkmode !== "active") {
|
||||
localStorage.setItem('dark', 'active');
|
||||
} else {
|
||||
localStorage.setItem('dark', 'inactive');
|
||||
}
|
||||
applyTheme();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
+1
-1
@@ -41,7 +41,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- my info from who i am and my social linke -->
|
||||
<!-- my info from who i am and my social links -->
|
||||
<div class="content_container">
|
||||
<div class="square_content">
|
||||
<div class="website_top">
|
||||
|
||||
+73
-9
@@ -4,12 +4,13 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Rain links</title>
|
||||
<title>Rain projects</title>
|
||||
<!-- css and js -->
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/mainpage.css">
|
||||
<link rel="stylesheet" href="../css/main_button.css">
|
||||
<link rel="stylesheet" href="../css/about.css">
|
||||
<link rel="stylesheet" href="../css/project.css">
|
||||
|
||||
<script type="text/javascript" src="../js/darkmode.js" defer></script>
|
||||
<script type="text/javascript" src="../js/main.js" defer></script>
|
||||
@@ -32,15 +33,78 @@
|
||||
</div>
|
||||
|
||||
<div class="content_container">
|
||||
<div class="square_content">
|
||||
<div class="website_top">
|
||||
<div class="website_text">
|
||||
Projects
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_body">
|
||||
</div>
|
||||
<div class="square_content">
|
||||
<div class="website_top">
|
||||
<div class="website_text">
|
||||
Projects
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box_body">
|
||||
<div class="project_container">
|
||||
<!-- the title for the project-->
|
||||
<div class="project_title">
|
||||
Hackathon project creation
|
||||
</div>
|
||||
<!-- tool use for the project -->
|
||||
<ul class="tool_bullet">
|
||||
<li>Next.js</li>
|
||||
<li>gemini</li>
|
||||
<li>tailwind</li>
|
||||
</ul>
|
||||
|
||||
<!-- what i learn from the project-->
|
||||
<div class="project-body">
|
||||
<p>
|
||||
Developed a website using next.js and gemini. It will take a form that user fill out and gemini will make five project idea and user can choose one and go more in depth on the project through a chatbot
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project_container">
|
||||
<!-- the title for the project-->
|
||||
<div class="project_title">
|
||||
BookLog Web app
|
||||
</div>
|
||||
<!-- tool use for the project -->
|
||||
<ul class="tool_bullet">
|
||||
<li>html</li>
|
||||
<li>css</li>
|
||||
<li>js</li>
|
||||
</ul>
|
||||
|
||||
<!-- what i learn from the project-->
|
||||
<ul class="project-body">
|
||||
<li>Developed a book tracking web app that stores book data in LocalStorage as JSON.</li>
|
||||
<li>Built dynamic JavaScript card rendering to display stored books in a responsive UI.</li>
|
||||
<li>Implemented client-side CRUD-style functionality for managing book entries</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="project_container">
|
||||
<!-- the title for the project-->
|
||||
<div class="project_title">
|
||||
Homelab Infrastructure
|
||||
</div>
|
||||
<!-- tool use for the project -->
|
||||
<ul class="tool_bullet">
|
||||
<li>Proxmox</li>
|
||||
<li>Linux</li>
|
||||
<li>WireGuard</li>
|
||||
<li>NAS</li>
|
||||
</ul>
|
||||
|
||||
<!-- what i learn from the project-->
|
||||
<ul class="project-body">
|
||||
<li>Deployed a Proxmox-based virtualization server hosting multiple Linux VMs.</li>
|
||||
<li>Configured NAS storage for centralized file management and backups.</li>
|
||||
<li>Implemented WireGuard VPN for secure remote access to the home network.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user