{"id":22394051,"url":"https://github.com/leonbyte/portfolio-with-theme-switcher","last_synced_at":"2025-03-26T22:40:41.412Z","repository":{"id":266060142,"uuid":"897245817","full_name":"LeonByte/portfolio-with-theme-switcher","owner":"LeonByte","description":"This is a personal portfolio website project with an integrated light/dark mode toggle and browser detection features. The website showcases my skills, projects, and experience in a clean, modern, and user-friendly way. It’s built using Django (or Flask) for the backend and simple HTML, CSS, and JavaScript for the frontend.","archived":false,"fork":false,"pushed_at":"2024-12-15T08:02:07.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T04:24:20.152Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LeonByte.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-02T09:49:56.000Z","updated_at":"2024-12-15T08:02:10.000Z","dependencies_parsed_at":"2025-02-01T04:23:20.448Z","dependency_job_id":"bd1fdf43-a229-4fc6-8714-9718656d96cd","html_url":"https://github.com/LeonByte/portfolio-with-theme-switcher","commit_stats":null,"previous_names":["leonbyte/portfolio-with-theme-switcher"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeonByte%2Fportfolio-with-theme-switcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeonByte%2Fportfolio-with-theme-switcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeonByte%2Fportfolio-with-theme-switcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeonByte%2Fportfolio-with-theme-switcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LeonByte","download_url":"https://codeload.github.com/LeonByte/portfolio-with-theme-switcher/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245749784,"owners_count":20666084,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-05T05:08:45.763Z","updated_at":"2025-03-26T22:40:41.391Z","avatar_url":"https://github.com/LeonByte.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Portfolio with Theme Switcher\n\nThis is a personal portfolio website project with an integrated **light/dark mode toggle** and **browser detection** features. The website showcases my skills, projects, and experience in a clean, modern, and user-friendly way. It’s built using **Django** (or **Flask**) for the backend and simple **HTML, CSS, and JavaScript** for the frontend.\n\n---\n\n## **Table of Contents**\n1. [Project Overview](#project-overview)\n2. [Technologies Used](#technologies-used)\n3. [Setup and Installation](#setup-and-installation)\n4. [Project Structure](#project-structure)\n5. [Contributing](#contributing)\n6. [License](#license)\n\n---\n\n## **Project Overview**\n\nThis project aims to create a **dynamic, responsive personal portfolio website** with the following features:\n- **Dark/Light Mode Toggle**: Users can switch between light and dark themes.\n- **Browser Detection**: The website adapts its design and behavior based on the user's browser (e.g., Chrome, Firefox, Safari).\n- **Contact Form**: A form for visitors to contact me directly through the website.\n- **Showcase of Projects and Experience**: Display personal projects, blogs, and work experience.\n\nThe goal is to create a simple yet elegant design that is both functional and visually appealing.\n\n---\n\n## **Technologies Used**\n\n- **Frontend**: HTML, CSS, JavaScript\n  - **CSS Framework**: Tailwind CSS (optional)\n  - **JavaScript**: For light/dark theme toggle, browser detection\n- **Backend**: Django (or Flask)\n- **Database**: PostgreSQL\n- **Version Control**: Git, GitHub\n- **Deployment**: Heroku (or any other platform like DigitalOcean)\n\n---\n\n## **Setup and Installation**\n\n### 1. Clone the repository:\n```bash\ngit clone https://github.com/LeonByte/portfolio-with-theme-switcher.git\ncd portfolio-with-theme-switcher\n```\n\n### 2. Set up a virtual environment:\n```bash\npython -m venv venv\nsource venv/bin/activate  # On Windows, use venv\\Scripts\\activate\n```\n\n### 3. Install backend dependencies:\n```bash\npip install -r backend/requirements.txt\n```\n\n### 4. Install frontend dependencies (if using package manager like npm):\n```bash\nnpm install  # If you have a package.json in the frontend folder\n```\n\n### 5. Apply database migrations (for Django):\n```bash\npython manage.py migrate\n```\n\n### 6. Start the development server:\n```bash\npython manage.py runserver\n```\n\nThe app will be available at `http://127.0.0.1:8000/`.\n\n---\n\n## **Project Structure**\n\nThe project is divided into **backend** (Django or Flask) and **frontend** (HTML, CSS, JS) folders. Here’s an overview of the directory structure:\n\n```\nportfolio-with-theme-switcher/\n│\n├── backend/                     # Backend folder for Django (or Flask)\n│   ├── manage.py                # Main script for Django (or Flask equivalent)\n│   ├── portfolio/                # Django app for handling portfolio content\n│   │   ├── __init__.py\n│   │   ├── models.py            # Database models for projects, blog, etc.\n│   │   ├── views.py             # Views to render portfolio pages\n│   │   ├── urls.py              # URLs configuration for your portfolio\n│   │   ├── admin.py             # Admin setup (if using Django)\n│   │   └── migrations/          # Folder for database migrations\n│   ├── settings.py              # Django settings (or Flask equivalent)\n│   ├── urls.py                  # Main URLs configuration for the backend\n│   ├── wsgi.py                  # WSGI configuration (for production deployment)\n│   └── requirements.txt         # List of Python dependencies\n│\n├── frontend/                    # Frontend folder (HTML, CSS, JS)\n│   ├── assets/                  # Folder for images, fonts, icons\n│   ├── css/                     # CSS files\n│   │   ├── style.css            # Main stylesheet for the site\n│   │   ├── dark-mode.css        # Custom styles for dark mode\n│   │   └── theme.css            # New CSS variables and theme styles\n│   ├── js/                      # JavaScript files\n│   │   ├── theme-toggle.js      # JS for theme switching functionality\n│   │   └── browser-detection.js # JS for detecting user browser\n│   ├── templates/               # Template files for the frontend (Django templates)\n│   │   ├── base.html            # Base template to be extended (Header, Footer)\n│   │   ├── index.html           # Homepage for the portfolio\n│   │   ├── about.html           # About me page\n│   │   ├── projects.html        # Page to showcase your projects\n│   │   ├── contact.html         # Contact page with form and details\n│   │   └── 404.html             # Custom 404 page (optional)\n│\n├── .gitignore                   # Git ignore file (exclude unnecessary files)\n├── README.md                    # Readme file explaining the project and setup\n├── package.json                 # For any JavaScript-related dependencies (if needed)\n└── requirements.txt             # Python dependencies for the backend\n```\n\n---\n\n## **Contributing**\n\nWe welcome contributions from collaborators! Please follow these guidelines to ensure smooth collaboration:\n\n1. **Fork the repository**: Create your own fork of this repository.\n2. **Create a feature branch**: Before you start working on a new feature, create a branch:\n   ```bash\n   git checkout -b feature-name\n   ```\n3. **Make changes**: Work on the features or fixes assigned to you, or as discussed.\n4. **Commit your changes**: Use meaningful commit messages to describe your changes.\n   ```bash\n   git commit -m \"Added dark mode toggle functionality\"\n   ```\n5. **Push your changes**: Push your changes to your fork.\n   ```bash\n   git push origin feature-name\n   ```\n6. **Create a Pull Request**: Once your feature is complete, open a pull request to merge your changes back into the main repository.\n\nIf you're new to GitHub or have any questions, feel free to ask!\n\n---\n\n## **License**\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## **Additional Notes**\n- If you're contributing to specific features, feel free to take a look at the **Issues** tab on GitHub for open tasks.\n- Don’t hesitate to ask for help or clarification—collaboration is key!\n\n---\n\n### **Next Steps:**\n- Add more features (e.g., contact form, blog section, etc.).\n- Implement better error handling and user validation.\n- Start working on frontend design improvements.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonbyte%2Fportfolio-with-theme-switcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleonbyte%2Fportfolio-with-theme-switcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonbyte%2Fportfolio-with-theme-switcher/lists"}