🌟 Jenslee Dsouza's Netflix Inspired Portfolio 🌟 - Visit
Welcome to my personal portfolio project! 🚀 This website showcases my work, skills, and experiences in web development. It's designed to be lightweight, customizable, and professional while maintaining an approachable style.
- 🌍 Dynamic Content: Powered by DatoCMS for easy content management
- ⚡ Fast & Responsive: Built with modern web technologies for seamless performance
- 🎨 Customizable: Modular and easy to adapt to your own needs
- 📈 Professional Yet Personal: Highlights projects, skills, and achievements
- 🔒 Privacy-Focused: GDPR-compliant analytics with user consent management
- ♿ Accessibility: Follows WCAG guidelines with semantic HTML and ARIA attributes
- 📊 Analytics: Google Analytics 4 integration with privacy-first approach
This portfolio is built with love and:
- ⚛️ React (Frontend)
- 🌐 Netlify (Hosting and CDN)
- 🛡️ DatoCMS (Content Management)
- 📊 Google Analytics 4 (Privacy-focused analytics)
- 🎵 Spotify API (Music Integration)
The portfolio includes several privacy-focused features:
- Consent Management: Users can opt-in/out of analytics
- GDPR Compliance: Analytics are disabled by default
- Data Minimization: Only essential data is collected
- Transparent Controls: Clear consent banner with easy opt-out
- Local Storage: User preferences are remembered
Recent performance improvements include:
- Optimized Icon Loading: Efficient icon management system
- Lazy Loading: Images and components load on demand
- Memoization: Prevents unnecessary re-renders
- Accessibility: Semantic HTML and keyboard navigation
- Event Tracking: Efficient user interaction monitoring
Want to set this up locally? Follow these steps:
-
Clone the Repository: Copy the repository to your local system.
-
Install Dependencies: Use a package manager to install the required dependencies.
nvm install 18
nvm use 18After upgrading Node.js, clear your node_modules and reinstall:
rm -rf node_modules
npm cache clean --force
npm install-
Set Up DatoCMS:
- Create a DatoCMS account
- Create a new project
- Set up the following models:
ProfileBanner: headline (text), backgroundImage (image), resumeLink (file), linkedinLink (text), profileSummary (text)WorkPermit: visaStatus (text), expiryDate (date), summary (text), additionalInfo (text)Timeline: timelineType (enum: work/education), name (text), title (text), techStack (text), summaryPoints (text), dateRange (text)Project: title (text), description (text), techUsed (text), image (image), link (text)Award: title (text), issuer (text), date (date), description (text), image (image), link (text), category (enum: professional/education/other)Certification: title (text), issuer (text), issuedDate (text), link (text), iconName (text)ContactMe: profilePicture (image), name (text), title (text), summary (text), companyUniversity (text), linkedinLink (text), email (text), phoneNumber (text)Skill: name (text), category (text), description (text), icon (text)
- Generate an API token in Settings > API tokens
- Copy the API token for the next step
-
Configure Environment Variables: Create a
.envfile and set up the necessary API keys and configurations:
REACT_APP_GA_TRACKING_ID=your_ga4_id
REACT_APP_DATOCMS_API_TOKEN=your_datocms_token
REACT_APP_SPOTIFY_STATS_API_KEY=your_spotify_api_key- Run the Project: Start the development server.
npm start-
Visit the Local Server: Open your browser and navigate to
http://localhost:3000. -
Deploy to Netlify:
- Create a Netlify account and connect your repository
- Configure build settings:
- Build command:
npm run build - Publish directory:
build
- Build command:
- Set up environment variables in Netlify dashboard
- Configure custom domain if needed
Contributions are welcome and appreciated! 🥳 To contribute:
- Fork the repository.
- Create a new branch for your feature or fix.
- Commit your changes with a descriptive message.
- Push your changes to your branch.
- Open a Pull Request. 🎉
Found a bug? Have a feature in mind? 🤔 Feel free to raise an issue or suggest a feature!
- Go to the Issues tab in the repository.
- Click New Issue.
- Provide a clear description of the bug or feature request.
- If applicable, include screenshots or steps to reproduce the issue.
Your feedback is valuable and helps make this project better for everyone. Thank you for contributing!
- This project is forked from Sumanth Samala's Netflix Portfolio.
- Thanks to DatoCMS for powering the dynamic content.
- Inspired by countless developers in the open-source community. 💻
- Special shoutout to all contributors—you rock! 🤘
This project is licensed under the MIT License. Feel free to use it, modify it, and share it! 🌈