File Structure
Learn about the personal portfolio project’s file structure.
We'll cover the following...
Create the file structure
The file structure is similar to what was used in earlier projects. We use the file structure as displayed in the snippet below:
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="913" height="441.86856" viewBox="0 0 913 441.86856" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M267.71817,582.3406h686.644V234.73018H267.71817Z" transform="translate(-143.5 -229.06572)" fill="#fff"/><path d="M960.02639,588.005H262.05381V229.06572H960.02639ZM273.38224,576.67652H948.698V240.39415H273.38224Z" transform="translate(-143.5 -229.06572)" fill="#e5e5e5"/><polygon points="444.691 79.203 444.691 197.186 273.183 197.186 241.498 235.203 245.116 197.186 229.699 197.186 229.699 79.203 444.691 79.203" fill="#6c63ff"/><polygon points="548.482 86.203 548.482 161.849 658.445 161.849 678.76 186.223 676.441 161.849 686.325 161.849 686.325 86.203 548.482 86.203" fill="#f0f0f0"/><polygon points="94.66 430.711 104.581 430.711 109.301 392.445 94.659 392.445 94.66 430.711" fill="#ffb7b7"/><path d="M235.62973,656.538l19.53785-.00079h.00079a12.45172,12.45172,0,0,1,12.451,12.45085v.40461l-31.9891.00119Z" transform="translate(-143.5 -229.06572)" fill="#2f2e41"/><polygon points="213.852 430.385 223.486 428.014 218.925 389.729 204.707 393.228 213.852 430.385" fill="#ffb7b7"/><path d="M354.12111,656.91054l18.97173-4.66915.00076-.00019a12.45172,12.45172,0,0,1,15.06541,9.11513l.09668.39289-31.06222,7.64466Z" transform="translate(-143.5 -229.06572)" fill="#2f2e41"/><path d="M232.05927,650.65279l2.06089-10.54431s3.7936-40.71323,31.01915-81.34561l8.86181-44.139s-2.63182-33.41037,22.77-51.49548l7.83137-5.39476,27.45708,1.5738L338.401,494.0257l12.77749,82.14755s3.29742.30909,4.534,9.80866a28.5681,28.5681,0,0,1,4.32786,13.2417s6.5391,18.0395,8.29085,31.32142l-.20609,12.99648-13.80794,7.3565-28.77919-81.38962-20.58408-45.50165s-9.90723,32.05875-25.082,59.523c0,0-20.78443,44.98686-24.93672,54.12656l-4.534,14.95821Z" transform="translate(-143.5 -229.06572)" fill="#2f2e41"/><circle cx="180.36314" cy="139.18187" r="19.62536" fill="#ffb7b7"/><circle cx="180.36314" cy="139.18187" r="19.62536" fill="#ffb8b8"/><path d="M296.82856,463.33787l6.47861-16.18276a72.785,72.785,0,0,1,.80076-45.38259l0,0,1.23945-1.02072c10.79826-8.89269,20.2758-7.27372,29.07077,3.60428l0,0a24.316,24.316,0,0,0,4.92121,4.64016c3.87888,2.72145,10.03274,17.507,1.90744,26.17395l-6.50023,37.918C335.43111,494.02339,320.23956,486.14031,296.82856,463.33787Z" transform="translate(-143.5 -229.06572)" fill="#3f3d56"/><path d="M389.72261,441.32773a7.18525,7.18525,0,0,0-10.73711,2.47079l-16.37-1.27452-3.20082,9.7591,23.14288,1.47518a7.22419,7.22419,0,0,0,7.165-12.43055Z" transform="translate(-143.5 -229.06572)" fill="#ffb7b7"/><path d="M374.04965,457.159l-46.646-8.70963L312.23207,423.013a10.83369,10.83369,0,0,1,20.38225-7.35114l7.116,19.67807,36.89044,6.10629Z" transform="translate(-143.5 -229.06572)" fill="#ccc"/><circle cx="145.38083" cy="116.05536" r="18.82812" fill="#2f2e41"/><path d="M272.64059,360.712a18.82911,18.82911,0,0,0,29.07561-9.88633,18.82916,18.82916,0,1,1-36.7286-7.72127A18.82219,18.82219,0,0,0,272.64059,360.712Z" transform="translate(-143.5 -229.06572)" fill="#2f2e41"/><path d="M346.94468,360.7329c-3.2869-5.88451-4.5446-8.34263-8.78268-11.92092-3.74773-3.16464-8.35758-4.094-12.0758-1.09544a22.26731,22.26731,0,1,0,13.43551,20.43933,22.44938,22.44938,0,0,0-.15172-2.51779C342.602,365.18417,343.71266,361.1868,346.94468,360.7329Z" transform="translate(-143.5 -229.06572)" fill="#2f2e41"/><path d="M925.74878,501.591a8.8934,8.8934,0,0,1,10.85791-8.25059l11.76082-16.57424,11.81526,4.69045-16.93729,23.17277a8.94159,8.94159,0,0,1-17.4967-3.03839Z" transform="translate(-143.5 -229.06572)" fill="#a0616a"/><path d="M938.65018,487.3372l20.91036-35.1682-8.51929-22.71812,11.60295-30.94209.42791.18358c.28057.12021,6.87342,3.06218,7.85053,13.598l13.33389,41.90622-35.58635,46.16619Z" transform="translate(-143.5 -229.06572)" fill="#3f3d56"/><path d="M825.08465,358.04787a8.89341,8.89341,0,0,1,7.3864,11.46332l15.61532,13.00708-5.58993,11.41724-21.79386-18.67823a8.94159,8.94159,0,0,1,4.38207-17.20941Z" transform="translate(-143.5 -229.06572)" fill="#a0616a"/><path d="M838.29832,372.01271l33.44622,23.56685,23.30879-6.73731,29.95237,13.96056-.21611.41243c-.14155.27044-3.58444,6.61609-14.16425,6.77568l-42.8117,10.05394-43.27659-39.04923Z" transform="translate(-143.5 -229.06572)" fill="#3f3d56"/><polygon points="755.999 429.531 744.371 429.531 738.84 384.681 756.001 384.682 755.999 429.531" fill="#a0616a"/><path d="M736.06574,426.20817h22.42455a0,0,0,0,1,0,0v14.11915a0,0,0,0,1,0,0H721.9466a0,0,0,0,1,0,0v0A14.11914,14.11914,0,0,1,736.06574,426.20817Z" fill="#2f2e41"/><polygon points="802.472 429.531 790.844 429.531 785.313 384.681 802.474 384.682 802.472 429.531" fill="#a0616a"/><path d="M782.5388,426.20817h22.42455a0,0,0,0,1,0,0v14.11915a0,0,0,0,1,0,0H768.41966a0,0,0,0,1,0,0v0A14.11914,14.11914,0,0,1,782.5388,426.20817Z" fill="#2f2e41"/><polygon points="806.607 265.827 805.659 332.217 804.71 419.472 783.845 417.575 773.412 297.125 760.134 417.575 738.593 417.575 736.423 296.176 744.011 269.62 806.607 265.827" fill="#2f2e41"/><path d="M885.43112,499.09118l-3.1787-.13757L897.01715,417.617l-6.04538-24.58424a5.38014,5.38014,0,0,1,3.33451-6.32052l10.87712-4.07857,3.8427-10.5679,30.31888,3.267.74558,8.25912c3.28547,1.05371,30.34081,10.06405,28.474,20.33078-1.84247,10.13349-12.72133,42.01514-13.27379,43.63086l-1.90518,45.72223-.23435.11717c-.28209.14105-21.17987,10.41645-43.88279,10.41472A57.72326,57.72326,0,0,1,885.43112,499.09118Z" transform="translate(-143.5 -229.06572)" fill="#3f3d56"/><circle cx="779.4974" cy="115.94052" r="21.82975" fill="#a0616a"/><path d="M940.67941,366.13805c-4.16023,4.43154-11.88634,2.05259-12.42842-4.00152a7.31372,7.31372,0,0,1,.00921-1.4125c.27988-2.68171,1.82917-5.11638,1.45806-7.94788a4.168,4.168,0,0,0-.76278-1.95112c-3.31517-4.4393-11.09729,1.98558-14.226-2.03318-1.91848-2.46422.33667-6.344-1.13554-9.09818-1.94307-3.63507-7.69838-1.84188-11.30757-3.83262-4.01566-2.21495-3.77548-8.37612-1.13209-12.12366,3.22372-4.57028,8.87592-7.009,14.4577-7.36044s11.12511,1.15742,16.33621,3.18824c5.92086,2.30743,11.79224,5.49632,15.43586,10.70255,4.431,6.33133,4.85743,14.84321,2.64139,22.24651C948.67737,357.01775,944.07668,362.51923,940.67941,366.13805Z" transform="translate(-143.5 -229.06572)" fill="#2f2e41"/><polygon points="560.665 423.5 563.908 415.158 533.276 398.679 528.489 410.991 560.665 423.5" fill="#ffb8b8"/><path d="M721.54079,630.80429a11.22689,11.22689,0,0,0-14.53887,6.39937l-2.18783,5.62343-3.37289,8.68013-.82454,2.12833,10.80888,4.20464,10.4551-26.901Z" transform="translate(-143.5 -229.06572)" fill="#2f2e41"/><path d="M701.44249,636.5118l-1.41053,3.74034-3.52007,9.3358-.08444.23349c-8.96836,1.15233-18.8-1.10674-27.8936-4.61616a113.381,113.381,0,0,1-10.67626-4.764c-5.14253-2.5984-9.747-5.34082-13.42032-7.68633-5.53062-3.54965-8.95043-6.21492-8.95043-6.21492s-.90346.81642-2.53829,2.21645c-2.1912,1.87482-5.69255,4.80248-10.12763,8.24872q-2.53774,1.98576-5.44951,4.15412c-14.30942,10.6138-32.67293-17.70768-32.67293-17.70768s5.16465-3.28808,6.51388-3.92653c4.34454-2.05545,14.55117-6.90558,23.35683-11.21579,4.53659-2.224,8.696-4.309,11.48859-5.79095,9.88883-5.26494,22.18139,4.69754,22.18139,4.69754Z" transform="translate(-143.5 -229.06572)" fill="#2f2e41"/><path d="M701.44249,636.5118l-1.41053,3.74034-3.52007,9.3358-.08444.23349c-8.96836,1.15233-18.8-1.10674-27.8936-4.61616a113.381,113.381,0,0,1-10.67626-4.764c-5.14253-2.5984-9.747-5.34082-13.42032-7.68633-5.53062-3.54965-8.95043-6.21492-8.95043-6.21492s-.90346.81642-2.53829,2.21645c-2.1912,1.87482-5.69255,4.80248-10.12763,8.24872q-2.53774,1.98576-5.44951,4.15412c-14.30942,10.6138-32.67293-17.70768-32.67293-17.70768s5.16465-3.28808,6.51388-3.92653c4.34454-2.05545,14.55117-6.90558,23.35683-11.21579,4.53659-2.224,8.696-4.309,11.48859-5.79095,9.88883-5.26494,22.18139,4.69754,22.18139,4.69754Z" transform="translate(-143.5 -229.06572)" opacity="0.14"/><path d="M558.31284,557.99605H515.97107a3.28884,3.28884,0,0,1-3.28513-3.28514V536.46015a24.456,24.456,0,1,1,48.912,0v18.25076A3.28884,3.28884,0,0,1,558.31284,557.99605Z" transform="translate(-143.5 -229.06572)" fill="#2f2e41"/><path d="M598.57955,580.92032a6.84543,6.84543,0,0,0-5.24563,9.092L581.82023,600.602l4.72879,8.56639,16.04952-15.183a6.88257,6.88257,0,0,0-4.019-13.065Z" transform="translate(-143.5 -229.06572)" fill="#ffb8b8"/><path d="M563.93547,629.067q-.78011,0-1.56254-.06737a18.39628,18.39628,0,0,1-14.81787-9.89569l-18.44592-35.50343a10.187,10.187,0,0,1,17.61555-10.19476l17.01758,38.1833,23.156-18.81433,13.40753,5.21929-22.6427,24.99748A18.60467,18.60467,0,0,1,563.93547,629.067Z" transform="translate(-143.5 -229.06572)" fill="#6c63ff"/><polygon points="558.077 435.233 561.951 427.165 532.676 408.381 526.958 420.289 558.077 435.233" fill="#ffb8b8"/><path d="M720.57386,643.9362a11.22691,11.22691,0,0,0-14.98754,5.26349l-2.61339,5.43873-4.02978,8.39535-.98562,2.0587,10.45391,5.02261,12.4909-26.0183Z" transform="translate(-143.5 -229.06572)" fill="#2f2e41"/><path d="M700.09647,648.08277l-1.69372,3.62092-4.2269,9.03778-.10213.22631c-9.03038.45992-18.65944-2.5478-27.45652-6.74548a113.38076,113.38076,0,0,1-10.2787-5.57013c-4.92771-2.9858-9.30789-6.07386-12.79015-8.69465-5.24157-3.96405-8.4465-6.88418-8.4465-6.88418s-.96351.7446-2.70108,2.01489c-2.32875,1.70094-6.04467,4.351-10.73141,7.44628q-2.68281,1.78493-5.75255,3.72318c-15.08254,9.48309-36.53075,21.03217-54.77438,23.47045-32.041,4.28527-24.49969-38.47256-24.49969-38.47256l25.49992-13.24277,10.8264,2.1974,12.05281,2.43828,4.27057.86874s.81041-.3066,2.20471-.83951c4.48961-1.7156,15.0387-5.76726,24.14946-9.38823,4.694-1.86887,9.00133-3.62823,11.89953-4.89121,10.26409-4.48966,21.75494,6.38777,21.75494,6.38777Z" transform="translate(-143.5 -229.06572)" fill="#2f2e41"/><path d="M489.98106,670.749a6.84548,6.84548,0,0,0,4.76853-9.351l10.95076-11.1708-5.16538-8.31045-15.243,15.99254a6.88257,6.88257,0,0,0,4.68913,12.83976Z" transform="translate(-143.5 -229.06572)" fill="#ffb8b8"/><circle cx="399.63688" cy="312.67256" r="17.07267" fill="#ffb8b8"/><path d="M520.92588,589.12992l14.872,42.16353-.08929.14757c-2.06854,3.41953-2.74456,6.17781-1.95483,7.97651a3.47577,3.47577,0,0,0,2.20364,1.901l35.19384-24.59967-1.23228-9.85933.06862-.11014c3.4017-5.44279,4.50316-10.37192,3.27427-14.6498a14.13919,14.13919,0,0,0-6.71286-8.09628l-.12262-.0966-17.55353-21.36444-23.4647,4.1688Z" transform="translate(-143.5 -229.06572)" fill="#6c63ff"/><path d="M498.30956,663.1371l-9.96307-12.26223,24.01758-39.64763,11.19766-34.61264.34737.11229-.34737-.11229a13.90455,13.90455,0,1,1,24.79447,11.99916L527.79879,619.413Z" transform="translate(-143.5 -229.06572)" fill="#6c63ff"/><path d="M567.38368,538.28523H541.49273l-.26556-3.71717-1.32746,3.71717h-3.98665l-.52614-7.36732-2.631,7.36732h-7.714v-.365a19.36753,19.36753,0,0,1,19.34563-19.3458h3.65033a19.36768,19.36768,0,0,1,19.34581,19.3458Z" transform="translate(-143.5 -229.06572)" fill="#2f2e41"/><path d="M541.28083,561.40292a3.35564,3.35564,0,0,1-.58138-.05133l-18.95851-3.345V526.67372h20.86967l-.51669.60242c-7.18873,8.38394-1.77286,21.97862,2.09527,29.33595a3.23651,3.23651,0,0,1-.25718,3.43628A3.272,3.272,0,0,1,541.28083,561.40292Z" transform="translate(-143.5 -229.06572)" fill="#2f2e41"/><polygon points="681.028 276.203 681.028 320.344 485.481 320.344 457.244 354.223 460.469 320.344 446.73 320.344 446.73 276.203 681.028 276.203" fill="#f0f0f0"/><circle cx="528.02756" cy="298.2029" r="8" fill="#fff"/><circle cx="501.02756" cy="298.2029" r="8" fill="#fff"/><circle cx="474.02756" cy="298.2029" r="8" fill="#fff"/><path d="M1055.5,670.26862h-911a1,1,0,0,1,0-2h911a1,1,0,0,1,0,2Z" transform="translate(-143.5 -229.06572)" fill="#cacaca"/></svg>
Overview of the application's file structure
Here’s a brief introduction about the folders used in this project:
- The
Header