tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace index.html with index.js file

Browse Source
This commit is contained in:
Triston Armstrong 2023-12-25 19:25:55 -06:00
parent 14e051515a
commit 712d09e96c
2 changed files with 120 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

360
pages/index.html
View File

@ -1,360 +0,0 @@
<!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>

120
pages/index.js Normal file
View File

@ -0,0 +1,120 @@
import Script from "next/script";
import Job from "../components/Job";
import Skill from "../components/Skill";
import Project from "../components/Project";
import Head from "next/head";
export default function Landing({ jobs, skills, projects }) {
return (
<div>
<Head>
<body className="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" />
</Head>
<main className="flex gap-6 flex-col">
<section>
<div className="flex flex-col gap-2">
<div className="flex gap-4 items-center">
<img className="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 className="text-2xl text-gray-900 font-bold">Triston Armstrong</h1>
</div>
<p className="text-sm">Full Stack Software Developer @ <a href="ventrahealth.com"
className="text-blue-500">VentraHealth</a></p>
<div className="w-full border-dashed border-gray-700 border-opacity-10 my-4 border "></div>
<p className="text-sm">I am a self taught Full Stack Software Developer with an unhealthy addiction to solving
problems using code.</p>
<div className="w-full border-dashed border-gray-700 border-opacity-10 my-4 border "></div>
</div>
</section>
<section>
<h2 className="text-1xl text-gray-900 font-bold uppercase">Skills</h2>
<div className="flex gap-2 py-4" id="skills">
{skills.map(skill => <Skill key={skill.label} label={skill.label} color={skill.color} />)}
</div>
</section>
<section>
<h2 className="text-1xl text-gray-900 font-bold uppercase">Jobs</h2>
<div className="flex flex-col gap-3 py-4" id="jobs">
{jobs.map(job => <Job key={job.name} logo={job.logo} name={job.name} details={job.details} dateFrom={job.dateFrom} dateTo={job.dateTo} />)}
</div>
</section>
<section>
<h2 className="text-1xl text-gray-900 font-bold uppercase">Personal Projects</h2>
<div className="flex flex-col gap-3 py-4" id="projects">
{projects.map(project => <Project key={project.label} label={project.label} date={project.date} url={project.url} />)}
</div>
</section>
<section>
<h2 className="text-1xl text-gray-900 font-bold uppercase">Notes</h2>
<p>An endless trail of links to my personal notes</p>
<a href="/note">note</a>
</section>
</main>
</div>
);
}
export function getStaticProps() {
return {
props: {
projects: [
{ label: "Web Window Manager", date: "9/18/2022", url: "https://github.com/tristonarmstrong/web-window-manager" },
{ label: "Component Test Helper", date: "6/18/2022", url: "https://github.com/tristonarmstrong/component-test-helper" },
{ label: "Hive DAPP", date: "3/8/2022", url: "https://github.com/tristonarmstrong/hive-dapp" },
{ label: "Kivy Twisted Input Capture", date: "6/27/2021", url: "https://github.com/tristonarmstrong/KivyTwistedInputCapture" },
{ label: "Plant Monitor Node MCU", date: "6/27/2021", url: "https://github.com/tristonarmstrong/PlantMonitorNodeMCU" },
{ label: "Oppo BDP 103 CLI", date: "4/10/2021", url: "https://github.com/tristonarmstrong/oppo_bdp_103_CLI" },
{ label: "Sony Bravia Pro Server", date: "4/10/2021", url: "https://github.com/tristonarmstrong/sony_bravia_pro_display_mock_server" },
{ label: "Chat IO", date: "6/10/2020", url: "https://github.com/tristonarmstrong/chat.io" },
{ label: "Solar Battery Monitor API", date: "7/18/2023", url: "https://github.com/tristonarmstrong/SolarBatteryMonitorApi" },
{ label: "Zip Code Distance App", date: "1/28/2020", url: "https://github.com/tristonarmstrong/zipapp" },
{ label: "Armstrong Editor", date: "12/14/2022", url: "https://github.com/tristonarmstrong/armstrong-editor" },
],
skills: [
{ label: "Typescript", color: "blue-500" },
{ label: "Python", color: "green-800" },
{ label: "Rust", color: "yellow-800" },
{ label: "Javascript", color: "yellow-500" },
],
jobs: [
{
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"
},
]
},
}
}