153 lines
15 KiB
JavaScript
153 lines
15 KiB
JavaScript
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 <a href=\"?view=docs&doc=initial-prompt\">with AI</a>, so ya.",
|
|
|
|
arts: [
|
|
{
|
|
id: "ac-emblems",
|
|
title: "AC Emblems",
|
|
images: ["images/AC Emblems.png"],
|
|
description: "I 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."
|
|
},
|
|
{
|
|
id: "art-five",
|
|
title: "ArtFive",
|
|
images: ["images/ArtFive.png"],
|
|
description: "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."
|
|
},
|
|
{
|
|
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."
|
|
},
|
|
{
|
|
id: "art-one",
|
|
title: "ArtOne",
|
|
images: ["images/ArtOne.png"],
|
|
description: "Bottom 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."
|
|
},
|
|
{
|
|
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."
|
|
},
|
|
{
|
|
id: "image-one",
|
|
title: "ImageOne",
|
|
images: ["images/ImageOne.png"],
|
|
description: "College 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."
|
|
},
|
|
{
|
|
id: "malice",
|
|
title: "Malice",
|
|
images: ["images/Malice.jpg"],
|
|
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",
|
|
title: "Self Portraits",
|
|
images: [
|
|
"images/Self Portraits Bads.png",
|
|
"images/Self Portraits Glads.png",
|
|
"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."
|
|
},
|
|
{
|
|
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."
|
|
}
|
|
],
|
|
|
|
docFiles: [
|
|
{
|
|
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]]"
|
|
},
|
|
{
|
|
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]]"
|
|
},
|
|
{
|
|
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]]"
|
|
},
|
|
{
|
|
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: "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"
|
|
},
|
|
{
|
|
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/)"
|
|
},
|
|
{
|
|
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"
|
|
},
|
|
{
|
|
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: "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 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: "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 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: "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 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]]"
|
|
}
|
|
]
|
|
};
|