{"id":27064681,"url":"https://github.com/timalexanderandersson/demo-webb","last_synced_at":"2025-06-11T19:32:34.466Z","repository":{"id":286100732,"uuid":"960360848","full_name":"Timalexanderandersson/demo-webb","owner":"Timalexanderandersson","description":"template","archived":false,"fork":false,"pushed_at":"2025-04-08T11:25:44.000Z","size":57884,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T19:51:48.538Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Timalexanderandersson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-04-04T09:53:45.000Z","updated_at":"2025-04-08T11:25:47.000Z","dependencies_parsed_at":"2025-04-04T11:32:00.059Z","dependency_job_id":null,"html_url":"https://github.com/Timalexanderandersson/demo-webb","commit_stats":null,"previous_names":["timalexanderandersson/demo-webb"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Timalexanderandersson/demo-webb","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timalexanderandersson%2Fdemo-webb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timalexanderandersson%2Fdemo-webb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timalexanderandersson%2Fdemo-webb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timalexanderandersson%2Fdemo-webb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Timalexanderandersson","download_url":"https://codeload.github.com/Timalexanderandersson/demo-webb/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timalexanderandersson%2Fdemo-webb/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259325238,"owners_count":22841047,"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":"2025-04-05T17:18:30.416Z","updated_at":"2025-06-11T19:32:34.443Z","avatar_url":"https://github.com/Timalexanderandersson.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpage\n\n\n## Description\nThis is description\n\n### Responsive Design\n\n![Responsive Design](src/assets/responsevi.PNG)\n\nThe image above showcases the responsive design of my personal website. It demonstrates how the site adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.\n\n## Table of Contents\n- [Description](#description)\n    - [Responsive Design](#responsive-design)\n    - [Front View](#front-view)\n        - [Mobile View](#mobile-view)\n        - [Desktop View](#desktop-view)\n    - [Contact Feature Overview](#contact-feature-overview)\n        - [Mobile View](#mobile-view-1)\n        - [Desktop View](#desktop-view-1)\n    - [Project Section](#project-section)\n        - [Desktop View](#desktop-view-2)\n        - [Mobile View](#mobile-view-2)\n    - [Contact Section](#contact-section)\n        - [Desktop View](#desktop-view-3)\n        - [Mobile View](#mobile-view-3)\n    - [Teknik Section](#teknik-section)\n        - [Desktop View](#desktop-view-4)\n        - [Mobile View](#mobile-view-4)\n    - [Footer Section](#footer-section)\n        - [Desktop View](#desktop-view-5)\n        - [Mobile View](#mobile-view-5)\n- [Technical Stack](#technical-stack)\n    - [Install Dependencies](#install-dependencies)\n- [Deployment](#deployment)\n    - [Deployment to Heroku](#deployment-to-heroku)\n    - [Deploying to GitHub](#deploying-to-github)\n- [Improvements](#improvements)\n- [Installed Libraries](#installed-libraries)\n- [Problems with Deployment](#problems-with-deployment)\n- [Bugs](#bugs)\n- [Testing in React](#testing-in-react)\n    - [CSS Jigsaw Validation](#css-jigsaw-validation)\n    - [W3C Validator](#w3c-validator)\n    - [JSHint Validation](#jshint-validation)\n- [Lighthouse Test](#lighthouse-test)\n- [Credit](#credit)\n\n\n### Front View\n\n#### Mobile View\n\n* The image above shows the initial mobile view of the website. Users are greeted with a clean and intuitive interface, ensuring easy navigation.\n\n#### Desktop View\n\n* The image above shows the initial desktop view of the website. The navigation bar at the top allows users to easily access different sections of the site, including projects, contact, and more.\n\nThis section provides an overview of the initial view of the website when users first visit. The navigation bar ensures that users can easily find and access all parts of the site.\n\n### Contact Feature Overview\n\n#### Mobile View\n\n* The image above shows the mobile view of the contact feature. Users can send messages by providing their name, email, and a description. All fields are required to send a message.\n\n#### Desktop View\n\n* The image above shows the desktop view of the contact feature. Similar to the mobile view, users must provide their name, email, and a description to send a message.\n\n\n### Project Section\n\n#### Desktop View\n\n* The image above shows the desktop view of the project section. Here, you can find information about the project and the frameworks used, such as Django REST and React. The GitHub repository is also linked for easy access.\n\n#### Mobile View\n\n* The image above shows the mobile view of the project section. The layout is optimized for smaller screens, ensuring that all information is easily accessible and readable.\n\n\n\n### Contact Section\n\n#### Desktop View\n\n* The image above shows the desktop view of the contact section. This part includes my contact information such as my email address, name, and location.\n\n#### Mobile View\n\n* The image above shows the mobile view of the contact section. The layout is optimized for smaller screens, ensuring that all contact information is easily accessible and readable.\n\n\n\n\n### Teknik Section\n\n#### Desktop View\n\n* The image above shows the desktop view of the teknik section. This section highlights my skills and the technologies I am proficient in, such as Django REST, React, and PostgreSQL.\n\n#### Mobile View\n\n* The image above shows the mobile view of the teknik section. The layout is optimized for smaller screens, ensuring that all information about my skills and technologies is easily accessible and readable.\n\n\n### Footer Section\n\nThe footer of my personal website includes my name and copyright information. It is built using **Django REST** and **React**.\n\n#### Desktop View\n\n* The image above shows the desktop view of the footer. It includes my name and copyright information, ensuring that visitors know who created the website.\n\n#### Mobile View\n\n* The image above shows the mobile view of the footer. The layout is optimized for smaller screens, ensuring that all information is easily accessible and readable.\n\n\n\n## Technical Stack\n- **Frontend**: React, React Router\n- **Deployment**: Frontend on netlify\n\n### Install Dependencies\n#### Frontend:\n```bash\ncd frontend\nnpm install\nnpm start\n```\n\n## Deployment \nThe frontend is deployed on **Netlify**\n\n## Deployment to Netlify\n\n### Preparations\n1. Create an account on [Netlify](https://www.netlify.com/).\n2. (Optional) Install the Netlify CLI for command-line deployment.\n\n### Create a Netlify App\n1. Log in to your Netlify account.\n2. Click on **\"Add new site\"** \u003e **\"Import an existing project\"** on the Netlify dashboard.\n3. Choose **GitHub** as your Git provider and authorize Netlify to access your GitHub repositories.\n4. Select the repository you want to deploy (e.g., `Webpage`).\n5. Set the branch to deploy (usually `main` or `master`).\n6. In the **Build settings**:\n    - Set the **Build Command** to `npm run build` (or `yarn build` if using Yarn).\n    - Set the **Publish Directory** to `build` (default for React apps).\n7. Click **\"Deploy site\"**.\n\n### Deploying to Netlify with GitHub\n1. Create a GitHub Repository:\n    - Go to [GitHub](https://github.com/) and log in to your account.\n    - Click on the \"+\" icon in the top right corner and select **\"New repository\"**.\n    - Name your repository `my-webpage-v1-react` and click **\"Create repository\"**.\n2. Push your project to the GitHub repository:\n    ```bash\n    git init\n    git remote add origin https://github.com/your-username/my-webpage-v1-react.git\n    git add .\n    git commit -m \"Initial commit\"\n    git branch -M main\n    git push -u origin main\n    ```\n3. Follow the steps in **Create a Netlify App** to deploy your site.\n\nYour site will now be live on Netlify, and any changes pushed to the selected branch will automatically trigger a redeployment.\n\n## Improvements\n- Add more information\n- Add a blog section\n\n## Installed Libraries\n\nThe following libraries are used in this project:\n\n### Dependencies\n\n```json\n{\n  \"name\": \"webbtemplate\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@testing-library/dom\": \"^10.4.0\",\n    \"@testing-library/jest-dom\": \"^6.6.3\",\n    \"@testing-library/react\": \"^16.3.0\",\n    \"@testing-library/user-event\": \"^13.5.0\",\n    \"font-awesome\": \"^4.7.0\",\n    \"react\": \"^19.1.0\",\n    \"react-dom\": \"^19.1.0\",\n    \"react-helmet\": \"^6.1.0\",\n    \"react-router-dom\": \"^7.5.0\",\n    \"react-router-hash-link\": \"^2.4.3\",\n    \"react-scripts\": \"5.0.1\",\n    \"web-vitals\": \"^2.1.4\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n      \"react-app/jest\"\n    ]\n  },\n  \"browserslist\": {\n    \"production\": [\n      \"\u003e0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n\n  ```\n## Problems with Deployment\n\n## Bugs\n\n### Known Issues\nThere are currently no known issues.\n\n### Resolved Issues\nThere are no resolved issues at this time.\n## Testing in React \n\n## Testing valditations \n\n### CSS Jigsaw Validation\nHere is a screenshot of the CSS validation test using the Jigsaw validator:\n\n\n\n### W3C Validator\n\nThe HTML of the website has been validated using the W3C Validator, ensuring that the code adheres to web standards and best practices.\n\n\n\n### W3C Validator\nThe HTML of the website has been validated using the W3C Validator, ensuring that the code adheres to web standards and best practices.\n\n\n### JSHint Validation\nThe JavaScript code has been checked using JSHint. There were 2 warnings, but no serious issues were found.\n\n\n\n\n## Lighthouse Test\n\n\nHere are all the Lighthouse results in Chrome.\n\n## Credit\nI have taken help from the following resources:\n\n- [Google Fonts](https://fonts.google.com/selection)\n- [CSS Scroll Behavior](https://www.w3schools.com/cssref/pr_scroll-behavior.php)\n- [Font Awesome Python Icons](https://fontawesome.com/search?q=python\u0026o=r\u0026ic=free)\n- [Intersection Observer API with ReactJS](https://blog.sachinchaurasiya.dev/simple-guide-to-using-intersection-observer-api-with-reactjs?utm_source=chatgpt.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimalexanderandersson%2Fdemo-webb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimalexanderandersson%2Fdemo-webb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimalexanderandersson%2Fdemo-webb/lists"}