work on getting things to look right
This commit is contained in:
parent
107580db20
commit
e85b4488b3
360
pages/index.html
Normal file
360
pages/index.html
Normal file
@ -0,0 +1,360 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Triston Armstrong Portfolio</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"> -->
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="bg-gradient-to-b from-gray-300 to-blue-200 container max-w-xl mx-auto text-gray-800 py-24 px-8 w-full font-mono">
|
||||
<!-- Header section -->
|
||||
<header><!-- put nav stuff here --></header>
|
||||
<!-- Main Content Section -->
|
||||
<main class="flex gap-6 flex-col">
|
||||
|
||||
<!-- ABOUT -->
|
||||
<section>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex gap-4 items-center">
|
||||
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white"
|
||||
src="https://gitlab.com/uploads/-/system/user/avatar/5083849/avatar.png?width=400" alt="">
|
||||
<h1 class="text-2xl text-gray-900 font-bold">Triston Armstrong</h1>
|
||||
</div>
|
||||
<p class="text-sm">Full Stack Software Developer @ <a href="ventrahealth.com"
|
||||
class="text-blue-500">VentraHealth</a></p>
|
||||
<div class="w-full border-dashed border-gray-700 border-opacity-10 my-4 border "></div>
|
||||
<p class="text-sm">I am a self taught Full Stack Software Developer with an unhealthy addiction to solving
|
||||
problems using code.</p>
|
||||
<div class="w-full border-dashed border-gray-700 border-opacity-10 my-4 border "></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SKILLS -->
|
||||
<section>
|
||||
<h2 class="text-1xl text-gray-900 font-bold uppercase">Skills</h2>
|
||||
<div class="flex gap-2 py-4" id="skills">
|
||||
<script type="text/Javascript" src="scripts/skills.js"></script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- JOBS -->
|
||||
<section>
|
||||
<h2 class="text-1xl text-gray-900 font-bold uppercase">Jobs</h2>
|
||||
<div class="flex flex-col gap-3 py-4" id="jobs">
|
||||
<script type="text/Javascript" src="scripts/jobs.js"></script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PERSONAL PROJECTS -->
|
||||
<section>
|
||||
<h2 class="text-1xl text-gray-900 font-bold uppercase">Personal Projects</h2>
|
||||
<div class="flex flex-col gap-3 py-4" id="projects">
|
||||
<script type="text/Javascript" src="scripts/projects.js"></script>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- NOTES -->
|
||||
<section>
|
||||
<h2 class="text-1xl text-gray-900 font-bold uppercase">Notes</h2>
|
||||
<p>An endless trail of links to my personal notes</p>
|
||||
<a href="?id=banana">note</a>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- SOCIALS SECTION -->
|
||||
<!--
|
||||
<section>
|
||||
<h2>🌐 Socials</h2>
|
||||
<p>
|
||||
<button href="https://github.com/tristonarmstrong">Github</button>
|
||||
<button href="https://twitter.com/triston_armstr">Twitter</button>
|
||||
<button href="https://www.linkedin.com/in/triston95strong">LinkedIn</button>
|
||||
</p>
|
||||
</section>
|
||||
-->
|
||||
|
||||
|
||||
<!-- ABOUT ME SECTION -->
|
||||
<!--
|
||||
<section>
|
||||
<h2>📝 About Me</h2>
|
||||
<p>
|
||||
My name's Triston. I'm a Software Engineer with a passion for building complex systems and debating the best way
|
||||
to solve technical problems with my team. I love it when architecture and design rigor results in consensus that
|
||||
produces fantastic outcomes! 🚀
|
||||
</p>
|
||||
</section>
|
||||
-->
|
||||
|
||||
<!--
|
||||
<section>
|
||||
<h4>🛠 Hobbies</h4>
|
||||
<p>
|
||||
I enjoy off-grid living and all things involved with making that possible. Tinkering with hardware, building
|
||||
automated monitoring systems for my solar panels, and other off-grid systems like rain catchment bring me joy.
|
||||
🌞🏡
|
||||
</p>
|
||||
</section>
|
||||
-->
|
||||
|
||||
|
||||
<!-- SKILLS SECTION-->
|
||||
<!--
|
||||
<section>
|
||||
<h2>💡 Skills</h2>
|
||||
<fieldset>
|
||||
<legend>Languages</legend>
|
||||
<code>JavaScript</code>
|
||||
<code>TypeScript</code>
|
||||
<code>Python</code>
|
||||
<code>Rust</code>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Tools</legend>
|
||||
<code>NeoVim</code>
|
||||
<code>Jest</code>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Operating Systems</legend>
|
||||
<code>Mac</code>
|
||||
<code>Linux (Arch)</code>
|
||||
</fieldset>
|
||||
</section>
|
||||
-->
|
||||
|
||||
|
||||
<!-- EDUCATION SECTION -->
|
||||
<!--
|
||||
<section>
|
||||
<h2>🎓 Education</h2>
|
||||
<div>
|
||||
<p>
|
||||
I discovered a passion for software development after the completion of my formal education. My
|
||||
technical
|
||||
education has primarily been in the form of boot camps and online classes, but mostly on-the-job
|
||||
experience.
|
||||
</blockquote>
|
||||
</p>
|
||||
</section>
|
||||
-->
|
||||
|
||||
|
||||
<!-- PROJECTS SECTION -->
|
||||
<!--
|
||||
<section>
|
||||
<h1 id="projects">🚀 Projects</h1>
|
||||
<p>Here is a small sample of the many projects I've worked on over the years.</p>
|
||||
|
||||
<!-- Project 1: Zip Code App -->
|
||||
<!--
|
||||
<details>
|
||||
<summary><strong>Zip Code App</strong></summary>
|
||||
<fieldset>
|
||||
<legend>🛠 Technologies: React - JavaScript - Python</legend>
|
||||
<img src="./zip-app.webp" alt="Zip Code App Screenshot" width="200" height="auto" />
|
||||
<p>
|
||||
I developed this app as a crucial part of a technical assessment. Handling a large CSV file with over
|
||||
80,000+ data points, I wrote a script to disintegrate the CSV into smaller JSON files based on zip codes'
|
||||
RST numbers 0-9. This improved user input evaluation and facilitated quick searches in smaller, unsorted
|
||||
data files. The result was an app that reduces the time taken to calculate distances between two zip codes.
|
||||
</p>
|
||||
<a href="https://github.com/tristonarmstrong/zipapp">Github</a>
|
||||
</fieldset>
|
||||
</details>
|
||||
|
||||
|
||||
<!-- Project 2: Another Project -->
|
||||
<!--
|
||||
<details>
|
||||
<summary><strong>Another Project</strong></summary>
|
||||
<fieldset>
|
||||
<legend>🛠 Technologies: HTML - CSS - JavaScript</legend>
|
||||
<img src="./another-project.webp" alt="Another Project Screenshot" width="200" height="auto" />
|
||||
<p>
|
||||
This is another exciting project where I utilized HTML, CSS, and JavaScript to create an interactive and
|
||||
user-friendly application. The project involved implementing modern design principles and ensuring
|
||||
cross-browser compatibility.
|
||||
</p>
|
||||
<a href="https://github.com/tristonarmstrong/anotherproject">Github</a>
|
||||
</fieldset>
|
||||
</details>
|
||||
|
||||
<!-- Project 3: Yet Another Project -->
|
||||
<!--
|
||||
<details>
|
||||
<summary><strong>Yet Another Project</strong></summary>
|
||||
<fieldset>
|
||||
<legend>🛠 Technologies: Node.js - Express - MongoDB</legend>
|
||||
<img src="./yet-another-project.webp" alt="Yet Another Project Screenshot" width="200" height="auto" />
|
||||
<p>
|
||||
In this project, I explored the world of backend development using Node.js, Express, and MongoDB. I built
|
||||
scalable and efficient APIs, demonstrating my skills in server-side programming and database management.
|
||||
</p>
|
||||
<a href="https://github.com/tristonarmstrong/yetanotherproject">Github</a>
|
||||
</fieldset>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- EXPERIENCE SECTION -->
|
||||
<!--
|
||||
<section>
|
||||
<h2>🌟 Experience</h2>
|
||||
<p>
|
||||
Below is a listing of my development experience. I have been fortunate enough to be entrusted with leadership
|
||||
responsibilities at every position I've held.
|
||||
</p>
|
||||
|
||||
<!-- Experience 1: Ventra Health -->
|
||||
<!--
|
||||
<details>
|
||||
<summary>
|
||||
<a href="https://ventrahealth.com/" target="__blank">
|
||||
<strong>Ventra Health</strong>
|
||||
</a>
|
||||
<i><small>(May 2023 - Present)</small></i>
|
||||
</summary>
|
||||
<p>Software Developer II</p>
|
||||
<ul>
|
||||
<li>Eliminated tech debt by updating our internal application's interface code to follow best practices,
|
||||
decreasing individual components' footprint by 10-20%</li>
|
||||
<li>Spearheaded the engineering of a window manager using TypeScript to efficiently manage our application's
|
||||
windows, saving users an extra 5-15 seconds of time when logging out for the day</li>
|
||||
<li>Increased overall test coverage of our React components to 80% coverage from a weeping 20%</li>
|
||||
<li>Created a Component Test Helper Typescript class for use in frontend Jest testing to ensure testing code
|
||||
is
|
||||
declarative and DRY improving development and testing experience</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
|
||||
<!-- Experience 2: Randstad Technologies -->
|
||||
<!--
|
||||
<details>
|
||||
<summary>
|
||||
<a href="https://www.randstadusa.com/about/" target="__blank">
|
||||
<strong>Randstad Technologies</strong>
|
||||
</a>
|
||||
<i><small>(May 2022 - May 2023)</small></i>
|
||||
</summary>
|
||||
<p>Software Developer</p>
|
||||
<ul>
|
||||
<li>Eliminated tech debt by updating our internal application's interface code to follow best practices,
|
||||
decreasing individual components' footprint by 10-20%</li>
|
||||
<li>Spearheaded the engineering of a window manager using TypeScript to efficiently manage our application's
|
||||
windows, saving users an extra 5-15 seconds of time when logging out for the day</li>
|
||||
<li>Increased overall test coverage of our React components to 80% coverage from a weeping 20%</li>
|
||||
<li>Created a Component Test Helper Typescript class for use in frontend Jest testing to ensure testing code
|
||||
is
|
||||
declarative and DRY improving development and testing experience</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
|
||||
<!-- Experience 3: Damiano Global Corporation -->
|
||||
<!--
|
||||
<details>
|
||||
<summary>
|
||||
<a href="https://damianoglobal.com/" target="__blank">
|
||||
<strong>Damiano Global Corporation</strong>
|
||||
</a>
|
||||
<i><small>(July 2020 - Nov 2021)</small></i>
|
||||
</summary>
|
||||
<p>Python Developer</p>
|
||||
<ul>
|
||||
<li>Supervised a team of 4-8 engineering personnel, ensuring 100% error-free Python code and design</li>
|
||||
<li>Peer-reviewed and revised software designs to ensure technical compliance and propose architectural
|
||||
improvements</li>
|
||||
<li>Developed ~90% of the code of our IoT user interface using Python</li>
|
||||
<li>Integrated with zoom APIs for the automation of the virtual office experience reducing the time needed to
|
||||
set up conference calls by ~5 minutes</li>
|
||||
<li>Programmed modules that utilize various sensors to provide technical solutions such as tracking the
|
||||
device's
|
||||
position in space at all times, notifying our system if devices have been moved and where to.</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
|
||||
<!-- Experience 4: Makers Ladder LLC -->
|
||||
<!--
|
||||
<details>
|
||||
<summary>
|
||||
<a href="http://makersladder.com/" target="__blank">
|
||||
<strong>Makers Ladder LLC</strong>
|
||||
</a>
|
||||
<i><small>(Dec 2019 - Apr 2022)</small></i>
|
||||
</summary>
|
||||
<p>Software Developer</p>
|
||||
<ul>
|
||||
<li>Headed the full-stack development of a custom video conferencing home appraisal application using
|
||||
JavaScript
|
||||
and various frameworks such as React native, integrating with Agora to provide cloud recording</li>
|
||||
<li>Constructed the core video streaming components of a social media platform tailored around video
|
||||
entertainment using React Native</li>
|
||||
<li>Custom-built backends for 4 clients using DynamoDB and GraphQL.</li>
|
||||
</ul>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
<!-- USEFUL TOOLS -->
|
||||
<!--
|
||||
<section>
|
||||
<h2>Useful Tools</h2>
|
||||
<p>A collection of useful tools </p>
|
||||
<button onclick="window.open('https://watercss.kognise.dev/','__blank')">Waterize</button>
|
||||
<button onclick="window.open('https://yofou.dev/blogs/cursor', '__blank')">Yofou
|
||||
Cursor</button>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- CONTACT SECTION -->
|
||||
<!--
|
||||
<section>
|
||||
<h2>📧 Contact</h2>
|
||||
<p>Feel free to reach out!</p>
|
||||
<div>
|
||||
<form action="mailto:triston95strong@gmail.com" method="post" enctype="text/plain">
|
||||
<div>
|
||||
<label for="subject">Subject:</label>
|
||||
<input type="text" name="subject" id="subject" placeholder="Your Name" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" name="email" id="email" placeholder="Your Email" required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="body">Message:</label>
|
||||
<textarea name="body" id="body" rows="5" cols="30" placeholder="Your Message" required></textarea>
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Send" />
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<!--
|
||||
<footer>
|
||||
<p>
|
||||
<small>© 2023 - 2024 Triston Armstrong. All rights reserved. 📅</small>
|
||||
</p>
|
||||
</footer>
|
||||
-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -8,12 +8,11 @@ import {
|
||||
constructGraphData
|
||||
} from "../lib/utils";
|
||||
import FolderTree from "../components/FolderTree";
|
||||
import dynamic from 'next/dynamic'
|
||||
import MDContent from "../components/MDContent";
|
||||
|
||||
|
||||
// This trick is to dynamically load component that interact with window object (browser only)
|
||||
export default function Home({ graphData, content, tree, flattenNodes, backLinks }) {
|
||||
export default function Home({ content, tree, flattenNodes, backLinks }) {
|
||||
return (
|
||||
<Layout>
|
||||
<div className='container'>
|
||||
70
public/index.html
Normal file
70
public/index.html
Normal file
@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Triston Armstrong Portfolio</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"> -->
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="bg-gradient-to-b from-gray-300 to-blue-200 container max-w-xl mx-auto text-gray-800 py-24 px-8 w-full font-mono">
|
||||
<!-- Header section -->
|
||||
<header><!-- put nav stuff here --></header>
|
||||
<!-- Main Content Section -->
|
||||
<main class="flex gap-6 flex-col">
|
||||
|
||||
<!-- ABOUT -->
|
||||
<section>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex gap-4 items-center">
|
||||
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white"
|
||||
src="https://gitlab.com/uploads/-/system/user/avatar/5083849/avatar.png?width=400" alt="">
|
||||
<h1 class="text-2xl text-gray-900 font-bold">Triston Armstrong</h1>
|
||||
</div>
|
||||
<p class="text-sm">Full Stack Software Developer @ <a href="ventrahealth.com"
|
||||
class="text-blue-500">VentraHealth</a></p>
|
||||
<div class="w-full border-dashed border-gray-700 border-opacity-10 my-4 border "></div>
|
||||
<p class="text-sm">I am a self taught Full Stack Software Developer with an unhealthy addiction to solving
|
||||
problems using code.</p>
|
||||
<div class="w-full border-dashed border-gray-700 border-opacity-10 my-4 border "></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SKILLS -->
|
||||
<section>
|
||||
<h2 class="text-1xl text-gray-900 font-bold uppercase">Skills</h2>
|
||||
<div class="flex gap-2 py-4" id="skills">
|
||||
<script type="text/Javascript" src="scripts/skills.js"></script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- JOBS -->
|
||||
<section>
|
||||
<h2 class="text-1xl text-gray-900 font-bold uppercase">Jobs</h2>
|
||||
<div class="flex flex-col gap-3 py-4" id="jobs">
|
||||
<script type="text/Javascript" src="scripts/jobs.js"></script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PERSONAL PROJECTS -->
|
||||
<section>
|
||||
<h2 class="text-1xl text-gray-900 font-bold uppercase">Personal Projects</h2>
|
||||
<div class="flex flex-col gap-3 py-4" id="projects">
|
||||
<script type="text/Javascript" src="scripts/projects.js"></script>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- NOTES -->
|
||||
<section>
|
||||
<h2 class="text-1xl text-gray-900 font-bold uppercase">Notes</h2>
|
||||
<p>An endless trail of links to my personal notes</p>
|
||||
<a href="?id=banana">note</a>
|
||||
<a href="./notes">NOTES</a>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
78
public/scripts/jobs.js
Normal file
78
public/scripts/jobs.js
Normal file
@ -0,0 +1,78 @@
|
||||
(() => {
|
||||
class Job {
|
||||
logo;
|
||||
name;
|
||||
details;
|
||||
code;
|
||||
dateFrom;
|
||||
dateTo;
|
||||
|
||||
constructor(logo, name, details, dateFrom, dateTo) {
|
||||
this.logo = logo
|
||||
this.name = name
|
||||
this.details = details
|
||||
this.dateFrom = dateFrom
|
||||
this.dateTo = dateTo
|
||||
}
|
||||
|
||||
_build() {
|
||||
return `
|
||||
<img src="${this.logo}" class="w-10 h-10 rounded-full" />
|
||||
<div class="flex flex-col flex-1">
|
||||
<div class="flex justify-between">
|
||||
<span class="block text-sm font-bold text-gray-900">${this.name}</span>
|
||||
<span class="block text-xs font-bold text-gray-500">${this.dateFrom} - ${this.dateTo}</span>
|
||||
</div>
|
||||
<span class="block text-xs text-gray-700">${this.details}</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
show() {
|
||||
const container = document.createElement('div')
|
||||
container.classList = "flex items-center gap-x-3 border rounded-xl w-full p-2 bg-gray-200"
|
||||
container.innerHTML = this._build()
|
||||
return container
|
||||
}
|
||||
}
|
||||
|
||||
// details
|
||||
const data = [
|
||||
{
|
||||
logo: 'https://ventrahealth.com/wp-content/uploads/2023/08/cropped-Ventra-Health-favicon-circle-192x192.png',
|
||||
name: 'Ventra Health',
|
||||
details: 'Maintaining and iterating on an internal web application',
|
||||
dateFrom: "May 2023",
|
||||
dateTo: "Present"
|
||||
}, {
|
||||
logo: 'https://www.randstadusa.com/themes/custom/bluex/favicon.ico',
|
||||
name: 'Randstad Technologies',
|
||||
details: 'Built Web Applications for external clients',
|
||||
dateFrom: "May 2022",
|
||||
dateTo: "May 2023"
|
||||
|
||||
}, {
|
||||
logo: 'https://img1.wsimg.com/isteam/ip/9ba626a3-41c9-4092-90b5-cb351983b726/favicon/a8beec51-e35d-4cca-8e88-befa12f687b0.png/:/rs=w:64,h:64,m',
|
||||
name: 'Damiano Global Corporation',
|
||||
details: 'Built Web Applications for external clients',
|
||||
dateFrom: "July 2020",
|
||||
dateTo: "Nov 2021"
|
||||
|
||||
}, {
|
||||
logo: '#',
|
||||
name: 'Makers Ladder LLC',
|
||||
details: 'Did some thangs',
|
||||
dateFrom: "Dec 2019",
|
||||
dateTo: "Apr 2022"
|
||||
|
||||
},
|
||||
]
|
||||
|
||||
// Showings
|
||||
const jobsSection = document.getElementById('jobs')
|
||||
|
||||
data.forEach(job => {
|
||||
const j = new Job(job.logo, job.name, job.details, job.dateFrom, job.dateTo)
|
||||
jobsSection.appendChild(j.show())
|
||||
})
|
||||
})()
|
||||
52
public/scripts/projects.js
Normal file
52
public/scripts/projects.js
Normal file
@ -0,0 +1,52 @@
|
||||
(() => {
|
||||
class Project {
|
||||
label; date; url;
|
||||
constructor(label, date, url) {
|
||||
this.label = label;
|
||||
this.date = date;
|
||||
this.url = url;
|
||||
}
|
||||
|
||||
_build() {
|
||||
return `
|
||||
<p class="text-gray-900 text-sm ">${this.label}</p>
|
||||
<div class="border border-dashed flex-1 border-gray-500 h-0"></div>
|
||||
<div class="flex gap-1 items-baseline">
|
||||
<i class="text-xs text-gray-800">${this.date}</i>
|
||||
<a href="${this.url}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-5 h-5 cursor-pointer text-blue-500 hover:text-blue-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
show() {
|
||||
const container = document.createElement('div')
|
||||
container.classList = `flex flex-row items-baseline justify-between gap-2`
|
||||
container.innerHTML = this._build()
|
||||
return container
|
||||
}
|
||||
}
|
||||
|
||||
const data = [
|
||||
{ label: "Web Window Manager", date: new Date("9/18/2022"), url: "https://github.com/tristonarmstrong/web-window-manager" },
|
||||
{ label: "Component Test Helper", date: new Date("6/18/2022"), url: "https://github.com/tristonarmstrong/component-test-helper" },
|
||||
{ label: "Hive DAPP", date: new Date("3/8/2022"), url: "https://github.com/tristonarmstrong/hive-dapp" },
|
||||
{ label: "Kivy Twisted Input Capture", date: new Date("6/27/2021"), url: "https://github.com/tristonarmstrong/KivyTwistedInputCapture" },
|
||||
{ label: "Plant Monitor Node MCU", date: new Date("6/27/2021"), url: "https://github.com/tristonarmstrong/PlantMonitorNodeMCU" },
|
||||
{ label: "Oppo BDP 103 CLI", date: new Date("4/10/2021"), url: "https://github.com/tristonarmstrong/oppo_bdp_103_CLI" },
|
||||
{ label: "Sony Bravia Pro Server", date: new Date("4/10/2021"), url: "https://github.com/tristonarmstrong/sony_bravia_pro_display_mock_server" },
|
||||
{ label: "Chat IO", date: new Date("6/10/2020"), url: "https://github.com/tristonarmstrong/chat.io" },
|
||||
{ label: "Solar Battery Monitor API", date: new Date("7/18/2023"), url: "https://github.com/tristonarmstrong/SolarBatteryMonitorApi" },
|
||||
{ label: "Zip Code Distance App", date: new Date("1/28/2020"), url: "https://github.com/tristonarmstrong/zipapp" },
|
||||
{ label: "Armstrong Editor", date: new Date("12/14/2022"), url: "https://github.com/tristonarmstrong/armstrong-editor" },
|
||||
]
|
||||
|
||||
const container = document.getElementById('projects')
|
||||
data.sort((a, b) => b.date - a.date).forEach(
|
||||
p => container.appendChild(new Project(p.label, p.date.toDateString(), p.url).show())
|
||||
)
|
||||
})()
|
||||
30
public/scripts/skills.js
Normal file
30
public/scripts/skills.js
Normal file
@ -0,0 +1,30 @@
|
||||
(() => {
|
||||
class Skill {
|
||||
label;
|
||||
color;
|
||||
constructor(label, color) {
|
||||
this.label = label
|
||||
this.color = color
|
||||
}
|
||||
|
||||
_build() {
|
||||
return `${this.label}`
|
||||
}
|
||||
show() {
|
||||
const container = document.createElement('div')
|
||||
container.classList = `bg-${this.color} text-white rounded-xl px-2 py-1 text-xs`
|
||||
container.innerHTML = this._build()
|
||||
return container
|
||||
}
|
||||
}
|
||||
|
||||
const data = [
|
||||
{ label: "Typescript", color: "blue-500" },
|
||||
{ label: "Python", color: "green-800" },
|
||||
{ label: "Rust", color: "yellow-800" },
|
||||
{ label: "Javascript", color: "yellow-500" },
|
||||
]
|
||||
|
||||
const container = document.getElementById('skills')
|
||||
data.forEach(skill => container.appendChild(new Skill(skill.label, skill.color).show()))
|
||||
})()
|
||||
Loading…
Reference in New Issue
Block a user