Merge pull request #3 from colevrya/codex/create-readme-with-project-overview-and-setup-instructions

Update README with project info
Update README with site info and local setup
2025-06-04 14:27:21 -05:00 · 2025-06-04 14:26:36 -05:00 · 2025-06-04 14:23:25 -05:00 · 2025-06-04 14:23:00 -05:00
8 changed files with 109 additions and 77 deletions
--- a/css/activity.css
+++ b/css/activity.css
@ -13,7 +13,7 @@
 }

 #activity-tab::-webkit-scrollbar-thumb {
-  background: #8c52ff66;
+  background: color-mix(in srgb, var(--accent-color) 40%, transparent);
  border-radius: 4px;
 }

@ -50,8 +50,8 @@
 }

 .filter-btn.active {
-  background: #6d44b8;
-  box-shadow: 0 0 8px #8c52ff;
+  background: var(--accent-color);
+  box-shadow: 0 0 8px var(--accent-color);
 }

 .activity-wrapper {
@ -61,7 +61,7 @@
  background: #1b1429;
  padding: 12px;
  border-radius: 12px;
-  box-shadow: inset 0 0 10px #8c52ff20;
+  box-shadow: inset 0 0 10px var(--accent-color)20;
 }

 .activity-icon {
@ -71,7 +71,7 @@
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #b592ff;
-  box-shadow: 0 0 10px #8c52ff90;
+  box-shadow: 0 0 10px var(--accent-color)90;
 }

 .activity-info {
@ -155,7 +155,7 @@
 }

 .pagination-controls button:hover {
-  background: #8c52ff;
+  background: var(--accent-color);
 }

 #activity-loading {
--- a/css/global.css
+++ b/css/global.css
@ -1,13 +1,27 @@
+:root {
+  --bg-color: #0d0b16;
+  --text-color: #e6dbff;
+  --accent-color: #ff6ec7;
+  --card-bg: #1a1329;
+  --card-border: #3b2a60;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
 body {
-  background: #0d0b16;
-  color: #e6dbff;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: var(--bg-color);
+  color: var(--text-color);
+  font-family: 'Inter', system-ui, sans-serif;
+  line-height: 1.5;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
+  scroll-behavior: smooth;
 }

 .background-scroll {
@ -29,7 +43,7 @@ body {
  font-size: clamp(2rem, 5vw, 4rem); /* Responsive font size */
  font-weight: bold;
  color: #2d1d4a;
-  text-shadow: 0 0 10px #8c52ff20;
+  text-shadow: 0 0 10px var(--accent-color)20;
  user-select: none;
  width: 100%;
  position: absolute;
@ -86,8 +100,8 @@ body {
 }

 .id-card {
-  background: linear-gradient(145deg, #1a1329, #120d1f);
-  border: 2px solid #3b2a60;
+  background: linear-gradient(145deg, var(--card-bg), #120d1f);
+  border: 2px solid var(--card-border);
  border-radius: 20px;
  width: 100%;
  max-width: 1000px;
@ -98,7 +112,7 @@ body {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
-  box-shadow: 0 0 25px rgba(140, 82, 255, 0.4);
+  box-shadow: 0 0 25px var(--accent-color);
  z-index: 1;
  position: relative;
  overflow: hidden;
@ -120,9 +134,9 @@ body {
 }

 .card-tab {
-  background: #1a1329;
+  background: var(--card-bg);
  color: #bfaaff;
-  border: 2px solid #3b2a60;
+  border: 2px solid var(--card-border);
  padding: 6px 16px;
  border-radius: 8px;
  font-weight: bold;
@ -132,7 +146,7 @@ body {
 }

 .card-tab.active {
-  background: #8c52ff;
+  background: var(--accent-color);
  color: #fff;
 }

@ -162,4 +176,6 @@ body {
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
-}
+}
+:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px;}
+
--- a/css/home.css
+++ b/css/home.css
@ -34,8 +34,8 @@
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
-  border: 2px solid #6d44b8;
-  box-shadow: 0 0 12px #8c52ff80;
+  border: 2px solid var(--accent-color);
+  box-shadow: 0 0 12px var(--accent-color)80;
  display: block;
 }

--- a/css/mobile.css
+++ b/css/mobile.css
@ -215,7 +215,7 @@

 .spotify-progress .fill {
  height: 100%;
-  background: #8c52ff;
+  background: var(--accent-color);
  border-radius: 2px;
  position: absolute;
  top: 0;
--- a/css/presence.css
+++ b/css/presence.css
@ -10,8 +10,8 @@
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
-  border: 2px solid #6d44b8;
-  box-shadow: 0 0 12px #8c52ff80;
+  border: 2px solid var(--accent-color);
+  box-shadow: 0 0 12px var(--accent-color)80;
  display: block;
 }

@ -37,7 +37,7 @@
  font-size: 1.4rem;
  font-weight: bold;
  color: #d2c6f8;
-  text-shadow: 0 0 6px #8c52ff80;
+  text-shadow: 0 0 6px var(--accent-color)80;
  margin-bottom: 10px;
  text-align: center;
 }
@ -47,7 +47,7 @@
  margin-bottom: 10px;
  text-align: center;
  color: #e6dbff;
-  text-shadow: 0 0 5px #8c52ff55;
+  text-shadow: 0 0 5px var(--accent-color)55;
 }

 .link {
@ -61,13 +61,13 @@
  max-width: 260px;
  text-align: center;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-  box-shadow: 0 0 8px #8c52ff40;
+  box-shadow: 0 0 8px var(--accent-color)40;
 }

 .link:hover {
-  background: #8c52ff;
+  background: var(--accent-color);
  color: #fff;
-  box-shadow: 0 0 12px #8c52ff, 0 0 24px #8c52ff99;
+  box-shadow: 0 0 12px var(--accent-color), 0 0 24px var(--accent-color)99;
 }

 .social-link {
@ -99,7 +99,7 @@
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
-  box-shadow: inset 0 0 10px #8c52ff20;
+  box-shadow: inset 0 0 10px var(--accent-color)20;
 }

 .logs-tab-content {
@ -124,7 +124,7 @@
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #b592ff;
-  box-shadow: 0 0 10px #8c52ff90;
+  box-shadow: 0 0 10px var(--accent-color)90;
  margin: 0 auto;
 }

@ -135,7 +135,7 @@
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #b592ff;
-  box-shadow: 0 0 10px #8c52ff90;
+  box-shadow: 0 0 10px var(--accent-color)90;
 }

 /* Center text in Spotify activity */
@ -204,7 +204,7 @@

 .spotify-progress .fill {
  height: 100%;
-  background: #8c52ff;
+  background: var(--accent-color);
  border-radius: 2px;
  position: absolute;
  top: 0;
--- a/css/projects.css
+++ b/css/projects.css
@ -8,7 +8,7 @@
  margin-top: 0;
  text-align: center;
  color: #d2c6f8;
-  text-shadow: 0 0 6px #8c52ff80;
+  text-shadow: 0 0 6px var(--accent-color)80;
  margin-bottom: 20px;
 }

@ -17,7 +17,7 @@
 }

 #projects-tab::-webkit-scrollbar-thumb {
-  background: #8c52ff66;
+  background: color-mix(in srgb, var(--accent-color) 40%, transparent);
  border-radius: 4px;
 }

@ -67,7 +67,7 @@
  justify-content: center;
  color: #e6dbff;
  font-weight: bold;
-  border-bottom: 2px solid #6d44b8;
+  border-bottom: 2px solid var(--accent-color);
  overflow: hidden;
 }

@ -107,7 +107,7 @@
 .coming-soon {
  margin-top: 10px;
  font-size: 1.1rem;
-  color: #8c52ff;
+  color: var(--accent-color);
  text-align: center;
  font-style: italic;
 }
--- a/index.html
+++ b/index.html
@ -1,44 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>cole's website</title>
-  <link rel="icon" type="image/png" href="icons/webicon.png" />
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Cole's Website</title>
+  <link rel="icon" type="image/png" href="icons/webicon.png">

-  <link rel="stylesheet" href="css/global.css" />
-  <link rel="stylesheet" href="css/home.css" />
-  <link rel="stylesheet" href="css/activity.css" />
-  <link rel="stylesheet" href="css/presence.css" />
-  <link rel="stylesheet" href="css/projects.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+
+  <link rel="stylesheet" href="css/global.css">
+  <link rel="stylesheet" href="css/home.css">
+  <link rel="stylesheet" href="css/activity.css">
+  <link rel="stylesheet" href="css/presence.css">
+  <link rel="stylesheet" href="css/projects.css">
+  <link rel="stylesheet" href="css/mobile.css" media="(max-width: 768px)">
+
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' https: data:; script-src 'self'; connect-src 'self' https:; base-uri 'none'; object-src 'none'; form-action 'none'; upgrade-insecure-requests">
+  <meta name="referrer" content="same-origin">

  <script>
    const isMobile = /iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent);
-    if (isMobile) {
-      document.write('<link rel="stylesheet" href="css/mobile.css">');
-    }
  </script>

-  <meta property="og:title" content="coles website! its awesome!" />
-  <meta property="og:description" content="fuck you!" />
-  <meta property="og:image" content="icons/webicon2.png" />
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://cole.ong" />
+  <meta property="og:title" content="Cole's Website">
+  <meta property="og:description" content="Welcome to Cole's personal website">
+  <meta property="og:image" content="icons/webicon2.png">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://cole.ong">
 </head>
 <body>
-
  <div class="background-scroll">
    <div class="scrolling-row scroll-left">
-      <div class="inner-scroll">colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ </div>
+      <div class="inner-scroll">colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ </div>
    </div>
    <div class="scrolling-row scroll-right">
-      <div class="inner-scroll">colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ </div>
+      <div class="inner-scroll">colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ </div>
    </div>
  </div>

  <div class="center-wrapper">
    <div class="id-card" id="main-card">
-
      <div class="card-tabs">
        <button class="card-tab active" data-tab="home">Home</button>
        <button class="card-tab" data-tab="activity">Recent Activity</button>
@ -50,36 +53,35 @@
          <div class="left-section">
            <div class="center-content">
              <div class="status-wrapper">
-                <img src="icons/colespfp.gif" alt="Profile Picture" />
+                <img src="icons/colespfp.gif" alt="Profile Picture">
                <div class="status-dot status-offline"></div>
              </div>
              <div class="username">colevr</div>
            </div>
            <div class="discord-box" id="discord-activity">Loading Discord activity...</div>
          </div>
-
          <div class="right-section">
            <div class="intro">Hi, I'm Cole!</div>
            <a href="https://www.youtube.com/@colevrrr" class="link social-link" target="_blank">
-              <img src="icons/yt.svg" class="icon" /> YouTube
+              <img src="icons/yt.svg" class="icon" alt="YouTube"> YouTube
            </a>
            <a href="https://github.com/colevrya" class="link social-link" target="_blank">
-              <img src="icons/github.svg" class="icon" /> GitHub
+              <img src="icons/github.svg" class="icon" alt="GitHub"> GitHub
            </a>
            <a href="https://discord.gg/nqJv5czwQG" class="link social-link" target="_blank">
-              <img src="icons/discord.svg" class="icon" /> Discord
+              <img src="icons/discord.svg" class="icon" alt="Discord"> Discord
            </a>
            <a href="https://x.com/coledotvr" class="link social-link" target="_blank">
-              <img src="icons/twitter.svg" class="icon" /> Twitter
+              <img src="icons/twitter.svg" class="icon" alt="Twitter"> Twitter
            </a>
            <a href="https://steamcommunity.com/id/colevryt/" class="link social-link" target="_blank">
-              <img src="icons/steam.svg" class="icon" /> Steam
+              <img src="icons/steam.svg" class="icon" alt="Steam"> Steam
            </a>
          </div>
        </div>
      </div>

-      <div id="activity-tab" class="tab-page" style="display: none;">
+      <div id="activity-tab" class="tab-page" style="display:none;">
        <div class="logs-tab-content">
          <h2>Recent Activity</h2>
          <div class="activity-filters">
@ -92,7 +94,10 @@
          <div class="pagination-controls">
            <label>Show per page:
              <select id="activity-per-page" onchange="renderActivityLogs()">
-                <option>10</option><option selected>30</option><option>50</option><option>100</option>
+                <option>10</option>
+                <option selected>30</option>
+                <option>50</option>
+                <option>100</option>
              </select>
            </label>
            <div id="activity-pages" data-page="1"></div>
@ -100,7 +105,7 @@
        </div>
      </div>

-      <div id="projects-tab" class="tab-page" style="display: none;">
+      <div id="projects-tab" class="tab-page" style="display:none;">
        <div class="projects-content">
          <h2>My Projects</h2>
          <div class="projects-grid">
@ -117,24 +122,22 @@
          <div class="coming-soon">more stuff here soon!!</div>
        </div>
      </div>
-      
    </div>
  </div>

-  <script src="js/utils.js"></script>
-  <script src="js/firebase.js"></script>
-  <script src="js/activity.js"></script>
-  <script src="js/presence.js"></script>
-  <script src="js/navigation.js"></script>
-  <script src="js/main.js"></script>
-
+  <script type="module" src="js/utils.js"></script>
+  <script type="module" src="js/firebase.js"></script>
+  <script type="module" src="js/activity.js"></script>
+  <script type="module" src="js/presence.js"></script>
+  <script type="module" src="js/navigation.js"></script>
+  <script type="module" src="js/main.js"></script>
  <script>
    if (isMobile) {
      const s = document.createElement('script');
      s.src = 'js/mobile.js';
-      document.body.appendChild(s);
+      s.type = 'module';
+      document.head.appendChild(s);
    }
  </script>
-
 </body>
 </html>
--- a/readme.md
+++ b/readme.md
@ -1 +1,14 @@
-yo wsp me I'm cole
+# Cole's Website
+
+Hey! I'm Cole. This site is a little place where I keep my online stuff together. The home page shows my status and links to my socials, there's a page for recent activity, and there's a projects section for things I'm working on.
+
+## Running it locally
+
+Make sure you've got Node.js installed. Then install the dependencies and start the dev server:
+
+```bash
+npm install
+npm run dev
+```
+
+Vite will let you know which address to open (usually http://localhost:5173). That's it!
Author	SHA1	Message	Date
colevr	16216ef551	Merge pull request #3 from colevrya/codex/create-readme-with-project-overview-and-setup-instructions Update README with project info	2025-06-04 14:27:21 -05:00
colevr	c83569dc10	Update README with site info and local setup	2025-06-04 14:26:36 -05:00
colevr	4438db7eda	Merge pull request #2 from colevrya/codex/redesign-website-for-modern-look-and-security Revamp design and security	2025-06-04 14:23:25 -05:00
colevr	4c475d4409	Overhaul styles and tighten security	2025-06-04 14:23:00 -05:00