ડેવલપર્સમાં સ્વિસ આર્મી નાઈફ જેવી જટિલ વસ્તુઓ બનાવવાની ખરાબ આદત હોય છે જ્યારે તેમને માત્ર એક તીક્ષ્ણ બ્લેડની જરૂર હોય છે. HTML ની પહેલી લાઇન લખતા પહેલા જ આપણે ભારે ફ્રન્ટએન્ડ ફ્રેમવર્કનો ઉપયોગ કરવા માંડીએ છીએ. આપણે એનિમેશન લાઇબ્રેરીઓ, સ્ટેટ મેનેજમેન્ટ ટૂલ્સ અને બિલ્ડ પાઇપલાઇન્સ એવી રીતે જોડી દઈએ છીએ જે એક નાની કંપની ચલાવવા માટે પણ પૂરતી હોય. પછી આપણે નવાઈ પામીએ છીએ કે કેમ આપણી પોર્ટફોલિયો સાઇટ્સ લોડ થવામાં ત્રણ સેકન્ડ લે છે, કેમ મોબાઈલ પર નેવિગેશન બગડી જાય છે, અને કેમ હાયરિંગ મેનેજર્સ આપણા મહિનાઓ સુધી મહેનત કરીને બનાવેલા પ્રોજેક્ટ્સ જોતા પહેલા જ સાઇટ છોડી દે છે.
મેં મારા લેટેસ્ટ પોર્ટફોલિયો સાથે એક અલગ રસ્તો અપનાવ્યો. મેં અનંત ડિપેન્ડન્સીઝના ઇકોસિસ્ટમથી દૂર રહીને આખી સાઇટ સેમેન્ટિક HTML અને ક્લીન CSS સાથે બનાવી. કોઈ JavaScript ફ્રેમવર્ક નહીં. કોઈ બિલ્ડ સ્ટેપ્સ નહીં. કોઈ થર્ડ-પાર્ટી એનિમેશન એન્જિન નહીં. ફક્ત પ્લેટફોર્મ પોતે જ, લેઆઉટ માટે CSS Grid અને Flexbox, અને એક ડિઝાઇન ફિલોસોફી જે સ્પીડ અને સ્પષ્ટતાને માત્ર વિચાર્યા પછી ઉમેરવામાં આવતી વસ્તુઓ તરીકે નહીં, પણ મુખ્ય ફીચર્સ તરીકે ગણે છે.
પરિણામ હલકું, ઝડપી અને વ્યાવસાયિક છે. મેં તેને બરાબર કેવી રીતે અભિગમ કર્યો તે અહીં છે.
પાયાથી શરૂઆત કરો
મોટાભાગનું ઓવર-એન્જિનિયરિંગ પાયાથી જ શરૂ થાય છે. પોર્ટફોલિયો માટે સિંગલ-પેજ એપ્લિકેશન હોવું જરૂરી નથી. તેને ફક્ત તમારું કામ બતાવવું જોઈએ, લોકોને તમારો સંપર્ક કેવી રીતે કરવો તે જણાવવું જોઈએ, અને બિનજરૂરી અવરોધ ન બનવો જોઈએ. મેં સેમેન્ટિક HTML નો ઉપયોગ કર્યો કારણ કે બ્રાઉઝર પહેલેથી જ જાણે છે કે nav, article, અને footer ને કેવી રીતે રેન્ડર કરવા. જ્યારે તમે યોગ્ય કામ માટે યોગ્ય એલિમેન્ટનો ઉપયોગ કરો છો, ત્યારે તમને એક્સેસિબિલિટી (accessibility), સર્ચ એન્જિન વિઝિબિલિટી અને રિસ્પોન્સિવ બિહેવિયર લગભગ મફતમાં જ મળી જાય છે. તમે ઓછો કોડ પણ લખો છો. પાંચ ARIA એટ્રિબ્યુટ્સ ધરાવતું div એ માત્ર button ની લાંબી અને બિનજરૂરી નકલ છે. મેં તે સંપૂર્ણપણે ટાળ્યું.
લેઆઉટ માટે, CSS Grid અને Flexbox પૂરતા છે. Grid મેક્રો સ્ટ્રક્ચર સંભાળે છે: આખા પેજના સેક્શન, પ્રોજેક્ટ ગેલેરી, મુખ્ય બ્લોક્સનું એલાઈનમેન્ટ. Flexbox માઇક્રો ઇન્ટરેક્શનનું સંચાલન કરે છે: કેપ્સ્યુલની અંદર નેવિગેશન લિંક્સ, કાર્ડ્સની અંદર ટેક્સ્ટને સેન્ટર કરવું, વ્યુપોર્ટના નીચેના ભાગમાં ફૂટરને ધકેલવું. સાથે મળીને તેઓ એ દરેક કારણને બદલી નાખે છે જેના માટે તમારે 2018 માં કોઈ ટ્વેલ્વ-કોલમ ગ્રીડ ફ્રેમવર્ક ઇમ્પોર્ટ કરવાની જરૂર પડી હોત. કોડ વાંચવામાં સરળ રહે છે. CSS ફાઇલ નાની રહે છે.
રંગ, ટાઇપોગ્રાફી અને સંયમ
હું ઈચ્છતો હતો કે પોર્ટફોલિયો લોડ થતાની સાથે જ શાંતિનો અનુભવ કરાવે. બેકગ્રાઉન્ડમાં સબટલ રેડિયલ ગ્રેડિયન્ટ્સ સાથે લાઇટ બેઝનો ઉપયોગ કરવામાં આવ્યો છે. કંઈપણ આક્રમક નથી. ગ્રેડિયન્ટ ઓછી ઓપેસિટી પર છે, જે એક નરમ ઊંડાઈ (depth) બનાવે છે જે પેજને ફ્લેટ દેખાતું અટકાવે છે પરંતુ ધ્યાન ખેંચવા માટે બૂમ પણ નથી પાડતું. તે તરત જ લોડ થાય છે કારણ કે તે શુદ્ધ CSS છે. તેમાં કમ્પ્રેસ કરવા માટે કોઈ હીરો ઇમેજીસ નથી, મેનેજ કરવા માટે કોઈ WebP ફોલબેક નથી, અને કન્ફિગર કરવા માટે કોઈ JavaScript લેઝી-લોડિંગ લાઇબ્રેરી નથી.
ટાઇપોગ્રાફી વ્યક્તિત્વ લાવે છે. મેં Outfit ને Ovo સાથે જોડ્યું છે. Outfit, જે એક જિયોમેટ્રિક સેન્સ-સેરિફ છે, તે તમામ UI ટેક્સ્ટ સંભાળે છે: નેવિગેશન લેબલ્સ, બટન ટેક્સ્ટ, બોડી કોપી, મેટા ડિટેલ્સ. તે સ્ક્રીન પર સ્પષ્ટ દેખાય છે અને નાના કદમાં પણ વાંચી શકાય તેવું રહે છે. Ovo, જે એક મીડિયમ-કોન્ટ્રાસ્ટ સેરિફ છે, તે હેડર્સ અને મુખ્ય હેડલાઇન્સ માટે વપરાય છે. આ જોડી પેજને એક શાંત એડિટોરિયલ અનુભવ આપે છે. તે ડિઝાઇન કરેલું લાગે છે, માત્ર કોઈ થીમ વાપર્યું હોય તેવું નહીં. સૌથી મહત્વની વાત એ છે કે, બંને ફોન્ટ્સ ફોન્ટ સર્વિસના સિંગલ કોલ અથવા સેલ્ફ-હોસ્ટેડ ફાઇલોમાંથી લોડ થાય છે. તેમાં કોઈ લેઆઉટ શિફ્ટ નથી, કોઈ અનસ્ટાઇલ્ડ ટેક્સ્ટનો ફ્લેશ નથી, અને ઇનિશિયલ રેન્ડરિંગ પછી સ્ક્રિપ્ટ દ્વારા વજન (weights) બદલાતું નથી.
ફ્લોટિંગ કેપ્સ્યુલ મેનુ
નેવિગેશન એ એવી જગ્યા છે જ્યાં પોર્ટફોલિયો ઘણીવાર પોતાના જ વજન નીચે દબાઈ જાય છે. ફૂલ-સ્ક્રીન ઓવરલે મેનુઓ, સ્ટેગર્ડ એનિમેશન સ્ક્રિપ્ટ્સ, અને હેમબર્ગર આઇકોન્સ જેને ક્લાસ ટોગલ કરવા માટે ચાલીસ લાઇનની JavaScriptની જરૂર પડે છે. મારે આમાંથી કંઈ જ જોઈતું નહોતું.
મેં એક ફ્લોટિંગ ગ્લાસમોર્ફિક (glassmorphic) કેપ્સ્યુલ મેનુ બનાવ્યું છે. તે એક સિંગલ હોરિઝોન્ટલ કન્ટેનર છે, જેની કિનારીઓ ગોળ છે, અને વ્યુપોર્ટની ઉપરના ભાગ પાસે ફિક્સ્ડ પોઝિશન પર છે. ગ્લાસમોર્ફિઝમ સેમી-ટ્રાન્સપરન્ટ બેકગ્રાઉન્ડ કલર અને backdrop-filter: blur() પ્રોપર્ટીમાંથી આવે છે. તે કન્ટેન્ટને છુપાવ્યા વિના તેની ઉપર તરતું રહે છે, દરેક સેક્શન માટે તાત્કાલિક એક્સેસ આપે છે, અને સંપૂર્ણ રીડિઝાઇન વગર નાના વ્યુપોર્ટ્સ પર સુંદર રીતે સંકોચાઈ જાય છે. આ ઇફેક્ટ આધુનિક લાગે છે કારણ કે બ્રાઉઝર પોતે જ કમ્પોઝિટિંગ સંભાળે છે, કોઈ કેનવાસ લાઇબ્રેરી નહીં.