&*j;=u%25ay-%>3@81tGe^_z*C7pb9y*Ed^H3t$BIKH2o+olp#$q;)_ zfpjCb_^VFg5fU~K)nf*d*r@BCC>UZ!0&b?AGk_jTPXaSnCuW110wjHPPe^9R^;jo3 zwvzTl)C`Zl5}O2}3lec=hZ*$JnkW#7enKKc)(pM${_$9Hc=Sr_A9Biwe*Y=T?~1CK z6eZ9uPICjy-sMGbZl$yQmpB&`ouS8v{58__t0$JP%i3R&%QR3ianbZqDs<2#5FdN@n5bCn^ZtH992~5k(eA|8|@G9u`wdn7bnpg|@{m z^d6Y`*$Zf2Xr&|g%sai#5}Syvv(>Jnx&EM7-|Jr7!M~zdAyjt*xl;OLhvW-a%H1m0 z*x5*nb=R5u><7lyVpN AR?q@1U59 zO+)QW wL8t zyip?u_nI+K$uh{ y)~}qj?(w0&=SE^8`_WMM zTybjG=999h38Yes7}-4*LJ7H)UE8{mE(6;8voE+TYY%33A>S6`G_95^5QHNTo_;Ao ztIQIZ_}49%{8|=O;isBZ?=7kfdF8_@azfoTd+hEJKWE!)$)N%HIe2cplaK`ry#=pV z0q{9w-`i0h@!R8K3GC{ivt{70IWG`EP |(1g7i_Q<>aEAT{5( yD z=!O?kq61VegV+st@XCw475j6vS)_z@efuqQgHQR1T4;|-#OLZNQJPV4k$AX1Uk8Lm z{N*b*ia=I+MB}kWpupJ~>!C@xEN#Wa7V+7{m4j8c?)ChV=D?o~sjT?0C_AQ 7B-vxqX30s0I_`2$in86#`mAsT-w?j{&AL@B3$;P z31G4(lV|b}uSD CIrjk+M1R!X7s 4Aabn<)zpgT}#gE|mIvV38^ODy@<&yflpCwS#fRf9ZX3lPV_?8@C5)A;T zqmouFLFk;qIs4rA=hh=GL~sCFsXHsqO6_y~*AFt93 9UYVBSx1s(=Kb&5;j7cSowdE;7()CC2|-i9Zz+_BIw8#ll~-tyH?F3{%`QCsYa*b#s*9iCc`1P1oC26?`g<9))EJ3%xz+O!B3 zZ7$j~To)C@PquR>a1+Dh>-a%IvH_Y7^ys|4o?E%3`I&ADXfC8++hAdZfzIT#%C+Jz z1lU~K_vAm0m8Qk}K$F>| >RPK%<1SI0(G+8q~H zAsjezyP+u!Se4q3GW)`h`NPSRlMoBjCzNPesWJwVTY!o@G8=(6I%4XHGaSiS3MEBK zhgGFv6Jc>L$4jVE!I?TQuwvz_%CyO!bLh94nqK11C2W$*aa2ueGopG8DnBICVUORP zgytv#)49fVXDaR$SukloYC3u7#5H)}1K21=?DKj^U)8G;MS)&Op)g^zR2($<>C*zW z;X7`hLxiIO#J`ANdyAOJle4V%ppa*(+0i3w;8i*BA_;u8gOO6)MY`ueq7stBMJTB; z-a0R>hT*}>z|Gg}@^zDL1MrH+2hsR8 zHc}*9IvuQC^Ju)^#Y{fOr(96rQNPNhxc;mH@W*m206>Lo<*SaaH?~8zg&f&%YiOEG zGiz?*CP>Bci}!WiS=zj#K5I}>DtpregpP_tfZtPa(N<%vo^#WCQ5BTv0vr%Z{)0q+ z)RbfHktUm|lg&U3YM%lMUM(f u}i#kjX9h>GYctkx9Mt_8{@s%!K_EI zScgwy6%_fR?CG JQtmgNAj^h9B#zma MDWgH55pGuY1Gv7D z;8Psm(vEPiwn#MgJYu4Ty9D|h!?Rj0ddE|&L3S{IP%H4^N!m`60ZwZw^;eg4sk6K{ ziA^`Sbl_4~f&Oo%n;8Ye(tiAdlZKI!Z=|j$5hS|D$bDJ}p{gh$KN&JZYLUjv4h{NY zBJ>X9z !xfDGY z+oh_Z&_e#Q(-}>ssZfm=j$D&4W4FNy&-kAO1~#3Im;F)Nwe{(*75(p=P^VI?X 0GFakfh+X-px4a%Uw@fSbmp9hM1_~R>?Z8+ ziy|e9>8V*`OP}4x5JjdWp}7eX;lVxp5qS} 0YZek;SNmm7tEeSF*-dI)6U-A%m6YvCgM(}_=k#a6o^%-K4{`B1+}O4x zztDT%hVb;v#?j`lTvlFQ3aV#zkX=7 ;YFLS$uIzb0E3lozs5`Xy zi~vF+%{z9uLjKvKPhP%x5f ~7-Gj+%5N`%^=yk*Qn{`> z;xj&ROY6g`iy2a@{O)V(jk&8#hHACVDXey5a+KDod_Z&}kHM}xt7}Md@pil{2x7E~ zL$k^d2@Ec2XskjrN+IILw;#7((abu;OJii&v3?60x>d_Ma(onIPtcVnX@ELF0aL?T zSmWiL3(dOFkt!x=1O!_0n(cAzZW+3nHJ{2S>tgSK?~cF ha^y(l@-Mr2W$%MN{#af8J;V*>hdq!gx=d0h$T7l}>91Wh07)9CTX zh2_ZdQCyFOQ)l(}gft0UZ G`Sh2`x-w`5vC2UD}lZs*5 zG76$akzn}Xi))L3oGJ75#pcN=cX3!=57$Ha=hQ2^lwdyU#a}4JJOz6ddR%zae%#4& za)bFj)z=YQela(F#Y|Q#dp}PJghITwXouVaMq$BM?K%cXn9^Y@g43$=O)F&ZlOUom zJiad#dea;-eywBA@e&D6Pdso1?2^(pXiN91?jvcaUyYoKUmvl5G9e$W!okWe*@a<^ z8cQQ6cNSf+UPDx%?_G4a IiybZHHagF{ ;IcD(dPO!#=u zWfqLcPc^+7Uu#l(B pxft{*4lv#*u7X9AOzDO z1D9?^jIo}?%iz(_dwLa{ex#T}76ZfN_Z-hwpus9y+4xaUu9cX}&P{XrZVWE{1^0yw zO;YhLEW!pJcbCt3L8~a7>jsaN{V3>tz6_7`&pi%GxZ=V3?3K^ U+*ryLSb)8^IblJ0 zSRLNDvIxt)S}g30?s_3NX>F?NKIGrG_zB9@Z>uSW3k2es_H2kU;Rnn%j5qP)!XHKE zPB2mHP~tLCg4K_vH$xv`HbRsJwbZMUV(t=ez;Ec(vyHH)FbfLg`c61I$W_uBB>i^r z&{_P;369-&>23R%qNIULe=1~T$(DA`ev*EWZ6j(B$(te}x1WvmIll21zvygkS%vwG zzkR6Z#RKA2!z!C%M!O>!=Gr0(J0FP=-MN=5t-Ir)of50y10W}j`GtRCsXBakrKtG& zazmITDJMA0C51&BnLY)SY9r)NVTMs);1<=oosS9g31l{4ztjD3#+2H7u_|66b|_*O z;Qk6nalpqdHOjx|K&vUS_6ITgGll;TdaN*ta=M_YtyC)I9Tmr~VaPrH2q b6sd~=AcIxV+%z{E&0@y=DPArw zdV7z(G1hBx7hd{>(cr43^WF%4Y@PXZ?wPpj{OQ#tvc$pABJbvPGvdR`cAtHn)cSEV zrpu}1tJwQ3y!mSmH*uz*x0o|CS<^w%&KJzsj~DU0cLQUxk5B!hWE>aBkjJle8z~;s z-!A=($+}Jq_BTK5^B!`R>!MulZN)F=iXXeUd0w5lUsE5VP*H*oCy( ;?S$p*TVvTxwAeWFB$jHyb0593)$zqalVlDX=GcCN1gU0 zlgU)I$LcXZ8Oyc2TZYTPu@-;7<4YYB-``Qa;IDcvydIA$%kHhJKV^m*- zxcvU4viy &Kr5GVM{IT>WRywKQ9;>SEiQD*NqplK-KK4YR`p0@JW)n_{TU3bt0 zim%;(m1=#v2}zTps=?fU5w^(*y)xT%1vtQH&}50ZF!9YxW=&7*W($2kgKyz1mUgfs zfV<*XVVIFnohW=|j+@Kfo!#liQR^x>2yQdrG;2o8WZR+XzU_nG=Ed2rK?ntA;K5B{ z>M8+*A4 !Jm^Bg}aW?R?6;@QG@uQ8&oJ{hFixcfEnJ4QH?A4>P=q29oDGW;L;= z9-a0;g%c`C+Ai!UmK$NC*4#;Jp<1=TioL=t^YM)<<%u#hnnfSS`nq63QKGO1L8RzX z@MFDq s1z ztYmxDl@LU)5acvHk)~Z`RW7=aJ_nGD!mOSYD>5Odjn@TK#LY{jf?+piB5AM-CAoT_ z?S-*q7}wyLJzK>N%eMPuFgN)Q_otKP;aqy=D5f! 7<=n(lNkYRXVpkB{TAYLYg{|(jtRqYmg$xH zjmq ?B(RE4 zQx^~Pt}gxC2~l=K$$-sYy_r$CO(d=+b3H1MB*y_5g6WLaWTXn+TKQ|hNY^>Mp6k*$ zwkovomhu776vQATqT4blf~g;TY(MWCrf^^yfWJvSAB$p5l;jm@o#=!lqw+Lqfq>X= z$6~kxfm7`3q4zUEB;u4qa#BdJxO!;xGm)wwuisj{0y2x{R(IGMrsIzDY9LW>m!Y`= z04sx3IjnYvL<4JqxQ8f7qYd0s2Ig%`ytYPEMKI)s(LD}D@EY>x`VFtqvnADNBdeao zC96X+MxnwKmjpg{U&gP3HE}1=s!lv&D{6(g_lzyF3A`7Jn*&d_kL<;dAFx!UZ>hB8 z5A*%LsAn;VLp>3${0>M?PSQ)9s3}|h2e?TG4_F{}{Cs>#3Q*t$(CUc}M)I}8cPF6% z=+h(Kh^8)}gj(0}#e7O^FQ6`~fd1#8#!}LMuo3A0bN`o}PYsm!Y}sdOz$+Tegc=qT z8x`PH$7lvnhJp{kHWb22l;@7B7|4yL4UOOVM0MP_>P%S1Lnid)+k9{+3D+JFa#Pyf zhVc#&df87APl4W9X)F3pGS>@etfl=_E5tBcVoOfrD4hmVeTY-cj((pkn%n@EgN{0f zwb_^Rk0I#i ZuHK!l*lN`ceJn(sI{$Fq6nN& zE<-=0_2WN}m+*ivmIOxB@#~Q-cZ>l136w{#TIJe478`KE7@=a{>SzPHsKLzYAyBQO zAtuuF$-JSDy_S@6GW0MOE~R)b;+0f%_NMrW(+V#c_d&U8Z9+ec4=HmOHw?gdjF(Lu zzra 83M_BoO-1b3;9`%&DHfuUY)6YDV21P$C!Rc?mv&{lx#f8oc6?0?x zK08{WP65?#>(vPfA-c=MCY| %*1_<3D4NX zeVTi-JGl2uP_2@0F{G({pxQOXt_d{g_CV6b?jNpfUG9;8yle-^4KHRvZs-_2siata zt+d_T@U$&t*xaD22(fH(W1r$Mo?3dc%Tncm=C6{V9y{v&VT#^1L04vDrLM9qBoZ4@ z6DBN#m57hX7$C(=#$Y5$bJmwA$T8jKD8+6A!-IJwA{WOfs%s}yxUw^?MRZjF$n_KN z6`_bGXcmE#5e4Ym)aQJ)xg3Pg0@k`iGuHe?f(5LtuzSq=nS^5z>vqU0EuZ&75V%Z{ zYyhRLN^)$c6Ds{f7*FBpE;n5iglx5PkHfWrj3`x^j^t z7ntuV`g!9Xg#^3!x)l*}IW=(Tz3>Y5l4uGaB&lz{GDjm2D5S$CExLT`I1#n^lBH7Y zDgpMag@`iETKAI=p<5E#LTkw zVR@=yY|uBVI1HG|8h+d;G-qfuj}-ZR6fN>EfCCW z9~wRQoAPEa#aO?3h?x{YvV*d+NtPkf&4V0k4|L=uj!U{L+oLa(z#&iuhJr3-PjO3R z5s?=nn_5^*^Rawr>>Nr@K(jwkB#JK-=+HqwfdO<+P5byeim)wvqGlP-P|~Nse8=XF zz`?RYB|D6SwS}C+YQv+;}k6$-%D(@+t14BL@vM z2q%q?f6D-A5s$_WY3{^G0F131bbh|g!}#BKw=HQ7mx;Dzg4Z*bTLQSfo{ed{4}NZW zfrRm^Ca$rlE{Ue~uYv>R9{3s mwATcdM_6+yWIO z*ZRH~uXE@#p$XTbCt5j7j2=86e{9>HIB6xDzV+vAo&B?KUiMP|ttOElepnl%|DPqL b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN literal 0 HcmV?d00001 diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 0000000..016ba35 --- /dev/null +++ b/src/App.scss @@ -0,0 +1,40 @@ +@import '~antd/dist/antd.css'; + +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/App.test.tsx b/src/App.test.tsx new file mode 100644 index 0000000..2a68616 --- /dev/null +++ b/src/App.test.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render( ); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..e1e1d2f --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import './App.scss'; +import {Header} from "./components/Header"; + +function App() { + return ( + ++ ); +} + +export default App; diff --git a/src/components/Header.scss b/src/components/Header.scss new file mode 100644 index 0000000..4f1f773 --- /dev/null +++ b/src/components/Header.scss @@ -0,0 +1,8 @@ +header { + display: flex; + flex-direction: row; + + :nth-child(2) { + margin-left: auto; + } +} \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..d738610 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import "./Header.scss"; +import { Button, Typography } from "antd"; + +const { Title } = Typography; + +export const Header = () => { + return ( ++ + + + + Home + + + + Contact + + + Resume + + + GitHub + + + ); +}; diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/src/index.scss @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..aa79a95 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.scss'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +ReactDOM.render( ++ , + document.getElementById('root') +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..9dfc1c0 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +///+ diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts new file mode 100644 index 0000000..49a2a16 --- /dev/null +++ b/src/reportWebVitals.ts @@ -0,0 +1,15 @@ +import { ReportHandler } from 'web-vitals'; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/src/setupTests.ts b/src/setupTests.ts new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/src/setupTests.ts @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..a273b0c --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +} From 85f7c04f7633efd7e85f075241ebb5c2230deb6f Mon Sep 17 00:00:00 2001 From: Cobular <22972550+Cobular@users.noreply.github.com> Date: Thu, 31 Dec 2020 15:14:01 -0800 Subject: [PATCH 2/4] Sort of works with grid, now trying masonry --- .eslintcache | 2 +- .idea/PersonalWebsite_Static.iml | 5 + .idea/codeStyles/codeStyleConfig.xml | 5 + .idea/jsLibraryMappings.xml | 6 + .idea/misc.xml | 6 + package-lock.json | 180 +++++++++++++++++++++++++++ package.json | 7 +- src/App.tsx | 10 +- src/components/Contact.tsx | 7 ++ src/components/Header.scss | 22 +++- src/components/Header.tsx | 45 +++---- src/components/Home.scss | 13 ++ src/components/Home.tsx | 15 +++ src/components/Main.tsx | 16 +++ src/components/ProjectGrid.scss | 57 +++++++++ src/components/ProjectGrid.tsx | 87 +++++++++++++ src/components/Resume.tsx | 7 ++ src/imports.scss | 2 + src/index.tsx | 18 +-- 19 files changed, 474 insertions(+), 36 deletions(-) create mode 100644 .idea/codeStyles/codeStyleConfig.xml create mode 100644 .idea/jsLibraryMappings.xml create mode 100644 .idea/misc.xml create mode 100644 src/components/Contact.tsx create mode 100644 src/components/Home.scss create mode 100644 src/components/Home.tsx create mode 100644 src/components/Main.tsx create mode 100644 src/components/ProjectGrid.scss create mode 100644 src/components/ProjectGrid.tsx create mode 100644 src/components/Resume.tsx create mode 100644 src/imports.scss diff --git a/.eslintcache b/.eslintcache index 8703345..bc84d0c 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\index.tsx":"1","C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\reportWebVitals.ts":"2","C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\App.tsx":"3","C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\components\\Header.tsx":"4"},{"size":501,"mtime":1609115799705,"results":"5","hashOfConfig":"6"},{"size":425,"mtime":499162500000,"results":"7","hashOfConfig":"6"},{"size":202,"mtime":1609116003697,"results":"8","hashOfConfig":"6"},{"size":646,"mtime":1609219827682,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},"145y8x7",{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\index.tsx",[],["19","20"],"C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\reportWebVitals.ts",[],"C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\App.tsx",[],"C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\components\\Header.tsx",[],{"ruleId":"21","replacedBy":"22"},{"ruleId":"23","replacedBy":"24"},"no-native-reassign",["25"],"no-negated-in-lhs",["26"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file +[{"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx":"1","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts":"2","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx":"3","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx":"4","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx":"5","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx":"6","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx":"7","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx":"8","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx":"9"},{"size":560,"mtime":1609455390298,"results":"10","hashOfConfig":"11"},{"size":440,"mtime":1609445337674,"results":"12","hashOfConfig":"11"},{"size":262,"mtime":1609448057026,"results":"13","hashOfConfig":"11"},{"size":885,"mtime":1609448882867,"results":"14","hashOfConfig":"11"},{"size":402,"mtime":1609452953574,"results":"15","hashOfConfig":"11"},{"size":424,"mtime":1609448271170,"results":"16","hashOfConfig":"11"},{"size":142,"mtime":1609448138377,"results":"17","hashOfConfig":"11"},{"size":132,"mtime":1609448124025,"results":"18","hashOfConfig":"11"},{"size":2612,"mtime":1609456026589,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"lcbj9u",{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"29","usedDeprecatedRules":"24"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"38","messages":"39","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts",[],["40","41"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx",["42","43"],"import React from \"react\";\nimport \"./Header.scss\";\nimport {Button, Space, Typography} from \"antd\";\nimport {Link} from \"react-router-dom\";\n\nconst {Title} = Typography;\n\nexport const Header = () => {\n return (\n \n \n \n );\n};\n","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx",["44","45"],{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","severity":1,"message":"51","line":3,"column":9,"nodeType":"52","messageId":"53","endLine":3,"endColumn":15},{"ruleId":"50","severity":1,"message":"54","line":6,"column":8,"nodeType":"52","messageId":"53","endLine":6,"endColumn":13},{"ruleId":"50","severity":1,"message":"55","line":44,"column":7,"nodeType":"52","messageId":"53","endLine":44,"endColumn":11},{"ruleId":"50","severity":1,"message":"56","line":45,"column":7,"nodeType":"52","messageId":"53","endLine":45,"endColumn":12},"no-native-reassign",["57"],"no-negated-in-lhs",["58"],"@typescript-eslint/no-unused-vars","'Button' is defined but never used.","Identifier","unusedVar","'Title' is assigned a value but never used.","'elem' is assigned a value but never used.","'msnry' is assigned a value but never used.","no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/.idea/PersonalWebsite_Static.iml b/.idea/PersonalWebsite_Static.iml index 0c8867d..77f595c 100644 --- a/.idea/PersonalWebsite_Static.iml +++ b/.idea/PersonalWebsite_Static.iml @@ -8,5 +8,10 @@Jake Cover
\n \n\n\n \n \nHome
\n \n\n \nContact
\n \n \nResume
\n \n \nGitHub
\n \n+ + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..a55e7a1 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..f930822 --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + ++ + ++ \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..28a804d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + ++ ++ + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6e767ac..a4d741e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2252,6 +2252,11 @@ "@types/node": "*" } }, + "@types/history": { + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", + "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==" + }, "@types/html-minifier-terser": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz", @@ -2287,6 +2292,14 @@ "pretty-format": "^26.0.0" } }, + "@types/jquery": { + "version": "3.5.5", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz", + "integrity": "sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==", + "requires": { + "@types/sizzle": "*" + } + }, "@types/json-schema": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz", @@ -2297,6 +2310,14 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=" }, + "@types/masonry-layout": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@types/masonry-layout/-/masonry-layout-4.2.2.tgz", + "integrity": "sha512-ECvuWgThpmH3RQNt5at14G5Ov5DBlcJlQAQEE9aDBjXK1dRAgZ33YVo2Hv99ncEEpewXokOu3xzlPJJ9GKZLJw==", + "requires": { + "@types/jquery": "*" + } + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -2349,6 +2370,25 @@ "@types/react": "^16" } }, + "@types/react-router": { + "version": "5.1.9", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.9.tgz", + "integrity": "sha512-US6C0rq2Wt/7uje1roqO0R++Sr0jqplKaBChDY5sNg5k7GC/79YFK0ZsLEdemqUjW05wq1Y/9YYEUgfNZ8TlvA==", + "requires": { + "@types/history": "*", + "@types/react": "*" + } + }, + "@types/react-router-dom": { + "version": "5.1.7", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.7.tgz", + "integrity": "sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==", + "requires": { + "@types/history": "*", + "@types/react": "*", + "@types/react-router": "*" + } + }, "@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", @@ -2357,6 +2397,11 @@ "@types/node": "*" } }, + "@types/sizzle": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz", + "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==" + }, "@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -5160,6 +5205,11 @@ "minimalistic-assert": "^1.0.0" } }, + "desandro-matches-selector": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz", + "integrity": "sha1-cXvu1NwT59jzdi9wem1YpndCGOE=" + }, "destroy": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", @@ -6234,6 +6284,11 @@ "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" }, + "ev-emitter": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz", + "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==" + }, "eventemitter3": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", @@ -6678,6 +6733,14 @@ "path-exists": "^4.0.0" } }, + "fizzy-ui-utils": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz", + "integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==", + "requires": { + "desandro-matches-selector": "^2.0.0" + } + }, "flat-cache": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", @@ -7104,6 +7167,11 @@ "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz", "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==" }, + "get-size": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz", + "integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==" + }, "get-stdin": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", @@ -7362,6 +7430,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -7804,6 +7885,11 @@ "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz", "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==" }, + "include-media": { + "version": "1.4.9", + "resolved": "https://registry.npmjs.org/include-media/-/include-media-1.4.9.tgz", + "integrity": "sha1-0AILe+PrLVSGiiCUNZXOOA4LxDs=" + }, "indent-string": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", @@ -10152,6 +10238,15 @@ "object-visit": "^1.0.0" } }, + "masonry-layout": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.2.tgz", + "integrity": "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==", + "requires": { + "get-size": "^2.0.2", + "outlayer": "^2.1.0" + } + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -10406,6 +10501,15 @@ "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==" }, + "mini-create-react-context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", + "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", + "requires": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + } + }, "mini-css-extract-plugin": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz", @@ -11255,6 +11359,16 @@ "os-tmpdir": "^1.0.0" } }, + "outlayer": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz", + "integrity": "sha1-KYY7beEOpdrf/8rfoNcokHOH6aI=", + "requires": { + "ev-emitter": "^1.0.0", + "fizzy-ui-utils": "^2.0.0", + "get-size": "^2.0.2" + } + }, "p-each-series": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz", @@ -13444,6 +13558,52 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "react-router": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", + "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", + "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.1.tgz", @@ -13933,6 +14093,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -15784,6 +15949,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmpl": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz", @@ -16277,6 +16452,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index dbc724c..52315ec 100644 --- a/package.json +++ b/package.json @@ -10,14 +10,19 @@ "@types/node": "^12.19.11", "@types/react": "^16.14.2", "@types/react-dom": "^16.9.10", + "@types/react-router-dom": "^5.1.7", + "@types/masonry-layout": "^4.2.2", "antd": "^4.9.4", + "react-router-dom": "^5.2.0", "node-sass": "^4.14.1", "prettier": "^2.2.1", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.1", + "include-media": "^1.4.9", "typescript": "^4.1.3", - "web-vitals": "^0.2.4" + "web-vitals": "^0.2.4", + "masonry-layout": "^4.2.2" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.tsx b/src/App.tsx index e1e1d2f..f00cd5a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,13 @@ -import React from 'react'; -import './App.scss'; -import {Header} from "./components/Header"; +import React from "react"; +import "./App.scss"; +import { Header } from "./components/Header"; +import { Main } from "./components/Main"; function App() { return (+ + +-); } diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx new file mode 100644 index 0000000..73a5d07 --- /dev/null +++ b/src/components/Contact.tsx @@ -0,0 +1,7 @@ +export const Contact = () => { + return ( ++ + ++ ) +} diff --git a/src/components/Header.scss b/src/components/Header.scss index 4f1f773..8121657 100644 --- a/src/components/Header.scss +++ b/src/components/Header.scss @@ -1,8 +1,28 @@ header { display: flex; flex-direction: row; + align-content: center; :nth-child(2) { margin-left: auto; } -} \ No newline at end of file + + h2:last-of-type { + margin-right: 5px; + } + + margin: 10px; + padding: 10px; + border-radius: 5px; + background: #66bb6a; + font-family: "Fira Code", monospace; + + h1 { + font-weight: 600; + margin: 0 0 0 5px; + } + + h2 { + margin: 0 + } +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d738610..62cbf7b 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,29 +1,32 @@ import React from "react"; import "./Header.scss"; -import { Button, Typography } from "antd"; +import {Button, Space, Typography} from "antd"; +import {Link} from "react-router-dom"; -const { Title } = Typography; +const {Title} = Typography; export const Header = () => { - return ( -Contact
+- + return ( + + ); }; diff --git a/src/components/Home.scss b/src/components/Home.scss new file mode 100644 index 0000000..723b319 --- /dev/null +++ b/src/components/Home.scss @@ -0,0 +1,13 @@ +#about-me { + background: #61dafb; + border-radius: 5px; + margin: 10px auto; + padding: 10px; + width: fit-content; + + p { + font-family: "Montserrat", sans-serif; + font-size: 16px; + } +} + diff --git a/src/components/Home.tsx b/src/components/Home.tsx new file mode 100644 index 0000000..1cce8c4 --- /dev/null +++ b/src/components/Home.tsx @@ -0,0 +1,15 @@ +import "./Home.scss" +import {ProjectGrid} from "./ProjectGrid"; + +export const Home = () => { + return ( ++ + - ); + +Jake Cover
+ - - Home - ++ + Home
+ - - Contact - - - Resume - - - GitHub - -Contact
+ + +Resume
+ + +GitHub
+ + +++ ) +} diff --git a/src/components/Main.tsx b/src/components/Main.tsx new file mode 100644 index 0000000..3592fa3 --- /dev/null +++ b/src/components/Main.tsx @@ -0,0 +1,16 @@ +import { Route, Switch } from "react-router-dom"; +import { Contact } from "./Contact"; +import { Home } from "./Home"; +import { Resume } from "./Resume"; + +export const Main = () => { + return ( ++++ Hi! I'm Julie, a CS student from the west coast! Take a look at some of my projects below! +
++ + + ); +}; diff --git a/src/components/ProjectGrid.scss b/src/components/ProjectGrid.scss new file mode 100644 index 0000000..181d672 --- /dev/null +++ b/src/components/ProjectGrid.scss @@ -0,0 +1,57 @@ +@import "~include-media/dist/_include-media.scss"; + +$breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px); + +#project-grid { + display: grid; + + margin: 10px; + background: #FFD43B; + border-radius: 5px; + + + + //@include media(">phone") { + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 5px; + justify-items: stretch; + align-items: stretch; + //} + +} + +.OneByOneGridElement { + display: flex; + flex-direction: column; + width: available; + + padding: 10px; + + img { + width: 100%; + } + + p { + + } +} + +.FourByOneGridElement { + grid-column: span 2; + display: flex; + flex-direction: row; + + .image { + flex: 1; + + img { + width: 100%; + max-width: 100%; + } + } + + p { + min-width: 20ch; + width: 30ch; + } +} diff --git a/src/components/ProjectGrid.tsx b/src/components/ProjectGrid.tsx new file mode 100644 index 0000000..5ff896f --- /dev/null +++ b/src/components/ProjectGrid.tsx @@ -0,0 +1,87 @@ +import "./ProjectGrid.scss"; +import Masonry from "masonry-layout"; + + +type GridElementProps = { + image_url: string; + image_alt: string; + text: string; +}; + +const OneByOneGridElement = ({ + image_url, + image_alt, + text, +}: GridElementProps) => { + return ( ++ ++ + + ++ ); +}; + +const FourByOneGridElement = ({ + image_url, + image_alt, + text, +}: GridElementProps) => { + return ( ++++
++{text}
+++ ); +}; + +export const ProjectGrid = () => { + + + return ( ++++
++{text}
+++ ); +}; diff --git a/src/components/Resume.tsx b/src/components/Resume.tsx new file mode 100644 index 0000000..4dbaf05 --- /dev/null +++ b/src/components/Resume.tsx @@ -0,0 +1,7 @@ +export const Resume = () => { + return ( ++ + + + + ++) +} diff --git a/src/imports.scss b/src/imports.scss new file mode 100644 index 0000000..919bdfc --- /dev/null +++ b/src/imports.scss @@ -0,0 +1,2 @@ +@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400,600&family=Montserrat:wght@400;600;700&display=swap'); + diff --git a/src/index.tsx b/src/index.tsx index aa79a95..10feac5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,14 +1,16 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.scss'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.scss"; +import "./imports.scss" +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; +import { HashRouter } from "react-router-dom"; ReactDOM.render( -Resume
++ , - document.getElementById('root') + , + document.getElementById("root") ); // If you want to start measuring performance in your app, pass a function From 5ce52976f3b528b431ef6837f565cf3fc67b48a3 Mon Sep 17 00:00:00 2001 From: Cobular <22972550+Cobular@users.noreply.github.com> Date: Thu, 31 Dec 2020 16:58:58 -0800 Subject: [PATCH 3/4] Masonry works pretty good --- .eslintcache | 2 +- src/components/ProjectGrid.scss | 77 +++++++++-- src/components/ProjectGrid.tsx | 227 ++++++++++++++++++++++---------- src/cusotmHooks.ts | 33 +++++ 4 files changed, 256 insertions(+), 83 deletions(-) create mode 100644 src/cusotmHooks.ts diff --git a/.eslintcache b/.eslintcache index bc84d0c..650f66e 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx":"1","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts":"2","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx":"3","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx":"4","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx":"5","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx":"6","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx":"7","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx":"8","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx":"9"},{"size":560,"mtime":1609455390298,"results":"10","hashOfConfig":"11"},{"size":440,"mtime":1609445337674,"results":"12","hashOfConfig":"11"},{"size":262,"mtime":1609448057026,"results":"13","hashOfConfig":"11"},{"size":885,"mtime":1609448882867,"results":"14","hashOfConfig":"11"},{"size":402,"mtime":1609452953574,"results":"15","hashOfConfig":"11"},{"size":424,"mtime":1609448271170,"results":"16","hashOfConfig":"11"},{"size":142,"mtime":1609448138377,"results":"17","hashOfConfig":"11"},{"size":132,"mtime":1609448124025,"results":"18","hashOfConfig":"11"},{"size":2612,"mtime":1609456026589,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"lcbj9u",{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"29","usedDeprecatedRules":"24"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"38","messages":"39","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts",[],["40","41"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx",["42","43"],"import React from \"react\";\nimport \"./Header.scss\";\nimport {Button, Space, Typography} from \"antd\";\nimport {Link} from \"react-router-dom\";\n\nconst {Title} = Typography;\n\nexport const Header = () => {\n return (\n- \n \n \n );\n};\n","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx",["44","45"],{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","severity":1,"message":"51","line":3,"column":9,"nodeType":"52","messageId":"53","endLine":3,"endColumn":15},{"ruleId":"50","severity":1,"message":"54","line":6,"column":8,"nodeType":"52","messageId":"53","endLine":6,"endColumn":13},{"ruleId":"50","severity":1,"message":"55","line":44,"column":7,"nodeType":"52","messageId":"53","endLine":44,"endColumn":11},{"ruleId":"50","severity":1,"message":"56","line":45,"column":7,"nodeType":"52","messageId":"53","endLine":45,"endColumn":12},"no-native-reassign",["57"],"no-negated-in-lhs",["58"],"@typescript-eslint/no-unused-vars","'Button' is defined but never used.","Identifier","unusedVar","'Title' is assigned a value but never used.","'elem' is assigned a value but never used.","'msnry' is assigned a value but never used.","no-global-assign","no-unsafe-negation"] \ No newline at end of file +[{"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx":"1","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts":"2","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx":"3","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx":"4","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx":"5","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx":"6","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx":"7","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx":"8","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx":"9","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts":"10"},{"size":560,"mtime":1609455390298,"results":"11","hashOfConfig":"12"},{"size":440,"mtime":1609445337674,"results":"13","hashOfConfig":"12"},{"size":262,"mtime":1609448057026,"results":"14","hashOfConfig":"12"},{"size":885,"mtime":1609448882867,"results":"15","hashOfConfig":"12"},{"size":402,"mtime":1609452953574,"results":"16","hashOfConfig":"12"},{"size":424,"mtime":1609448271170,"results":"17","hashOfConfig":"12"},{"size":142,"mtime":1609448138377,"results":"18","hashOfConfig":"12"},{"size":132,"mtime":1609448124025,"results":"19","hashOfConfig":"12"},{"size":6652,"mtime":1609462712897,"results":"20","hashOfConfig":"12"},{"size":1072,"mtime":1609462531624,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"lcbj9u",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"31","usedDeprecatedRules":"24"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"40","messages":"41","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx",[],["44","45"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx",["46","47"],"import React from \"react\";\nimport \"./Header.scss\";\nimport {Button, Space, Typography} from \"antd\";\nimport {Link} from \"react-router-dom\";\n\nconst {Title} = Typography;\n\nexport const Header = () => {\n return (\nJake Cover
\n \n\n\n \n \nHome
\n \n\n \nContact
\n \n \nResume
\n \n \nGitHub
\n \n\n \n \n );\n};\n","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx",["48","49"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts",[],{"ruleId":"50","replacedBy":"51"},{"ruleId":"52","replacedBy":"53"},{"ruleId":"54","severity":1,"message":"55","line":3,"column":9,"nodeType":"56","messageId":"57","endLine":3,"endColumn":15},{"ruleId":"54","severity":1,"message":"58","line":6,"column":8,"nodeType":"56","messageId":"57","endLine":6,"endColumn":13},{"ruleId":"54","severity":1,"message":"59","line":19,"column":7,"nodeType":"56","messageId":"57","endLine":19,"endColumn":14},{"ruleId":"54","severity":1,"message":"60","line":76,"column":13,"nodeType":"56","messageId":"57","endLine":76,"endColumn":18},"no-native-reassign",["61"],"no-negated-in-lhs",["62"],"@typescript-eslint/no-unused-vars","'Button' is defined but never used.","Identifier","unusedVar","'Title' is assigned a value but never used.","'OneWide' is assigned a value but never used.","'msnry' is assigned a value but never used.","no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/src/components/ProjectGrid.scss b/src/components/ProjectGrid.scss index 181d672..4ab77f4 100644 --- a/src/components/ProjectGrid.scss +++ b/src/components/ProjectGrid.scss @@ -1,26 +1,81 @@ @import "~include-media/dist/_include-media.scss"; -$breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px); +$breakpoints: (x-small: 320px, small: 660px, medium: 900px, large: 1300px, x-large: 1560px); -#project-grid { - display: grid; +// Override Sass min() +@function min($numbers...) { + @return m#{i}n(#{$numbers}); +} + +// Override Sass max() +@function max($numbers...) { + @return m#{a}x(#{$numbers}); +} + +#project-grid { margin: 10px; background: #FFD43B; border-radius: 5px; + //padding: 10px; + @include media("<=x-small") { + .GridSizer, .OneByOne, .FourByOne { + width: 100%; + } + } + @include media(">x-small", "=small", "Jake Cover
\n \n\n\n \n \nHome
\n \n\n \nContact
\n \n \nResume
\n \n \nGitHub
\n \n=medium", " =large", " =x-large") { + .GridSizer, .OneByOne { + width: 300px; + } + .FourByOne { + width: 1200px; + } + } - //@include media(">phone") { - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - grid-gap: 5px; - justify-items: stretch; - align-items: stretch; - //} } -.OneByOneGridElement { +.OneByOne { display: flex; flex-direction: column; width: available; @@ -36,7 +91,7 @@ $breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px); } } -.FourByOneGridElement { +.FourByOne { grid-column: span 2; display: flex; flex-direction: row; diff --git a/src/components/ProjectGrid.tsx b/src/components/ProjectGrid.tsx index 5ff896f..784f101 100644 --- a/src/components/ProjectGrid.tsx +++ b/src/components/ProjectGrid.tsx @@ -1,87 +1,172 @@ import "./ProjectGrid.scss"; import Masonry from "masonry-layout"; +import {useEffect} from "react"; +type GridElementImageProps = { + image_url: string; + image_alt: string; + title: string; + text: string; +}; type GridElementProps = { - image_url: string; - image_alt: string; - text: string; + image_url: string; + image_alt: string; + title: string; + text: string; +}; + +const OneWide = ({title, text}: GridElementProps) => { + return ( + ++ ); }; -const OneByOneGridElement = ({ - image_url, - image_alt, - text, -}: GridElementProps) => { - return ( -++{title}
+++{text}
+-- ); +const OneWidePic = ({ + image_url, + image_alt, + title, + text, + }: GridElementImageProps) => { + return ( +---
--{text}
-++ ); }; const FourByOneGridElement = ({ - image_url, - image_alt, - text, -}: GridElementProps) => { - return ( -+++
++{title}
+{text}
+-- ); + image_url, + image_alt, + title, + text, + }: GridElementImageProps) => { + return ( +---
--{text}
-++ ); }; export const ProjectGrid = () => { + useEffect(() => { + var elem = document.querySelector("#project-grid"); + + // @ts-ignore + var msnry = new Masonry(elem, { + itemSelector: ".GridElement", + gutter: 5, + columnWidth: ".GridSizer", + percentPosition: true, + }); + }); + return ( ++++
++{title}
+ +{text}
++++ ); }; diff --git a/src/cusotmHooks.ts b/src/cusotmHooks.ts new file mode 100644 index 0000000..6c9865e --- /dev/null +++ b/src/cusotmHooks.ts @@ -0,0 +1,33 @@ +import {useEffect, useState} from "react"; + + +export function useWindowSize() { + // Initialize state with undefined width/height so server and client renders match + // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/ + const [windowSize, setWindowSize] = useState({ + width: 0, + height: 0, + }); + + useEffect(() => { + // Handler to call on window resize + function handleResize() { + // Set window width/height to state + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + } + + // Add event listener + window.addEventListener("resize", handleResize); + + // Call handler right away so state gets updated with initial window size + handleResize(); + + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleResize); + }, []); // Empty array ensures that effect is only run on mount + + return windowSize; +} From 75427aec2a99c1763b63eb99201f689842bfa1a1 Mon Sep 17 00:00:00 2001 From: Cobular <22972550+Cobular@users.noreply.github.com> Date: Thu, 31 Dec 2020 21:42:28 -0800 Subject: [PATCH 4/4] Even better now! --- .eslintcache | 2 +- Old/index.html | 10 +- package-lock.json | 29 ++ package.json | 11 +- src/App.tsx | 2 + src/components/Footer.scss | 37 ++ src/components/Footer.tsx | 42 +++ src/components/Header.scss | 60 ++- src/components/Header.tsx | 67 ++-- src/components/Home.tsx | 3 +- src/components/ProjectGrid.scss | 108 ++++-- src/components/ProjectGrid.tsx | 366 ++++++++++++------- src/images/SanDiego.svg | 1 + {Old => src}/images/codeday-notext-color.svg | 0 {Old => src}/images/codedaysd.png | Bin {Old => src}/images/distest.ai | 0 {Old => src}/images/distest.svg | 0 {Old => src}/images/foresightsports.png | Bin {Old => src}/images/icon_128_cmpk.png | Bin {Old => src}/images/personal_site_plan.png | Bin {Old => src}/images/scoresaver.ai | 0 {Old => src}/images/scoresaver.svg | 0 22 files changed, 522 insertions(+), 216 deletions(-) create mode 100644 src/components/Footer.scss create mode 100644 src/components/Footer.tsx create mode 100644 src/images/SanDiego.svg rename {Old => src}/images/codeday-notext-color.svg (100%) rename {Old => src}/images/codedaysd.png (100%) rename {Old => src}/images/distest.ai (100%) rename {Old => src}/images/distest.svg (100%) rename {Old => src}/images/foresightsports.png (100%) rename {Old => src}/images/icon_128_cmpk.png (100%) rename {Old => src}/images/personal_site_plan.png (100%) rename {Old => src}/images/scoresaver.ai (100%) rename {Old => src}/images/scoresaver.svg (100%) diff --git a/.eslintcache b/.eslintcache index 650f66e..085f8c4 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx":"1","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts":"2","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx":"3","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx":"4","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx":"5","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx":"6","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx":"7","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx":"8","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx":"9","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts":"10"},{"size":560,"mtime":1609455390298,"results":"11","hashOfConfig":"12"},{"size":440,"mtime":1609445337674,"results":"13","hashOfConfig":"12"},{"size":262,"mtime":1609448057026,"results":"14","hashOfConfig":"12"},{"size":885,"mtime":1609448882867,"results":"15","hashOfConfig":"12"},{"size":402,"mtime":1609452953574,"results":"16","hashOfConfig":"12"},{"size":424,"mtime":1609448271170,"results":"17","hashOfConfig":"12"},{"size":142,"mtime":1609448138377,"results":"18","hashOfConfig":"12"},{"size":132,"mtime":1609448124025,"results":"19","hashOfConfig":"12"},{"size":6652,"mtime":1609462712897,"results":"20","hashOfConfig":"12"},{"size":1072,"mtime":1609462531624,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"lcbj9u",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"31","usedDeprecatedRules":"24"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"40","messages":"41","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx",[],["44","45"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx",["46","47"],"import React from \"react\";\nimport \"./Header.scss\";\nimport {Button, Space, Typography} from \"antd\";\nimport {Link} from \"react-router-dom\";\n\nconst {Title} = Typography;\n\nexport const Header = () => {\n return (\n+++ + + + + - return ( - -- ); +- - - - - + + + + \n \n \n );\n};\n","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx",["48","49"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts",[],{"ruleId":"50","replacedBy":"51"},{"ruleId":"52","replacedBy":"53"},{"ruleId":"54","severity":1,"message":"55","line":3,"column":9,"nodeType":"56","messageId":"57","endLine":3,"endColumn":15},{"ruleId":"54","severity":1,"message":"58","line":6,"column":8,"nodeType":"56","messageId":"57","endLine":6,"endColumn":13},{"ruleId":"54","severity":1,"message":"59","line":19,"column":7,"nodeType":"56","messageId":"57","endLine":19,"endColumn":14},{"ruleId":"54","severity":1,"message":"60","line":76,"column":13,"nodeType":"56","messageId":"57","endLine":76,"endColumn":18},"no-native-reassign",["61"],"no-negated-in-lhs",["62"],"@typescript-eslint/no-unused-vars","'Button' is defined but never used.","Identifier","unusedVar","'Title' is assigned a value but never used.","'OneWide' is assigned a value but never used.","'msnry' is assigned a value but never used.","no-global-assign","no-unsafe-negation"] \ No newline at end of file +[{"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx":"1","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts":"2","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx":"3","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx":"4","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx":"5","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx":"6","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx":"7","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx":"8","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx":"9","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts":"10","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Footer.tsx":"11"},{"size":560,"mtime":1609455390298,"results":"12","hashOfConfig":"13"},{"size":440,"mtime":1609445337674,"results":"14","hashOfConfig":"13"},{"size":325,"mtime":1609478255067,"results":"15","hashOfConfig":"13"},{"size":1253,"mtime":1609469803899,"results":"16","hashOfConfig":"13"},{"size":567,"mtime":1609471849263,"results":"17","hashOfConfig":"13"},{"size":424,"mtime":1609448271170,"results":"18","hashOfConfig":"13"},{"size":142,"mtime":1609448138377,"results":"19","hashOfConfig":"13"},{"size":132,"mtime":1609448124025,"results":"20","hashOfConfig":"13"},{"size":8449,"mtime":1609478060725,"results":"21","hashOfConfig":"13"},{"size":1072,"mtime":1609462531624,"results":"22","hashOfConfig":"13"},{"size":1236,"mtime":1609479233269,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},"lcbj9u",{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx",[],["47","48"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx",["49"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx",["50"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Footer.tsx",[],{"ruleId":"51","replacedBy":"52"},{"ruleId":"53","replacedBy":"54"},{"ruleId":"55","severity":1,"message":"56","line":41,"column":9,"nodeType":"57","endLine":45,"endColumn":10},{"ruleId":"58","severity":1,"message":"59","line":157,"column":9,"nodeType":"60","messageId":"61","endLine":157,"endColumn":14},"no-native-reassign",["62"],"no-negated-in-lhs",["63"],"jsx-a11y/anchor-is-valid","The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md","JSXOpeningElement","@typescript-eslint/no-unused-vars","'msnry' is assigned a value but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/Old/index.html b/Old/index.html index 4174343..452f6ee 100644 --- a/Old/index.html +++ b/Old/index.html @@ -48,7 +48,7 @@Jake Cover
\n \n\n\n \n \nHome
\n \n\n \nContact
\n \n \nResume
\n \n \nGitHub
\n \n-+
![]()
CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges @@ -58,7 +58,7 @@
-+
![]()
SRND is an educational nonprofit that works to provide CS education to high school and @@ -68,7 +68,7 @@
-+
![]()
Distest is a testing library for Discord bots that allows for full integration tests of your bot, @@ -77,7 +77,7 @@
-+
![]()
A Chrome extension to help you download beatsaber songs directly from ScoreSaber. No more searching @@ -86,7 +86,7 @@
-+
![]()
Foresight Sports creates advanced augmented reality sports experiences. I created multiple games diff --git a/package-lock.json b/package-lock.json index a4d741e..ecc4f78 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1211,6 +1211,35 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.32", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz", + "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.32", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz", + "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.32" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.15.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz", + "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.32" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.14", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz", + "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==", + "requires": { + "prop-types": "^15.7.2" + } + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", diff --git a/package.json b/package.json index 52315ec..e1be82b 100644 --- a/package.json +++ b/package.json @@ -3,26 +3,27 @@ "version": "0.1.0", "private": true, "dependencies": { + "@ant-design/icons": "^4.3.0", "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", "@testing-library/user-event": "^12.6.0", "@types/jest": "^26.0.19", + "@types/masonry-layout": "^4.2.2", "@types/node": "^12.19.11", "@types/react": "^16.14.2", "@types/react-dom": "^16.9.10", "@types/react-router-dom": "^5.1.7", - "@types/masonry-layout": "^4.2.2", "antd": "^4.9.4", - "react-router-dom": "^5.2.0", + "include-media": "^1.4.9", + "masonry-layout": "^4.2.2", "node-sass": "^4.14.1", "prettier": "^2.2.1", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-router-dom": "^5.2.0", "react-scripts": "4.0.1", - "include-media": "^1.4.9", "typescript": "^4.1.3", - "web-vitals": "^0.2.4", - "masonry-layout": "^4.2.2" + "web-vitals": "^0.2.4" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.tsx b/src/App.tsx index f00cd5a..4bbf9a0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ import React from "react"; import "./App.scss"; +import { Footer } from "./components/Footer"; import { Header } from "./components/Header"; import { Main } from "./components/Main"; @@ -8,6 +9,7 @@ function App() {
); } diff --git a/src/components/Footer.scss b/src/components/Footer.scss new file mode 100644 index 0000000..58fdb4c --- /dev/null +++ b/src/components/Footer.scss @@ -0,0 +1,37 @@ +.site-footer { + background: darkgrey; + margin: 10px; + border-radius: 5px; + + h2 { + font-family: "Fira Code", monospace; + margin: 0; + } + + p { + font-family: "Montserrat", sans-serif; + } +} + +.footer-grid { + display: flex; + justify-content: space-evenly; + + .footer-links { + padding-left: 0; + margin: 0; + + columns: 100px 2; + + li { + list-style: none; + } + + a { + //color: black; + font-family: "Montserrat", sans-serif; + text-decoration: underline; + } + } + +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..1b21019 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,42 @@ +import "./Footer.scss" + +export const Footer = () => { + return ( + + ); +}; diff --git a/src/components/Header.scss b/src/components/Header.scss index 8121657..01ff588 100644 --- a/src/components/Header.scss +++ b/src/components/Header.scss @@ -1,15 +1,6 @@ header { display: flex; flex-direction: row; - align-content: center; - - :nth-child(2) { - margin-left: auto; - } - - h2:last-of-type { - margin-right: 5px; - } margin: 10px; padding: 10px; @@ -22,7 +13,54 @@ header { margin: 0 0 0 5px; } - h2 { - margin: 0 + .headerLinks { + display: flex; + flex-direction: row; + align-content: center; + margin-left: auto; + + h2 { + margin: 0; + border-radius: 5px; + + &:hover { + background: #ddd; + } + + &.active { + background-color: #4CAF50; + color: white; + } + } + + h2:last-of-type { + margin-right: 5px; + } + + + /* Hide the link that should open and close the topnav on small screens */ + .icon { + display: none; + } + + @media screen and (max-width: 660px) { + h2 { + display: none; + } + + .icon { + margin-left: auto; + display: block; + } + } + } + + @media screen and (max-width: 660px) { + &.responsive { + background: #282c34; + h2 { + display: block; + } + } } } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 62cbf7b..74b38de 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,32 +1,51 @@ import React from "react"; import "./Header.scss"; -import {Button, Space, Typography} from "antd"; -import {Link} from "react-router-dom"; +import { Space } from "antd"; +import { Link } from "react-router-dom"; +import {MenuOutlined} from "@ant-design/icons"; -const {Title} = Typography; export const Header = () => { - return ( -+ - - - ); +Jake Cover
- + function showHideHamburger() { + var x = document.getElementById("myHeader"); + // @ts-ignore + if (x.className === "header") { + // @ts-ignore + x.className += " responsive"; + } else { + // @ts-ignore + x.className = "header"; + } + } -- - -Home
- + return ( ++ + Jake Cover
+ - -Contact
- - -Resume
- - -GitHub
- -+ + + + ); }; diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 1cce8c4..054761e 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -6,7 +6,8 @@ export const Home = () => {Home
+ + + +Contact
+ + +Resume
+ + +GitHub
+ + showHideHamburger()} + > ++ + - Hi! I'm Julie, a CS student from the west coast! Take a look at some of my projects below! + Hi! I'm Jake, a CS student from the west coast! Take a look at some of my projects below!
+ This site is still under construction, so pardon the duplicate information and the horrendous colors. The final version should be up soon!diff --git a/src/components/ProjectGrid.scss b/src/components/ProjectGrid.scss index 4ab77f4..3c7c3cf 100644 --- a/src/components/ProjectGrid.scss +++ b/src/components/ProjectGrid.scss @@ -20,13 +20,13 @@ $breakpoints: (x-small: 320px, small: 660px, medium: 900px, large: 1300px, x-lar //padding: 10px; @include media("<=x-small") { - .GridSizer, .OneByOne, .FourByOne { + .GridSizer, .OneWide, .FourByOne { width: 100%; } } @include media(">x-small", "=small", " =medium", " =large", " =x-large") { - .GridSizer, .OneByOne { + .GridSizer, .OneWide { width: 300px; } .FourByOne { - width: 1200px; + width: 900px; } } +} + +.GridElement { + padding: 5px; + + .GridElementInternal { + padding: 9px; + border-radius: 5px; + background: lightcyan; + + box-shadow: 0 1px 2px rgba(0,0,0,0.15); + transition: box-shadow 0.3s ease-in-out; + } + + .GridElementInternal:hover { + box-shadow: 0 2px 5px rgba(0,0,0,0.3); + } + h2 { + font-family: "Fira Code", monospace; + font-weight: 400; + margin-bottom: 0px; + line-height: normal; + } + h3 { + line-height: normal; + color: darkgrey; + margin-bottom: 3px; + } + + p { + font-family: "Montserrat", sans-serif; + color: black; + margin-bottom: 0; + } } -.OneByOne { +.OneWide { display: flex; flex-direction: column; width: available; - padding: 10px; - img { width: 100%; - } - - p { - + margin-bottom: 5px; } } .FourByOne { - grid-column: span 2; - display: flex; - flex-direction: row; + .GridElementInternal { + display: flex; + align-items: center; - .image { - flex: 1; + .image { + flex: 1; - img { - width: 100%; - max-width: 100%; + img { + width: 100%; + max-width: 100%; + } } - } - p { - min-width: 20ch; - width: 30ch; + .description { + min-width: 20ch; + width: 30ch; + } + + @include media(">small") { + flex-direction: row; + + } + @include media("<=small") { + flex-direction: column; + .description { + width: 95%; + } + } } } + +.LinkIcon { + position: absolute; + right: 12px; + top: 12px; + font-size: 24px; + color: black; + + background: rgba(224,255,255, 0.7); + border-radius: 5px; +} diff --git a/src/components/ProjectGrid.tsx b/src/components/ProjectGrid.tsx index 784f101..f89af93 100644 --- a/src/components/ProjectGrid.tsx +++ b/src/components/ProjectGrid.tsx @@ -1,172 +1,256 @@ +/** + * TODO: + * - For things that can't be linked, use to signal that clicking will open a modal https://ant.design/components/modal/ + * in order to give a more complex writeup and some pictures + * - Tooltip for modal and linkable items, possibly which displays a modal with an example card with tooltips or explanations + * - Footer + * - Responsive top bar + * + */ + import "./ProjectGrid.scss"; import Masonry from "masonry-layout"; -import {useEffect} from "react"; +import { useEffect } from "react"; +import {LinkOutlined} from "@ant-design/icons"; +import CodeDaySD from "../images/SanDiego.svg"; +import Foresight from "../images/foresightsports.png"; +import Distest from "../images/distest.svg"; +import Scoresaver from "../images/scoresaver.svg"; + type GridElementImageProps = { - image_url: string; - image_alt: string; - title: string; - text: string; + image_url: string; + image_alt: string; + title: string; + text: string; + link?: string; + org?: string; }; type GridElementProps = { - image_url: string; - image_alt: string; - title: string; - text: string; + title: string; + text: string; + link?: string; + org?: string; }; -const OneWide = ({title, text}: GridElementProps) => { +const OneWide = ({ title, text, link, org }: GridElementProps) => { + if (link === undefined) { return ( - ---{title}
--+{text}
-+); + } + return ( + +++++{title}
+ {org &&{org}
} ++{text}
+++ + ); }; const OneWidePic = ({ - image_url, - image_alt, - title, - text, - }: GridElementImageProps) => { + image_url, + image_alt, + title, + text, + link, + org, +}: GridElementImageProps) => { + if (link === undefined) { return ( -++{title}
+ {org &&{org}
} ++ ++{text}
+----
-+{title}
-{text}
-+); + } + return ( + ++++++
+{title}
+ {org &&{org}
} + +{text}
+++ + ); }; const FourByOneGridElement = ({ - image_url, - image_alt, - title, - text, - }: GridElementImageProps) => { + image_url, + image_alt, + title, + text, + link, + org, +}: GridElementImageProps) => { + if (link === undefined) { return ( -+++
+ ++{title}
+ {org &&{org}
} +{text}
+----
-+{title}
- -{text}
-+); + } + return ( + ++++++
+{title}
+ {org &&{org}
} +{text}
+++ + ); }; export const ProjectGrid = () => { - useEffect(() => { - var elem = document.querySelector("#project-grid"); + useEffect(() => { + var elem = document.querySelector("#project-grid"); - // @ts-ignore - var msnry = new Masonry(elem, { - itemSelector: ".GridElement", - gutter: 5, - columnWidth: ".GridSizer", - percentPosition: true, - }); + // @ts-ignore + var msnry = new Masonry(elem, { + itemSelector: ".GridElement", + gutter: 0, + columnWidth: ".GridSizer", + percentPosition: true, }); + }); - return ( -+++
+ ++{title}
+ {org &&{org}
} +{text}
+--- ); + return ( +--- - - - - - - - - - - ++ ); }; diff --git a/src/images/SanDiego.svg b/src/images/SanDiego.svg new file mode 100644 index 0000000..5873cf9 --- /dev/null +++ b/src/images/SanDiego.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Old/images/codeday-notext-color.svg b/src/images/codeday-notext-color.svg similarity index 100% rename from Old/images/codeday-notext-color.svg rename to src/images/codeday-notext-color.svg diff --git a/Old/images/codedaysd.png b/src/images/codedaysd.png similarity index 100% rename from Old/images/codedaysd.png rename to src/images/codedaysd.png diff --git a/Old/images/distest.ai b/src/images/distest.ai similarity index 100% rename from Old/images/distest.ai rename to src/images/distest.ai diff --git a/Old/images/distest.svg b/src/images/distest.svg similarity index 100% rename from Old/images/distest.svg rename to src/images/distest.svg diff --git a/Old/images/foresightsports.png b/src/images/foresightsports.png similarity index 100% rename from Old/images/foresightsports.png rename to src/images/foresightsports.png diff --git a/Old/images/icon_128_cmpk.png b/src/images/icon_128_cmpk.png similarity index 100% rename from Old/images/icon_128_cmpk.png rename to src/images/icon_128_cmpk.png diff --git a/Old/images/personal_site_plan.png b/src/images/personal_site_plan.png similarity index 100% rename from Old/images/personal_site_plan.png rename to src/images/personal_site_plan.png diff --git a/Old/images/scoresaver.ai b/src/images/scoresaver.ai similarity index 100% rename from Old/images/scoresaver.ai rename to src/images/scoresaver.ai diff --git a/Old/images/scoresaver.svg b/src/images/scoresaver.svg similarity index 100% rename from Old/images/scoresaver.svg rename to src/images/scoresaver.svg+ +++ + + + + + + + + +