Rainyy21.github.io/page/project.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <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>
</head>

<body>
    <div class="bg_color">
        <div class="header">
            <div class="home_locat">
                <button id="home_button" onclick="location.href='../index.html'" aria-label="Go home">
                    <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg>
                </button>
            </div>
            <div class="darkmode">
                <button id="theme_switch" aria-label="Toggle dark mode">
                    <svg xmlns="http://www.w3.org/2000/svg" class="darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg> 
                    <svg xmlns="http://www.w3.org/2000/svg" class="lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
                </button>
            </div>
        </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 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>
</body>
</html>