new colorscheme and projects.

README.md

@@ -50,14 +50,14 @@ Features
 - [x] Template HTML blocks for repeated components. (v.0.0.1)
 - [x] Resume page (HTML and PDF options). (v.0.0.1)
 - [x] Contact page. (v.0.0.1)
-- [ ] Convert SLCC e-portfolio to my own website (v.0.0.1)
+- [x] Proper 404 page (v.0.0.1)
 - [ ] Security:
   - [ ] Separate user for self-hosting, with reduced permissions. (v.0.0.1)
   - [ ] Dockerize (v.0.0.1)
-- [ ] Proper 404 page (v.0.0.1)
 
 Future Features:
 
+- [ ] Convert SLCC e-portfolio to my own website (v.0.0.2)
 - [ ] Read in data for portfolio from a DB or preferably a plain text files. (v.0.0.2)
 - [ ] Script to easily add new projects. (v.0.0.2)
 - [ ] Demo's of various projects. (embed Java Swing app or Flutter app directly into portfolio). (v.0.0.2)
@@ -71,3 +71,26 @@ Minor Bugs:
 
 - [ ] Contact form submission centers entire section. (v.0.0.2)
 - [ ] Profile picture animation is slightly cutoff on mobile. (v.0.0.2)
+
+
+
+COLORSCHEMES:
+--dark-0: #170123;
+--dark-1: #39124e;
+--dark-2: #5e3276;
+--dark-3: #84509f;
+--primary: #4a245e;
+--accent-1: #9e75a8;
+--accent-2: #c69bca;
+--text: #EBD2FF;
+
+--dark-0: #091A19;
+--dark-1: #10211E;
+--dark-2: #162722;
+--dark-3: #1C2E26;
+--primary-1: #304334;
+--primary: #6B825C;
+--accent-0: #90D889;
+--accent-1: #8FC973;
+--accent-2: #B8DAA6;
+--text: #E0EAD9;

colorscheme.txt

@@ -0,0 +1,19 @@
+--dark-0: #170123;
+--dark-1: #39124e;
+--dark-2: #5e3276;
+--dark-3: #84509f;
+--primary: #4a245e;
+--accent-1: #9e75a8;
+--accent-2: #c69bca;
+--text: #EBD2FF;
+
+--dark-0: #091A19;
+--dark-1: #10211E;
+--dark-2: #162722;
+--dark-3: #1C2E26;
+--primary-1: #304334;
+--primary: #6B825C;
+--accent-0: #90D889;
+--accent-1: #8FC973;
+--accent-2: #B8DAA6;
+--text: #E0EAD9;

src/App.jsx

@@ -105,10 +105,10 @@ export default function App() {
     ],
     tools: [
       "Git & GitHub",
-      "Docker & Kubernetes",
-      "Flutter",
-      "React",
-      "Linux",
+      "Docker",
+      "Flutter & React",
+      "Linux & NeoVim",
+      "Cloudflare",
       "Microsoft Intune",
     ],
     other: [

src/components/PdfViewer.jsx

@@ -33,7 +33,7 @@ export default function PdfViewer({ file }) {
           }}
           className="pdf-document"
         >
-          <Page pageNumber={pageNumber} scale={0.66} />
+          <Page pageNumber={pageNumber} scale={0.8} />
         </Document>
         <div className="pdf-buttons shadow">
           <button className="pdf-button" onClick={() => prev()}>

src/main.css

@@ -3,12 +3,16 @@
 /**GLOBAL**/
 :root {
   --width: 480px;
-  --dark-0: #170123;
-  --dark-1: #39124e;
-  --dark-2: #5e3276;
-  --dark-3: #84509f;
-  --primary: #4a245e;
-  --text: #EBD2FF;
+  --dark-0: #091A19;
+  --dark-1: #10211E;
+  --dark-2: #162722;
+  --dark-3: #1C2E26;
+  --primary-1: #304334;
+  --primary: #6B825C;
+  --accent-0: #90D889;
+  --accent-1: #8FC973;
+  --accent-2: #B8DAA6;
+  --text: #E0EAD9;
 }
 
 *,
@@ -183,14 +187,14 @@ p {
 .swiper-pagination-bullet {
   width: 18px;
   height: 18px;
-  background-color: #f9f2ff;
+  background-color: var(--accent-0);
   border-radius: 50%;
   transition: all 0.6s ease-in-out;
 }
 
 .swiper-pagination-bullet-active {
   height: 36px;
-  background-color: var(--text);
+  background-color: var(--accent-2);
   border-radius: 14px;
 }
 
@@ -270,7 +274,7 @@ p {
 
   padding: 1vw 2vw 1vw 2vw;
   margin: 0;
-  background-color: var(--primary);
+  background-color: var(--primary-1);
   border-radius: 18px 18px 0 0;
 }
 
@@ -296,7 +300,7 @@ p {
 .card ul li {
   list-style: none;
   font-size: clamp(1rem, 1.25vw, 1.5rem);
-  color: var(--primary);
+  color: var(--dark-0);
 }
 
 /**PROJECTS PAGE**/
@@ -358,7 +362,7 @@ p {
   flex-direction: column;
   justify-content: center;
   padding: 2vw;
-  background-color: var(--primary);
+  background-color: var(--primary-1);
   border-radius: 18px;
 }
 
@@ -404,7 +408,7 @@ p {
 
 .button {
   width: 80%;
-  color: var(--primary);
+  color: var(--dark-0);
   background-color: var(--text);
   border: 3px solid var(--text);
   outline: none;
@@ -489,8 +493,6 @@ p {
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: 90% 10%;
-
-  border: 1px solid red;
 }
 
 .pdf-document {