Understanding and navigating identity in the digital age through evidence-based insights and practical strategies.
🌍 Live Site: https://jerichodelosreyes.github.io/digiselfMain/
The Digital Self Project is an educational web application that explores the complex relationship between technology and personal identity. Through four comprehensive sections, users discover evidence-based insights into digital psychology, social media behavior, ethical considerations, and strategies for maintaining well-being in our connected world.
To provide young adults and digital natives with the knowledge and tools needed to build authentic, healthy relationships with technology while maintaining their sense of self in digital spaces.
digiselfMain/
├── index.html # Landing page with project overview
├── README.md # Project documentation
├── assets/
│ ├── landing/ # Landing page assets
│ │ ├── css/
│ │ ├── img/
│ │ └── js/
│ ├── section1/ # Understanding Digital Self
│ │ ├── understanding-overview.html
│ │ ├── css/styles.css
│ │ ├── img/
│ │ └── js/
│ ├── section2/ # Social Media & Online Identity
│ │ ├── social-media-overview.html
│ │ ├── css/styles.css
│ │ ├── img/
│ │ └── js/
│ ├── section3/ # Digital Ethics & Security
│ │ ├── digital-ethics-overview.html
│ │ ├── css/styles.css
│ │ ├── img/
│ │ └── js/
│ └── section4/ # Digital Wellbeing
│ ├── wellbeing-overview.html
│ ├── css/styles.css
│ ├── img/
│ └── js/
Explore the three dimensions of digital identity
- Personal Identity: Core values, beliefs, and authentic self-expression
- Social Identity: Community belonging, roles, and interpersonal connections
- Professional Identity: Career development, networking, and online reputation
- Interactive Features: Identity assessment tools, reflection exercises, balance wheel visualization
Navigate validation seeking, comparison traps, and digital burnout
- The Neuroscience of Digital Approval: Understanding dopamine cycles and validation-seeking behavior
- The Illusion of Perfect Lives: Reality vs. highlights comparison and psychological impact
- When Connection Becomes Exhaustion: Digital burnout symptoms and science-based recovery strategies
- Building Sustainable Digital Relationships: Evidence-based strategies for authentic online engagement
Learn about online privacy, ethical behavior, and digital responsibility
- Privacy Fundamentals: Data protection, digital footprints, and privacy management
- Ethical Digital Citizenship: Responsible online behavior and community standards
- Security Best Practices: Account protection, safe browsing, and threat awareness
- Digital Rights: Understanding your rights and responsibilities in digital spaces
Develop healthy habits and boundaries for sustainable technology use
- Mindful Technology Use: Intentional engagement and digital minimalism
- Work-Life Balance: Managing digital boundaries and preventing tech overwhelm
- Sleep & Technology: Digital wellness for better rest and recovery
- Building Real-World Connections: Balancing online and offline relationships
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Accessibility First: WCAG 2.1 compliant with proper ARIA labels and keyboard navigation
- Dark Theme: Eye-friendly color scheme with carefully chosen contrast ratios
- Smooth Animations: Performance-optimized transitions and micro-interactions
- Vanilla JavaScript: Modern ES6+ implementation with no framework dependencies
- CSS Grid & Flexbox: Advanced layout techniques for responsive design
- Progressive Enhancement: Works across all modern browsers with graceful degradation
- Performance Optimized: Efficient loading, minimal dependencies, and optimized assets
- Identity Assessment Tools: Self-reflection questionnaires and progress tracking
- Social Media Visualization: Interactive demonstrations of digital psychology concepts
- Recovery Tracking: Progress monitoring for digital wellness goals
- Implementation Guides: Step-by-step action plans and practical strategies
- Touch-Friendly Interface: Optimized for mobile interaction patterns
- Hamburger Navigation: Smooth mobile menu with accessibility features
- Responsive Typography: Readable text across all screen sizes
- Fast Loading: Optimized for mobile networks and slower connections
- HTML5: Semantic markup with proper accessibility attributes
- CSS3: Modern styling with Grid, Flexbox, and custom properties
- Vanilla JavaScript: ES6+ features with modern browser APIs
- Web Fonts: Google Fonts (Inter, Playfair Display) for optimal typography
- VS Code: Primary development environment
- Live Server: Local development server for testing
- Git: Version control and collaboration
- GitHub Pages: Hosting and deployment platform
- Mobile-First: Responsive design starting from mobile screens
- Performance: Optimized loading and efficient resource usage
- Accessibility: WCAG 2.1 AA compliance for inclusive design
- SEO Friendly: Proper meta tags, semantic HTML, and structured data
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Text editor or IDE (VS Code recommended)
- Basic knowledge of HTML, CSS, and JavaScript
-
Clone the repository
git clone https://github.com/jerichodelosreyes/digiselfMain.git cd digiselfMain
-
Start local server
python -m http.server 8000
or use VS Code Live Server extension
-
Open in browser
http://localhost:8000
- index.html: Main landing page and project entry point
- assets/sectionX/: Individual section content and resources
- css/styles.css: Section-specific styling and responsive design
- js/section-animations-enhanced.js: Interactive features and animations
BSCS2E - CvSU Imus
"In our digital age, understanding ourselves means understanding our relationship with technology. This project is a step toward more mindful, authentic, and healthy digital lives."
© 2025 BSCS2E - Digital Self Project. Educational content for understanding digital identity and social media psychology.