Skip to content

Commit

Permalink
update site content and add workflow for deploy to prod
Browse files Browse the repository at this point in the history
  • Loading branch information
ryan0 committed Oct 10, 2024
1 parent 54078fd commit d9079de
Show file tree
Hide file tree
Showing 10 changed files with 173 additions and 125 deletions.
28 changes: 28 additions & 0 deletions .github/workflows/deploy-to-prod.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
on:
workflow_dispatch:

jobs:
run-deploy:
steps:
- name: install ssh keys
run: |
install -m 600 -D /dev/null ~/.ssh/id_rsa
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
cat >>~/.ssh/config <<END
Host prod
HostName ${{ secrets.SSH_HOST }}
User ${{ secrets.SSH_USER }}
StrictHostKeyChecking no
END
- name: connect and pull
run: ssh prod 'cd ${{ secrets.WORK_DIR }} && git fetch && git reset --hard origin ${{ secrets.MAIN_BRANCH }}'

- name: Install & Build
run: ssh prod 'cd ${{ secrets.WORK_DIR }} && npm install && npm run build:prod'

- name: Sync build result
run: ssh prod 'rsync -a --delete ${{ secrets.WORk_DIR }}/dist ${{ secrets.SITE_DIR }}

- name: Cleanup
run: rm -rf ~/.ssh
192 changes: 90 additions & 102 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
<div class="nav-links">
<a href="#about">About</a>
<a href="#experience">Experience</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</div>
</nav>
Expand All @@ -31,7 +31,7 @@ <h2>I'm a full-stack developer with a passion for crafting engaging digital expe


<div id="about" class="section">
<h2>Overview</h2>
<h2>About Me</h2>
<p>With experience building dynamic user interfaces and architecting scalable web applications, I specialize in
innovative and reliable software solutions. I collaborate with exceptional teams to deliver ambitious and
accessible projects—the more challenging, the better.</p>
Expand All @@ -42,130 +42,118 @@ <h2>Overview</h2>
</div>
<div id="experience" class="section">
<h2>Experience</h2>
<h3>Vanguard (Via Infosystems) | October 2020-August 2024</h3>
<em>Technology Lead</em>
<p>Continuing to work for Vanguard through Infosystems as part of their strategic partnership.</p>
<p>Key Contributions:</p>
<ul>
<li>Enhanced Vanguard's retirement site by developing several new UI interfaces for customizable account
calculations and retirement contribution submissions.
</li>
<li>Updated the configuration and Node.js server-side code for approximately 20 Angular-based web applications
to facilitate their migration to AWS.
</li>
<li>Deployed mentioned web apps and multiple backend Java microservices to an additional AWS fallback region,
improving reliability.
</li>
<li>Developed the Angular frontend for an internal tool that enables teams to query test users by retirement
offer, plan, and account information.
</li>
<li>Onboarded and mentored several developers, ensuring their proficiency with the tech stack, workflow, and
project requirements.
</li>
</ul>
<h3>Vanguard | March 2020-October 2020</h3>
<em>Full Stack Developer</em>
<ul>
<li>Developed retirement offers, banners, and notifications on Vanguard's classic retirement platform using the
Angular framework.
</li>
<li>Implemented comprehensive unit tests using Jasmine and conducted end-to-end testing, increasing code
reliability.
</li>
<li>Collaborated with team members under the Agile methodology, participating in sprint planning, daily
stand-ups, and retrospectives.
</li>
</ul>
<h3>Zip Code Wilmington | October 2019-March 2020</h3>
<em>Student</em>
<ul>
<li>Completed over 800 hours of software development projects and training in an immersive program focused on
Full-Stack development and Object-Oriented Java Programming.
</li>
</ul>
<h3>NüPOINT Marketing | August 2018-August 2019</h3>
<em>Web Developer</em>
<ul>
<li>Developed and maintained websites for diverse clients using Drupal, WordPress, and
Shopify across industries such as engineering, law, medical devices, and consumer products.
</li>
<li>Automated services and increased client sales by enabling online product listings and form
submissions.
</li>
</ul>
</div>
<div id="skills" class="section">
<h2>Skills</h2>
<ul>
<li>Programming Languages: TypeScript, JS, Java, C#, PHP, SQL, HTML, CSS, C, C++, Python, Go.</li>
<li>Frameworks & Libraries: Angular, React, AngularJS, Express, RxJS, Spring.</li>
<li>Tools & Platforms: AWS, DigitalOcean, Unix, Nginx, Git, npm, Node.js, Maven, CMake, Vite.</li>
</ul>
<div class="experience-border">
<h3>Vanguard (Via Infosystems) | October 2020-August 2024</h3>
<em>Technology Lead</em>
<p>Continuing to work for Vanguard through Infosystems as part of their strategic partnership.</p>
<p>Key Contributions:</p>
<ul>
<li>Enhanced Vanguard's retirement site by developing several new UI interfaces for customizable account
calculations and retirement contribution submissions.
</li>
<li>Updated the configuration and Node.js server-side code for approximately 20 Angular-based web applications
to facilitate their migration to AWS.
</li>
<li>Deployed mentioned web apps and multiple backend Java microservices to an additional AWS fallback region,
improving reliability.
</li>
<li>Developed the Angular frontend for an internal tool that enables teams to query test users by retirement
offer, plan, and account information.
</li>
<li>Onboarded and mentored several developers, ensuring their proficiency with the tech stack, workflow, and
project requirements.
</li>
</ul>
<h3>Vanguard | March 2020-October 2020</h3>
<em>Full Stack Developer</em>
<ul>
<li>Developed retirement offers, banners, and notifications on Vanguard's classic retirement platform using the
Angular framework.
</li>
<li>Implemented comprehensive unit tests using Jasmine and conducted end-to-end testing, increasing code
reliability.
</li>
<li>Collaborated with team members under the Agile methodology, participating in sprint planning, daily
stand-ups, and retrospectives.
</li>
</ul>
<h3>Zip Code Wilmington | October 2019-March 2020</h3>
<em>Student</em>
<ul>
<li>Completed over 800 hours of software development projects and training in an immersive program focused on
Full-Stack development and Object-Oriented Java Programming.
</li>
</ul>
<h3>NüPOINT Marketing | August 2018-August 2019</h3>
<em>Web Developer</em>
<ul>
<li>Developed and maintained websites for diverse clients using Drupal, WordPress, and
Shopify across industries such as engineering, law, medical devices, and consumer products.
</li>
<li>Automated services and increased client sales by enabling online product listings and form
submissions.
</li>
</ul>
</div>
</div>
<div id="projects" class="section">
<h2>Projects</h2>
<h2>Projects | Experiments | Games</h2>
<div class="project-grid">
<div class="project">
<img src="typescript.svg">
<h3>Project Title</h3>
<p>project description-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea</p>
</div>
<div class="project">
<img src="typescript.svg">
<h3>Project Title</h3>
<p>project description-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea</p>
<img src="project-imgs/thwomp-chat-img.png">
<h3>Thwomp Chat</h3>
<p>In development, a web-app enabling authenticated users to connect with peers and create chat
groups. Built using Angular, Java Spring, and Websockets.</p>
</div>
<div class="project">
<img src="typescript.svg">
<h3>Project Title</h3>
<p>project description-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea</p>
<img src="project-imgs/voxel-game-img.jpg">
<h3>3D Voxel Game</h3>
<p>Built using Unity and C#. Featuring procedural terrain generation, efficient
resource management, and voxel state propagation for interactive environments.</p>
</div>
<div class="project">
<img src="typescript.svg">
<h3>Project Title</h3>
<p>project description-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea</p>
<img src="project-imgs/light-speed-img.jpg">
<h3>Lightspeed</h3>
<p>An interactive demo of some of the fun that can be had with GPU rendering in a web browser using
webGL.</p>
</div>
<div class="project">
<img src="typescript.svg">
<h3>Project Title</h3>
<p>project description-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea</p>
<img src="project-imgs/asteroids-game-img.png">
<h3>Asteroids</h3>
<p>A clone of your favorite asteroid shooter, built using C++ and SDL.</p>
</div>
<div class="project">
<img src="typescript.svg">
<h3>Project Title</h3>
<p>project description-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea</p>
<img src="project-imgs/portfolio-site-img.png">
<h3>This Site!</h3>
<p>A single-page portfolio site, currently under construction, listing all the reasons you might consider
hiring me! Built using TypeScript, Vite, and GitHub workflows for CI/CD.</p>
</div>
<div class="project">
<img src="typescript.svg">
<h3>Project Title</h3>
<p>project description-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea</p>
<img src="project-imgs/vid-call-img.png">
<h3>Video Call Site</h3>
<p>Developed a web application enabling authenticated users to engage in real-time video calls
using vanilla JavaScript, Socket.IO, WebRTC, and Node.js Express for backend.</p>
</div>
</div>
</div>
<div id="skills" class="section">
<h2>Skills</h2>
<ul>
<li>Programming Languages: TypeScript, JS, Java, C#, PHP, SQL, HTML, CSS, C, C++, Python, Go.</li>
<li>Frameworks & Libraries: Angular, React, AngularJS, Express, RxJS, Spring.</li>
<li>Tools & Platforms: AWS, DigitalOcean, Unix, Nginx, Git, npm, Node.js, Maven, CMake, Vite.</li>
</ul>
</div>
<div id="contact">
<div class="section">
<ul class="contact-info">
<h2>Contact</h2>
<ul class="contact-info" style="margin-bottom: 20px">
<li><a href="mailto:[email protected]" title="[email protected]">[email protected]</a></li>
<li><a href="tel:+13026902704" title="+1 302 690 2704">+1 302 690 2704</a></li>
<li><a href="https://github.com/ryan0">https://github.com/ryan0</a></li>
</ul>
</div>
</div>

<script type="module" src="/src/main.ts"></script>
</body>
</html>
</html>
Binary file added public/project-imgs/asteroids-game-img.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/project-imgs/block-game-img.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/project-imgs/light-speed-img.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/project-imgs/portfolio-site-img.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/project-imgs/thwomp-chat-img.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/project-imgs/vid-call-img.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/project-imgs/voxel-game-img.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
78 changes: 55 additions & 23 deletions src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,34 +40,77 @@ h1 {
padding: 2rem;
}

.hero-content {
margin-top: 300px;
margin-bottom: 200px;
}

.top-nav {
position: fixed;
top: 0;
left: 0;
width: 100vw;
padding: 12px;
background-color: #131313;

nav {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 16px;
display: flex;
justify-content: space-between;

.nav-links {
display: flex;
justify-content: space-between;
width: 350px;

@media (max-width: 510px){
display: none;
}
}
}
}

.hero-content {
margin-top: 300px;
margin-bottom: 200px;

@media (max-width: 900px) {
margin-top: 200px;
margin-bottom: 120px;
}
}

#about {
h2 {
font-size: 2em;
}

p {
font-size: 1.2em;
}

}

.experience-border {

h3 {
margin-bottom: 4px;
}
em {
font-size: .9em;
font-style: italic;
font-family: sans-serif;
}
em, p {
margin-left: 6px;
}
p {
margin-bottom: 2px;
}

@media (min-width: 720px) {
border-left: 1px solid white;
padding-left: 44px;
margin-left: -16px;
}
}

.project-grid {
display: grid;
grid-template-columns: auto auto auto;
Expand All @@ -76,14 +119,16 @@ h1 {
@media (max-width: 800px) {
grid-template-columns: auto auto;
}
@media (max-width: 600px) {
@media (max-width: 520px) {
grid-template-columns: 1fr;
gap: 34px;
}

.project {
padding: 10px;
border: #747bff 1px solid;
border-radius: 10px;
background-color: #131313;
box-shadow: 2px 3px 5px #131313;
border-radius: 4px;
overflow: hidden;
img {
width: calc(100% + 20px);
Expand All @@ -108,16 +153,3 @@ h1 {
margin: 18px;
}
}

@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

0 comments on commit d9079de

Please sign in to comment.