Skip to content

Commit

Permalink
fix slight styling on card hero images
Browse files Browse the repository at this point in the history
  • Loading branch information
test committed Nov 29, 2023
1 parent 1499ad1 commit a32592a
Show file tree
Hide file tree
Showing 158 changed files with 13,165 additions and 23 deletions.
176 changes: 176 additions & 0 deletions .history/pages/cards/compass_20231129153407.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
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 CompassNav from '../../components/navs/CompassNav';
import compassds from '../../public/cards/compass-ds.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">
<section className="items-center text-center md:min-h-screen pb-10 md:pb-0">
<div className="pt-5 pb-10">
<Image src={compasscomputer} priority={true} className="object-contain mx-auto xl:object-fill" width={650} height={650} alt="example UI of compass app"/>
</div>
<div className="px-2 py-4">
<h1 className="font-semibold text-xl md:text-4xl text-slate-900">Project Compass with Code for San Francisco</h1>
<p className="text-slate-400 text-sm mt-10">An overview of my involvement with Compass - a nonprofit and volunteer driven project founded within Code for San Francisco.</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-500 font-light">
<p className="font-semibold text-slate-900">Role</p>
<p className="">Full Stack Engineer</p>
</div>
<div className="text-slate-500 font-light">
<p className="font-semibold text-slate-900">Timeline</p>
<p>Jan 2023 - Current</p>
</div>
<div className="text-slate-500 font-light">
<p className="font-semibold text-slate-900">Team</p>
<p>Compass</p>
</div>
<div className="text-slate-500 font-light">
<p className="font-semibold text-slate-900">Tools</p>
<p>Next.js, Postgresql, Typescript, NextAuth</p>
</div>
</div>
<div className="mt-20 text-slate-500 font-light">
<p className="font-semibold text-slate-900 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, <span className="italic">Code for San Francisco</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. 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>The team is primarily broken up into two subteams - Engineering and Design, with
most members (myself included) simultaneously being involved in specific design aspects.
The project is still currently in the design phase, although the engineering team has
begun to set up much of the application's building blocks. The initial MVP is scheduled
for this summer. 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">here</a>.
</p>
</div>
<div className="mt-20 text-slate-500 font-light">
<p className="font-semibold text-slate-900 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 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! :D
</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-900 pb-1">Overview</p>
<p className="text-slate-500 font-light">Since this is a volunteer-led project, every member of the team has been intimately involved in each step of the design process.</p>
</div>
<div className="mt-10">
<p className="font-semibold text-slate-900 pb-1">The Users & The Problem</p>
<p className="text-slate-500 font-light">Compass was created with the intention of aiding the work of staff that work with students with disabilities in the SFUSD. This staff is primarily composed of case managers and paraeducators. Due to lack of funding, there is no digital presence or application that is geared towards managing the process of their IEP goal creation and task delegation. 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>
</div>
<div className="mt-10">
<p className="font-semibold text-slate-900 pb-1">The Solution</p>
<p className="text-slate-500 font-light">This application is intended to fill in many of those gaps. 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 then 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-500 font-light">
<p className="font-semibold text-slate-900 pb-1">Approaching from an engineering perspective</p>
<ul className="list-disc pl-3">
<li>The engineering team started with a detailed look at the schema and basic factors - what users do we need, what tables might we need, are we in need of relational databases, what kind of authorization or authentication are we looking at, etc.</li>
<li>We implemented a Kanban board through Github projects for organization, now allowing anyone to create and easily assign themselves to specific tickets to work on.</li>
</ul>
</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-500 font-light">
<p className="font-semibold text-slate-900 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>
</ul>
</div>
</div>
<div className="">
<div className="mt-10 text-slate-500 font-light">
<p className="font-semibold text-slate-900 pb-1">Approaching from a design perspective</p>
<ul className="list-disc pl-3">
<li>Much of the user research and interviews had been done right before I joined the team; the findings from this and subsequent research have been pertinent to our understanding of and motivations for each step of the design process.</li>
<li>The design team is currently working on fleshing out the design system - typography, components, color scheme, layout, logo, etc.</li>
<li>User workflows are broken up into more subteams based on the different users interacting with the app. The application consists of two different faces with varying functionalities, and completely different workflows. One face of the app is geared towards list management for case managers, who assign / delegate tasks to paraprofessionals. They also manage the student IEPs and view the resulting data analysis of the students’ progress. This section is designed to primarily be for a desktop interface. The other face is geared towards a mobile-first interface for the paraprofessionals. Their functionalities generally revolve around completing tasks delegated to them for various students and recording the necessary data. There’s also a third subteam dedicated toward designing the aspects of data collection and visualization; we define why it’s needed and how it will be displayed in the most useful and efficient way.</li>
</ul>
</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-500 font-light text-sm">Quick look at the visual design elements.</p>
</div>
{/*<div className="bg-light-blue-400 w-40 h-20 mx-auto mt-5 rounded-xl shadow-lg">
<p>hi this is text</p>
</div>*/}
</div>
</div>
<div id="4" className="md:pl-10 pt-10 pb-20">
<h2 className="text-2xl text-light-blue-800">MORE</h2>
<p className="font-semibold mt-10">Check back here for screencaps of our finalized designs and initial deployed app!</p>
</div>
<div id="5" className="md:pl-10 pt-10 pb-20">
<h2 className="text-2xl text-light-blue-800">THOUGHTS</h2>
<p className="font-semibold mt-10">I've learned a lot. Here are some of the main things so far:</p>
<ul className="list-disc text-slate-500 font-light pl-3">
<li>Schema setup. Haven’t needed to set up a schema of this scale before - very useful stuff </li>
<li>Typescript. This has given me a great opportunity to learn typescript since we decided to use it for this project.</li>
<li>Product design (from a professional large clientelle perspective)
<ul className="list-disc pl-4">
<li>i.e. Really thinking about who we are making this for and how/if it's going to help them</li>
</ul>
</li>
<li>The importance of understanding and finalizing a user's workflow of the product -
it's imperative to having a structured mindset for both designing and engineering
<ul className="list-disc pl-4">
<li>This ties into making sure of scheduling user interviews throughout the build process to gain continuous insight and
ensure that the product is going in the right direction
</li>
</ul>
</li>
<li>Backend integration and trpc (still trying to understand the depths of how everything works but I never thought
I would've known it at all - just another win in my book) </li>
</ul>
</div>
</div>
</section>
</main>
</div>
)
}

export default Compass
Loading

1 comment on commit a32592a

@vercel
Copy link

@vercel vercel bot commented on a32592a Nov 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

myweb – ./

myweb-git-main-hannahmcg.vercel.app
hannahmcg.vercel.app
www.hannahmcg.com
myweb-hannahmcg.vercel.app
hannahmcg.com

Please sign in to comment.