https://charlesoliner.com/index.js

1const showcaseEntries = [
2    {
3        href: "https://www.cisa.gov/resources-tools/services/protective-domain-name-system-dns-resolver",
4        image: "url('images/Protective DNS.png')",
5        heading: "Protective DNS",
6        body: "I developed the front-end and back-end of Protective DNS as part of an Accenture Federal Services Agile development team subcontracted to the Dept of Homeland Security. Protective DNS protects the DHS and other agencies by preventing network traffic from reaching malicious destinations."
7    },
8    {
9        href: "https://whiteflintcreations.com",
10        image: "url('images/White Flint Creations.png')",
11        heading: "White Flint Creations",
12        body: "I developed the official website for a local woodshop. It features a contact form and a map widget."
13    },
14    {
15        href: "https://the-ari.com",
16        image: "url('images/Analytics Research Institute.png')",
17        heading: "Analytics Research Institute",
18        body: "I developed the official website for the ARI."
19    },
20    {
21        href: "https://pekoedc.net",
22        image: "url('images/Pekoe DC.png')",
23        heading: "Pekoe DC",
24        body: "I developed the official website for an accupuncture clinic."
25    },
26    {
27        href: "https://torrents.band",
28        image: "url('images/Torrents.png')",
29        heading: "torrents.",
30        body: "I developed the official website for a post-hardcore rock band. The site lists past shows and embeds some of the band's music."
31    },
32    {
33        href: "https://www.johnsonsflorists.com",
34        image: "url('images/JFGC.png')",
35        heading: "Johnson's Florist & Garden Centers",
36        body: "I maintain the store website using HTML and Javascript, and develop and maintain custom software in C# and Python that interfaces with Counterpoint to track inventory."
37    }
38];
39
40function createShowcaseImage(image) {
41
42    const showcaseImageOuter = document.createElement("div");
43    showcaseImageOuter.classList.add("showcase-image-outer");
44
45    const showcaseImageInner = document.createElement("div");
46    showcaseImageInner.classList.add("image");
47    showcaseImageInner.classList.add("showcase-image-inner");
48    showcaseImageInner.style.backgroundImage = image;
49
50    const vignette = document.createElement("div");
51    vignette.classList.add("vignette");
52
53    showcaseImageInner.appendChild(vignette);
54    showcaseImageOuter.appendChild(showcaseImageInner);
55
56    return showcaseImageOuter;
57}
58
59
60function createDescription(heading, body) {
61
62    const descriptionElement = document.createElement("div");
63    descriptionElement.classList.add("showcase-description");
64
65    const headingElement = document.createElement("h2");
66    headingElement.innerText = heading;
67    descriptionElement.appendChild(headingElement);
68
69    const bodyElement = document.createElement("p");
70    bodyElement.innerText = body;
71    descriptionElement.appendChild(bodyElement);
72
73    return descriptionElement;
74}
75
76const showcaseCard = document.getElementById("showcase-card");
77
78for (const showcaseEntry of showcaseEntries) {
79
80    const showcaseLink = document.createElement("a");
81    showcaseLink.href = showcaseEntry.href;
82    showcaseLink.classList.add("showcase-link");
83
84    showcaseLink.appendChild(createShowcaseImage(showcaseEntry.image));
85    showcaseLink.appendChild(createDescription(showcaseEntry.heading, showcaseEntry.body));
86
87    showcaseCard.appendChild(showcaseLink);
88}
89