Generated AI website with no changes
This commit is contained in:
@@ -0,0 +1,309 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #000;
|
||||
color: #aaa;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #888;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px solid #222;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
header h1 a {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin-left: 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
#overview {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
#overview p {
|
||||
margin-bottom: 1rem;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.art-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.art-card {
|
||||
cursor: pointer;
|
||||
border: 1px solid #222;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.art-card:hover {
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.art-card img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.art-card .art-title {
|
||||
padding: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.overlay.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
color: #333;
|
||||
font-size: 3rem;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
padding: 1rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.nav-arrow:hover {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.prev-arrow {
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
.next-arrow {
|
||||
right: 0.5rem;
|
||||
}
|
||||
|
||||
#info-overlay-content {
|
||||
max-width: 900px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#info-overlay-content h2 {
|
||||
color: #ccc;
|
||||
font-weight: 400;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.overlay-image-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.overlay-image-container img {
|
||||
max-width: 100%;
|
||||
max-height: 60vh;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
border: 1px solid #222;
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.overlay-image-container img:hover {
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.overlay-image-container.multi img {
|
||||
max-width: 45%;
|
||||
max-height: 35vh;
|
||||
}
|
||||
|
||||
#info-overlay-content .description {
|
||||
color: #888;
|
||||
text-align: left;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
#info-overlay-content .description p {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
#image-overlay {
|
||||
z-index: 200;
|
||||
background: #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#image-overlay img {
|
||||
max-width: 95vw;
|
||||
max-height: 95vh;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#docs-view {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
min-height: 70vh;
|
||||
}
|
||||
|
||||
.docs-tree {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid #222;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.docs-tree .folder-label {
|
||||
color: #888;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.docs-tree ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.docs-tree li {
|
||||
padding: 0.3rem 0;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.docs-tree li:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.docs-tree li.active {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.docs-tree li .type-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.65rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border: 1px solid #333;
|
||||
border-radius: 3px;
|
||||
margin-left: 0.5rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.docs-content {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.docs-content pre {
|
||||
background: #0a0a0a;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
border: 1px solid #1a1a1a;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.art-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.overlay-image-container.multi img {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
#docs-view {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.docs-tree {
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #222;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 480 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 476 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 500 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 458 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 408 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 498 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Art Portfolio</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-inner">
|
||||
<h1><a href="/" id="home-link">Art Portfolio</a></h1>
|
||||
<nav>
|
||||
<a href="#" id="nav-home">Home</a>
|
||||
<a href="#" id="nav-docs">Docs</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content"></main>
|
||||
|
||||
<div id="info-overlay" class="overlay hidden">
|
||||
<button id="close-info" class="close-btn">×</button>
|
||||
<button id="prev-art" class="nav-arrow prev-arrow">‹</button>
|
||||
<button id="next-art" class="nav-arrow next-arrow">›</button>
|
||||
<div id="info-overlay-content"></div>
|
||||
</div>
|
||||
|
||||
<div id="image-overlay" class="overlay hidden">
|
||||
<img id="fullscreen-image" src="" alt="">
|
||||
</div>
|
||||
|
||||
<script src="js/data.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+275
@@ -0,0 +1,275 @@
|
||||
(function () {
|
||||
var currentArtId = null;
|
||||
var currentImageIdx = null;
|
||||
|
||||
var mainContent = document.getElementById('main-content');
|
||||
var infoOverlay = document.getElementById('info-overlay');
|
||||
var infoContent = document.getElementById('info-overlay-content');
|
||||
var closeInfo = document.getElementById('close-info');
|
||||
var prevArt = document.getElementById('prev-art');
|
||||
var nextArt = document.getElementById('next-art');
|
||||
var imageOverlay = document.getElementById('image-overlay');
|
||||
var fullscreenImage = document.getElementById('fullscreen-image');
|
||||
var navHome = document.getElementById('nav-home');
|
||||
var navDocs = document.getElementById('nav-docs');
|
||||
var homeLink = document.getElementById('home-link');
|
||||
|
||||
function getArtIndex(id) {
|
||||
for (var i = 0; i < DATA.arts.length; i++) {
|
||||
if (DATA.arts[i].id === id) return i;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
function getArtById(id) {
|
||||
for (var i = 0; i < DATA.arts.length; i++) {
|
||||
if (DATA.arts[i].id === id) return DATA.arts[i];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function formatParagraphs(text) {
|
||||
var parts = text.split('\n\n');
|
||||
var result = '';
|
||||
for (var i = 0; i < parts.length; i++) {
|
||||
var p = parts[i].trim();
|
||||
if (p) {
|
||||
result += '<p>' + p.replace(/\n/g, '<br>') + '</p>';
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function updateUrl() {
|
||||
var params = new URLSearchParams();
|
||||
if (currentArtId) {
|
||||
params.set('view', currentArtId);
|
||||
if (currentImageIdx !== null) {
|
||||
params.set('img', currentImageIdx);
|
||||
}
|
||||
}
|
||||
var qs = params.toString();
|
||||
var url = qs ? '?' + qs : window.location.pathname;
|
||||
window.history.replaceState(null, '', url);
|
||||
}
|
||||
|
||||
function parseUrl() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
return {
|
||||
view: params.get('view'),
|
||||
img: params.get('img') !== null ? parseInt(params.get('img'), 10) : null
|
||||
};
|
||||
}
|
||||
|
||||
function renderMainPage() {
|
||||
var html = '<section id="overview">' + formatParagraphs(DATA.overview) + '</section>';
|
||||
html += '<section id="gallery"><div class="section-header" style="border-bottom:1px solid #222;padding-bottom:0.5rem;margin-bottom:1.5rem;color:#666;font-size:0.85rem;">ARTWORK</div><div class="art-grid">';
|
||||
|
||||
for (var i = 0; i < DATA.arts.length; i++) {
|
||||
var art = DATA.arts[i];
|
||||
html += '<div class="art-card" data-art-id="' + art.id + '">' +
|
||||
'<img src="' + art.images[0] + '" alt="' + art.title.replace(/"/g, '"') + '" loading="lazy">' +
|
||||
'<div class="art-title">' + art.title + '</div></div>';
|
||||
}
|
||||
|
||||
html += '</div></section>';
|
||||
mainContent.innerHTML = html;
|
||||
|
||||
var cards = document.querySelectorAll('.art-card');
|
||||
for (var i = 0; i < cards.length; i++) {
|
||||
cards[i].addEventListener('click', function () {
|
||||
openInfoOverlay(this.dataset.artId);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function renderInfoOverlay(artId) {
|
||||
var art = getArtById(artId);
|
||||
if (!art) return;
|
||||
|
||||
var isMulti = art.images.length > 1;
|
||||
var imagesHtml = '';
|
||||
for (var i = 0; i < art.images.length; i++) {
|
||||
imagesHtml += '<img src="' + art.images[i] + '" alt="' + art.title.replace(/"/g, '"') + ' ' + (i + 1) + '" data-img-index="' + i + '">';
|
||||
}
|
||||
|
||||
var html = '<h2>' + art.title + '</h2>' +
|
||||
'<div class="overlay-image-container' + (isMulti ? ' multi' : '') + '">' +
|
||||
imagesHtml + '</div>' +
|
||||
'<div class="description">' + formatParagraphs(art.description) + '</div>';
|
||||
|
||||
infoContent.innerHTML = html;
|
||||
|
||||
var imgs = infoContent.querySelectorAll('.overlay-image-container img');
|
||||
for (var i = 0; i < imgs.length; i++) {
|
||||
imgs[i].addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
openImageOverlay(artId, parseInt(this.dataset.imgIndex, 10));
|
||||
});
|
||||
}
|
||||
|
||||
var idx = getArtIndex(artId);
|
||||
prevArt.style.display = idx > 0 ? 'block' : 'none';
|
||||
nextArt.style.display = idx < DATA.arts.length - 1 ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function renderDocsView() {
|
||||
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, '"') + '">' +
|
||||
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>';
|
||||
|
||||
mainContent.innerHTML = html;
|
||||
|
||||
var items = document.querySelectorAll('.docs-tree li');
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
items[i].addEventListener('click', function () {
|
||||
var active = document.querySelectorAll('.docs-tree li.active');
|
||||
for (var j = 0; j < active.length; j++) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function openInfoOverlay(artId, imgIdx) {
|
||||
currentArtId = artId;
|
||||
currentImageIdx = (imgIdx !== undefined && imgIdx !== null) ? imgIdx : null;
|
||||
renderInfoOverlay(artId);
|
||||
infoOverlay.classList.remove('hidden');
|
||||
|
||||
if (currentImageIdx !== null) {
|
||||
openImageOverlay(artId, currentImageIdx);
|
||||
} else {
|
||||
imageOverlay.classList.add('hidden');
|
||||
}
|
||||
|
||||
updateUrl();
|
||||
}
|
||||
|
||||
function closeInfoOverlay() {
|
||||
currentArtId = null;
|
||||
currentImageIdx = null;
|
||||
infoOverlay.classList.add('hidden');
|
||||
imageOverlay.classList.add('hidden');
|
||||
updateUrl();
|
||||
}
|
||||
|
||||
function openImageOverlay(artId, idx) {
|
||||
var art = getArtById(artId);
|
||||
if (!art || !art.images[idx]) return;
|
||||
|
||||
fullscreenImage.src = art.images[idx];
|
||||
imageOverlay.classList.remove('hidden');
|
||||
currentImageIdx = idx;
|
||||
updateUrl();
|
||||
}
|
||||
|
||||
function closeImageOverlay() {
|
||||
imageOverlay.classList.add('hidden');
|
||||
currentImageIdx = null;
|
||||
updateUrl();
|
||||
}
|
||||
|
||||
function navigateArt(direction) {
|
||||
var idx = getArtIndex(currentArtId);
|
||||
if (idx === -1) return;
|
||||
var newIdx = idx + direction;
|
||||
if (newIdx < 0 || newIdx >= DATA.arts.length) return;
|
||||
openInfoOverlay(DATA.arts[newIdx].id);
|
||||
}
|
||||
|
||||
function goHome() {
|
||||
closeInfoOverlay();
|
||||
currentArtId = null;
|
||||
currentImageIdx = null;
|
||||
renderMainPage();
|
||||
updateUrl();
|
||||
}
|
||||
|
||||
function goDocs() {
|
||||
closeInfoOverlay();
|
||||
renderDocsView();
|
||||
currentArtId = null;
|
||||
currentImageIdx = null;
|
||||
updateUrl();
|
||||
}
|
||||
|
||||
closeInfo.addEventListener('click', closeInfoOverlay);
|
||||
|
||||
prevArt.addEventListener('click', function () { navigateArt(-1); });
|
||||
nextArt.addEventListener('click', function () { navigateArt(1); });
|
||||
|
||||
imageOverlay.addEventListener('click', function (e) {
|
||||
if (e.target === imageOverlay || e.target === fullscreenImage) {
|
||||
closeImageOverlay();
|
||||
}
|
||||
});
|
||||
|
||||
navHome.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
goHome();
|
||||
});
|
||||
|
||||
navDocs.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
goDocs();
|
||||
});
|
||||
|
||||
homeLink.addEventListener('click', function (e) {
|
||||
if (!infoOverlay.classList.contains('hidden') ||
|
||||
mainContent.querySelector('#docs-view')) {
|
||||
e.preventDefault();
|
||||
goHome();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (!infoOverlay.classList.contains('hidden')) {
|
||||
if (e.key === 'Escape') {
|
||||
if (!imageOverlay.classList.contains('hidden')) {
|
||||
closeImageOverlay();
|
||||
} else {
|
||||
closeInfoOverlay();
|
||||
}
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
navigateArt(-1);
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
navigateArt(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function init() {
|
||||
var params = parseUrl();
|
||||
|
||||
if (params.view === 'docs') {
|
||||
renderDocsView();
|
||||
} else if (params.view && getArtById(params.view)) {
|
||||
renderMainPage();
|
||||
openInfoOverlay(params.view, params.img);
|
||||
} else {
|
||||
renderMainPage();
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
})();
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
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.",
|
||||
|
||||
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 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."
|
||||
},
|
||||
{
|
||||
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: [
|
||||
{
|
||||
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]]"
|
||||
},
|
||||
{
|
||||
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"
|
||||
},
|
||||
{
|
||||
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]]"
|
||||
},
|
||||
{
|
||||
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]]"
|
||||
},
|
||||
{
|
||||
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]]"
|
||||
},
|
||||
{
|
||||
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]]"
|
||||
},
|
||||
{
|
||||
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]]"
|
||||
},
|
||||
{
|
||||
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]]"
|
||||
},
|
||||
{
|
||||
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."
|
||||
},
|
||||
{
|
||||
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]]"
|
||||
},
|
||||
{
|
||||
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]]"
|
||||
}
|
||||
]
|
||||
};
|
||||
Reference in New Issue
Block a user