డెవలపర్లకు ఒక చెడ్డ అలవాటు ఉంది - వారికి కేవలం ఒక పదునైన బ్లేడ్ మాత్రమే అవసరమైనప్పుడు, వారు స్విస్ ఆర్మీ నైఫ్ లాంటి సంక్లిష్టమైన పరికరాలను తయారు చేస్తారు. మొదటి HTML లైన్ రాయకముందే మనం భారీ ఫ్రంటెండ్ ఫ్రేమ్వర్క్ల కోసం వెతుకుతాము. యానిమేషన్ లైబ్రరీలు, స్టేట్ మేనేజ్మెంట్ టూల్స్ మరియు ఒక చిన్న కంపెనీని నడపగలిగేంత శక్తివంతమైన బిల్డ్ పైప్లైన్లను జోడిస్తాము. ఆ తర్వాత, మన పోర్ట్ఫోలియో సైట్లు లోడ్ కావడానికి ఎందుకు మూడు సెకన్ల సమయం పడుతోంది, మొబైల్లో నావిగేషన్ ఎందుకు విఫలమవుతోంది మరియు మనం నెలల తరబడి కష్టపడి నిర్మించిన ప్రాజెక్ట్లను చూడకముందే హైరింగ్ మేనేజర్లు ఎందుకు వెళ్ళిపోతున్నారో అని ఆశ్చర్యపోతాము.
నా తాజా పోర్ట్ఫోలియో విషయంలో నేను భిన్నమైన మార్గాన్ని ఎంచుకున్నాను. అనంతమైన డిపెండెన్సీల (dependencies) ప్రపంచం నుండి దూరంగా ఉండి, మొత్తం సైట్ను సెమాంటిక్ HTML మరియు క్లీన్ CSSతో నిర్మించాను. ఎటువంటి JavaScript ఫ్రేమ్వర్క్లు లేవు. ఎటువంటి బిల్డ్ స్టెప్స్ లేవు. ఎటువంటి థర్డ్-పార్టీ యానిమేషన్ ఇంజన్లు లేవు. కేవలం ప్లాట్ఫారమ్ మాత్రమే, లేఅవుట్ కోసం CSS Grid మరియు Flexbox, మరియు వేగం మరియు స్పష్టతను కేవలం ఫీచర్లుగా కాకుండా ప్రాథమిక అంశాలుగా పరిగణించే డిజైన్ ఫిలాసఫీ.
ఫలితం తేలికగా, వేగంగా మరియు ప్రొఫెషనల్గా ఉంది. నేను దీనిని ఖచ్చితంగా ఎలా రూపొందించానో ఇక్కడ చూడండి.
పునాదితో ప్రారంభించండి
ఎక్కువ ఇంజనీరింగ్ (Over-engineering) అనేది పునాది నుండే మొదలవుతుంది. ఒక పోర్ట్ఫోలియో అనేది సింగిల్-పేజీ అప్లికేషన్ (SPA) అవ్వాల్సిన అవసరం లేదు. అది మీ పనిని ప్రదర్శించాలి, మిమ్మల్ని ఎలా సంప్రదించాలో చెప్పాలి మరియు అడ్డు రాకుండా ఉండాలి. నేను సెమాంటిక్ HTMLని ఉపయోగించాను ఎందుకంటే బ్రౌజర్కు nav, article, మరియు footerలను ఎలా రెండర్ చేయాలో ఇప్పటికే తెలుసు. మీరు సరైన పని కోసం సరైన ఎలిమెంట్ను ఉపయోగించినప్పుడు, మీకు యాక్సెసిబిలిటీ, సెర్చ్ ఇంజిన్ విజిబిలిటీ మరియు రెస్పాన్సివ్ బిహేవియర్ దాదాపు ఉచితంగానే లభిస్తాయి. మీరు తక్కువ కోడ్ కూడా రాస్తారు. ఐదు ARIA ఆట్రిబ్యూట్లతో ఉన్న ఒక div, కేవలం ఒక button యొక్క అనవసరమైన అనుకరణ మాత్రమే. నేను దానిని పూర్తిగా నివారించాను.
లేఅవుట్ కోసం, CSS Grid మరియు Flexbox సరిపోతాయి. Grid అనేది మాక్రో స్ట్రక్చర్ను (macro structure) నిర్వహిస్తుంది: మొత్తం పేజీ సెక్షన్లు, ప్రాజెక్ట్ గ్యాలరీ, ప్రధాన బ్లాక్ల అమరిక. Flexbox అనేది మైక్రో ఇంటరాక్షన్లను (micro interactions) నిర్వహిస్తుంది: ఆ క్యాప్సూల్ లోపల నావిగేషన్ లింక్లు, కార్డ్ల మధ్య టెక్స్ట్ను సెంటర్ చేయడం, వ్యూపోర్ట్ యొక్క దిగువకు ఫుటర్ను నెట్టడం. ఇవి 2018లో మీరు ఉపయోగించిన పన్నెండు-కాలమ్ గ్రిడ్ ఫ్రేమ్వర్క్ల అవసరాన్ని పూర్తిగా తొలగిస్తాయి. కోడ్ చదవడానికి సులభంగా ఉంటుంది. CSS ఫైల్ చిన్నదిగా ఉంటుంది.
రంగు, టైపోగ్రఫీ మరియు నియంత్రణ
సైట్ లోడ్ అయిన వెంటనే ప్రశాంతంగా అనిపించాలని నేను కోరుకున్నాను. బ్యాక్గ్రౌండ్ సబ్టిల్ రేడియల్ గ్రేడియంట్లతో కూడిన లైట్ బేస్ను ఉపయోగిస్తుంది. ఏదీ అతిగా ఉండదు. గ్రేడియంట్ తక్కువ ఒపాసిటీతో ఉంటుంది, ఇది పేజీ ఫ్లాట్గా అనిపించకుండా మృదువైన డెప్త్ను సృష్టిస్తుంది. ఇది ప్యూర్ CSS కాబట్టి తక్షణమే లోడ్ అవుతుంది. కంప్రెస్ చేయడానికి హీరో ఇమేజ్లు లేవు, WebP ఫాల్బ్యాక్లను నిర్వహించాల్సిన అవసరం లేదు, కాన్ఫిగర్ చేయడానికి జావాస్క్రిప్ట్ లేజీ-లోడింగ్ లైబ్రరీలు లేవు.
టైపోగ్రఫీ వ్యక్తిత్వాన్ని ఇస్తుంది. నేను Outfitని Ovoతో జతచేశాను. Outfit, ఒక జియోమెట్రిక్ శాన్-సెరిఫ్ (sans-serif), అన్ని UI టెక్స్ట్లను నిర్వహిస్తుంది: నావిగేషన్ లేబుల్లు, బటన్ టెక్స్ట్, బాడీ కాపీ, మెటా వివరాలు. ఇది స్క్రీన్లపై స్పష్టంగా ఉంటుంది మరియు చిన్న పరిమాణాల్లో కూడా చదవడానికి వీలుగా ఉంటుంది. Ovo, ఒక మీడియం-కాంట్రాస్ట్ సెరిఫ్ (serif), హెడర్లు మరియు ప్రధాన హెడ్లైన్లకు ఉపయోగపడుతుంది. ఈ జత పేజీకి ఒక నిశ్శబ్ద ఎడిటోరియల్ ఫీలింగ్ను ఇస్తుంది. ఇది కేవలం ఒక థీమ్ లా కాకుండా, డిజైన్ చేసినట్లు కనిపిస్తుంది. అన్నిటికంటే ముఖ్యంగా, రెండు ఫాంట్లు ఫాంట్ సర్వీస్ నుండి లేదా సెల్ఫ్-హోస్టెడ్ ఫైల్ల నుండి ఒకే కాల్ ద్వారా లోడ్ అవుతాయి. లేఅవుట్ షిఫ్ట్ ఉండదు, అన్స్టైల్డ్ టెక్స్ట్ ఫ్లాష్ ఉండదు, ఇనిషియల్ రెండర్ తర్వాత స్క్రిప్ట్ వెయిట్స్ను మార్చాల్సిన అవసరం ఉండదు.
ఫ్లోటింగ్ క్యాప్సూల్ మెనూ
నావిగేషన్ అనేది పోర్ట్ఫోలియోలు తరచుగా విఫలమయ్యే చోటు. ఫుల్-స్క్రీన్ ఓవర్లే మెనూలు, స్టాగర్డ్ యానిమేషన్ స్క్రిప్ట్లు మరియు ఒక క్లాస్ను టోగుల్ చేయడానికి నలభై లైన్ల జావాస్క్రిప్ట్ అవసరమయ్యే హంబర్గర్ ఐకాన్లు. నాకు ఇవేవీ వద్దు.
నేను ఒక ఫ్లోటింగ్ గ్లాస్మార్ఫిక్ (glassmorphic) క్యాప్సూల్ మెనూని నిర్మించాను. ఇది ఒకే ఒక హారిజాంటల్ కంటైనర్, అంచులు రౌండ్గా ఉంటాయి, వ్యూపోర్ట్ పైభాగంలో ఫిక్స్డ్ పద్ధతిలో ఉంటుంది. గ్లాస్మార్ఫిజం అనేది సెమీ-ట్రాన్స్పరెంట్ బ్యాక్గ్రౌండ్ కలర్ మరియు backdrop-filter: blur() ప్రాపర్టీ నుండి వస్తుంది. ఇది కంటెంట్ను కప్పి ఉంచకుండా దాని పైన తేలుతుంది, ప్రతి సెక్షన్కు తక్షణ ప్రాప్యతను అందిస్తుంది మరియు పూర్తి రీడిజైన్ లేకుండా చిన్న వ్యూపోర్ట్లలో సులభంగా మారుతుంది. బ్రౌజర్ కాంపోజిటింగ్ను నిర్వహిస్తుంది కాబట్టి ఈ ఎఫెక్ట్ ఆధునికంగా కనిపిస్తుంది, కాన్వాస్ లైబ్రరీ కాదు.