documentation and README.md updates.

README.md

@@ -1,80 +1,55 @@
-Focus on fleshing out and adding systems to my portfolio
+<h1>My Portfolio</h1>
 
-- Not just past projects, but scripts to easily add new projects.
-- Responsive design
-- Resume page
-- SLCC e-portfolio
-
-The idea is to showcase my full-stack development skills in a future-ready manner.
-
-Timeline:
-Week 1: 17/12/24 - 23/12/24 (Planning for the future)
-
-- [x] Refactor and reorder the HTML & CSS.
-- [x] Template HTML blocks for repeated components.
-- [ ] Document classes, ID's, and other attributes.
-  - [ ] Script to easily add new projects (components).
-- [x] Embeddable PDFs (research phase).
-
-Week 2: 24/12/24 - 30/12/24 (Adding key information)
-
-- [x] Resume page (HTML and PDF options).
-- [ ] Convert SLCC e-portfolio to my own website
-  - [ ] Meet required pages and content
-  - [ ] Embed PDF course reflections/signature assignments.
-- [x] Contact page.
-  - [x] Implement MailTrap for sending me automated emails when there is a contact form submission.
-
-Week 3: 31/12/24 - 6/12/24
-
-- [ ] Refactor & polish codebase.
-- [ ] Update documentation.
-- [ ] Demo's of various projects.
-- [ ] Security:
-  - [ ] Blacklist IPs which access /wp-admin and /wp-login.
-  - [ ] Separate user for self-hosting, with reduced permissions.
-  - [ ] Dockerize
-- [ ] Blog page (stretch goal).
-
-Major Bugs (UI, UX, or Functionality):
-
-- [x] Breathing animation of background gradient stopped. (v.0.0.1)
-- [x] Add state to skill accordions for mobile. (v.0.0.1)
-- [x] Alignment of project card on mobile. (v.0.0.1)
-- [x] PDF viewer width is constant, doesn't respond to resizing (or setting the width in CSS). (v.0.0.1)
-- [ ] More prominent slide indicator for projects (or n/10 counter, or some similar solution). (v.0.0.2)
-
-Features
-
-- [x] Refactor and reorder the HTML & CSS. (v.0.0.1)
-- [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)
-- [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)
-
-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)
-- [ ] Blog page. (v.0.0.3)
-
-Refactoring:
-
-- [ ] Rewrite CSS into components/modules (v.0.0.2)
-
-Minor Bugs:
-
-- [ ] Contact form submission centers entire section. (v.0.0.2)
-- [ ] Profile picture animation is slightly cutoff on mobile. (v.0.0.2)
+URL: https://joshashton.dev
 
 
+Core technologies are React and Node.js, using swiper as well.
+See:
+- https://react.dev/learn
+- https://nodejs.org/en/learn/getting-started/introduction-to-nodejs
+- https://swiperjs.com/react
 
-COLORSCHEMES:
+<br>
+
+<h2>Documentation</h2>
+
+<h3>Setup</h3>
+
+<h4>Development Environment</h4>
+
+```
+git clone https://github.com/quaxlyqueen/portfolio
+cd portfolio
+npm install
+node src/server.js &
+npm start
+```
+
+<h4>Production Environment</h4>
+
+```
+git clone https://github.com/quaxlyqueen/portfolio
+cd portfolio
+npm run build
+cd dist
+node ../src/server.js &
+serve -s
+```
+
+<h3>Project structure</h3>
+
+- `/main.jsx` is the root and router.
+- `/App.jsx` is the primary page of my portfolio, and currently contains all application data. New projects are added here.
+- `/Home.jsx`, `/Projects.jsx`, and `/Contact.jsx` are pages (or slides) of `/App.jsx`.
+- `/components/*` are the components used to build the pages.
+
+<h3>Styling guidelines:</h3>
+
+<h4>Colorscheme data:</h4>
+
+<h5>Purple</h5>
+
+```
 --dark-0: #170123;
 --dark-1: #39124e;
 --dark-2: #5e3276;
@@ -83,7 +58,11 @@ COLORSCHEMES:
 --accent-1: #9e75a8;
 --accent-2: #c69bca;
 --text: #EBD2FF;
+```
 
+<h5>Green</h5>
+
+```
 --dark-0: #091A19;
 --dark-1: #10211E;
 --dark-2: #162722;
@@ -94,3 +73,40 @@ COLORSCHEMES:
 --accent-1: #8FC973;
 --accent-2: #B8DAA6;
 --text: #E0EAD9;
+```
+
+<h2>TODO</h2>
+
+<h3>Features</h3>
+
+- [x] Refactor and reorder the HTML & CSS. (v.0.0.1)
+- [x] Template HTML blocks for repeated components. (v.0.0.1)
+- [x] Contact page. (v.0.0.1)
+- [x] Proper 404 page (v.0.0.1)
+- [ ] Resume page (HTML and PDF options). (v.0.0.1)
+  - [ ] Make resume 1 page (v.0.0.1)
+- [ ] Security:
+  - [ ] Separate user for self-hosting, with reduced permissions. (v.0.0.1)
+  - [ ] Dockerize (v.0.0.1)
+
+<h3>Future Features:</h3>
+
+- [ ] Rewrite CSS into components/modules (v.0.0.2)
+- [ ] Read in data for portfolio 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)
+- [ ] Blog page. (v.0.0.3)
+- [ ] Convert SLCC e-portfolio to my own website (v.0.0.4)
+
+<h3>Bugs:</h3>
+
+- [ ] /Home.jsx, Profile picture animation is slightly cutoff on mobile. (v.0.0.2)
+- [X] /Projects.jsx, More prominent slide indicator for projects (or n/10 counter, or some similar solution). (v.0.0.2)
+- [x] /Projects.jsx, Alignment of project card on mobile. (v.0.0.1)
+- [ ] /Projects.jsx, cursor icon when hover on the slide buttons should be a pointer, not highlighter.
+- [ ] /Contact.jsx, handle blank and spam inputs
+- [ ] /Contact.jsx, Contact form submission centers entire section. (v.0.0.2)
+- [ ] /ErrorPage.jsx, stylize the error page.
+- [x] /Resume.jsx, PDF viewer width is constant, doesn't respond to resizing (or setting the width in CSS). (v.0.0.1)
+- [x] /components/SkillCard.jsx, Add state to skill accordions for mobile. (v.0.0.1)
+- [x] /main.css, Breathing animation of background gradient stopped. (v.0.0.1)