Skip to content

Commit 02788ee

Browse files
author
test
committed
update cssa blurb and make cssa and hops and beans highlight text the same
1 parent 257e04f commit 02788ee

File tree

391 files changed

+19247
-2842
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

391 files changed

+19247
-2842
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎.history/components/navs/CssaNav_20240307025208.js renamed to ‎.history/components/navs/CssaNav_20240415024620.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ function CssaNav() {
1010
<li><a href="#3" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Design</a></li>
1111
<li><a href="#4" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Engineering</a></li>
1212
<li><a href="#5" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Thoughts</a></li>
13-
<li><a href="#6" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Gallery</a></li>
1413
</ul>
1514
</nav>
1615
);

‎.history/components/navs/CssaNav_20240415024832.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Link from 'next/link';
2+
3+
function CssaNav() {
4+
5+
return (
6+
<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]">
7+
<ul className="flex justify-between md:flex-col pt-2 md:pt-0 md:space-x-0 list-none text-slate-900 md:space-y-2">
8+
<li><a href="#1" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">OVERVIEW</a></li>
9+
<li><a href="#2" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">IDEATION</a></li>
10+
<li><a href="#3" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">DESIGN</a></li>
11+
<li><a href="#4" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">ENGINEERING</a></li>
12+
<li><a href="#5" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">THOUGHTS</a></li>
13+
</ul>
14+
</nav>
15+
);
16+
}
17+
18+
export default CssaNav

‎.history/pages/cards/cssa_20240415023933.js

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import Head from 'next/head';
2+
import Image from 'next/image';
3+
import Link from 'next/link';
4+
import {BsFillMoonStarsFill} from 'react-icons/bs';
5+
import cssacomputer from '../../public/cards/cssa-computer.png';
6+
import cssacomputerG from '../../public/cards/cssa-computerG.png';
7+
import cssabrowser from '../../public/cards/cssa-browser.png';
8+
import cssads from '../../public/cards/cssa-ds.png';
9+
import WorkNav from '../../components/navs/CompassNav';
10+
import CssaTabs1 from '../../components/cssa_tabs/CssaTabs1';
11+
import CssaTabs2 from '../../components/cssa_tabs/CssaTabs2';
12+
import CssaTabs3 from '../../components/cssa_tabs/CssaTabs3';
13+
import CssaNav from '../../components/navs/CssaNav';
14+
import { CssaParticles } from '../../components/Particles';
15+
import NavMain from '../../components/Nav.js';
16+
17+
function Cssa() {
18+
return (
19+
<div className="scroll-smooth">
20+
<Head>
21+
<title>Hannah McGowan Portfolio</title>
22+
<meta name="description" content="Generated by create next app" />
23+
<link rel="icon" href="/kirbyicon.png" />
24+
</Head>
25+
<NavMain />
26+
<main className="px-5 md:px-20 lg:px-40 pb-20 pt-10 bg-gray-50">
27+
<section className="items-center text-center md:min-h-screen pb-10 md:pb-0">
28+
<div className="py-10">
29+
<Image src={cssabrowser} priority={true} className="mx-auto" width={650} height={650} alt="cssa website in browser"/>
30+
</div>
31+
<div className="px-2 py-2">
32+
<h1 className="font-semibold text-xl md:text-4xl text-slate-900">Berkeley Cogsci Student Association Website Rebuild</h1>
33+
<p className="text-slate-500 text-sm md:text-base mt-10">Rebuild org website from scratch to encapsulate modern design and accessibility of information.</p>
34+
</div>
35+
</section>
36+
{/* breaks up rest of case study between nav and information */}
37+
<section className="md:flex">
38+
<CssaNav />
39+
<div className="md:flex-grow">
40+
<div id="1" className="md:pl-10 min-h-screen xl:min-h-0 xl:pb-20">
41+
<div className="grid grid-cols-2 gap-4 md:grid-cols-4 text-sm">
42+
<div className="text-slate-600 font-light">
43+
<p className="font-semibold text-slate-900">Role</p>
44+
<p>Tech Director</p>
45+
</div>
46+
<div className="text-slate-600 font-light">
47+
<p className="font-semibold text-slate-900">Timeline</p>
48+
<p>Fall 2021</p>
49+
</div>
50+
<div className="text-slate-600 font-light">
51+
<p className="font-semibold text-slate-900">Project</p>
52+
<p>For CSSA</p>
53+
</div>
54+
<div className="text-slate-600 font-light">
55+
<p className="font-semibold text-slate-900">Tools</p>
56+
<p>HTML, CSS, JS, Github</p>
57+
</div>
58+
</div>
59+
<div className="mt-20">
60+
<p className="font-semibold text-slate-900 pb-4">What is CSSA?</p>
61+
<p className="text-slate-600 font-light">
62+
UC Berkeley’s Cognitive Science Student Association (CSSA) is the <span className="text-light-blue-700 font-base">main undergraduate organization for anyone with an interest in Cognitive Science</span>.
63+
It’s widely <span>recognized for its hosting of the annual California Cognitive Science Conference</span> (CCSC).
64+
This conference brings in speakers from around the world who each specialize in one of the disciplines of Cognitive Science at Berkeley -
65+
Psychology, Neuroscience, Computer Science, Linguistics, Philosophy, and Social Sciences or other related fields.
66+
The organization therefore is catered toward a wide variety of people, and hosts many different kinds of events throughout the year.
67+
</p>
68+
</div>
69+
<div className="mt-20 text-slate-600 font-light">
70+
<p className="font-semibold text-slate-900 pb-4">What did I do?</p>
71+
<p className="pb-3">In my third year of university I was elected the co-Tech Director of CSSA, during which time I got acquainted with the former website and made general updates. Most of my time was spent trying to sift through years worth of files.</p>
72+
<p className="pb-3">My senior year I got elected as the sole Tech Director, and decided to take on the challenge of <span className="font-semibold text-light-blue-700">changing the website for the first time since its creation over ten years prior.</span>
73+
{' '}It was my first attempt tackling every aspect of something at this scale - product design, planning, as well as the actual engineering. </p>
74+
<p className="pb-3">My first decision was whether or not to update the existing website to incorporate the new changes or to just start from scratch.
75+
There were <span className="font-semibold text-light-blue-700">two main reasons why I decided to go all new</span>: there were too many files to even try deleting, and I wanted to adapt the file system to use Github over Filezilla to ensure a more seamless transitioning phase for future Tech Directors. </p>
76+
<p className="pb-3">The former website was incredibly informative, but to a fault - there was more than anyone would have the time to read, and much of the information was almost impossible to find.
77+
To paint a picture, some pages were only accessible through a one-word text link in a paragraph at the bottom of an already lengthy page.
78+
Focusing on accessibility of information, ease of presentation, and incorporation of a more distinct color scheme and modern style, the website came to be what it is currently.</p>
79+
<p>Check out the result: <a href="https://cssa.berkeley.edu/" target="_blank" className="underline text-light-blue-700">CSSA Website</a></p>
80+
</div>
81+
</div>
82+
<div id="2" className="md:pl-10 pt-10">
83+
<h2 className="text-2xl text-light-blue-800 mb-10">IDEATION & ORGANIZATION</h2>
84+
<div className="mb-10">
85+
<div className="mb-5 text-slate-600 font-light">
86+
<p className="font-semibold text-slate-900 pb-2">My Approach</p>
87+
<p>This was basically my first big web project for a “client” (somebody other than myself or a class).
88+
I reached out to one alumni for guidance, and they helped immensely with making me realize I needed to narrow down a specific goal statement.
89+
Other than that, I was on my own - so what did I do?</p>
90+
<p>Here’s a breakdown of my vision at the time on how to design and build the website:</p>
91+
</div>
92+
<CssaTabs1 className=""/>
93+
</div>
94+
<div className="mb-10">
95+
<div className="mb-5 text-slate-600 font-light">
96+
<p className="font-semibold text-slate-900 pb-2">My Method</p>
97+
<p>This is a breakdown on the steps I actually took to answer my aforementioned questions:</p>
98+
</div>
99+
<CssaTabs2 className=""/>
100+
</div>
101+
<div className="mb-10">
102+
<div className="mb-5 text-slate-600 font-light">
103+
<p className="font-semibold text-slate-900 pb-2">The Results</p>
104+
<p>These are an overview of important elements that were narrowed down and/or decided upon.</p>
105+
</div>
106+
<CssaTabs3 className=""/>
107+
</div>
108+
</div>
109+
<div id="3" className="md:pl-10 pt-10 min-h-screen">
110+
<h2 className="text-2xl text-light-blue-800">DESIGN</h2>
111+
<div className="my-10 text-slate-600 font-light">
112+
<p className="font-semibold text-slate-900 pb-2">Design Process</p>
113+
<p className="pb-3">I essentially just used figma as a playground for my thoughts. I tested out any idea that came to my mind on color schemes, typography, general interface layouts, and everything in between. I would incorporate more concrete ideas into the actual website build to then present to the marketing teams for discussion.</p>
114+
<p>Doing everything by myself became a bit apparent as I was too caught up in moving forward; I never compiled a finalized design system at the beginning, instead just testing out various ideas along the way. Nevertheless, I’m grateful that I now understand the importance these aspects of organization have in ensuring an efficient build process.</p>
115+
</div>
116+
<div className="my-10 text-slate-600 font-light">
117+
<p className="font-semibold text-slate-900 pb-2">Visual Design</p>
118+
<p>Now getting to the actual design. To coincide with the goals of the website, the design was intended to be clean, modern, and have a purple color scheme.</p>
119+
<p className="mt-3">Here's the general visual identity (colors & typography):</p>
120+
<div className="p-5">
121+
<Image src={cssads} className="" width={650} height={650} alt="example UI of compass app"/>
122+
</div>
123+
<div className="my-10 text-slate-600 font-light">
124+
<p className="font-semibold text-slate-900 pb-2">Interactive Design, Flow & Accessibility</p>
125+
<p className="pb-3">Much of my implementation of design principles into the interactivity and functionality of the website’s design was admittedly based off on intuition. Font choices and sizes were picked with the intention of being clean and easy to read. The website uses contrasting colors for primary versus non-primary elements, buttons, text, etc.</p>
126+
</div>
127+
<div>
128+
<p className="font-semibold text-slate-900 pb-2">Eye Catching Libraries</p>
129+
<p className="pb-3">One of the coolest elements I incorporated onto the website was <a href="https://vincentgarreau.com/particles.js/" target="_blank" className="text-blue-500 underline">particles.js</a>.</p>
130+
<p className="pb-3">I edited the nodes to fit the colors of the CSSA logo, but other than that the particles spoke for themselves. Made to mimic the neural pathways Cognitive Science is ever so familiar with, it was the perfect interactive element to catch people's attention.</p>
131+
<p>Play around with it below (on desktop view) :D</p>
132+
<div className="p-10 hidden lg:block">
133+
<CssaParticles />
134+
</div>
135+
</div>
136+
</div>
137+
</div>
138+
<div id="4" className="md:pl-10 pt-10 mb-20">
139+
<h2 className="text-2xl text-light-blue-800">ENGINEERING</h2>
140+
<div className="my-10 text-slate-600 font-light">
141+
<p className="font-semibold text-slate-900 pb-2">Github & Filezilla</p>
142+
<p className="pb-3">One of the biggest improvements to the website architecture for the CSSA was transferring the file system from Filezilla to Github.</p>
143+
<p className="pb-3">Making a new repo was easy since I was just starting a new website from scratch. It was the deploying and hosting side of things that I barely understood and were by far the most important part.</p>
144+
<p className="pb-3">The OCF is what the CSSA website uses to host its website. They’re an organization based in UC Berkeley and give free hosting to Berkeley clubs. I found myself in their office many times, working to eventually figure out how to configure the remote repo with them to connect to the new repo I created on github. The years-long process of locally sharing files and configuring them with Filezilla was over, and now the files could be pulled and changed at any time. Success!</p>
145+
</div>
146+
<div className="my-10 text-slate-600 font-light">
147+
<p className="font-semibold text-slate-900 pb-2">Everything Else</p>
148+
<p>If you were to actually go into the github you’d see how much room for improvement there is. I’m proud of all the work that I did, but knowing what I know now - it’s far from a clean build. The CSS naming conventions aren’t readable enough, and the build itself is very basic. Still, it got the job done and made the improvements the club was looking for, so as my first client project I was more than satisfied :).</p>
149+
<p></p>
150+
</div>
151+
</div>
152+
<div id="5" className="md:pl-10 pt-10 pb-20">
153+
<h2 className="text-2xl text-light-blue-800">THOUGHTS</h2>
154+
<ul className="list-disc text-slate-600 font-light pl-3 pt-10">
155+
<li>This taught me a lot about building something in which I'm working simultaneously on my own and with teams of people. I couldn't have asked for a better first project to gain experience with designing, building, and planning.</li>
156+
<li>I still had much to reflect on especially with creating an organized structure for myself, and setting better intermittent goals to keep myself focused and directed.</li>
157+
</ul>
158+
</div>
159+
<div id="6" className="md:pl-10 pt-10 pb-20">
160+
<h2 className="text-2xl text-light-blue-800">GALLERY</h2>
161+
<div className="mt-20 text-slate-600">
162+
<p className="pb-3">Coming soon!</p>
163+
<a href="https://cssa.berkeley.edu/" target="_blank" className="underline text-light-blue-600">Link to CSSA Website</a>
164+
</div>
165+
</div>
166+
</div>
167+
</section>
168+
</main>
169+
</div>
170+
)
171+
}
172+
173+
export default Cssa

0 commit comments

Comments
 (0)