Giter VIP home page Giter VIP logo

angel-folio-2's Introduction

Hello! I'm Angel!

I am a Developer and Engineer.

angel-folio-2's People

Contributors

angel1254mc avatar

Watchers

 avatar

angel-folio-2's Issues

Fix IFrame Breaking Post Edit Page

Overview

Right now, going into the new-post page and adding an iframe with a style property set to a string will break the entire page. This sucks because it's resulted in my page breaking a couple of times when I try to embed a spotify song and all those times I've lost my entire post 😭😭

Notes

It looks like the error is not being thrown by the MDX compiler, rather by a completely different part of the page that doesn't have an exception handler. A quick fix would be to wrap the whole page in a fallback with an error handler, but it would be better if we could avoid the error altogether.

Enhancement: Implement Redesign Work Experience Component

Overview

This ticket tracks the implementation of the Work Experience section of the Home page grid. This component shows my latest/most relevant work experience(s), and should link to the About page, but will instead link to my LinkedIn for now since I haven't modified that page yet/not even sure about what I want it to look like.

GOD WILLING clicking on the Down Arrow expands this box on larger screens, causing it to take over the entire "square" to show second most recent internship experience. On smaller displays, where the site is collapsed to one column, the work experience module should take up it's maximum height and other components (coffee and last starred repo) should show and not be hidden under the work experience component. I'll drop some figma mockups to show what I mean.

Unexpanded Version
image

Expanded Version
image

Notes

  • This version is just gonna be hardcoded frontend stuff because I have no work experience info in Supabase πŸ₯Ή
  • I'm too lazy to do the mobile version but you get what I mean.

Enhancement: Implement Last Starred Repo component

Overview

This ticket tracks the implementation of the Last Starred Repo component. This should just call the github api to grab the last thing I starred from my account. Doesn't need to do anything too crazy just fade in and look cool.

image

Notes

  • This is just meant to provide an entryway to my github stuff. Also I feel like there's some cool stuff I star that I sometimes forget to share so it would be nice to have it here πŸ‘οΈπŸ‘…πŸ‘οΈ

Enhancement: Implement Home Project Card Component

Overview

This ticket tracks the implementation of the Project Card component for the home page. This is going to be a bit different from the project card implementation present in the current home page (9/16/2023) cuz IMO what the project cards I made for the home page were pretty lazy and they don't really line up well with the style of the rest of the website πŸ‘€. I'm going to try and make this design a bit more consistent with th color palette/style of the rest of the website.

Below is an image showing what the component should roughly look like
image

Notes

Nothing πŸ‘οΈπŸ‘…πŸ‘οΈ

Implement SSD and Twitch Cards for Home Page

Overview

This Issue tracks the implementation of the SSD and Twitch cards on the new home page. SInce both of these are pretty simple to add I figured they could both be on the same PR. The actual dimensions of their containers are slightly different from the Figma design but it should still look p good with some small modifications

Here's a picture of the Figma design which I'll try to roughly follow
image

Notes

SSD logo in black goes hard asf.

Enhancement: Implement Latest Blog Post Component

Overview

This ticket tracks the implementation of the Blog Post component, which should display either the latest or most relevant (which is more than likely the latest) blog post. It doesn't have to follow the cool emoji background format that I've ben using for other blog posts, as there's not much space to work with, but I shoulld take another look at the design of the component to see if there's any way to make the blog posts on the home page more consistent with the list present in the /blog route.

Below is an image showing what the component should roughly look like
image

Notes

I think this and projects are more relevant than spotify / ssd / twitch and stuff like that so I'll have this pop up first on mobile viewports.

Enhancement: Implement Resume Page and replace About

Overview

This issue tracks the implementation of the Resume page, which will be replacing the About page! Right now the plan is to maybe figure out a better design for the about page in the future, and get rid of the currrent about page in exchange for the Resume design

Here's a picture of the Figma design which I'll try to roughly follow:
image

Notes

Enhancement: Implement Faro Web Vitals component

Overview

This issue tracks the implementation of the Faro Web Vitals component (my favorite out of the new stuff added to the home page). This shouldn't be too crazy to implement. There's two ideas I have.

  1. Best Case: Faro stores core web vitals somewhere in its object structure, or there is an api endpoint to obtain these locally. In that case all that needs to be done is to install Faro and check for these vitals
  2. Second Best Case: Faro doesn't store web vitals, but instead sends it over to gcloud app observability. These metrics get stored in our gcloud prometheus instance, so we'd need to ping prometheus to get the web vitals.

Here's a picture of the Figma design which I'll try to roughly follow
image

Notes

Shoutout to the Frontend App Observability team at Grafana πŸ”₯ and more importantly shoutout to CLOUD ONBOARDING πŸ”₯πŸ”₯πŸ”₯πŸ”₯

Enhancement: Implement Coffee Component

Overview

This ticket tracks the implementation of the Coffee Component present in the Figma diagram. The way it works is by pinging supabase for a timestamp on when I last drank/purchased coffee. Right now there's no easy way to do this, so I'll have to do so manually everytime I get a coffee πŸ₯²

Below is a Figma diagram roughly portraying what it should look like.
image

Notes

Mostly for funzies πŸ‘οΈπŸ‘…πŸ‘οΈ I don't think there's any value in recruiters knowing this lol.

Enhancement: Implement Redesign About Me Component

Overview

This ticket tracks the implementation of the About Me component in the Home Page. The component has a short introduction to me, as well as links to a couple of my social media accounts. One tentative thing that I haven't decided on yet is whether I should add a "flip" button on the top right that flips the card and displays some random picture I choose depending how I'm feeling πŸ‘οΈπŸ‘…πŸ‘οΈ.

image

Notes

"Buenas" has a cool ring to it. Osea cuando lo dices casualmente hablando en espaΓ±ol uno no lo piensa, pero cuando lo dices despues de haber hablado ingles por un tiempo como que se escucha bien lol.

Enhancement: Implement Portfolio Home Page redesign

Overview

This issue tracks the implementation of the Home page redesign I've been cooking up over the last two days. It won't be anything crazy, but I felt like I could do a little bit better with my home page. It might not be the best idea recruiter-wise, but I really wantd to make my frontpage almost like a pinterest board/hub that speaks just as much to who I am as a person as it does to who I am as a developer. This is the design Idea I have rn

image

The main elements would be:

  • About Me component w/ most relevant external links
  • Most Recent Work experience component, clicking navigates the user to About page, which would include full work history (future PR)
  • Coffee and Last Starred Repo components, mainly for fun πŸ‘οΈπŸ‘„πŸ‘οΈ
  • Spotify currently listening component also for fun
  • "Peep the Blog" component with latest blog post + link to blog section
  • "Peep the Projects" component with most relevant projects + link to projects section
  • "Peep the Rest" for anything else (SSD Discord, Twitch, and a little Faro component I'd love to add that shows key site metrics.
  • Same footer section that the site currently has at the bottom of all this.

Checklist

I'm going to try and break this down into a set of tasks, starting with building the overall flex layout with empty components, to implementing each component individually.

Notes

Any PR notes will go here.

Enhancement: Implement Spotify Currently Listening Component

Overview

This ticket tracks the implementation of the Spotify "Currently Listening" component. Most of the code for this is already done, as I have something that is pretty much identical to this in the current version of the website! The main challenge is changing the styles a little bit to make it fit in the column space, and making sure that the component is responsive

Below is an image showing what the component should roughly look like
image

Notes

Mainly for fun but I honestly think its a really cool component to have, even if its not all that complicated to implement.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.