I'm Ramon Arana, welcome.

Mind if I borrow 3 minutes of your life?

/gatsby-seeklogo.com.svg
/Nextjs-logo.svg
/firebase-logo.svg
/Tailwind_CSS_logo.svg
/sass-logo.svg
/GraphQL_Logo.svg
/reactquery-logo.png
/chart.svg
/React.svg

As a front-end developer, I'm a perfectionist.

I specialize in building responsive, intuitive user interfaces that prioritize usability and accessibility.

Thats why I'd like to work with someone that really pushes me to my limits, because I'm the type of person who is out there just for the challenges ahead.

Myself

I am a self-taught React developer based in Buenos Aires. I'm an all-or-nothing computer geek. My passion goes beyond being a developer.

myself

I ran a small bussiness creating websites on Wordpress for about 8 months, just before the pandemic hit.

That's where my passion for creating digital experiences was born. That's where I started learning the way of the web (js).

Today, with a year and a half of experience under my belt, I'm skilled at working with APIs, NoSQL databases, and React frameworks like Next.js and Gatsby.

/oma-preview.webp

OMA San Isidro

githublogo

I was in charge of the front-end for this project. I replicated every single page from a figma design provided by the designer. This is a full in-production site created for the San Isidro math olympics. The creator of the repository, Julian Zylber, was the leader of the project and the one who very kindly taught me git (he is literally a teacher). I enjoyed this one because I got the chance to work with real developers. This project was also my first approach to Sass, which I later used for the Crypto Dashboard and other stuff. Honestly it was fun to work in a team and be part of something bigger. Looking foward for similar projects.

NextjsSassgit
/nit-preview.webp

Nit Charge

githublogo

I took on an exciting challenge with a startup, where I rapidly designed, coded, and optimized their website on the go. In just two weeks, we managed to deploy the site, and it's currently making great progress. I'm thrilled to share that the website has received a perfect 100 score on Google's Lighthouse Report, reflecting its outstanding performance.

GatsbySASSReactTypescript
/evernote-preview.webp

Evernote Clone

githublogo

The sole purpose of this project was to learn with Firebase and Nextjs dynamic pages API. It started as a to-do list but I was seeing that literally everywhere so I decided to take a different aproach. Of course creating a Twitter crossed my mind, but actually I am jealous of mac users that have an actual notepad on the computer and do not need a third party app. Anyways, this project took me almost 1 week and a half and it's missing some functionalities such as sorting the notes and being able to add them styles. But we'll get to that. The purpose was achieved. I learned Authentication and Firestore and that's a neat first aproach to databases. Next step is learning SQL.

NextjsTailwindcssFirebaseTypescript
/crypto-preview.webp

Crypto Dashboard

githublogo

I was intreseted in learning more about working with API's, using react-query and Next.js. I created this project on Next.js (typescript). I started by installing a popular library called Chartjs and react-chartjs-2 to create the graphs. Then react-query to manage api responses and Sass for the styling. With this project I learned a lot, particullary refactoring. From Js to Ts, fixing all type of bugs and much more. Of course there is still some refactor to make, like the responsiveness a bit (although it's a desktop dashboard).

Next.jsSassreact-queryTypescriptChartjs
/entretainment-preview.webp

Entertainment Web App

githublogo

This projects has two sides. The first one is the pixel-perfect css design to the figma document. It's responsive and includes a login page in which you can save your favorites movies. The second side, is the usage of The Movie Data Base API used with Graphql to make static Queries.

GatsbySASSGraphQLTypescript
/planets-preview.webp

Planets Fact Size

githublogo

So for this project I used Frontend.io Json file to pull the info. This was pretty neat since my major concern when I grabbed this one project was how to create one single component for every planet. Responsiveness was the hardest part since I wanted to avoid using libraries or custom hooks created by others than me. In conclusion it was a great project to get going with the basics after so much challenges, courses, vacations and work interferences. This is my first trully project uploaded to github, probably I will upload my vanilla JS games one day but for now I am good :).

ReactCSSJavascript
/portfolio-preview.webp

Personal Portfolio

githublogo

This website! Why did I include this website in my projects? Good question. It turns out that this was going to be a simple website where I would showcase my projects and a bit about myself (Hopefully enough). I made a first sketch on paper for this website, and started programming it. Then, wanting to include features like scroll effects, I realized that I hadn't delved deep enough into some more advanced applications of CSS with React, so I delved into learning about different libraries and the uses of one of React's most basic hooks: useEffect. This portfolio is created in Tailwind because I didn't care too much about how the portfolio looks visually, but I am obstinate and feel that I could add a thousand more things to my own website. Thanks for reading this. Regards.

NextjsTailwind