Feed
+ +Exciting News in Tech!
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua.
+diff --git a/README.md b/README.md index 9afc742da..f8c93d399 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,69 @@ -# css-frameworks-ca -Replace this text with a description of your social media project. +# ConnectSphere (css-frameworks-ca) + +ConnectSphere is a dynamic social media platform designed to enhance user engagement. Users can create personalized profiles, share diverse content, and interact effortlessly. + +## Table of Contents + +- [Overview](#overview) +- [UI Components](#ui-components) +- [Planned features](#planned-features) +- [Installation](#installation) +- [Usage](#usage) + +## Overview + +ConnectSphere is a social media website that allows users to: + +- Create and manage their profiles +- Share posts including text and images +- Interact with others through likes, comments, and follows +- Discover and connect with other users through search and recommendations + +## UI Components + +### Authentication Page + +- **Login/Registration Form**: Fields for username, email, and password. +- **Action Buttons**: "Sign in" and "Sign up." +- **Forgot Password**: Link for password recovery. + +### Home Feed Page + +- **Post Previews**: Stream of user posts with text, images, and engagement metrics. +- **Search Bar**: Locate posts and user profiles. +- **Sort Options**: Filter posts by recent activity and popularity. +- **New Post Form**: Fields for text, image upload, and hashtags. +- **Engagement Buttons**: Like and Comment options for each post. + +### User Profile Page + +- **Profile Photo and Header Image**: Display user’s image and cover. +- **Follow/Unfollow Button**: Manage connections. +- **User's Content**: Scrollable section for the user’s posts. +- **Connection Metrics**: Show followers and following counts with clickable links. +- **Profile Edit Option**: Update user information. + +## Planned Features + +- **Account Management**: Create, modify, or delete profiles. +- **Interaction Capabilities**: Like, comment, and manage followers. +- **Content Management**: Create or delete posts and comments. +- **Discoverability Tools**: Search for posts and user profiles. + +## Installation + +To get started with ConnectSphere, clone the repository and install the dependencies: + +```bash +git clone https://github.com/NoroffFEU/css-frameworks-ca.git +cd css-frameworks-ca +npm install +``` +## Usage + +To start the development server and begin working on your project, run: + +```bash +npm run dev +``` +This will run both the sass watcher and live-server, allowing you to see live changes as you develop. diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 000000000..54ce49985 Binary files /dev/null and b/favicon.ico differ diff --git a/feed/images/placeholder.svg b/feed/images/placeholder.svg new file mode 100644 index 000000000..008d4dbb9 --- /dev/null +++ b/feed/images/placeholder.svg @@ -0,0 +1,5 @@ + diff --git a/feed/images/profilepictureplaceholder.svg b/feed/images/profilepictureplaceholder.svg new file mode 100644 index 000000000..eff8d98a3 --- /dev/null +++ b/feed/images/profilepictureplaceholder.svg @@ -0,0 +1,26 @@ + diff --git a/feed/index.html b/feed/index.html new file mode 100644 index 000000000..0aabd7157 --- /dev/null +++ b/feed/index.html @@ -0,0 +1,125 @@ + + + +
+ + + + + + + + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua.
+Passionate about technology and connecting people. Software engineer by day, avid + reader by night.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua.
+