Doc file order change

docs/ArtFive.md

@@ -2,7 +2,7 @@
 type: Art
 image: "[[ArtFive.png]]"
 ---
-Rare art piece that is not a school project. Someone mentioned they thought of doing some D&D thing with maids. For some reason, that inspired me to make all of these characters for fun. I recently watched Code Geass, so two characters are clearly inspired by that. You can also see the solider from Haze. The rest are just generic tropes or monsters.
+Rare art piece that is not a school project. Someone mentioned they thought of doing some D&D thing with maids. For some reason, that inspired me to make all of these characters for fun. I recently watched Code Geass, so two characters are clearly inspired by that. You can also see the soldier from Haze. The rest are just generic tropes or monsters.
 
 
 ![[ArtFive.png]]

docs/ArtFour.md

@@ -2,6 +2,7 @@
 type: Art
 image: "[[ArtFour.png]]"
 ---
-I felt like making a character in Adobe Illustrator because I felt like it has been awhile since I touched it. Balloons were added after to amuse myself.
+I felt like making a character in Adobe Illustrator because I felt like it had been a while since I touched it. Balloons were added afterward to amuse myself.
+
 
 ![[ArtFour.png]]

docs/ArtThree.md

@@ -2,6 +2,7 @@
 type: Art
 image: "[[ArtThree.png]]"
 ---
-I felt like I had four distinct art styles I used at that point in my life, so I made this generic piece act as some sort of cap stone on it. Scratch coloured pencils.  Then I guess the last one being my second art style, adobe illustrator. Then scratch digital art in early college, followed by more clean colours when super basic shading.
+I felt like I had four distinct art styles I used at that point in my life, so I made this generic piece act as some sort of capstone on it. Scratch coloured pencils. Then I guess the last one is my second art style, Adobe Illustrator. Then scratch digital art in early college, followed by cleaner colours when super basic shading.
+
 
 ![[ArtThree.png]]

docs/Malice.md

@@ -2,6 +2,6 @@
 type: Art
 image: "[[Malice.jpg]]"
 ---
-Drawing for Highschool Project with colouring pencils. My parents always went a bit overboard on buying stuff. They bought me a bunch of dragon statues, so for the project where I had to draw something, I drew one of them. I changed the colour pallet, and added blood because teenager.
+Drawing for High School Project with pencils, then scanned and coloured in digitally. My parents always went a bit overboard on buying stuff. They bought me a bunch of dragon statues, so for the project where I had to draw something, I drew one of them. I changed the colour palette and added blood because teenager.
 
 ![[Malice.jpg]]

docs/Overview.md

@@ -1,12 +1,9 @@
 ---
 type: Page
 ---
-I am not an artist. I am a software developer that took some art courses in education. This website exists to test out SEO, because man, I am struggling with this SEO stuff, so I need some example websites I can mess with to test stuff out to see if Search Engines are gaslighting me into thinking I am bad at this. 
-
-If you are an artist, and would like some portfolio website like this, feel free to contact me. As long as you don't want something crazy complicated, someone can easily set up up with a free static website. That said, we leave in the AI era, so you can literally get ChatGPT to do it for you and skip the middleman. And using something like Deviant Art is probably always going to get you better discovery then a standalone website made by some random dude on the internet.
-
-In fact, I am going to generate this website with AI, so ya.
-
 
+I am not an artist. I am a software developer who took some art courses in education. This website exists to test out SEO, because man, I am struggling with this SEO stuff, so I need some example websites I can mess with to test stuff out to see if Search Engines are gaslighting me into thinking I am bad at this. 
 
+If you are an artist and would like a portfolio website like this, feel free to contact me. As long as you don't want something crazy complicated, someone can easily set you up with a free static website. That said, we live in the AI era, so you can literally get ChatGPT to do it for you and skip the middleman. And using something like DeviantArt is probably always going to get you better discovery than a standalone website made by some random dude on the internet.
 
+In fact, I am going to generate this website <a href=\"?view=docs&doc=initial-prompt\">with AI</a>, so ya.

docs/Prompt 3.md

@@ -0,0 +1,11 @@
+---
+type: Prompt
+---
+
+In the docs section, also added the information from the Prompt 2.md and Prompt 3.md file from the /docs folder.
+
+You see, we are being a bit meta. Were are showing the prompts generating the website. So you need to add each new prompt we use to the docs section.
+
+So your going to add this new information to that data.js file in the docFiles array.
+
+Thanks

docs/Prompt 4.md

@@ -0,0 +1,10 @@
+---
+type: Prompt
+---
+
+Add some SEO about how this art portfolio website is just for a software developer (Jonathan McCaffrey) to mess around with SEO and AI generation for a website, and the art is just some random past work I did for school or for fun.
+
+We also need to add the robots.txt file. I am going to use art.jonathanmccaffrey.com if that is relevant to helping with SEO.
+
+Remember to add docs/Prompt 4.md to the docFiles array in data.js so we are self-documenting the usage of AI.
+

docs/Prompt 5.md

@@ -0,0 +1,10 @@
+---
+type: Prompt
+---
+
+lol, obviously if you're going to refer to a sitemap.xml in the robots.txt file, you have to add it.
+
+---
+
+> Okay. I am going to stop documenting my prompts at this point if it's not interesting. You get the picture of how this works.
+> Type random stuff, fix errors, repeat

docs/Self Portraits.md

@@ -6,7 +6,7 @@ image:
   - "[[Self Portraits Mads.png]]"
   - "[[Self Portraits Sads.png]]"
 ---
-College project to make a self portrait. Simple photo of my face that I drew over. I figured instead of making one self portrait, I'll just make four and do a poor job about it. But all four would probably look decent together. I liked using the four basic colours or red, blue, green, and yellow when playing with level design to make sections of a map incredibly obvious. So did it for the faces.
+College project to make a self-portrait. Simple photo of my face that I drew over. I figured instead of making one self-portrait, I'll just make four and do a poor job of it. But all four would probably look decent together. I liked using the four basic colours, red, blue, green, and yellow, when playing with level design to make sections of a map incredibly obvious. So did it for the faces.
 
 
 

docs/VRAvatar.md

@@ -5,6 +5,6 @@ image:
 ---
 
 
-Was playing around with VR Chat, and obviously wanted to make an avatar. I wanted to make a stylized wraith with a big spherical cloak, head, and oval body, but I figured I lacked the skill to make it look good, and it wouldn't look good in 3D from all angles. And I am more of a lazy don't fight the art kind of guy. So I just did random stuff in Blender until I got something that didn't look hideous to my eyes. Next asset, I would probably make a 2D sketch from each view point, but I did not want to put such effort into the first model. Originally the body was going to be blue, and the clothing orange, but overhearing one Megamind comment in a VR World was enough for me to change the head and left arm colour to orange, lol. Perhaps in the next version.
+Was playing around with VR Chat, and obviously wanted to make an avatar. I wanted to make a stylized wraith with a big spherical cloak, head, and oval body, but I figured I lacked the skill to make it look good, and it wouldn't look good in 3D from all angles. And I am more of a lazy, don't fight the art kind of guy. So I just did random stuff in Blender until I got something that didn't look hideous to my eyes. Next asset, I would probably make a 2D sketch from each viewpoint, but I did not want to put such effort into the first model. Originally, the body was going to be blue, and the clothing orange, but overhearing one Megamind comment in a VR World was enough for me to change the head and left arm colour to orange, lol. Perhaps in the next version.
 
 ![[VRAvatar.png]]

html/css/style.css

@@ -285,6 +285,41 @@ nav a {
   border: 1px solid #1a1a1a;
 }
 
+#contact-view {
+  max-width: 600px;
+}
+
+.contact-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.contact-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid #1a1a1a;
+}
+
+.contact-label {
+  font-size: 0.75rem;
+  color: #555;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.contact-item a {
+  font-size: 0.95rem;
+  color: #888;
+  word-break: break-all;
+}
+
+.contact-item a:hover {
+  color: #ccc;
+}
+
 @media (max-width: 768px) {
   .art-grid {
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

html/index.html

@@ -3,16 +3,28 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Art Portfolio</title>
+  <title>Jonathan McCaffrey's Art Portfolio</title>
+  <meta name="description" content="This is not a serious art portfolio. It's a software developer's (Jonathan McCaffrey) playground for testing SEO and AI-generated website content. The artwork is random past projects from school or just for fun.">
+  <meta name="author" content="Jonathan McCaffrey">
+  <meta name="robots" content="index, follow">
+  <meta property="og:title" content="Jonathan McCaffrey's Art Portfolio">
+  <meta property="og:description" content="A software developer messing around with SEO and AI generation for a website. Artwork is just random past work from school or for fun.">
+  <meta property="og:url" content="https://art.jonathanmccaffrey.com">
+  <meta property="og:type" content="website">
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="Jonathan McCaffrey's Art Portfolio">
+  <meta name="twitter:description" content="A software developer messing around with SEO and AI generation for a website. Artwork is just random past work from school or for fun.">
+  <link rel="canonical" href="https://art.jonathanmccaffrey.com">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
   <header>
     <div class="header-inner">
-      <h1><a href="/" id="home-link">Art Portfolio</a></h1>
+      <h1><a href="/" id="home-link">Jonathan McCaffrey's Art Portfolio</a></h1>
       <nav>
         <a href="#" id="nav-home">Home</a>
         <a href="#" id="nav-docs">Docs</a>
+        <a href="#" id="nav-contact">Contact</a>
       </nav>
     </div>
   </header>

html/js/app.js

@@ -1,6 +1,7 @@
 (function () {
   var currentArtId = null;
   var currentImageIdx = null;
+  var currentDocId = null;
 
   var mainContent = document.getElementById('main-content');
   var infoOverlay = document.getElementById('info-overlay');
@@ -12,6 +13,7 @@
   var fullscreenImage = document.getElementById('fullscreen-image');
   var navHome = document.getElementById('nav-home');
   var navDocs = document.getElementById('nav-docs');
+  var navContact = document.getElementById('nav-contact');
   var homeLink = document.getElementById('home-link');
 
   function getArtIndex(id) {
@@ -28,6 +30,13 @@
     return null;
   }
 
+  function getDocBySlug(slug) {
+    for (var i = 0; i < DATA.docFiles.length; i++) {
+      if (DATA.docFiles[i].id === slug) return DATA.docFiles[i];
+    }
+    return null;
+  }
+
   function formatParagraphs(text) {
     var parts = text.split('\n\n');
     var result = '';
@@ -47,6 +56,11 @@
       if (currentImageIdx !== null) {
         params.set('img', currentImageIdx);
       }
+    } else if (currentDocId) {
+      params.set('view', 'docs');
+      params.set('doc', currentDocId);
+    } else if (mainContent.querySelector('#contact-view')) {
+      params.set('view', 'contact');
     }
     var qs = params.toString();
     var url = qs ? '?' + qs : window.location.pathname;
@@ -57,7 +71,8 @@
     var params = new URLSearchParams(window.location.search);
     return {
       view: params.get('view'),
-      img: params.get('img') !== null ? parseInt(params.get('img'), 10) : null
+      img: params.get('img') !== null ? parseInt(params.get('img'), 10) : null,
+      doc: params.get('doc')
     };
   }
 
@@ -113,21 +128,32 @@
     nextArt.style.display = idx < DATA.arts.length - 1 ? 'block' : 'none';
   }
 
-  function renderDocsView() {
+  function renderDocsView(docId) {
+    currentDocId = docId || null;
+
     var html = '<div id="docs-view">' +
       '<div class="docs-tree">' +
       '<div class="folder-label">docs/</div><ul>';
 
     for (var i = 0; i < DATA.docFiles.length; i++) {
       var doc = DATA.docFiles[i];
-      html += '<li data-file="' + doc.filename.replace(/"/g, '&quot;') + '">' +
+      var activeClass = (doc.id === docId) ? ' active' : '';
+      html += '<li data-doc-id="' + doc.id + '" class="' + activeClass + '">' +
         doc.filename + '<span class="type-badge">' + (doc.type || '?') + '</span></li>';
     }
 
     html += '</ul></div>' +
       '<div class="docs-content">' +
-      '<pre id="docs-content-pre">Select a file to view</pre>' +
-      '</div></div>';
+      '<pre id="docs-content-pre">';
+
+    if (docId) {
+      var found = getDocBySlug(docId);
+      html += found ? found.raw.replace(/</g, '&lt;').replace(/>/g, '&gt;') : 'File not found';
+    } else {
+      html += 'Select a file to view';
+    }
+
+    html += '</pre></div></div>';
 
     mainContent.innerHTML = html;
 
@@ -139,20 +165,31 @@
           active[j].classList.remove('active');
         }
         this.classList.add('active');
-        var filename = this.dataset.file;
-        for (var k = 0; k < DATA.docFiles.length; k++) {
-          if (DATA.docFiles[k].filename === filename) {
-            document.getElementById('docs-content-pre').textContent = DATA.docFiles[k].raw;
-            break;
-          }
-        }
+        var slug = this.dataset.docId;
+        currentDocId = slug;
+        updateUrl();
+        var found = getDocBySlug(slug);
+        document.getElementById('docs-content-pre').textContent = found ? found.raw : 'File not found';
       });
     }
   }
 
+  function renderContactView() {
+    var html = '<div id="contact-view">' +
+      '<div class="section-header" style="border-bottom:1px solid #222;padding-bottom:0.5rem;margin-bottom:2rem;color:#666;font-size:0.85rem;">CONTACT</div>' +
+      '<div class="contact-list">' +
+      '<div class="contact-item"><span class="contact-label">email</span><a href="mailto:jonmcc.0723@gmail.com">jonmcc.0723@gmail.com</a></div>' +
+      '<div class="contact-item"><span class="contact-label">linkedIn</span><a href="https://www.linkedin.com/in/jonmcc/" target="_blank" rel="noopener">Jonathan McCaffrey | LinkedIn</a></div>' +
+      '<div class="contact-item"><span class="contact-label">git</span><a href="https://git.jonathanmccaffrey.ca/JonathanMcCaffrey" target="_blank" rel="noopener">Jonathan McCaffrey - Gitea: Git with a cup of tea</a></div>' +
+      '<div class="contact-item"><span class="contact-label">website</span><a href="https://jonathanmccaffrey.ca/" target="_blank" rel="noopener">Ottawa .NET Developer | Jonathan McCaffrey</a></div>' +
+      '</div></div>';
+    mainContent.innerHTML = html;
+  }
+
   function openInfoOverlay(artId, imgIdx) {
     currentArtId = artId;
     currentImageIdx = (imgIdx !== undefined && imgIdx !== null) ? imgIdx : null;
+    currentDocId = null;
     renderInfoOverlay(artId);
     infoOverlay.classList.remove('hidden');
 
@@ -201,15 +238,25 @@
     closeInfoOverlay();
     currentArtId = null;
     currentImageIdx = null;
+    currentDocId = null;
     renderMainPage();
     updateUrl();
   }
 
-  function goDocs() {
+  function goDocs(docId) {
     closeInfoOverlay();
-    renderDocsView();
     currentArtId = null;
     currentImageIdx = null;
+    renderDocsView(docId || null);
+    updateUrl();
+  }
+
+  function goContact() {
+    closeInfoOverlay();
+    currentArtId = null;
+    currentImageIdx = null;
+    currentDocId = null;
+    renderContactView();
     updateUrl();
   }
 
@@ -234,9 +281,15 @@
     goDocs();
   });
 
+  navContact.addEventListener('click', function (e) {
+    e.preventDefault();
+    goContact();
+  });
+
   homeLink.addEventListener('click', function (e) {
     if (!infoOverlay.classList.contains('hidden') ||
-        mainContent.querySelector('#docs-view')) {
+        mainContent.querySelector('#docs-view') ||
+        mainContent.querySelector('#contact-view')) {
       e.preventDefault();
       goHome();
     }
@@ -261,8 +314,10 @@
   function init() {
     var params = parseUrl();
 
-    if (params.view === 'docs') {
-      renderDocsView();
+    if (params.view === 'contact') {
+      renderContactView();
+    } else if (params.view === 'docs') {
+      renderDocsView(params.doc || null);
     } else if (params.view && getArtById(params.view)) {
       renderMainPage();
       openInfoOverlay(params.view, params.img);

html/js/data.js

@@ -1,6 +1,5 @@
 const DATA = {
-  overview: "I am not an artist. I am a software developer that took some art courses in education. This website exists to test out SEO, because man, I am struggling with this SEO stuff, so I need some example websites I can mess with to test stuff out to see if Search Engines are gaslighting me into thinking I am bad at this.\n\nIf you are an artist, and would like some portfolio website like this, feel free to contact me. As long as you don't want something crazy complicated, someone can easily set up up with a free static website. That said, we leave in the AI era, so you can literally get ChatGPT to do it for you and skip the middleman. And using something like Deviant Art is probably always going to get you better discovery then a standalone website made by some random dude on the internet.\n\nIn fact, I am going to generate this website with AI, so ya.",
-
+  overview: "I am not an artist. I am a software developer who took some art courses in education. This website exists to test out SEO, because man, I am struggling with this SEO stuff, so I need some example websites I can mess with to test stuff out to see if Search Engines are gaslighting me into thinking I am bad at this.\n\nIf you are an artist and would like a portfolio website like this, feel free to contact me. As long as you don't want something crazy complicated, someone can easily set you up with a free static website. That said, we live in the AI era, so you can literally get ChatGPT to do it for you and skip the middleman. And using something like DeviantArt is probably always going to get you better discovery than a standalone website made by some random dude on the internet.\n\nIn fact, I am going to generate this website <a href=\"?view=docs&doc=initial-prompt\">with AI</a>, so ya.",
   arts: [
     {
       id: "ac-emblems",
@@ -18,7 +17,7 @@ const DATA = {
       id: "art-four",
       title: "ArtFour",
       images: ["images/ArtFour.png"],
-      description: "I felt like making a character in Adobe Illustrator because I felt like it has been awhile since I touched it. Balloons were added after to amuse myself."
+      description: "I felt like making a character in Adobe Illustrator because I felt like it had been a while since I touched it. Balloons were added afterward to amuse myself."
     },
     {
       id: "art-one",
@@ -30,7 +29,7 @@ const DATA = {
       id: "art-three",
       title: "ArtThree",
       images: ["images/ArtThree.png"],
-      description: "I felt like I had four distinct art styles I used at that point in my life, so I made this generic piece act as some sort of cap stone on it. Scratch coloured pencils. Then I guess the last one being my second art style, adobe illustrator. Then scratch digital art in early college, followed by more clean colours when super basic shading."
+      description: "I felt like I had four distinct art styles I used at that point in my life, so I made this generic piece act as some sort of capstone on it. Scratch coloured pencils. Then I guess the last one is my second art style, Adobe Illustrator. Then scratch digital art in early college, followed by cleaner colours when super basic shading."
     },
     {
       id: "image-one",
@@ -42,7 +41,7 @@ const DATA = {
       id: "malice",
       title: "Malice",
       images: ["images/Malice.jpg"],
-      description: "Drawing for Highschool Project with colouring pencils. My parents always went a bit overboard on buying stuff. They bought me a bunch of dragon statues, so for the project where I had to draw something, I drew one of them. I changed the colour pallet, and added blood because teenager."
+      description: "Drawing for High School Project with pencils, then scanned and coloured in digitally. My parents always went a bit overboard on buying stuff. They bought me a bunch of dragon statues, so for the project where I had to draw something, I drew one of them. I changed the colour palette and added blood because teenager."
     },
     {
       id: "self-portraits",
@@ -53,76 +52,112 @@ const DATA = {
         "images/Self Portraits Mads.png",
         "images/Self Portraits Sads.png"
       ],
-      description: "College project to make a self portrait. Simple photo of my face that I drew over. I figured instead of making one self portrait, I'll just make four and do a poor job about it. But all four would probably look decent together. I liked using the four basic colours or red, blue, green, and yellow when playing with level design to make sections of a map incredibly obvious. So did it for the faces."
+      description: "College project to make a self-portrait. Simple photo of my face that I drew over. I figured instead of making one self-portrait, I'll just make four and do a poor job of it. But all four would probably look decent together. I liked using the four basic colours, red, blue, green, and yellow, when playing with level design to make sections of a map incredibly obvious. So did it for the faces."
     },
     {
       id: "vr-avatar",
       title: "VRAvatar",
       images: ["images/VRAvatar.png"],
-      description: "Was playing around with VR Chat, and obviously wanted to make an avatar. I wanted to make a stylized wraith with a big spherical cloak, head, and oval body, but I figured I lacked the skill to make it look good, and it wouldn't look good in 3D from all angles. And I am more of a lazy don't fight the art kind of guy. So I just did random stuff in Blender until I got something that didn't look hideous to my eyes. Next asset, I would probably make a 2D sketch from each view point, but I did not want to put such effort into the first model. Originally the body was going to be blue, and the clothing orange, but overhearing one Megamind comment in a VR World was enough for me to change the head and left arm colour to orange, lol. Perhaps in the next version."
+      description: "Was playing around with VR Chat, and obviously wanted to make an avatar. I wanted to make a stylized wraith with a big spherical cloak, head, and oval body, but I figured I lacked the skill to make it look good, and it wouldn't look good in 3D from all angles. And I am more of a lazy, don't fight the art kind of guy. So I just did random stuff in Blender until I got something that didn't look hideous to my eyes. Next asset, I would probably make a 2D sketch from each viewpoint, but I did not want to put such effort into the first model. Originally, the body was going to be blue, and the clothing orange, but overhearing one Megamind comment in a VR World was enough for me to change the head and left arm colour to orange, lol. Perhaps in the next version."
     }
   ],
 
   docFiles: [
     {
+      id: "overview",
+      filename: "Overview.md",
+      type: "Page",
+      raw: "---\ntype: Page\n---\nI am not an artist. I am a software developer that took some art courses in education. This website exists to test out SEO, because man, I am struggling with this SEO stuff, so I need some example websites I can mess with to test stuff out to see if Search Engines are gaslighting me into thinking I am bad at this.\n\nIf you are an artist, and would like some portfolio website like this, feel free to contact me. As long as you don't want something crazy complicated, someone can easily set up up with a free static website. That said, we live in the AI era, so you can literally get ChatGPT to do it for you and skip the middleman. And using something like DeviantArt is probably always going to get you better discovery than a standalone website made by some random dude on the internet.\n\nIn fact, I am going to generate this website <a href=\"?view=docs&doc=initial-prompt\">with AI</a>, so ya."
+    },
+    {
+      id: "ac-emblems",
       filename: "AC Emblems.md",
       type: "Art",
       raw: "---\ntype: Art\nimage: \"[[AC Emblems.png]]\"\n---\nI was very big into Armored Core. Fun game. Tried to make a logo for each AC design, and many ACs. I recreated a variety of my favourite emblems in Adobe Illustrator for fun. The last 5 do not originate from my Armored Core emblem editor work, I was just testing out making original designs in Illustrator, but they didn't pack the same cool factor and nostalgia in me.\n\n![[AC Emblems.png]]"
     },
     {
+      id: "art-base",
       filename: "Art.base",
       type: "Config",
       raw: "views:\n  - type: table\n    name: Table\n    filters:\n      and:\n        - type == \"Art\"\n    order:\n      - file.name\n      - type\n      - image"
     },
     {
+      id: "art-five",
       filename: "ArtFive.md",
       type: "Art",
-      raw: "---\ntype: Art\nimage: \"[[ArtFive.png]]\"\n---\nRare art piece that is not a school project. Someone mentioned they thought of doing some D&D thing with maids. For some reason, that inspired me to make all of these characters for fun. I recently watched Code Geass, so two characters are clearly inspired by that. You can also see the solider from Haze. The rest are just generic tropes or monsters.\n\n\n![[ArtFive.png]]"
+      raw: "---\ntype: Art\nimage: \"[[ArtFive.png]]\"\n---\nRare art piece that is not a school project. Someone mentioned they thought of doing some D&D thing with maids. For some reason, that inspired me to make all of these characters for fun. I recently watched Code Geass, so two characters are clearly inspired by that. You can also see the soldier from Haze. The rest are just generic tropes or monsters.\n\n\n![[ArtFive.png]]"
     },
     {
+      id: "art-four",
       filename: "ArtFour.md",
       type: "Art",
-      raw: "---\ntype: Art\nimage: \"[[ArtFour.png]]\"\n---\nI felt like making a character in Adobe Illustrator because I felt like it has been awhile since I touched it. Balloons were added after to amuse myself.\n\n![[ArtFour.png]]"
+      raw: "---\ntype: Art\nimage: \"[[ArtFour.png]]\"\n---\nI felt like making a character in Adobe Illustrator because I felt like it had been a while since I touched it. Balloons were added afterward to amuse myself.\n\n![[ArtFour.png]]"
     },
     {
+      id: "art-one",
       filename: "ArtOne.md",
       type: "Art",
       raw: "---\ntype: Art\nimage: \"[[ArtOne.png]]\"\n---\nBottom left is a college project to make a basic character. The rest is for fun. Just generic monsters. I also made a 3D model of a floating skeletal wraith with a dagger in each hand, but I don't think I bothered to save the asset.\n\n![[ArtOne.png]]"
     },
     {
+      id: "art-three",
       filename: "ArtThree.md",
       type: "Art",
-      raw: "---\ntype: Art\nimage: \"[[ArtThree.png]]\"\n---\nI felt like I had four distinct art styles I used at that point in my life, so I made this generic piece act as some sort of cap stone on it. Scratch coloured pencils.  Then I guess the last one being my second art style, adobe illustrator. Then scratch digital art in early college, followed by more clean colours when super basic shading.\n\n![[ArtThree.png]]"
+      raw: "---\ntype: Art\nimage: \"[[ArtThree.png]]\"\n---\nI felt like I had four distinct art styles I used at that point in my life, so I made this generic piece act as some sort of capstone on it. Scratch coloured pencils.  Then I guess the last one being my second art style, adobe illustrator. Then scratch digital art in early college, followed by more clean colours when super basic shading.\n\n![[ArtThree.png]]"
     },
     {
+      id: "image-one",
       filename: "ImageOne.md",
       type: "Art",
       raw: "---\ntype: Art\nimage: \"[[ImageOne.png]]\"\n---\nCollege level design project I spent 80+ hours on. It had 3 puzzles, voice acting, cinematics, easter eggs and a secret ending. A fellow student went up to the teacher and asked her if I could present my work last, because no one should ever have the burden to follow up my presentation. She agreed. What a hilarious compliment.\n\n\n![[ImageOne.png]]"
     },
     {
+      id: "malice",
+      filename: "Malice.md",
+      type: "Art",
+      raw: "---\ntype: Art\nimage: \"[[Malice.jpg]]\"\n---\nDrawing for High School Project with pencils, then scanned and coloured in digitally. My parents always went a bit overboard on buying stuff. They bought me a bunch of dragon statues, so for the project where I had to draw something, I drew one of them. I changed the colour palette and added blood because teenager.\n\n![[Malice.jpg]]"
+    },
+    {
+      id: "self-portraits",
+      filename: "Self Portraits.md",
+      type: "Art",
+      raw: "---\ntype: Art\nimage:\n  - \"[[Self Portraits Bads.png]]\"\n  - \"[[Self Portraits Glads.png]]\"\n  - \"[[Self Portraits Mads.png]]\"\n  - \"[[Self Portraits Sads.png]]\"\n---\nCollege project to make a self-portrait. Simple photo of my face that I drew over. I figured instead of making one self-portrait, I'll just make four and do a poor job of it. But all four would probably look decent together. I liked using the four basic colours, red, blue, green, and yellow, when playing with level design to make sections of a map incredibly obvious. So did it for the faces.\n\n\n![[Self Portraits Sads.png]]![[Self Portraits Bads.png]]\n\n![[Self Portraits Glads.png]]\n\n![[Self Portraits Mads.png]]"
+    },
+    {
+      id: "vr-avatar",
+      filename: "VRAvatar.md",
+      type: "Art",
+      raw: "---\ntype: Art\nimage:\n  - \"[[VRAvatar.png]]\"\n---\n\nWas playing around with VR Chat, and obviously wanted to make an avatar. I wanted to make a stylized wraith with a big spherical cloak, head, and oval body, but I figured I lacked the skill to make it look good, and it wouldn't look good in 3D from all angles. And I am more of a lazy, don't fight the art kind of guy. So I just did random stuff in Blender until I got something that didn't look hideous to my eyes. Next asset, I would probably make a 2D sketch from each viewpoint, but I did not want to put such effort into the first model. Originally, the body was going to be blue, and the clothing orange, but overhearing one Megamind comment in a VR World was enough for me to change the head and left arm colour to orange, lol. Perhaps in the next version.\n\n![[VRAvatar.png]]"
+    },
+    {
+      id: "initial-prompt",
       filename: "Initial Prompt.md",
       type: "Prompt",
       raw: "---\ntype: Prompt\n---\n\nGenerate a basic art portfolio website. Use only HTML CSS and Javascript.\n\nInformation of the website contents can be found in the docs folder.\n\nThe information is in markdown files.\n\nThe type in the frontmatter indicates what it is. ie. page of a page, art for art.\n\nCreate the basic Overview page with the content found in the Overview.md.\n\nUnder that body content, add all the files marked as art as displayed assets. The image frontmatter tells you the image that should be linked. Note that one art type has 4 art images attached.\n\nYou should be able to click on any art asset to make a full screen window appear with just information listed on the associated markdown file, and the art asset.\n\nAdd an exit button on the top right to close this and return to the original screen.\n\nI also want next and prev buttons to just switch to the next art asset on this full screen view.\n\nBut on the art full screen, the user should be able to click on any art asset again to make that full screen with no other information. They can click anywhere on this second layer of full screen to close this window, and return back to the previous full screen informational window.\n\nMake each of these views it's own url parameter, so someone could bookmark one informational window, or one full screen art asset window, and see it later.\n\nMake the overall UI black. Dark mode type stuff. Like grey font.\n\nMake also a link that just shows all these markdown files in a folder structure ui, like an API doc, so people can see how these website was planned before it got generated by this prompt.\n\nPlace your finished website in the html folder with of course all the needed files and copied images.\n"
     },
     {
-      filename: "Malice.md",
-      type: "Art",
-      raw: "---\ntype: Art\nimage: \"[[Malice.jpg]]\"\n---\nDrawing for Highschool Project with colouring pencils. My parents always went a bit overboard on buying stuff. They bought me a bunch of dragon statues, so for the project where I had to draw something, I drew one of them. I changed the colour pallet, and added blood because teenager.\n\n![[Malice.jpg]]"
+      id: "prompt-2",
+      filename: "Prompt 2.md",
+      type: "Prompt",
+      raw: "---\ntype: Prompt\n---\n\nIn the docs section, make all the pages a url parameter. Ideally something like /docs?view=ac-emblems\n\nWhen that is done, on that home page with the overview, make the text `with AI` a link that goes to the initial prompt document. So like `/docs?view=initial-prompt`.\n\nLet's also add a contact page, make the href `/contact` and add the button to the top bar, like you did with Home and Docs.\n\nThe contact information will be.\n\n- email: jonmcc.0723@gmail.com\n- linkedIn: [Jonathan McCaffrey | LinkedIn](https://www.linkedin.com/in/jonmcc/)\n- git: [Jonathan McCaffrey - Gitea: Git with a cup of tea](https://git.jonathanmccaffrey.ca/JonathanMcCaffrey)\n- website: [Ottawa .NET Developer | Jonathan McCaffrey](https://jonathanmccaffrey.ca/)"
     },
     {
-      filename: "Overview.md",
-      type: "Page",
-      raw: "---\ntype: Page\n---\nI am not an artist. I am a software developer that took some art courses in education. This website exists to test out SEO, because man, I am struggling with this SEO stuff, so I need some example websites I can mess with to test stuff out to see if Search Engines are gaslighting me into thinking I am bad at this.\n\nIf you are an artist, and would like some portfolio website like this, feel free to contact me. As long as you don't want something crazy complicated, someone can easily set up up with a free static website. That said, we leave in the AI era, so you can literally get ChatGPT to do it for you and skip the middleman. And using something like Deviant Art is probably always going to get you better discovery then a standalone website made by some random dude on the internet.\n\nIn fact, I am going to generate this website with AI, so ya."
+      id: "prompt-3",
+      filename: "Prompt 3.md",
+      type: "Prompt",
+      raw: "---\ntype: Prompt\n---\n\nIn the docs section, also added the information from the Prompt 2.md and Prompt 3.md file from the /docs folder.\n\nYou see, we are being a bit meta. Were are showing the prompts generating the website. So you need to add each new prompt we use to the docs section.\n\nSo your going to add this new information to that data.js file in the docFiles array.\n\nThanks"
     },
     {
-      filename: "Self Portraits.md",
-      type: "Art",
-      raw: "---\ntype: Art\nimage:\n  - \"[[Self Portraits Bads.png]]\"\n  - \"[[Self Portraits Glads.png]]\"\n  - \"[[Self Portraits Mads.png]]\"\n  - \"[[Self Portraits Sads.png]]\"\n---\nCollege project to make a self portrait. Simple photo of my face that I drew over. I figured instead of making one self portrait, I'll just make four and do a poor job about it. But all four would probably look decent together. I liked using the four basic colours or red, blue, green, and yellow when playing with level design to make sections of a map incredibly obvious. So did it for the faces.\n\n\n![[Self Portraits Sads.png]]![[Self Portraits Bads.png]]\n\n![[Self Portraits Glads.png]]\n\n![[Self Portraits Mads.png]]"
+      id: "prompt-4",
+      filename: "Prompt 4.md",
+      type: "Prompt",
+      raw: "---\ntype: Prompt\n---\n\nAdd some SEO about how this art portfolio website is just for a software developer (Jonathan McCaffrey) to mess around with SEO and AI generation for a website, and the art is just some random past work I did for school or for fun.\n\nWe also need to add the robots.txt file. I am going to use art.jonathanmccaffrey.com if that is relevant to helping with SEO.\n\nRemember to add docs/Prompt 4.md to the docFiles array in data.js so we are self-documenting the usage of AI.\n"
     },
     {
-      filename: "VRAvatar.md",
-      type: "Art",
-      raw: "---\ntype: Art\nimage:\n  - \"[[VRAvatar.png]]\"\n---\n\nWas playing around with VR Chat, and obviously wanted to make an avatar. I wanted to make a stylized wraith with a big spherical cloak, head, and oval body, but I figured I lacked the skill to make it look good, and it wouldn't look good in 3D from all angles. And I am more of a lazy don't fight the art kind of guy. So I just did random stuff in Blender until I got something that didn't look hideous to my eyes. Next asset, I would probably make a 2D sketch from each view point, but I did not want to put such effort into the first model. Originally the body was going to be blue, and the clothing orange, but overhearing one Megamind comment in a VR World was enough for me to change the head and left arm colour to orange, lol. Perhaps in the next version.\n\n![[VRAvatar.png]]"
+      id: "prompt-5",
+      filename: "Prompt 5.md",
+      type: "Prompt",
+      raw: "---\ntype: Prompt\n---\n\nRemember to add docs/Prompt 5.md to the docFiles array in data.js so we are self-documenting the usage of AI.\n\n> Okay. I am going to stop documenting my prompts at this point if it's not interesting. You get the picture of how this works.\n> Type random stuff, fix errors, repeat"
     }
   ]
 };

html/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://art.jonathanmccaffrey.com/sitemap.xml

html/sitemap.xml

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://art.jonathanmccaffrey.com/</loc>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://art.jonathanmccaffrey.com/?view=ac-emblems</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://art.jonathanmccaffrey.com/?view=art-five</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://art.jonathanmccaffrey.com/?view=art-four</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://art.jonathanmccaffrey.com/?view=art-one</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://art.jonathanmccaffrey.com/?view=art-three</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://art.jonathanmccaffrey.com/?view=image-one</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://art.jonathanmccaffrey.com/?view=malice</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://art.jonathanmccaffrey.com/?view=self-portraits</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://art.jonathanmccaffrey.com/?view=vr-avatar</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://art.jonathanmccaffrey.com/?view=contact</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.5</priority>
+  </url>
+  <url>
+    <loc>https://art.jonathanmccaffrey.com/?view=docs</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.5</priority>
+  </url>
+</urlset>