Skip to content

Commit

Permalink
make some edits to discover spotify case study
Browse files Browse the repository at this point in the history
  • Loading branch information
test committed Apr 16, 2024
1 parent 02788ee commit ba52cfe
Show file tree
Hide file tree
Showing 243 changed files with 3,412 additions and 5,690 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
10 changes: 5 additions & 5 deletions ...components/navs/SpotNav_20240307025218.js → ...components/navs/SpotNav_20240416011111.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ function SpotNav() {
return (
<nav className="hidden md:block sticky mb-5 bg-white md:bg-transparent md:pr-8 lg:pr-12 h-10 top-0 md:top-[80px]">
<ul className="flex justify-between md:flex-col pt-2 md:pt-0 md:space-x-0 list-none bg-white md:bg-transparent text-slate-900 md:space-y-2">
<li><a href="#1" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Overview</a></li>
<li><a href="#2" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Setup</a></li>
<li><a href="#3" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Design</a></li>
<li><a href="#4" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Build</a></li>
<li><a href="#5" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Thoughts</a></li>
<li><a href="#1" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">OVERVIEW</a></li>
<li><a href="#2" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">SETUP</a></li>
<li><a href="#3" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">DESIGN</a></li>
<li><a href="#4" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">BUILD</a></li>
<li><a href="#5" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">THOUGHTS</a></li>
</ul>
</nav>
);
Expand Down
191 changes: 191 additions & 0 deletions .history/pages/cards/compass_20240416011011.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import {BsFillMoonStarsFill} from 'react-icons/bs';
import compasscomputer from '../../public/cards/compass-computer.png';
import compasscomputerG from '../../public/cards/compass-computerG.png';
import compassbrowser from '../../public/cards/compass-browser.png';
import CompassNav from '../../components/navs/CompassNav';
import compassds from '../../public/cards/compass-ds.png';
import compasscm from '../../public/cards/compass-cm.png';
import compasspp from '../../public/cards/compass-pp.png';
import compassdv from '../../public/cards/compass-dv.png';
import NavMain from '../../components/Nav.js';

function Compass() {
return (
<div className="scroll-smooth">
<Head>
<title>Hannah McGowan Portfolio</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/kirbyicon.png" />
</Head>

<NavMain />
<main className="px-5 md:px-20 lg:px-40 pb-20 pt-10 bg-gray-50">
<section className="items-center text-center md:min-h-screen pb-10 md:pb-0">
<div className="py-10">
<Image src={compassbrowser} priority={true} className="object-contain mx-auto" width={650} height={650} alt="compass app in browser"/>
</div>
<div className="px-2 py-4">
<h1 className="font-semibold text-xl md:text-4xl text-slate-900">Project Compass with SF Civic Tech</h1>
<p className="text-slate-500 text-sm md:text-base mt-10">An overview of my involvement with Compass - a nonprofit and volunteer driven project founded within SF Civic Tech.</p>
</div>
</section>
{/* breaks up rest of case study between nav and information */}
<section className="md:flex">
<CompassNav />
<div className="md:flex-grow">
{/* first screen: overview motion-safe:animate-fadeIn */}
<div id="1" className="md:pl-10 min-h-screen xl:min-h-0 xl:pb-20">
<div className="grid grid-cols-2 gap-4 md:grid-cols-4 text-sm">
<div className="text-slate-700 font-light">
<p className="font-semibold text-slate-800">Role</p>
<p className="">Full Stack Engineer</p>
</div>
<div className="text-slate-600 font-light">
<p className="font-semibold text-slate-800">Timeline</p>
<p>Jan 2023 - Current</p>
</div>
<div className="text-slate-600 font-light">
<p className="font-semibold text-slate-800">Team</p>
<p>Compas Volunteers</p>
</div>
<div className="text-slate-600 font-light">
<p className="font-semibold text-slate-800">Tools</p>
<p>Next.js, PostgreSQL, Typescript, NextAuth, Figma</p>
</div>
</div>
<div className="mt-20 text-slate-600 font-light">
<p className="font-semibold text-slate-800 pb-1">What is Compass?</p>
<p>Compass is <span className="text-light-blue-600 font-semibold">a nonprofit and entirely volunteer-led and sustained project</span>
{' '}founded within the volunteer brigade, SF Civic Tech <span className="italic">(formally known as Code for SF)</span>.
The project was started with the goal of aiding staff within the SFUSD whose
work are focused on students with disabilities, namely case managers and para professionals (aka paraeducators). The
application aims to <span className="text-light-blue-600 font-semibold">streamline their current "nondigital" process of data collection</span>
{' '}on what is referred to as a student's IEP - Individual Education Plan. In other words, it
would allow staff to have an easier time keeping track of their students' progress.</p>
<br></br>
<p>Check out our github {' '}
<a className="text-light-blue-600 hover:text-light-blue-300 font-semibold cursor-pointer underline decoration-dotted underline-offset-3"
href="https://github.com/sfbrigade/compass" target="_blank">here</a>.
</p>
</div>
<div className="mt-20 text-slate-600 font-light">
<p className="font-semibold text-slate-800 pb-1">How am I involved?</p>
<p>I joined the project as a <span className="text-light-blue-600 font-semibold">full stack engineer</span> with an
added interest in <span className="text-light-blue-600 font-semibold">product design</span> and UI/UX design.
I was looking to broaden my understanding of overall web architecture, in addition to getting familiar with the best approaches and methods to take for designing a product.
I've gotten the added benefit of learning from and working with some incredibly talented people, and
I couldn't be more grateful to this project for giving me the space to make meaningful contributions and grow through creating!
</p>
</div>
</div>
<div>
<div id="2" className="md:pl-10 pt-10 pb-20">
<h2 className="text-2xl text-light-blue-800">ABOUT</h2>
<div className="mt-10">
<p className="font-semibold text-slate-800 pb-1">The Users & The Problem</p>
<p className="text-slate-600 font-light">
Due to lack of funding, there’s no digital application that is geared towards managing the process of IEP goal creation and task delegation for case managers, nor the process of data collection for paraeducators. Much of their work is done on paper, which also doesn’t allow for much room or ability to analyze and visualize a student’s progress.
</p>
<br></br>
<p className="text-slate-600 font-light">
Thus, <span className="text-light-blue-600 font-semibold">the application has two faces - one for case managers (desktop-first), and one for paraeducators (mobile-first)</span>. For a split user base, considerations had to be made regarding limitations and differing tasks.
</p>
<div className="flex justify-center items-end mt-4">
<div className="md:p-5">
<Image src={compasscm} className="object-contain md:mx-auto" width={500} height={400} alt="visual design elements for compass"/>
<p className="pt-2 text-center text-slate-600 font-light text-sm">Case Manager View</p>
</div>
<div className="md:p-5">
<Image src={compasspp} className="object-contain md:mx-auto" width={150} height={150} alt="visual design elements for compass"/>
<p className="pt-2 text-center text-slate-600 font-light text-sm">Para Educator View</p>
</div>
</div>
</div>
<div className="mt-10">
<p className="font-semibold text-slate-800 pb-1">The Solution & User Flow</p>
<p className="text-slate-600 font-light">
This application is intended to digitize and help streamline their current processes. It gives case managers a dashboard where they can create IEP goal sheets for their students. They can create tasks and assign them to various paraeducators within the application. This allows them to collect data digitally, which is then stored in a database. That stored data is visualized in meaningful ways to the case managers, resulting in their students’ progress to be easily accessible and analyzed.
</p>
</div>
</div>
</div>
<div id="3" className="md:pl-10 pt-10 min-h-screen pb-20">
<h2 className="text-2xl text-light-blue-800">WORK</h2>
<div className="mb-10">
<div className="mt-10 text-slate-600 font-light">
<p className="font-semibold text-slate-800 pb-1">Organization</p>
<p className="text-slate-600 font-light">We use Slack and Github projects to discuss, create, and pickup tickets to work on for building out the application.</p>
</div>
<div className="hidden md:block md:p-5 mt-5">
<object className="md:mx-auto" type="image/svg+xml" data="https://gh-card.dev/repos/sfbrigade/compass.svg?fullname=&link_target=_blank"></object>
</div>
</div>

<div>
<div className="mt-10 text-slate-600 font-light">
<p className="font-semibold text-slate-800 pb-1">Tech Stack</p>
<p className="text-slate-600 font-light">Next.js, NextAuth, Typescript, PostgreSQL, Docker</p>
</div>
</div>
<div>
<div className="mt-10 text-slate-600 font-light">
<p className="font-semibold text-slate-800 pb-1">Pull requests I’ve made / worked on:</p>
<ul className="list-disc pl-3">
<li>Initial setup of the case manager dashboard and user, as well as the general file structure.</li>
<li>Setup of the CSS structure and the continuous incorporation of the design system.</li>
<li>Creation of the sidebar and its mobile adaptation (hamburger menu) for responsive design.</li>
<li>Minor CSS Fixes</li>
<li>IEP Student Modal (current)</li>
</ul>
</div>
</div>
<div className="">
<div className="mt-10 text-slate-600 font-light">
<p className="font-semibold text-slate-800 pb-1">Design component I'm working on:</p>
<p className="text-slate-600 font-light">I’m currently working with another UX designer on <span className="text-light-blue-600 font-semibold">finalizing the mockups and direction for the data visualization</span> portion of the application.
Our primary question: how can we visualize data in meaningful ways for both the CMs and paras? To find our answer
we had to understand how they currently analyze data and how they present it in ways that demonstrate a student’s progress.
</p>
<br></br>
<p className="text-slate-600 font-light">Current objectives:
</p>
<ul className="list-disc pl-6">
<li>Determine the best ways to visualize and handle outlier data</li>
<li>Explore whether data be displayed at varying hierarchical levels in the IEP</li>
<li>Test the inclusion and generation of varying graph types</li>
</ul>

</div>
<div className="md:p-5 mt-4">
<Image src={compassdv} className="object-contain md:mx-auto" width={500} height={500} alt="visual design elements for compass"/>
<p className="text-center text-slate-600 font-light text-sm">Mockup of the data table I'm working on for the data viz</p>
</div>
{/*}
<div>
<div className="md:p-5">
<Image src={compassds} className="object-contain md:mx-auto" width={500} height={500} alt="visual design elements for compass"/>
<p className="text-center text-slate-600 font-light text-sm">Quick look at the visual design elements.</p>
</div>
</div> */}
</div>

</div>

<div id="4" className="md:pl-10 pt-10 pb-20">
<h2 className="text-2xl text-light-blue-800">THOUGHTS</h2>
<p className="font-semibold mt-10 pb-1">I've worked with a lot of new tools and concepts</p>
<p className="text-slate-600 font-light">
Working on this project has given me so much valuable insight into working on cross-functional teams, contributing to open-source projects, getting familiar with schema setups and Typescript, and the importance of understanding the end user and how the application is continuously meeting their goals.
</p>
</div>
</div>
</section>
</main>
</div>
)
}

export default Compass
Loading

0 comments on commit ba52cfe

Please sign in to comment.