1
+ import Head from 'next/head' ;
2
+ import Image from 'next/image' ;
3
+ import kirby from '../public/kirbyheadphoneblend-crop.png' ;
4
+ import Link from 'next/link' ;
5
+ import { BsFillMoonStarsFill } from 'react-icons/bs' ;
6
+ import compasscard from '../public/cards/compass-card.png' ;
7
+ import cssacard from '../public/cards/cssa-card.png' ;
8
+ import mcgpaintcard from '../public/cards/mcgpaint-card.png' ;
9
+ import dispotifycard from '../public/cards/dispotify-card.png' ;
10
+ import NavMain from '../components/Nav.js' ;
11
+
12
+ function Work ( ) {
13
+ return (
14
+ < div >
15
+ < Head >
16
+ < title > Hannah McGowan Portfolio</ title >
17
+ < meta name = "description" content = "Generated by create next app" />
18
+ < link rel = "icon" href = "/kirbyicon.png" />
19
+ </ Head >
20
+
21
+ < NavMain />
22
+ < main className = "px-10 md:px-20 lg:px-40 pb-20 pt-5" >
23
+
24
+ < div className = "text-center pb-10" >
25
+ < h1 className = "text-4xl pb-5 text-slate-900" > work + projects</ h1 >
26
+ < p className = "text-lg text-slate-400" > my website’s tech stack: figma, next.js, tailwind, material tailwind</ p >
27
+ </ div >
28
+ { /*<div className="flex items-center justify-center">
29
+ <div className="px-2 py-4 text-center">
30
+ <h1 className="font-semibold">This portfolio's tech stack: next.js, tailwind, material tailwind</h1>
31
+ </div>
32
+ </div>*/ }
33
+ < section >
34
+ < div className = "flex flex-col lg:flex-row lg:justify-center lg:gap-10 items-center" >
35
+ < Link href = "cards/compass" className = "w-[300px] md:w-[400px]" >
36
+ < div className = "shadow-lg hover:shadow-2xl hover:shadow-light-blue-100 overflow-hidden dark:shadow-blue-500 rounded-xl my-10 active:border-blue-200 active:border-2" >
37
+ < div className = "relative w-full h-80" >
38
+ < Image src = { compasscard } className = "object-cover" fill alt = "compass logo" />
39
+ </ div >
40
+ < div className = "p-5 mt-4" >
41
+ < h3 className = "text-lg font-bold text-slate-900 dark:text-slate-300" > COMPASS - C4SF</ h3 >
42
+ < p className = "py-1 text-slate-800 dark:text-slate-400 text-sm" > Develop + Design for Nonprofit Work</ p >
43
+ { /*<p className="text-slate-500 dark:text-slate-400 py-1">Nonprofit app for collecting IEP student data.</p>*/ }
44
+ </ div >
45
+ </ div >
46
+ </ Link >
47
+ < Link href = "cards/cssa" className = "w-[300px] md:w-[400px]" >
48
+ < div className = "shadow-lg hover:shadow-2xl hover:shadow-light-blue-100 overflow-hidden dark:shadow-blue-500 rounded-xl my-10 active:border-blue-200 active:border-2" >
49
+ < div className = "relative w-full h-80" >
50
+ < Image src = { cssacard } className = "object-cover" fill alt = "cssa logo" />
51
+ </ div >
52
+ < div className = "p-5 mt-4" >
53
+ < h3 className = "text-lg font-bold text-slate-900 dark:text-slate-300" > CSSA WEB REBUILD</ h3 >
54
+ < p className = "py-1 text-slate-800 dark:text-slate-400 text-sm" > Ideate, Plan, Design, + Build for an Organization</ p >
55
+ { /*<p className="text-slate-500 dark:text-slate-400 py-1">Complete website rebuild for Berkeley CSSA.</p>*/ }
56
+ </ div >
57
+ </ div >
58
+ </ Link >
59
+ </ div >
60
+ < div className = "flex flex-col lg:flex-row lg:justify-center lg:gap-10 items-center" >
61
+ < Link href = "cards/mcgpaint" className = "w-[300px] md:w-[400px]" >
62
+ < div className = "shadow-lg hover:shadow-2xl hover:shadow-light-blue-100 overflow-hidden rounded-xl my-10 active:border-blue-200 active:border-2" >
63
+ < div className = "relative w-full h-80" >
64
+ < Image src = { mcgpaintcard } className = "object-cover" fill alt = "compass logo" />
65
+ </ div >
66
+ < div className = "p-5 mt-4" >
67
+ < h3 className = "text-lg font-bold text-slate-900 dark:text-slate-300" > MCGOWAN PAINTING</ h3 >
68
+ < p className = "py-1 text-slate-800 dark:text-slate-400 text-sm" > Discuss, Plan, + Build for a Client</ p >
69
+ { /*<p className="text-slate-500 dark:text-slate-400 py-1">Nonprofit app for collecting IEP student data.</p>*/ }
70
+ </ div >
71
+ </ div >
72
+ </ Link >
73
+ < Link href = "cards/dispotify" className = "w-[300px] md:w-[400px]" >
74
+ < div className = "shadow-lg hover:shadow-2xl hover:shadow-light-blue-100 active:border-blue-200 active:border-2 overflow-hidden rounded-xl my-10" >
75
+ < div className = "relative w-full h-80" >
76
+ < Image src = { dispotifycard } className = "object-cover" fill alt = "cssa logo" />
77
+ </ div >
78
+ < div className = "p-5 mt-4" >
79
+ < h3 className = "text-lg font-bold text-slate-900 dark:text-slate-300" > DISCOVER SPOTIFY</ h3 >
80
+ < p className = "py-1 text-slate-800 dark:text-slate-400 text-sm" > Conceptualize + Develop for an Idea</ p >
81
+ { /*<p className="text-slate-500 dark:text-slate-400 py-1">Complete website rebuild for Berkeley CSSA.</p>*/ }
82
+ </ div >
83
+ </ div >
84
+ </ Link >
85
+ </ div >
86
+ </ section >
87
+ </ main >
88
+ </ div >
89
+ )
90
+ }
91
+
92
+ export default Work
0 commit comments