Skip to content

Commit

Permalink
add badges to projects and match style of first project to others
Browse files Browse the repository at this point in the history
  • Loading branch information
@garussell
garussell committed Dec 8, 2023
1 parent ccdcbf7 commit ca276c6
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 10 deletions.
10 changes: 10 additions & 0 deletions app/assets/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,14 @@

.item li {
list-style: circle;
}

.project-type {
background: #3a6caa;
font-size: 12px;
color: #fff;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
10 changes: 10 additions & 0 deletions app/assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,16 @@ a.btn-cta-secondary:hover, a.btn-cta-secondary:not(:disabled):not(.disabled):act
background-clip: padding-box;
}

.project-type {
background: #3a6caa;
font-size: 12px;
color: #fff;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}

a.dotted-link {
border-bottom: 1px dotted #778492;
color: #778492;
Expand Down
20 changes: 10 additions & 10 deletions app/views/home/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
<h2 class="heading">Latest Projects</h2>
<div class="content">

<div class="item featured text-center">
<div class="item row">

<div class="featured-image has-ribbon">
<a href="https://gear-up-ui-ux.vercel.app/" target="_blank">
Expand All @@ -98,20 +98,20 @@
</div>
</div>

<h3 class="title mb-3"><a href="https://gear-up-ui-ux.vercel.app/" target="_blank">Gear Up</a></h3>
<h2 class="title mb-3"><a href="https://gear-up-ui-ux.vercel.app/" target="_blank">Gear Up </a><span class="badge badge-theme">Full Stack </span> <span class="badge project-type">Group Project</span></h2>

<div class="desc text-start">
<p>GearUP is a crowdfunding app for artists to request supplies they need. It is a full-stack SOA application that utilizes GraphQL to communicate between the front and back end. The back end also utilizes Sidekiq and Action Mailer to send confirmation and update emails to its users. There is an option to create an account to add a new post, or donors can search and select a project to donate to without having to create an account.</p>
</div><!--//desc-->
<a class="col-md-4 col-12" href="https://github.com/orgs/gearup-2305/repositories" target="_blank"><i class="fas fa-thumbs-up"></i> Checkout on GitHub</a>
<a class="more-link" href="https://github.com/orgs/gearup-2305/repositories" target="_blank"><i class="fas fa-external-link-alt"></i> Checkout on GitHub</a>
</div><!--//item-->
<hr class="divider" />
<div class="item row">
<a class="col-md-4 col-12" href="https://next-steps-xu92.onrender.com/" target="_blank">
<%= image_tag('projects/next-steps.png', class: 'img-fluid project-image rounded shadow-sm', alt: 'project name') %>
</a>
<div class="desc col-md-8 col-12">
<h3 class="title"><a href="https://next-steps-xu92.onrender.com/" target="_blank">Next Steps</a></h3>
<h2 class="title"><a href="https://next-steps-xu92.onrender.com/" target="_blank">Next Steps </a><span class="badge badge-theme">Fulll Stack</span> <span class="badge project-type">Group Project</span></h2>
<p class="mb-2">Next Steps is an idea that I pitched for a Consultancy project in Turing, inspired by my previous professional experience. It is a full-stack group project that leverages the 211 API along with geolocation to assist individuals in finding community resources in their vicinity. We thought it was particularly important to create search options catered to persons who may not have the ability to navigate existing resources. This repository contains the front-end portion of the project which utilizes the API provided by the back-end repository.</p>
<p><a class="more-link" href="https://github.com/garussell/next-steps" target="_blank"><i class="fas fa-external-link-alt"></i>Checkout on GitHub</a></p>
</div><!--//desc-->
Expand All @@ -123,7 +123,7 @@
<%= image_tag('projects/whether-sweater.png', class: 'img-fluid project-image rounded shadow-sm', alt: 'project name') %>
</a>
<div class="desc col-md-8 col-12">
<h3 class="title"><a href="https://github.com/garussell/whether_sweater" target="_blank">Whether, Sweater</a></h3>
<h2 class="title"><a href="https://github.com/garussell/whether_sweater" target="_blank">Whether, Sweater </a><span class="badge badge-theme">API</span> <span class="badge project-type">Solo Project</span></h2>
<p class="mb-2">Whether, Sweater is a back-end project that exposes multiple API endpoints to make data available from MapQuest API, Unsplash API, OpenLibrary API, and Weather API. It allows the front-end to obtain JSON data that contains weather information for a city, where the city and state are passed in the URL body as a location param, and units (imperial or metric) passed in as an optional param. The result exposed 6 end-points that can be accessed by front-end after obtaining unique, secure API-key.</p>
<p><a class="more-link" href="https://github.com/garussell/whether_sweater" target="_blank"><i class="fas fa-external-link-alt"></i>Checkout on GitHub</a></p>
</div><!--//desc-->
Expand All @@ -134,7 +134,7 @@
<%= image_tag('projects/movie-party.png', class: 'img-fluid project-image rounded shadow-sm', alt: 'project name') %>
</a>
<div class="desc col-md-8 col-12">
<h3 class="title"><a href="https://github.com/garussell/movie_party" target="_blank">Movie Party</a></h3>
<h2 class="title"><a href="https://github.com/garussell/movie_party" target="_blank">Movie Party </a><span class="badge badge-theme">Back-end</span> <span class="badge project-type">Group Project</span></h2>
<p class="mb-2">Movie Party is the back-end of an application in which users can explore movie options and create a viewing party event for themselves and other users of the application. It utilized the MovieDB API where parameters are passed throughout the application and rendered as a basic rails view using http://localhost:3000.</p>
<p><a class="more-link" href="https://github.com/garussell/movie_party" target="_blank"><i class="fas fa-external-link-alt"></i>Checkout on GitHub</a></p>
</div><!--//desc-->
Expand All @@ -150,7 +150,7 @@
<h2 class="heading">Other Projects</h2>
<div class="content">
<div class="item">
<h3 class="title"><a href="https://github.com/garussell/money_market_fe" target="_blank">Money Market Full-Stack</a> <span class="badge badge-theme">Free</span></h3>
<h3 class="title"><a href="https://github.com/garussell/money_market_fe" target="_blank">Money Market </a> <span class="badge badge-theme">Full Stack</span> <span class="badge project-type">Solo Project</span></h3>
<p class="summary">The Money Market Frontend is the client-side application for the Money Market project. It provides a user-friendly interface for managing financial transactions, monitoring account balances, and keeping track of investments. This application is built with Ruby on Rails, using frontend technologies such as HTML, CSS. The back-end of Market Money is an API designed to help users find sustainable and local alternatives in their area. The API provides various endpoints that allow users to search for markets, vendors, and more. It incorporates testing, error handling, SQL/AR, and integration with the TomTom API</p>
<p><a class="more-link" href="https://github.com/garussell/market_money_api_be" target="_blank"><i class="fas fa-external-link-alt"></i>Back-End Repo</a></p>
</div><!--//item-->
Expand Down Expand Up @@ -288,22 +288,22 @@
<div class="item">
<h3 class="level-title">Python &amp; Django</h3>
<div class="level-bar progress">
<div class="progress-bar level-bar-inner" role="progressbar" style="width: 90%" aria-valuenow="94" aria-valuemin="0" aria-valuemax="94"></div>
<div class="progress-bar level-bar-inner" role="progressbar" style="width: 74%" aria-valuenow="94" aria-valuemin="0" aria-valuemax="94"></div>
</div><!--//level-bar-->
</div><!--//item-->
<br />

<div class="item">
<h3 class="level-title">JavaScript</h3>
<div class="level-bar progress">
<div class="progress-bar level-bar-inner" role="progressbar" style="width: 75%" aria-valuenow="86" aria-valuemin="0" aria-valuemax="96"></div>
<div class="progress-bar level-bar-inner" role="progressbar" style="width: 65%" aria-valuenow="86" aria-valuemin="0" aria-valuemax="96"></div>
</div><!--//level-bar-->
</div><!--//item-->
<br />
<div class="item">
<h3 class="level-title">HTML5, CSS3 &amp; Bootstrap</h3>
<div class="level-bar progress">
<div class="progress-bar level-bar-inner" role="progressbar" style="width: 75%" aria-valuenow="93" aria-valuemin="0" aria-valuemax="96"></div>
<div class="progress-bar level-bar-inner" role="progressbar" style="width: 65%" aria-valuenow="93" aria-valuemin="0" aria-valuemax="96"></div>
</div><!--//level-bar-->
</div><!--//item-->
<br />
Expand Down

0 comments on commit ca276c6

Please sign in to comment.