https://github.com/codelur/se_project_spots

A social media app where users create profiles, post pictures with labels, and like other users' posts. The app focuses on user interaction through post engagement and personalized profiles.
https://github.com/codelur/se_project_spots

css figma html javascript

Last synced: 3 months ago
JSON representation

A social media app where users create profiles, post pictures with labels, and like other users' posts. The app focuses on user interaction through post engagement and personalized profiles.

• Host: GitHub
• URL: https://github.com/codelur/se_project_spots
• Owner: codelur
• Created: 2024-08-20T01:42:00.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-11-17T03:55:55.000Z (6 months ago)
• Last Synced: 2025-01-21T18:48:54.859Z (4 months ago)
• Topics: css, figma, html, javascript
• Language: JavaScript
• Homepage: https://codelur.github.io/se_project_spots/
• Size: 6.29 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Spots

## Description

**Spots** is a responsive web application that allows users to interact with photos in a dynamic and user-friendly interface. Users can upload and remove their photos, like photos uploaded by other users, and personalize their profiles. The design and functionality ensure that the website is both visually appealing and highly functional across various devices and screen sizes.

The project is live and accessible at [Spots Website](https://codelur.github.io/se_project_spots/).

Video description: https://drive.google.com/file/d/1Zsg1AKEOoSQWthCkEDXmkKC9A5HOeQOJ/view?usp=drive_link

## Features

- **User Interactions**:

  - Add and remove photos.

  - Interaction with other users.

  - Like photos uploaded by others.

  - Customize user profile settings.

- **Responsive Design**:

  - Adapts seamlessly to different screen sizes using media queries.

  - Utilizes grid layouts for organized and flexible content presentation.

  - Special text fonts enhance readability and aesthetics.

  - Handles text overflow to maintain a clean and uncluttered interface.

## Technologies and Techniques Used

- **HTML**: Structured the content and elements of the website.

- **CSS**: Styled the visual components of the site, including the use of:

  - **Media Queries**: Ensured responsiveness across devices of various screen sizes.

  - **Grid Layouts**: Managed the placement and organization of elements.

  - **Text Fonts**: Incorporated custom fonts for a unique visual identity.

  - **Text Overflow Handling**: Managed how text is displayed when it exceeds its container.

- **BEM Methodology**: Followed the Block Element Modifier (BEM) convention for writing clean and maintainable CSS code.

## Deployment

The project is deployed and accessible online at the following URL: [https://codelur.github.io/se_project_spots/](https://codelur.github.io/se_project_spots/)

Feel free to explore the website and interact with the features. Any feedback or contributions are welcome!