breddit.png

Created using React.js and Firebase, Breddit is fully responsive and includes core features of Reddit such as user profiles, creating groups (subreddits), text, image, and link posts, separate feeds, upvoting and downvoting of posts and comments, nested replies, user settings, and dark mode. Routing is done with React Router.

This was my first time using React Router and Firebase, so it was a big learning experience. The most challenging part of this project was implementing the nested comments. My initial implementation was slow and made multiple requests to Firebase, but I managed to request all the comments at once, sort them in an effective way, and decrease the loading time immensely.

weather.png

WeatherCheck allows users to enter a city name and receive current weather data using the OpenWeatherMap API. Optionally, a user may provide their location using the Geolocation API by clicking on the location icon next to the input field. All cities with the specified name are displayed, and a temperature unit toggle is available to switch between Celsius and Fahrenheit. City cards are formatted with the help of CSS Grid.

One part of this project that had me Googling quite a bit was the Unix time returned by the API for sunrise/sunset times. I wasn't familiar with it before doing this project, and trying to figure out how to convert it to regular time, but also to the correct timezone of the city being displayed, was a tricky task.

todo.png

A to-do list created using HTML, CSS, and modular JavaScript. Users can create new projects, new tasks within those projects, and give each task a title, description, due date, and priority level (1-3). Projects and tasks are editable, and tasks can be sorted by date created, date due, and priority (in both ascending and descending order). The dates are formatted using the date-fns library.

I used JavaScript modules for the first time in this project and it felt much more organized than having just one JavaScript file. Although I did split up the code, I feel that I could've done it a bit more. One issue I wasn't able to fix design-wise was a rendering issue with the sidebar which seems to only happen in Firefox. While expanding and closing, there is a moment where the sidebar goes under the sort bar.

teatime.png
Tea Time is a sample restaurant page and creating it was the first time I used React.js. The site is mobile responsive, and features a spinning teacup when hovered over. This was created by rendering a PNG sequence of a spinning 3D model of a teacup in Adobe After Effects, converting the sequence to a spritesheet, and using the react-sprite-animator component to loop through the spritesheet when hovered over on the page ☕

About me

Hello there, my name is Sher Sheikh. (pronounced "share")

Designing and creating responsive websites is some of the most fulfilling work I do, and I always look forward to starting a new project. Before getting into web development I enjoyed video editing, and have been doing it since 2014. With my video editing I grew my own YouTube channel to over 230,000 subscribers in a little over a year. If you like Marvel, check it out. 🕷️

When I'm not coding I enjoy boxing, playing video games, and helping people online with their web development problems.

Get in touch

Linkedin linkedin.png
email.png

Resume