📋Build Steps

Basic building steps to easily build your CSS text portrait.

Let's build your CSS text portrait and showcase it to the world! 🥰

Instant Build Steps

1. Rename your image into bg.jpg and make sure it is in JPG/JPEG format.

2. Navigate to src/img and upload your image, just replace the existing image.

3. Next, open config.json file by just clicking it, an editor will open.

4. Edit the contents of config.json file to match your needs. For the object name this is the name of your portrait, it can be a name of your subject. For the object text this is the text you want to see in the portrait. It can be a lyrics, a passage from a book, or a sweet message to your subject or loved one.

5. Now let's edit the visual appearance of your portrait. Navigate to src/scss and open the file _vars.scss to edit the visual settings. It is up to you to use the default settings or customize it.

6. Once you are satisfied with the configurations and visual settings, then look in the command-line interface and hover your mouse to the https://localhost:1234 press ctrl + left click to open it to a new tab. You'll see your builds in real-time.

Manual Build Steps

1. Inside the builder's directory, navigate to src/img and place your image. Rename it into bg.jpg which is required. 🚨 Replace any image inside it's fine.

2. Next, open config.json file using code editor like VS Code.

3. Edit the contents of config.json file to match your needs. For the object name this is the name of your portrait, it can be a name of your subject. For the object text this is the text you want to see in the portrait. It can be a lyrics, a passage from a book, or a sweet message to your subject or loved one.

4. Now let's edit the visual appreance of your portrait. Navigate to src/scss and open the file _vars.scss to edit the visual settings. It is up to you to use the default settings or customize it.

5. Once you are satisfied with the configurations and visual settings, then let's build it! Type yarn build to start the building process.

6. Lastly, type yarn serve to preview your build. A local server will be open at port 1234. Copy and paste that to your favorite browser and you're done!

For further customization, proceed to the Customization section. 😁