mirror of
				https://github.com/KevinMidboe/immich.git
				synced 2025-10-29 17:40:28 +00:00 
			
		
		
		
	chore: Update repo readme (#927)
This commit is contained in:
		
							
								
								
									
										297
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										297
									
								
								README.md
									
									
									
									
									
								
							| @@ -1,36 +1,47 @@ | |||||||
| <h1 align="center"> Immich </h1> |  | ||||||
|  <p align="center"> <b>High performance self-hosted photo and video backup solution.</b> </p> |  | ||||||
| <p align="center">  | <p align="center">  | ||||||
|   <img src="design/feature-panel.png"  title="Immich Logo"> |   <br/>   | ||||||
|  |   <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-green.svg?color=3F51B5&style=for-the-badge&label=License&logoColor=000000&labelColor=ececec" alt="License: MIT"></a> | ||||||
|  |   <a href="https://discord.gg/D8JsnBEuKb"> | ||||||
|  |     <img src="https://img.shields.io/discord/979116623879368755.svg?label=Discord&logo=Discord&style=for-the-badge&logoColor=000000&labelColor=ececec" atl="Discord"/> | ||||||
|  |   </a> | ||||||
|  |   <br/>   | ||||||
|  |   <br/>    | ||||||
| </p> | </p> | ||||||
|  |  | ||||||
| <p align="center"> | <p align="center"> | ||||||
|   <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-green.svg?color=3F51B5&style=for-the-badge&label=License&logoColor=000000&labelColor=ececec" alt="License: MIT"></a> | <img src="design/immich-logo.svg" width="150" title="Login With Custom URL"> | ||||||
|   <a href="https://github.com/alextran1502/immich"><img src="https://img.shields.io/github/stars/alextran1502/immich.svg?style=for-the-badge&logo=github&color=3F51B5&label=Stars&logoColor=000000&labelColor=ececec" alt="Star on Github"></a> |  | ||||||
|   <a href="https://immichci.little-home.net/viewType.html?buildTypeId=Immich_BuildAndroidAndGetArtifact&guest=1"> |  | ||||||
|     <img src="https://img.shields.io/teamcity/http/immichci.little-home.net/s/Immich_BuildAndroidAndGetArtifact.svg?style=for-the-badge&label=Android&logo=teamcity&logoColor=000000&labelColor=ececec" alt="Android Build"/> |  | ||||||
|   </a> |  | ||||||
|   <a href="https://immichci.little-home.net/viewType.html?buildTypeId=Immich_BuildAndPublishIOSToTestFlight&guest=1"> |  | ||||||
|     <img src="https://img.shields.io/teamcity/http/immichci.little-home.net/s/Immich_BuildAndPublishIOSToTestFlight.svg?style=for-the-badge&label=iOS&logo=teamcity&logoColor=000000&labelColor=ececec" alt="iOS Build"/> |  | ||||||
|   </a> |  | ||||||
|   <a href="https://actions-badge.atrox.dev/alextran1502/immich/goto?ref=main"> |  | ||||||
|     <img alt="Build Status" src="https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Falextran1502%2Fimmich%2Fbadge%3Fref%3Dmain&style=for-the-badge&label=Github Action&logo=github&labelColor=ececec&logoColor=000000" /> |  | ||||||
|   </a> |  | ||||||
|   <a href="https://discord.gg/D8JsnBEuKb"> |  | ||||||
|     <img src="https://img.shields.io/discord/979116623879368755.svg?label=Immich%20Discord&logo=Discord&style=for-the-badge&logoColor=000000&labelColor=ececec" atl="Immich Discord"/> |  | ||||||
|   </a> |  | ||||||
|   <br/>   |  | ||||||
|   <br/>    |  | ||||||
| </p> | </p> | ||||||
|  | <h3 align="center">Immich - High performance self-hosted photo and video backup solution</h3> | ||||||
|  | <br/> | ||||||
|  | <a href="https://docs.immich.app"> | ||||||
|  | <img src="design/immich-screenshots.png" title="Main Screenshot"> | ||||||
|  | </a> | ||||||
|  | <br/> | ||||||
|  |  | ||||||
|  | ## Disclaimer | ||||||
|  |  | ||||||
|  | - ⚠️ The project is under **very active** development. | ||||||
|  | - ⚠️ Expect bugs and breaking changes. | ||||||
|  | - ⚠️ **Do not use as a single source to store of your photos and videos!** | ||||||
|  |  | ||||||
|  | ## Content | ||||||
|  |  | ||||||
|  | - [Official Documentation](https://docs.immich.app/docs/overview/introduction) | ||||||
|  | - [Demo](#demo) | ||||||
|  | - [Features](#features) | ||||||
|  | - [Introduction](https://docs.immich.app/docs/overview/introduction) | ||||||
|  | - [Installation](https://docs.immich.app/docs/installation/requirements) | ||||||
|  | - [Contribution Guidelines](https://docs.immich.app/docs/contribution-guidelines) | ||||||
|  | - [Support The Project](#support-the-project) | ||||||
|  | - [Known Issues](#known-issues) | ||||||
|  |  | ||||||
| ## Demo | ## Demo | ||||||
|  |  | ||||||
| You can access the web demo at https://demo.immich.app | You can access the web demo at https://demo.immich.app | ||||||
|  |  | ||||||
| For the mobile app, you can use https://demo.immich.app/api for the `Server Endpoint URL` | For the mobile app, you can use `https://demo.immich.app/api` for the `Server Endpoint URL` | ||||||
|  |  | ||||||
|  | ```bash title="Demo Credential" | ||||||
| ``` |  | ||||||
| The credential | The credential | ||||||
| email: demo@immich.app | email: demo@immich.app | ||||||
| password: demo | password: demo | ||||||
| @@ -40,227 +51,43 @@ password: demo | |||||||
| Spec: Free-tier Oracle VM - Amsterdam - 2.4Ghz quad-core ARM64 CPU, 24GB RAM | Spec: Free-tier Oracle VM - Amsterdam - 2.4Ghz quad-core ARM64 CPU, 24GB RAM | ||||||
| ``` | ``` | ||||||
|  |  | ||||||
| ## Content |  | ||||||
| - [Features](#features) |  | ||||||
| - [Screenshots](#screenshots) |  | ||||||
| - [Installation](#installation) |  | ||||||
| - [Update](#update) |  | ||||||
| - [Mobile App](#mobile-app) |  | ||||||
| - [App Beta Invitation links](#App-Beta-release-channel) |  | ||||||
| - [Development](#development) |  | ||||||
| - [Support](#support) |  | ||||||
| - [Known Issues](#known-issues) |  | ||||||
|  |  | ||||||
| # Features | # Features | ||||||
|  |  | ||||||
| > ⚠️ WARNING: **NOT READY FOR PRODUCTION! DO NOT USE TO STORE YOUR ASSETS**. This project is under heavy development. There will be continuous functions, features and api changes. |  | ||||||
|  |  | ||||||
| | Features                                    | Mobile  | Web | | | Features                                    | Mobile  | Web | | ||||||
| | - | - | - |  | | ------------------------------------------- | ------- | --- | | ||||||
| | Upload and view videos and photos | Yes | Yes  | | Upload and view videos and photos           | Yes     | Yes | | ||||||
| | Auto backup when the app is opened | Yes | N/A | | Auto backup when the app is opened          | Yes     | N/A | | ||||||
| | Selective album(s) for backup | Yes | N/A | | Selective album(s) for backup               | Yes     | N/A | | ||||||
| | Download photos and videos to local device | Yes | Yes | | Download photos and videos to local device  | Yes     | Yes | | ||||||
| | Multi-user support | Yes | Yes | | Multi-user support                          | Yes     | Yes | | ||||||
| | Album | Yes | Yes | | Album                                       | Yes     | Yes | | ||||||
| | Shared Albums | Yes | Yes | | Shared Albums                               | Yes     | Yes | | ||||||
| | Quick navigation with draggable scrollbar | Yes | Yes | | Quick navigation with draggable scrollbar   | Yes     | Yes | | ||||||
| | Support RAW (HEIC, HEIF, DNG, Apple ProRaw) | Yes | Yes | | Support RAW (HEIC, HEIF, DNG, Apple ProRaw) | Yes     | Yes | | ||||||
| | Metadata view (EXIF, map) | Yes | Yes | | Metadata view (EXIF, map)                   | Yes     | Yes | | ||||||
| | Search by metadata, objects and image tags | Yes | No | | Search by metadata, objects and image tags  | Yes     | No  | | ||||||
| | Administrative functions (user management) | N/A | Yes | | Administrative functions (user management)  | N/A     | Yes | | ||||||
| | Background backup | Android | N/A | | Background backup                           | Android | N/A | | ||||||
| | Virtual scroll | N/A | Yes | | Virtual scroll                              | N/A     | Yes | | ||||||
|  |  | ||||||
|  | # Support the project | ||||||
|   <br/>   |  | ||||||
|  | I've committed to this project, and I will not stop. I will keep updating the docs, adding new features, and fixing bugs. But I can't do it alone. So I need your help to give me additional motivation to keep going. | ||||||
| # Screenshots |  | ||||||
|  | As our hosts in the [selfhosted.show - In the episode 'The-organization-must-not-be-name is a Hostile Actor'](https://selfhosted.show/79?t=1418) said, this is a massive undertaking of what the team and I are doing. And I would love to someday be able to do this full-time, and I am asking for your help to make that happen. | ||||||
| ### Mobile |  | ||||||
| | | | | | | | If you feel like this is the right cause and the app is something you are seeing yourself using for a long time, please consider supporting the project with the option below. | ||||||
| | - | - | - | - | - | |  | ||||||
| | <img src="design/login-screen.png" width="150" title="Login With Custom URL"> <p align="center"> Login with custom URL </p> | <img src="design/backup-screen.png" width="150" title="Backup Setting Info"> <p align="center"> Backup Settings </p> | <img src="design/selective-backup-screen.png" width="150" title="Backup Setting Info"> <p align="center"> Backup selection </p> | <img src="design/home-screen.jpeg" width="150" title="Home Screen"> <p align="center"> Home Screen </p> | <img src="design/search-screen.jpeg" width="150" title="Curated Search Info"> <p align="center"> Curated search </p> | | ## Donation | ||||||
| | <img src="design/shared-albums.png" width="150" title="Shared Albums"> <p align="center"> Shared albums </p>  |  <img src="design/nsc6.png" width="150" title="EXIF Info"> <p align="center"> EXIF info </p>  | <img src="https://media.giphy.com/media/y8ZeaAigGmNvlSoKhU/giphy.gif" width="150" title="Loading ~4000 images/videos"> <p align="center"> Loading ~4000 images/videos </p>  | |  | ||||||
|  | - [Monthly donation](https://github.com/sponsors/alextran1502) via GitHub Sponsors | ||||||
| ### Web | - [One-time donation](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502) via Github Sponsors | ||||||
| | Home Dashboard | Image view | |  | ||||||
| | - | - | |  | ||||||
| |<img src="design/web-home.jpeg"  width="100%" title="Home Dashboard"> | <img src="design/web-detail.jpeg" width="100%" title="Detail">| |  | ||||||
|  |  | ||||||
|  |  | ||||||
|   <br/>   |  | ||||||
|  |  | ||||||
| # Project Details |  | ||||||
| ## 💾 System Requirements |  | ||||||
|  |  | ||||||
| - **OS**: Preferred unix-based operating system (Ubuntu, Debian, MacOS...etc).  |  | ||||||
|  |  | ||||||
| - **RAM**: At least 2GB, preferred 4GB. |  | ||||||
|  |  | ||||||
| - **Core**: At least 2 cores, preferred 4 cores. |  | ||||||
|  |  | ||||||
| ## 🔩 Technology Stack |  | ||||||
|  |  | ||||||
| There are several services that compose Immich: |  | ||||||
|  |  | ||||||
| 1. **NestJs** - Backend of the application |  | ||||||
| 2. **SvelteKit** - Web frontend of the application |  | ||||||
| 3. **PostgreSQL** - Main database of the application |  | ||||||
| 4. **Redis** - For sharing websocket instance between docker instances and background tasks message queue. |  | ||||||
| 5. **Nginx** - Load balancing and optimized file uploading. |  | ||||||
| 6. **TensorFlow** - Object Detection (COCO SSD) and Image Classification (ImageNet). |  | ||||||
|  |  | ||||||
|  |  | ||||||
|   <br/>   |  | ||||||
|  |  | ||||||
| # Installation |  | ||||||
|  |  | ||||||
| NOTE: When using a reverse proxy in front of Immich (such as NGINX), the reverse proxy might require extra configuration to allow large files to be uploaded (such as `client_max_body_size` in the case of NGINX). |  | ||||||
| ## Testing one-step installation (not recommended for production) |  | ||||||
|  |  | ||||||
| > ⚠️ *This installation method is for evaluating Immich before further customization to meet the users' needs.* |  | ||||||
|  |  | ||||||
| *Applicable operating systems: Ubuntu, Debian, MacOS* |  | ||||||
|  |  | ||||||
| - In the shell, from the directory of your choice, run the following command: |  | ||||||
|  |  | ||||||
| ```bash |  | ||||||
| curl -o- https://raw.githubusercontent.com/immich-app/immich/main/install.sh | bash |  | ||||||
| ``` |  | ||||||
|  |  | ||||||
| This script will download the `docker-compose.yml` file and the `.env` file, then populate the necessary information, and finally run the `docker-compose up` or `docker compose up` (based on your docker's version) command.  |  | ||||||
|  |  | ||||||
| The web application will be available at `http://<machine-ip-address>:2283`, and the server URL for the mobile app will be `http://<machine-ip-address>:2283/api`. |  | ||||||
|  |  | ||||||
| The directory which is used to store the backup file is `./immich-app/immich-data`. |  | ||||||
|  |  | ||||||
|  |  | ||||||
|   <br/>   |  | ||||||
|  |  | ||||||
| ## Custom installation (Recommended) |  | ||||||
|  |  | ||||||
| ### Step 1 - Download necessary files |  | ||||||
|  |  | ||||||
| - Create a directory called `immich-app` and cd into it. |  | ||||||
|  |  | ||||||
| - Get `docker-compose.yml` |  | ||||||
|  |  | ||||||
| ```bash |  | ||||||
| wget https://raw.githubusercontent.com/immich-app/immich/main/docker/docker-compose.yml |  | ||||||
| ``` |  | ||||||
|  |  | ||||||
| - Get `.env` |  | ||||||
|  |  | ||||||
| ```bash |  | ||||||
| wget -O .env https://raw.githubusercontent.com/immich-app/immich/main/docker/.env.example |  | ||||||
| ``` |  | ||||||
|  |  | ||||||
| ### Step 2 - Populate .env file with custom information |  | ||||||
|  |  | ||||||
| <a href="https://github.com/immich-app/immich/blob/main/docker/.env.example" target="_blank"><b>See the example <code>.env</code> file</b></a> |  | ||||||
|  |  | ||||||
| * Populate custom database information if necessary. |  | ||||||
| * Populate `UPLOAD_LOCATION` as prefered location for storing backup assets. |  | ||||||
| * Populate a secret value for `JWT_SECRET`, you can use this command: `openssl rand -base64 128` |  | ||||||
|  |  | ||||||
| ### Step 3 - Start the containers |  | ||||||
|  |  | ||||||
| - Run `docker-compose up` or `docker compose up` (based on your docker's version) |  | ||||||
|  |  | ||||||
| ### Step 4 - Register admin user |  | ||||||
|  |  | ||||||
| - Navigate to the web at `http://<machine-ip-address>:2283` and follow the prompts to register admin user.  |  | ||||||
| <p align="center"> |  | ||||||
|   <img src="design/admin-registration-form.png" width="300" title="Admin Registration"> |  | ||||||
| </p> |  | ||||||
|  |  | ||||||
| - You can add and manage users from the administration page.  |  | ||||||
| <p align="center"> |  | ||||||
|  <img src="design/admin-interface.png" width="500" title="Admin User Management"> |  | ||||||
| </p> |  | ||||||
|  |  | ||||||
| ### Step 5 - Access the mobile app |  | ||||||
|  |  | ||||||
| - Login the mobile app with the server endpoint URL at `http://<machine-ip-address>:2283/api` |  | ||||||
| <p align="center"> |  | ||||||
|   <img src="design/login-screen.jpeg" width="250" title="Example login screen"> |  | ||||||
| </p>  |  | ||||||
|  |  | ||||||
|   <br/>   |  | ||||||
|  |  | ||||||
| ## Update |  | ||||||
|  |  | ||||||
| If you have installed, you can update the application by navigate to the directory that contains the `docker-compose.yml` file and run the following command: |  | ||||||
|  |  | ||||||
| ```bash |  | ||||||
| docker-compose pull && docker-compose up -d |  | ||||||
| ``` |  | ||||||
| # Unraid Installation |  | ||||||
|  |  | ||||||
| Please follow this [article](https://mfaz.dev/posts/immich-unraid/) for a tutorial on how to install Immich on Unraid |  | ||||||
|  |  | ||||||
|  |  | ||||||
| # Mobile app |  | ||||||
|  |  | ||||||
| | F-Droid | Google Play | iOS | |  | ||||||
| | - | - | - | |  | ||||||
| | <a href="https://f-droid.org/packages/app.alextran.immich"><img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png" alt="Get it on F-Droid" height="80"></a> | <p align="left"> <a href="https://play.google.com/store/apps/details?id=app.alextran.immich"><img src="design/google-play-qr-code.png" width="200" title="Google Play Store"></a> <p/> | <p align="left"> <a href="https://apps.apple.com/us/app/immich/id1613945652"><img src="design/ios-qr-code.png" width="200" title="Apple App Store"></a> <p/> | |  | ||||||
|  |  | ||||||
| > *The Play/App Store version might be lagging behind the latest release due to their review process.* |  | ||||||
|  |  | ||||||
| # App Beta release channel |  | ||||||
|  |  | ||||||
| You can opt-in to join app beta release channel by following the links below: |  | ||||||
| * Android: Invitation link from [web](https://play.google.com/store/apps/details?id=app.alextran.immich) or from [mobile](https://play.google.com/store/apps/details?id=app.alextran.immich) |  | ||||||
| * iOS: [TestFlight invitation link](https://testflight.apple.com/join/1vYsAa8P) |  | ||||||
|   <br/>   |  | ||||||
|  |  | ||||||
| # Development |  | ||||||
|  |  | ||||||
| The development environment can be started from the root of the project after populating the `.env` file with the command: |  | ||||||
|  |  | ||||||
| ```bash |  | ||||||
| make dev # required Makefile installed on the system. |  | ||||||
| ```  |  | ||||||
|  |  | ||||||
| All servers and web container are hot reload for quick feedback loop. |  | ||||||
|  |  | ||||||
| ## Note for developers |  | ||||||
| ### 1 - OpenAPI |  | ||||||
| OpenAPI is used to generate the client (Typescript, Dart) SDK. `openapi-generator-cli` can be installed [here](https://openapi-generator.tech/docs/installation/). When you add a new or modify an existing endpoint, you must run the generate command below to update the client SDK. |  | ||||||
|  |  | ||||||
| ```bash |  | ||||||
| npm run api:generate # Run from server directory |  | ||||||
| ``` |  | ||||||
| You can find the generated client SDK in the [`web/src/api`](web/src/api) for Typescript SDK and [`mobile/openapi`](mobile/openapi) for Dart SDK. |  | ||||||
|  |  | ||||||
|  |  | ||||||
|   <br/>   |  | ||||||
|  |  | ||||||
| # Support |  | ||||||
|  |  | ||||||
| If you like the app, find it helpful, and want to support me to offset the cost of publishing to AppStores, you can sponsor the project with [**one time**](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502) or monthly donation from [**Github Sponsor**](https://github.com/sponsors/alextran1502). |  | ||||||
|  |  | ||||||
| You can also donate using crypto currency with the following addresses: |  | ||||||
|  |  | ||||||
| <p align="" style="display: flex; place-items: center; gap: 15px" title="Bitcoin(BTC)"><img src="design/bitcoin.png" width="25" title="Bitcoin"> <b>Bitcoin</b>: <code>1FvEp6P6NM8EZEkpGUFAN2LqJ1gxusNxZX</code></p> |  | ||||||
|  |  | ||||||
| <p align="" style="display: flex; place-items: center; gap: 15px" title="Cardano(ADA)"> <img src="design/cardano.png" width="30" title="Cardano"> <b>Cardano</b>: <code>addr1qyy567vqhqrr3p7vpszr5p264gw89sqcwts2z8wqy4yek87cdmy79zazyjp7tmwhkluhk3krvslkzfvg0h43tytp3f5q49nycc</code> </p> |  | ||||||
|  |  | ||||||
|  |  | ||||||
| This is also a meaningful way to give me motivation and encouragement to continue working on the app. |  | ||||||
|  |  | ||||||
| Cheers! 🎉 |  | ||||||
|  |  | ||||||
|  |  | ||||||
|   <br/>   |  | ||||||
|  |  | ||||||
| # Known Issues | # Known Issues | ||||||
|  |  | ||||||
| ## TensorFlow Build Issue | ## TensorFlow Build Issue | ||||||
|  |  | ||||||
| *This is a known issue for incorrect Proxmox setup* | _This is a known issue for incorrect Proxmox setup_ | ||||||
|  |  | ||||||
| TensorFlow doesn't run with older CPU architecture, it requires a CPU with AVX and AVX2 instruction set. If you encounter the error `illegal instruction core dump` when running the docker-compose command above, check for your CPU flags with the command and make sure you see `AVX` and `AVX2`: | TensorFlow doesn't run with older CPU architecture, it requires a CPU with AVX and AVX2 instruction set. If you encounter the error `illegal instruction core dump` when running the docker-compose command above, check for your CPU flags with the command and make sure you see `AVX` and `AVX2`: | ||||||
|  |  | ||||||
|   | |||||||
							
								
								
									
										
											BIN
										
									
								
								design/immich-screenshots.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								design/immich-screenshots.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 1.5 MiB | 
| @@ -6,9 +6,9 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula"); | |||||||
|  |  | ||||||
| /** @type {import('@docusaurus/types').Config} */ | /** @type {import('@docusaurus/types').Config} */ | ||||||
| const config = { | const config = { | ||||||
|   title: "Immich Documentation", |   title: "Immich", | ||||||
|   tagline: |   tagline: | ||||||
|     "Self-hosted photo and video backup solution directly from your mobile phone", |     "High performance self-hosted photo and video backup solution directly from your mobile phone", | ||||||
|   url: "https://documentation.immich.app", |   url: "https://documentation.immich.app", | ||||||
|   baseUrl: "/", |   baseUrl: "/", | ||||||
|   onBrokenLinks: "throw", |   onBrokenLinks: "throw", | ||||||
|   | |||||||
| @@ -4,10 +4,10 @@ | |||||||
|  * work well for content-centric websites. |  * work well for content-centric websites. | ||||||
|  */ |  */ | ||||||
|  |  | ||||||
| @import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"); |  | ||||||
| @import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"); | @import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"); | ||||||
|  | @import url("https://fonts.googleapis.com/css2?family=Snowburst+One&display=swap"); | ||||||
|  |  | ||||||
| html { | html { | ||||||
|   /* font-family: "Work Sans", sans-serif; */ |  | ||||||
|   font-family: "Overpass", sans-serif; |   font-family: "Overpass", sans-serif; | ||||||
| } | } | ||||||
|  |  | ||||||
|   | |||||||
| @@ -5,10 +5,13 @@ | |||||||
|  |  | ||||||
| .heroBanner { | .heroBanner { | ||||||
|   padding: 4rem 0; |   padding: 4rem 0; | ||||||
|   text-align: center; |  | ||||||
|   position: relative; |   position: relative; | ||||||
|   overflow: hidden; |   overflow: hidden; | ||||||
|   height: 40rem; |   text-align: center; | ||||||
|  |   background: #606c88; | ||||||
|  |   background: -webkit-linear-gradient(to top, #4e5362, #606c88); | ||||||
|  |   background: linear-gradient(to top, #4e5362, #606c88); | ||||||
|  |   color: whitesmoke; | ||||||
| } | } | ||||||
|  |  | ||||||
| @media screen and (max-width: 996px) { | @media screen and (max-width: 996px) { | ||||||
| @@ -22,3 +25,32 @@ | |||||||
|   align-items: center; |   align-items: center; | ||||||
|   justify-content: center; |   justify-content: center; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | .buttonsRow { | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   justify-content: center; | ||||||
|  |   flex-wrap: wrap; | ||||||
|  |   margin-bottom: 4rem; | ||||||
|  |   gap: 1rem; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .installButton { | ||||||
|  |   background-color: #adcbfa; | ||||||
|  |   color: #000000; | ||||||
|  |   border-radius: 50px; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .installButton:hover { | ||||||
|  |   color: #000000; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .introButton { | ||||||
|  |   background-color: #e6ebf5; | ||||||
|  |   color: #000000; | ||||||
|  |   border-radius: 50px; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .introButton:hover { | ||||||
|  |   color: #000000; | ||||||
|  | } | ||||||
|   | |||||||
| @@ -12,16 +12,37 @@ function HomepageHeader() { | |||||||
|   return ( |   return ( | ||||||
|     <header className={clsx("hero hero--primary", styles.heroBanner)}> |     <header className={clsx("hero hero--primary", styles.heroBanner)}> | ||||||
|       <div className="container"> |       <div className="container"> | ||||||
|         <h1 className="hero__title">{siteConfig.title}</h1> |         <h1 | ||||||
|  |           className="hero__title" | ||||||
|  |           style={{ | ||||||
|  |             fontFamily: "Snowburst One", | ||||||
|  |             color: "#adcbfa", | ||||||
|  |           }} | ||||||
|  |         > | ||||||
|  |           IMMICH | ||||||
|  |         </h1> | ||||||
|         <p className="hero__subtitle">{siteConfig.tagline}</p> |         <p className="hero__subtitle">{siteConfig.tagline}</p> | ||||||
|  |         <div className={styles.buttonsRow}> | ||||||
|           <div className={styles.buttons}> |           <div className={styles.buttons}> | ||||||
|             <Link |             <Link | ||||||
|             className="button button--secondary button--lg" |               className={clsx("button button--lg", styles.introButton)} | ||||||
|             to="docs/installation/requirements" |               to="docs/overview/introduction" | ||||||
|             > |             > | ||||||
|             Getting Started |               Introduction | ||||||
|             </Link> |             </Link> | ||||||
|           </div> |           </div> | ||||||
|  |  | ||||||
|  |           <div className={styles.buttons}> | ||||||
|  |             <Link | ||||||
|  |               className={clsx("button button--lg", styles.installButton)} | ||||||
|  |               to="docs/installation/requirements" | ||||||
|  |             > | ||||||
|  |               Installation | ||||||
|  |             </Link> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |  | ||||||
|  |         <img src="/img/immich-screenshots.png" alt="logo" /> | ||||||
|       </div> |       </div> | ||||||
|     </header> |     </header> | ||||||
|   ); |   ); | ||||||
| @@ -31,13 +52,11 @@ export default function Home(): JSX.Element { | |||||||
|   const { siteConfig } = useDocusaurusContext(); |   const { siteConfig } = useDocusaurusContext(); | ||||||
|   return ( |   return ( | ||||||
|     <Layout |     <Layout | ||||||
|       title={`${siteConfig.title}`} |       title={`Home`} | ||||||
|       description="Description will go into a meta tag in <head />" |       description="immich Self-hosted photo and video backup solution directly from your mobile phone " | ||||||
|     > |     > | ||||||
|       <HomepageHeader /> |       <HomepageHeader /> | ||||||
|       <main> |       <main>{/* <HomepageFeatures /> */}</main> | ||||||
|         <HomepageFeatures /> |  | ||||||
|       </main> |  | ||||||
|     </Layout> |     </Layout> | ||||||
|   ); |   ); | ||||||
| } | } | ||||||
|   | |||||||
							
								
								
									
										
											BIN
										
									
								
								docs/static/img/immich-screenshots.png
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								docs/static/img/immich-screenshots.png
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 1.6 MiB | 
		Reference in New Issue
	
	Block a user