From f39a91e6ecbcf5c3c2f431fa8dfc3fbc9a71d89a Mon Sep 17 00:00:00 2001 From: Drew Powers <1369770+drwpow@users.noreply.github.com> Date: Fri, 30 Apr 2021 10:35:20 -0600 Subject: [PATCH] Add portfolio example (#140) * Add portfolio example * Feedback --- examples/portfolio/README.md | 6 + examples/portfolio/astro.config.mjs | 5 + examples/portfolio/package.json | 8 + examples/portfolio/public/app.scss | 129 ++++++++++ .../portfolio/public/assets/mesh-gradient.jpg | Bin 0 -> 21115 bytes .../portfolio/src/components/Button/index.jsx | 8 + .../src/components/Button/styles.module.scss | 7 + .../portfolio/src/components/Footer/index.jsx | 12 + .../src/components/Footer/styles.module.scss | 15 ++ .../portfolio/src/components/MainHead.astro | 9 + .../portfolio/src/components/Nav/index.jsx | 35 +++ .../src/components/Nav/styles.module.scss | 65 +++++ .../src/components/PortfolioPreview/index.jsx | 28 ++ .../PortfolioPreview/styles.module.scss | 102 ++++++++ examples/portfolio/src/layouts/project.astro | 92 +++++++ examples/portfolio/src/pages/$projects.astro | 41 +++ examples/portfolio/src/pages/404.astro | 17 ++ examples/portfolio/src/pages/about.astro | 59 +++++ examples/portfolio/src/pages/index.astro | 241 ++++++++++++++++++ .../portfolio/src/pages/project/mars-rover.md | 23 ++ package-lock.json | 2 +- src/compiler/codegen/index.ts | 8 +- 22 files changed, 907 insertions(+), 5 deletions(-) create mode 100644 examples/portfolio/README.md create mode 100644 examples/portfolio/astro.config.mjs create mode 100644 examples/portfolio/package.json create mode 100644 examples/portfolio/public/app.scss create mode 100644 examples/portfolio/public/assets/mesh-gradient.jpg create mode 100644 examples/portfolio/src/components/Button/index.jsx create mode 100644 examples/portfolio/src/components/Button/styles.module.scss create mode 100644 examples/portfolio/src/components/Footer/index.jsx create mode 100644 examples/portfolio/src/components/Footer/styles.module.scss create mode 100644 examples/portfolio/src/components/MainHead.astro create mode 100644 examples/portfolio/src/components/Nav/index.jsx create mode 100644 examples/portfolio/src/components/Nav/styles.module.scss create mode 100644 examples/portfolio/src/components/PortfolioPreview/index.jsx create mode 100644 examples/portfolio/src/components/PortfolioPreview/styles.module.scss create mode 100644 examples/portfolio/src/layouts/project.astro create mode 100644 examples/portfolio/src/pages/$projects.astro create mode 100644 examples/portfolio/src/pages/404.astro create mode 100644 examples/portfolio/src/pages/about.astro create mode 100644 examples/portfolio/src/pages/index.astro create mode 100644 examples/portfolio/src/pages/project/mars-rover.md diff --git a/examples/portfolio/README.md b/examples/portfolio/README.md new file mode 100644 index 000000000..9cbff3acf --- /dev/null +++ b/examples/portfolio/README.md @@ -0,0 +1,6 @@ +## 🎨 Portfolio Example + +``` +npm i +npm start +``` diff --git a/examples/portfolio/astro.config.mjs b/examples/portfolio/astro.config.mjs new file mode 100644 index 000000000..f50751cfd --- /dev/null +++ b/examples/portfolio/astro.config.mjs @@ -0,0 +1,5 @@ +export default { + extensions: { + '.jsx': 'preact', + }, +}; diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json new file mode 100644 index 000000000..87b585b3f --- /dev/null +++ b/examples/portfolio/package.json @@ -0,0 +1,8 @@ +{ + "name": "@astrojs/example-portfolio", + "version": "0.0.1", + "scripts": { + "build": "../../astro.mjs build", + "start": "../../astro.mjs dev" + } +} diff --git a/examples/portfolio/public/app.scss b/examples/portfolio/public/app.scss new file mode 100644 index 000000000..3cac56a42 --- /dev/null +++ b/examples/portfolio/public/app.scss @@ -0,0 +1,129 @@ +// Tokens +:root { + // (c)olor + --c-black: #05091e; + --c-blue: #46b4ff; + --c-gray: #90aab7; + --c-green: #9ef2cb; + --c-pink: #ffb8d9; + --c-orange: #ffb7a3; + --c-yellow: #ffdace; + --c-white: #fff; + + // (f)ont + --f-u18: 11.390625em; + --f-u17: 9.950627481136905em; + --f-u16: 8.692673779389363em; + --f-u15: 7.59375em; + --f-u14: 6.63375165409127em; + --f-u13: 5.795115852926242em; + --f-u12: 5.0625em; + --f-u11: 4.422501102727513em; + --f-u10: 3.8634105686174953em; + --f-u9: 3.375em; + --f-u8: 2.9483340684850083em; + --f-u7: 2.575607045744997em; + --f-u6: 2.25em; + --f-u5: 1.9655560456566725em; + --f-u4: 1.7170713638299977em; + --f-u3: 1.5em; + --f-u2: 1.3103706971044482em; + --f-u1: 1.1447142425533319em; + --f-d1: 0.8735804647362989em; + --f-d2: 0.7631428283688879em; + --f-d3: 0.6666666666666666em; + --f-d4: 0.5823869764908659em; + --f-d5: 0.5087618855792586em; + --f-d6: 0.4444444444444444em; + --f-d7: 0.3882579843272439em; + --f-d8: 0.3391745903861724em; + --f-d9: 0.2962962962962963em; + --f-d10: 0.2588386562181626em; + --f-d11: 0.22611639359078162em; + --f-d12: 0.19753086419753085em; + --f-d13: 0.17255910414544176em; + --f-d14: 0.15074426239385438em; + --f-d15: 0.13168724279835392em; + --f-d16: 0.11503940276362785em; + --f-d17: 0.10049617492923625em; + --f-d18: 0.0877914951989026em; + + // (t)heme + --t-fg: var(--c-black); + --t-bg: var(--c-white); + --t-subdue: var(--c-gray); + --t-active: var(--c-blue); +} + +// Base + +body { + margin: 0; + color: var(--t-fg); + font-family: 'Inter', 'system-ui', sans-serif; +} + +* { + box-sizing: content-box; +} + +img { + max-width: 100%; + height: auto; +} + +a { + color: var(--t-active); +} + +h1 { + font-size: var(--f-u8); +} + +// Utils + +// color +$colors: 'black', 'blue', 'white'; +@each $color in $colors { + // text color + .tc-#{$color} { color: var(--c-#{color}); } + // background color + .bg-#{$color} { background-color: var(--c-#{color}); } +} + +// font size +@for $i from 0 through 18 { + .f-u#{$i} { font-size: var(--f-u#{$i}); } + .f-d#{$i} { font-size: var(--f-d#{$i}); } +} + +// margin & padding +@for $i from 0 through 36 { + .ma#{$i} { margin: #{0.5 * $i}rem; } + .mt#{$i} { margin-top: #{0.5 * $i}rem; } + .mr#{$i} { margin-right: #{0.5 * $i}rem; } + .mb#{$i} { margin-bottom: #{0.5 * $i}rem; } + .ml#{$i} { margin-left: #{0.5 * $i}rem; } + .pa#{$i} { padding: #{0.5 * $i}rem; } + .pt#{$i} { padding-top: #{0.5 * $i}rem; } + .pr#{$i} { padding-right: #{0.5 * $i}rem; } + .pb#{$i} { padding-bottom: #{0.5 * $i}rem; } + .pl#{$i} { padding-left: #{0.5 * $i}rem; } +} + +// text align +.tac { text-align: center; } +.tal { text-align: left; } +.tar { text-align: right; } + +// wrapper +.wrapper { + max-width: 80em; + margin-left: auto; + margin-right: auto; + padding-left: 2rem; + padding-right: 2rem; +} +.wrapper__readable { + max-width: 50em; +} \ No newline at end of file diff --git a/examples/portfolio/public/assets/mesh-gradient.jpg b/examples/portfolio/public/assets/mesh-gradient.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4ee5a663fa646b04307cd84ad0ef39000cbc1ad5 GIT binary patch literal 21115 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

PVaF$7s}4xnO3z4@Efv`d)+j_b z3+8%#^tXPbkcp-v!+`*%$~9IZ`fvlkufZ**gsLB;WV)*3^ET*ZX9@CQ~ zwP?hQVz4)(h&z&!AwWX0iF0-+f&-Iw3X(j3&DzN*9TCqQ$PaVMb+8etb)bhlG~rc& z)T2=|+IVgwZ51M5ry-a!pgEmp%mPGW=NJOX?GCql-7cAosi77DilV@~BhwsxlA4euHxYAEh-p8v=!HpgfNLIYm>di!8c{^T)mS&&L_LLLuC~Qg%>Z%;=ENK; zQFo$53f*ALna0!|1mE*7!;$ob8|*$ zmjoK=NDc!sKsf@QqYI!;W=CS8&>-DiAzVeWJ#EFH33s_e(PoYLJ!)c;J`q6pM>1d| zN(+$vk%4Pi!bGTZ!Ch{=?VmMQD;a*Py}CT6c~ioR1yLJqH|{;GMHaR0E01* zio;q`BB-x)A_Cu_{b;SJ=xTlz%8)HJoh+$2%=Ms&X^pgr20YBl^#n6i>S!SfqZ|V& zslNnuTHNRjUeHAZORTPXX(9J{j6A8NL#dRdfYGALY38BEBGbU%;2l3B9o1t_$dUll&x4OL^T|esx8|El6hR}1Ef5Ndev%NL~3L}Bg>C)f`0O>Z$Sn) zGM0{@Psa~RBAEZ)F-XikqJU9HlMIAtj6x46AoZ(z@Doc?Om8+uDN;RjawcQac!DQ^%6<6LG%rTC}ReGpYSJo2Z5DHK#=6~6tW`&Z72o-aFbM0 z9FmB8zr+Qchq)dOG!Wdl^ZU^ad4COb2V&#^%gnv6jFF zyg^+59Is{$R$d~dn3UYa-CHYra{4KTC1{bjA?X_Ce z%E`$mnoh`Zh>cWeM*<7MPEcKzYnnikO8n^R7jIRQQlk+H?eUoy5jSK&_t>`~$?3Ek zf<1BEtEZ-eWGH551}7%P1k4xHg;q@59EYRY>0NLDSg@+tyg0h*zQvI!Ur_r>Lly5Y6 z;efy-7eOIl$C=aS&dmw;*k`pYqmWeMmCF%z!Z!X+z09EBWHrK-_u&x57ctY8`dgdYGR9k!2`H$VK|7e} z&?D8~28Y_6$fhhr#gvHMmIypA4sBU0*q^4pEvgZXpc7+gp+Zl_KPwkxzl|vBl9^3G z$Bl35tYs1O&mWVHPK%h@q{squhlt#?Kfny1g}Qf|n}&1i$H<6I@QQn4X~rJRV;jaX}4VN>gdasC&w z>JF4^706++)+Rv5hl&j~JsMJ!PZ+hXG?^hu;5A84`G4YMKaw?VPb^TDeC;;&1yq}+@`SSvI(PZnv#76lg4Pm4rx@{AT* z>vp9nAPb^RZ5T7gE+ShEy)Zcv&}&9u*Sge<*%0A0*HRQ1rXCGOaL5VMVmDcDxD2?f zuJv1N0AT|dg}7z(**spnk#`f2xs;L`L zTk~7LX$DEc%uM1=E^zgFyqFUwHjYC0n9n{+jN z7#JaOQMF+>5B3lfG4&vBX624g-LqpBpgu3RF9gP8G6R-WE65$6I+vM>9)SordmwLM zkAm&(G(Y9}H-jwZQ9vsI7=(a>qlS)yOJpuYu%}}udfp(->LWN(A$xf}2r(wzSdEf| zJR4s>Cd2|-U~&+=9kRO4U{?6J9vw}wh#%> zu<$_juO52AOrf7w{SKaD?lU`HigDb4=FiN-=y*pF;U3* z*$c9P*Sgqvcb#`U0KL(+U|5xQvLI@EAa{KEkVfhwUK~_9>|s-U@*%8xT2VUhH4PtR zkWr%%eCT2TiK(6k!1&Qg`UJfjS>^V+QSNk=fYS*1jkYL#3?Q~}_@PB|xR|7TF8OqP zr9b0oWGUu<9K%H^{IMuhza>u2+lkE#w-F+b98b&OfMZJU;v*6c=(4>0HR<} zL}#>&FURW&v<3>fXvD?8JHq{*PQcSfhjoNPiJ<7vi8H*8utR+xA4}3dU`Ko+6@(jw zh{(|p&(ZOwJmVl)5=z&2n869!9>;t$t`XhUNajJ$a&YXA2A@Nk#@q4yB@r|TG^`q% zFWW)wx(>7IxL`Y<0u2FayAMIZ>tg}3a$H+o6G0oLxTV0MMQH|&Pn$je1ZAUk%o2)H zjO^EH#pqXiNpFBBzKtY81{dvu=x<{&2ZLAnu>h)yDWZUWx0B#B(Z&W9P!rRsxaRuD z`&Nc+BVO@Q39&$yP%~_$v&hkvMwYcho~|y5wUCmzx#YD0rZbqHcW6yA@xz z(F~mcw5WoRqYCKQCb?3gNJ~4`=prgO2j!0w>-@{dk%B8*DAsc6RD5);Zy94Nq>a%+ z14r(-EfiZH9E}`2D!NNuLGC!ipa0#lMi9lX37I;sPMy&c35ZPQB9MLsm|af;y&&qB zEv0DG2(EGar8BnRD_x^{$khRu^EAPw4@ctwP!S5~bmR6EXEgI->5!s!m=24N-99t+ zs}?)MIE-qbAFT~%=gwnzJ)_Am#{3Fsb`Imrea1sh_Hk-d z@&IZHSg}#+();r0FT5uZX1vhS`@9l5xFxYr>ozEc6B*|c{QdqI8-h+KM3EF~85?i( z&B5v4_~IbWzm?P!{>4F=XuN~J)i`O;Fg!&BgQIxS@u9YYSuvvXYm;Me1Hz^na|ptP zU*oU>1D}x9pdA{?Yo2^RaMY>;{2D#WX5}-znmV0V2u=^D7H-2QGH7Z@M2@73>G3$z z0{DOc%b=_DxKtExVyIg*DVe%+RgND3w#I{=h*nEi8Bu6U6m8oE{yv3ct>SP(Y>=3i~$jTN@>_Pq@w=L{(>N;g8*#;e1b2YkctK>I~K7B zDzgh4G}Jcx3Aw#>oDl^1WdAx;LjBXG5J709)h?oOoBLy z@dcwK0113i=Rl$|9)kebTZnIN==QB}=h1=3AKC_G=mW-D9CQi&K`^zwq^h#BKa_*c z2D=0su`TrAG13+H5>=Ind_7772fl;Vi0uMNLhMQ^`@12E1%H5Oo*OrX2k61h!P1gM zWf%wk7y#YoeUD+g88K|Cokx!z9jM&dqCh(n+BN#HzarmrvQ}9OWzO9d9eBDp6oJ{uZgiW@BDgl`-JL_lT}1G-2{kRS_JOl z0+0;&OvoS;UetMXsJOekyM1<(UW2F+BKq(RI~62g1$lq_{*J0d)#}dIEF%ghI0&d& zqY#PNgHU4#cBm{^s^P>1Hr$v=s=&~CH6f-AR3)J4U`b`6g+|ORoketNv5VBNBSgoF zjzoKDNmWHZj?octD>B#hDCpIGEaW#Wj&1--sTe7>b<*VSW=sO;}2 zQ7d2TM~%SOni?|u8uOZghy>J}$rcdBFc%pVxy1r1EKc_Ua${ejUI#>aH#gXRAPOxD zXHujGL4x%ttuuzHatxN1+J28ovanb)f$%}S>G~I=EbJ!7C#otA#6lnf$2UXNnPtH! zit$x3hs}QE)PbEbNx@fw8uPNiWx-?M61ebFdl1UV|nATaBS_Krm%e7u7Y!u`HRQ$?lFL82p3)eeIo&kpQtxiP9}$b<3) zeZ9U2mC7<8iu=iR9f?HM@Ae{%HU~-GWAiiK?YT$8U9}pLH zLQ!&VqB5~aTB>?n50!1qEYDLYSgz8Oat?Q(TEw?`d-NLLea}G7piaH%7)S``ceIyQ z3|18^m7?=CGZSws^0 z#6Zd2KTH(%x9`lGSzcbgD$7?dNX+Y@Fc@gB7~w<~7k9n}#HuWaArxhVDCT+F(Y}&E zB{$y(J&u$w%QOWI(&QqH3GJm^lELLg2h6^{y`YlivjhZ^rY2UPO0_SCvD%j}E_xNJ zWCK*TM<7Vla7h&^H^l5{M_6{g<|87o$it&lW_MIlatja=qd;J`^w}DdO~QzKn+ys? ze`hVnZ0Q?=k-{i6!t}*dJS!J9E;zD`1S+!)1EprS!?rf48`X1Xo{yB;(sv|J$P8xb zC6!4Kcy)J11R*GvBm`!dcgP8(IVxAb2{(P1l|2@e8iuR6frumOU;JA@83_`bS4d<| z(b0iL-vTPcOo<^07Jxv=jLvO7u=MNRkw=re-HGlh1)6(GQ8+VrU;WWMoA4!_9lk z%Wo89QtnS+C`AJhj0P4ll~Q6E+1iP;jYR`!4hakZG@-_05N0OaN~#A1mC1LaxnuEO z21%Hkl41*dmW=uPyD2BIFixUnGBO_lvh4h4>xZ|uQ>&wPi2l#a=8f6SdnvOt!6YkT zugcB?xGyY{mEFA2FYZr+F=!2th|J|{hMJI}*C%eDi5Y09h^Cw{E_k{35WCrW`0iXQyYV-jUIp?W#Iu1vvwY zG6xpP-k3@I4y=>2;YKVMRoQGj;RyHR12KLhZE7Y3B%ZLP{xNl7EVvG70sCdS#06}l z&#|}Bk|ZwSrzEGODig%Nz)PVZIAP(t;PFjiY#ZaRSuBQ2XdJHqncp_6sJ*j2k&j~< zes#(mRM1(uv)eI|gm0$r*wC7{1K-MN2_U^nDqd@Ht{(4UtiTAP3}WM!PT$ipq=r478BeE%O2C(P}>lEaTXKo2+Z_4fLFA4#+xMjyBQ>e zq@`jr2y__VsS%_}iZuIjJdsOZ-ooQtWF=~$3Sz6;8LwmZmqrNg3)1z$lGWYeR#1sK zczmLlid`tGYkx;BefN!S&;yuAQWJ?4$gqK;Ck^o(8O{Ntl!3~RU`$kCw8mG0oJSfE z2xwNRu zfrqQ@hhM+8G8`{1+{Udz3iFni8AJo`hxrk2?csR1Fm7cykI&@AZFW1|hPe_I?cw5Z z;WmmrdL9{09ZWtz&covaMe+V{adDVjOOfd==S4nxQE3Uh1kDe008t$0XU5#(qH&p+ zGI*$Vwig3&pm=8tA_xi#K%+4@jUG=xzj#MQdkKip_Z>L^T^q%&(Ho}>z>!Wxf4s9D zUXRnsr|{}3^pUJfQ!j#NK_P*s6O|>EMNP!yIK{-q>1d8K3(g`F3{;kciNyeV$N}O4 z1Vf+L3qQb;KpcRSiEt%S1qfuKh*VIxG^_dH+T2cv0rmnhSloF4QA@s(^U%+-_m=H3 z5};Dt8ISjuRMWK^QH2ct9C`G7?+8OqqzssDV}4Eqm7m)@II*am+z}4* zW{U6|!gB-_dYAc3`S73NS8!wK- z{2-I&6J*ei+KS_ab#dZ^fr5{Ct(J{J7Y475mujfJ`33oWrsBg{#b9x&7`u^UwObZ^ zn3<=ix8bb$+9Kp>6(2gW6=E?y+#_2^v2yHQ3peG5W^Zyv${|cbC=oOk!`)CFF!Ykb zO@W#^L_dVtjV%iXX@kWuuCg@Pun)};yIhp`5LIIuUk`R+-tLYw`9Tmu`j8Q~P#aF2 zU2U}X)BJj{WB1Uy!G83P@ALsf!w_-HLW62;iuq>`RD#XWx`QXM2_h4{N|AvizmJD; zPDVK0k4VL=eXwiy$~*UWv}Ldq+W5H3iQ7y>M}w5>_lNi<EPZc_Q^8 zHR-RkZZbk`G)e+-@Z|30VI!S=YM|b5sc$2xz4Cv@3yiiR9Pa>hXyMShPD?TzP}X$P zZNXy~WVFq$&gFZaI}d)j61w4&Bm&8l{+Dym%Q?9y3k5|3*h_%f$esPM82dhnoyG$e zq)^3JqG(foEA4%t+h?#P8dC~w3Pp^76sl-WKEir-9Fexai$p(BiEcUXFi@yg<-g#d zhpl)=C6y8wd>v?!;LJaT_Mfo#^oRGZx{t=fSx8~@+e#dJa&s;(4l%gb;<=brd*8di zKsq+kc`uF(cyNfqyY_j-~7aO`hIa_q|6B%Dsqk34=Zk&d5uN1cD)hO_|4appaR1`CinM znsz$U5_>D+T9vpNQ^z>m^p{p`>GdpL2twGCVn2xOGqwg$6NWnmdK)vBWxurQzV|K% z--+1J00ZL>(XOuonT&acZ|$e^yjb?#y|*Qgwk^x1 zzjRyH!}-EX@Ok?P$W;760I<6)zZrf5Gya?)zJpScM{DG!iNtSXL;Jk;Bv&8Th*)NrC z=qh=0Az-TyEd=Kd1NYHMNZJcRn^jy!FmF72KZ*n7T(^4Yb@-(?CZJFphlUUnnSqE0 za&OtaRl7&Xj$G2!Nn64-X+CTVIMr;}2&J{L2(iVnPm#O_Puli`thLz2HB-rO$kq!- za%thu&HYIclm^{?d0{ORJ1W{x6BgmItQL$5z|-R6&W7Yp5{SW4d1Ol)IFIpDd#CeChPvb)F*ka_MX7#~Dn&kqm@o&6Hd zV|>wZ;IWi(e$CY*I6Z?|Dfpem$XIT)(`5DrH)f$&^l=eh!XC5t;reMqi2lz$f(*N_ zs2XbxUl8Z7!XqRKHjn6WCGE?(pSP~7f>jodIOf=g6L8wY0q20xHBsZA+YGaTG&tP3 z-wum;Z{Q3X+e(hakMdPG15E8&M?w>n3_aom#;1s0Iw+bdXwx*JOO^Xi@XUFWVi?}G zvuw(2zAc0Z4~yfFUY`Lhg!t&qq!9lQPMODd+2lYBO0>ld*0Zyq9i>ne!I2zJ#LxSs z5Vx6|AuBTvC$`SdHlpKgF{oE=Vxu? zGi=$*8cl&j0FfhJ-;Q4FVNWFfxn`&2t@#=Aax?h(hO|9*(1 zLxU`*(`xpE?I#?SDW;sFdd7R7(vASMd}IUU)}5%QknGJT7Jhc{M1n4&WW9t`p<`Q< ze!mEZ)nq-&KoZO@nZZ!KE0AUkXph6H89=M+! z>~J*vH6Vf&89`t`3$>}lt_)LpaQ?^{vDE(2+DZMQ*mlu9^J$Ypd{`Gugr||#Pf!gQ zvV$n)i}xGFQHexl;;y-GBK48~b9WCFS^U9!uIy{j_`A-bl7nbRr6;%;m=XZ**<{T(p63uiDX;*Y?% z@Xz0u>PG0+ORV}G;(HDF$Byi4*80nl@(-)#uX}XaZS(rJKKswiwV!rwZoVw@?yu&r z-TLgQpPsy7`0hhL-uth+PtL!4>-(Qvc=(yVui3)ayMMnM*QCsfHJ`rm#wXwR+L%mvMvE7q)s~8+`|VH47d+CO2}~a(TJtI0 zE_>tSBaib(X1!Zc_D1hpf5YQ|Z2aS+Gmm_@Jaa|a+r3Y|b^X*;9eAXy_sE(oP+QP^ z+5Gkszxv|O8-IFX?Xio0G8beZ!Qc8e|90grxa&WYSXp z<~I*+TK~WPdSG*@yA(-Hzdg0&`p>t2&9*=F z++9Pj3_to`tB-xvx$I!p@LRuM-FNJ(u0I?)o|u>Qg(G#bZDsZ)S5#duFrbqtFEnwMk)vYIcMLLDIXo2dw0i5gYT{X{wptjHTSE5dv*hMY|g$(pWS(UaPZj2efy>iADp{& zaPYmgYw!PX{Y0?-!N4x8ciwt*`a4H|G&p#0?%}n4eaB9H^2PA**X+vP=MSGZ{ez*d zds;8Qd`9=O-`ufo>#4b4;yV>Ho-HrGW7$r;yZp*7T)zL*-r!+;$K&wu^hc*Re~fqd zeDk00G{5uC(98V2I()-BkDm7zdXGCFJUZR^<$)6f3i9jGVHCcPlkbU=%5RLk)%@sr zJEIn3(UIxEG(Wm|&JOM-bp)iQKZ-`5#eZk>QnFsmn!jrfI$d86zeEN&cIs`qK>K4< za|R3I(zE;$zcy(fzxFko@}ammiGY2_uIJCj`X=@C^x#5I-?5MPO@e)vPMXB00nDVneUm}t7`*p)NRO+uQnKd#^c6@sZ~pD#Gi-WzU&e93;FdQ?O@W)Y z3Mj&5!n&fkPC7n`V138_{W9S!0OxI3K6TcR|=?mvkm+QSX;#&CkEy;`LUA)%5c+(eKoU7+u zyr$p2dgzbN#do`^>}%o0M;$)q9hHNF;ZlC%hP(gbT)yTvxZ2;(FaPfD_npgk{CIF+ z@nU{;@!G{l@ttvdU2_l8FR?4$jngcA67;!B4(4m*JUwJ=0 zLFm$O>0s%hSCfz2wyV3F1WVv$*RKB^bHs`c&t1E=D!ewlmaoswZE(!=`~c)SN<1Ld z2)@j1uNht7P%8co{wFDvx#p|xM0{6w0_1n&e^6$xf#L0OP{I1lk;OFEyb>oEfU_K& zYXBM%ZX`d6yQVTB$mNWpe!yv+P?DfE2jWENh9u;B5O;W_I0?9BIo{children}; +} + +export default Button; diff --git a/examples/portfolio/src/components/Button/styles.module.scss b/examples/portfolio/src/components/Button/styles.module.scss new file mode 100644 index 000000000..67a343bdf --- /dev/null +++ b/examples/portfolio/src/components/Button/styles.module.scss @@ -0,0 +1,7 @@ +.button { + display: inline-block; + border: 3px solid currentColor; + padding: 0.5em 1em; + font-weight: 700; + text-transform: uppercase; +} diff --git a/examples/portfolio/src/components/Footer/index.jsx b/examples/portfolio/src/components/Footer/index.jsx new file mode 100644 index 000000000..8e15a2d8e --- /dev/null +++ b/examples/portfolio/src/components/Footer/index.jsx @@ -0,0 +1,12 @@ +import { h } from 'preact'; +import Styles from './styles.module.scss'; + +function Footer() { + return ( +

+ © {new Date().getFullYear()} Jeanine White + πŸš€ Built by Astro +
+ ); +} +export default Footer; diff --git a/examples/portfolio/src/components/Footer/styles.module.scss b/examples/portfolio/src/components/Footer/styles.module.scss new file mode 100644 index 000000000..0e77ee206 --- /dev/null +++ b/examples/portfolio/src/components/Footer/styles.module.scss @@ -0,0 +1,15 @@ +.footer { + text-align: center; + padding-top: 8rem; + padding-right: 2rem; + padding-bottom: 4rem; + padding-left: 2rem; +} + +.byline { + display: block; + margin-top: 1rem; + color: var(--t-subdue); + font-size: var(--f-d2); + text-transform: uppercase; +} diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro new file mode 100644 index 000000000..668b374b3 --- /dev/null +++ b/examples/portfolio/src/components/MainHead.astro @@ -0,0 +1,9 @@ +--- +export let title = 'Jeanine White: Personal Site'; +--- + + +{title} + + + diff --git a/examples/portfolio/src/components/Nav/index.jsx b/examples/portfolio/src/components/Nav/index.jsx new file mode 100644 index 000000000..944e44b71 --- /dev/null +++ b/examples/portfolio/src/components/Nav/index.jsx @@ -0,0 +1,35 @@ +import { h } from 'preact'; +import Styles from './styles.module.scss'; + +function Nav() { + return ( + + ); +} +export default Nav; diff --git a/examples/portfolio/src/components/Nav/styles.module.scss b/examples/portfolio/src/components/Nav/styles.module.scss new file mode 100644 index 000000000..d39a65a5b --- /dev/null +++ b/examples/portfolio/src/components/Nav/styles.module.scss @@ -0,0 +1,65 @@ +.nav { + display: flex; + align-items: center; + padding-top: 1rem; + padding-right: 2rem; + padding-bottom: 1rem; + padding-left: 2rem; +} + +.logolink { + display: block; + color: var(--t-fg); + text-decoration: none; +} + +.link { + color: var(--t-subdue); + display: block; + margin-left: 1rem; + text-decoration: none; + font-size: var(--f-d1); + text-transform: uppercase; + padding-top: 0.75em; + padding-bottom: 0.75em; + + &:focus, + &:hover { + color: var(--t-active); + } +} + +.monogram { + display: flex; + align-items: center; + justify-content: center; + width: 2em; + height: 2em; + margin-right: 0.5rem; + color: var(--c-black); + font-weight: 900; + letter-spacing: -0.125rem; + border: 3px solid currentColor; + border-radius: 50%; +} + +.social { + display: block; + margin-left: auto; + + + .social { + margin-left: 0.75rem; + } +} + +.socialicon { + display: block; + width: 1.25rem; + height: 1.25rem; + fill: var(--t-subdue); + transition: fill linear 150ms; + + &:hover { + fill: var(--t-active); + } +} diff --git a/examples/portfolio/src/components/PortfolioPreview/index.jsx b/examples/portfolio/src/components/PortfolioPreview/index.jsx new file mode 100644 index 000000000..7918008c6 --- /dev/null +++ b/examples/portfolio/src/components/PortfolioPreview/index.jsx @@ -0,0 +1,28 @@ +import { h } from 'preact'; +import Styles from './styles.module.scss'; + +function PortfolioPreview({ project }) { + return ( +
+
+

{project.title}

+
+
+

{project.description}

+
+ Tagged: + {project.tags.map((t) => ( +
+ {t} +
+ ))} +
+ + View + +
+
+ ); +} + +export default PortfolioPreview; diff --git a/examples/portfolio/src/components/PortfolioPreview/styles.module.scss b/examples/portfolio/src/components/PortfolioPreview/styles.module.scss new file mode 100644 index 000000000..ce169c2fc --- /dev/null +++ b/examples/portfolio/src/components/PortfolioPreview/styles.module.scss @@ -0,0 +1,102 @@ +.card { + position: relative; + color: var(--t-bg); + background: var(--t-fg); + border: 1px solid #f0f0f0; +} + +.title { + position: absolute; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: 0; + color: white; + flex-direction: column; + font-size: var(--f-u4); + font-weight: 900; + text-transform: uppercase; + letter-spacing: 0.0625em; +} + +.titleCard { + position: relative; + background-size: cover; + background-position: 50% 100%; + padding-top: 37.5%; +} + +.desc { + font-size: var(--f-u1); + line-height: 1.4; +} + +.link { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: var(--t-bg); + font-size: var(--f-u2); + font-weight: 700; + background: rgba(0, 0, 0, 0.25); + opacity: 0; + text-decoration: none; + text-transform: uppercase; + transition: opacity 150ms linear; + + &:focus, + &:hover { + opacity: 1; + + .linkInner { + transform: translateY(0); + border-color: rgba(255, 255, 255, 0.625); + } + } +} + +.linkInner { + padding: 0.375em 1em; + border: 2px solid rgba(255, 255, 255, 0); + transition: transform 300ms cubic-bezier(0, 0.4, 0.6, 1), border-color 1s linear; + transform: translateY(25%); +} + +.nav { + display: flex; + justify-content: flex-end; +} + +.tags { + font-size: var(--f-d2); + text-transform: uppercase; +} + +.tag { + display: inline-block; + color: var(--c-yellow); + text-transform: uppercase; + margin-left: 0.5em; + + &:nth-of-type(1n) { + color: var(--c-green); + } + &:nth-of-type(2n) { + color: var(--c-orange); + } + &:nth-of-type(3n) { + color: var(--c-blue); + } + &:nth-of-type(4n) { + color: var(--c-pink); + } +} diff --git a/examples/portfolio/src/layouts/project.astro b/examples/portfolio/src/layouts/project.astro new file mode 100644 index 000000000..7ca9734a4 --- /dev/null +++ b/examples/portfolio/src/layouts/project.astro @@ -0,0 +1,92 @@ +--- +import MainHead from '../components/MainHead.astro'; +import Button from '../components/Button/index.jsx'; +import Footer from '../components/Footer/index.jsx'; +import Nav from '../components/Nav/index.jsx'; + +export let content: any; +--- + + + + + + +