Forem: Leví Arista

My Dev Corner 💻

Leví Arista — Thu, 12 May 2022 23:57:27 +0000

Overview of My Submission

Inspired by sites like LifeAt and the awesome dev radios out there like x-Team Radio and freeCodeCamp Radio I tried to create a special virtual space for developers with useful widgets for everyday use.
And this is My Dev Corner.

Submission Category:

Wacky Wildcards

Link to Code

leviarista / my.dev.corner

The dev's favorite corner.

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from…

View on GitHub

Additional Resources / Info

Tech Stack

These are the technologies used

I am using the Storage Appwrite service to store the backgrounds in a Digital Ocean droplet. I was planning to use the Account service too but ran out of time.

Features

Change backgrounds (color, image or video)
Text Widget
Sticker Widget
Analog Clock Widget
DevTunes FM Radio Widget

At the moment it has a few widgets but I hope to add many more. I hope you like it! and if you think so, I look forward to your support with ideas, suggestions, collaborations, etc.

Screenshots

A simple but nice header generator for your Github profile

Leví Arista — Tue, 08 Mar 2022 22:04:16 +0000

Overview of My Submission

"Github Profile Header Generator" is a simple but nice header image generator for your Github profile Readme.

Github Profile Header Generator

Submission Category:

Wacky Wildcards

Link to Code on GitHub

leviarista / github-profile-header-generator

A header image generator for your Github profile Readme

Github Profile Header Generator

What is it?

A simple but nice header image generator for your Github profile Readme. Website Link.

How to use it?

Create a nice github header image.
Create your GitHub profile README following this guide.
Upload your header to your profile repo.
Add this line to your README:
```
![Header](./[Your header image])
```

Examples

Features list

Edit title and subtitle texts.
Choose colors for text, background and borders.
Set dimensions and padding.
Align text and decorations.
Change fonts.
Set the size and radius of the border.
Set background pattern image, its color, size and opacity.
Add decorations.
Upload your own decoration, octocat or profile pic.
Toogle Github dark and light mode.
Download image as png.
Randomize between predefined themes.

Tech used

Get started

npm run dev- starts dev server
npm run build - builds for production
…

View on GitHub

Additional Resources / Info

Vite was used to build this tool.
The styles are set with VanillaJS and html2canvas is used to render the code as image.
The webapp was deployed with Azure Static Web Apps.
The deployment setup went very smoothly with the Azure Static Web Apps extension for Visual Studio Code.

Examples of header images

Features list

Edit title and subtitle texts.
Choose colors for text, background and borders.
Set dimensions and padding.
Align text and decorations.
Change fonts.
Set the size and radius of the border.
Set background pattern image, its color, size and opacity.
Add decorations.
Toogle Github dark and light mode.
Download image as png.

Screenshots

Main tools:

Background tools:

Decorations tools:

Github Dark/Light mode:

** I invite you to contribute to this project with ideas/code contributions/etc 😊.

SPECIESS: CSS artworks of endangered species 🌎⚠️🐼

Leví Arista — Fri, 14 Jan 2022 00:30:48 +0000

Overview of My Submission

Unfortunately today there are many species in danger of extinction or disappearing.

SPECIESS is a space that aims to help a little to raise awareness about this problem as a website to create, explore and share artworks with CSS on endangered species taken from the IUCN Red List

You can check it at: speciess.vercel.app

Submission Category:

Choose Your Own Adventure

Link to Code

leviarista / speciess

CSS art of endangered species

SPECIESS

This project is born as an initiative for the Atlas MongoDB & Dev.to Hackaton. 😄

What is it?

SPECIESS is an space where to create, explore and share CSS art about endangered species (from the IUCN Red List) and so spread raise awareness about it.

Getting Started

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the project.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

View on GitHub

Additional Resources / Info

This project is built using Next.js and deployed with Vercel.
I am using the powerful MongoDB Atlas.
This DB is storing information about 142 000 species from the IUCN Red List.
It's my first time using MongoDB and I found it quite easy to get started with, even with a lot of documentation, but understandable.
I am using the MongoDB Data API to store some info.
It was very interesting and comfortable to use MongoDB Charts in this project too.

Here are some screenshots of the project:

PS: I really liked how powerful MongoDB Atlas is, my only observation would be that it would be great to add more examples with more use cases for Node.js 😉