https://github.com/quantumudit/social-links-profile
This project is a responsive social link profile card showcasing personal details like name, address, and a brief bio, along with links to various social profiles. It features interactive hover effects on social links and adapts seamlessly to desktops, tablets, and smartphones, offering an engaging user experience across all devices.
https://github.com/quantumudit/social-links-profile
css css-animations css-flexbox html html-css-javascript
Last synced: about 2 months ago
JSON representation
This project is a responsive social link profile card showcasing personal details like name, address, and a brief bio, along with links to various social profiles. It features interactive hover effects on social links and adapts seamlessly to desktops, tablets, and smartphones, offering an engaging user experience across all devices.
- Host: GitHub
- URL: https://github.com/quantumudit/social-links-profile
- Owner: quantumudit
- Created: 2024-08-29T17:20:36.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-29T17:42:30.000Z (almost 2 years ago)
- Last Synced: 2026-04-30T13:33:30.001Z (about 2 months ago)
- Topics: css, css-animations, css-flexbox, html, html-css-javascript
- Language: CSS
- Homepage: https://quantumudit.github.io/Social-Links-Profile/
- Size: 797 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ![Project Logo][project_logo]
---
Developing Responsive Social Links Profile Card with HTML and CSS and hosting it on GitHub Pages
Overview •
Prerequisites •
Hosting •
Support •
License
## Overview
**Project Overview:**
This project involves the creation of a responsive social link profile card designed to be visually appealing and user-friendly, with the flexibility to adapt to different screen sizes.
The webpage displays essential personal details, including the individual's name, address, and a brief "About Me" section, along with links to various social profiles. Visitors can easily access these links to learn more about the person.
Each social profile link features a dynamic hover effect, changing colors when hovered over, adding an interactive touch to the user experience.
The webpage is built with responsive design principles, ensuring an optimized and seamless experience across all devices, including desktops, tablets, and smartphones, allowing users to access and engage with the content effortlessly.
> This is a solution to the [Social Links Profile Challenge](https://www.frontendmentor.io/challenges/social-links-profile-UG32l9m6dQ/). Frontend Mentor challenges helps improving coding skills by building realistic projects.
### Snapshots
Below is a preview of the Social links profile web page, showcasing its layout and design:
### Links
- Live Site URL: [Social Links Profile Page][website_link]
- Frontend Mentor Solution URL: [Challenge Solution Page][frontend_mentor_link]
### Repository Structure
The project repository exhibits the following structure:
```
Recipe-Page/
├── 📁css/
│ ├── 🎨style.css
├── 📁images
├── 📁resources
├── 🌐index.html
├── 📜.gitignore
├── 🔑LICENSE
└── 📝README.md
```
💡 Repository Structure Details
To help you navigate through the project, here’s a concise guide to the repository’s structure, detailing what each directory contains and its purpose within the project:
- **`📁css/`**
- **`🎨style.css`** - The main stylesheet that controls the look and feel of the entire website
- **`📁images`** - Stores images, graphics, and favicons used directly on the website
- **`📁resources`** - Holds additional resources like images or documents utilized in the project
- **`🌐index.html`** - The main HTML file that structures the web page and presents the content
- **`📜.gitignore`** - Specifies intentionally untracked files to ignore.
- **`🔑LICENSE`** - The license outlining the usage rights and permissions for this project
- **`📝README.md`** - The introductory documentation for the project
## Prerequisites
### Tech Stack Prerequisites
![html] ![css]
To effectively engage with this project, possessing a robust understanding of the skills listed below is advisable:
- Proficiency in HTML5
- Expertise in CSS3, including concepts like Flexbox, CSS transitions and Media Queries
- Familiarity with responsive design principles and color theory
These competencies will facilitate a seamless and productive journey throughout the project.
### Development Environment Prerequisites
![VS_code] ![Notepad_plus_plus] ![Obsidian] ![Figma] ![Clickup]
Application selection and setup may vary based on individual preferences and system setups.
The development tools I've employed for this project are:
- **VS Code**: Employed for writing and editing code
- **Notepad++**: Served as an auxiliary code editor
- **Obsidian**: Utilized for documenting project notes
- **Figma**: Used for UI/UX designing and design reference
- **Click Up**: Employed for overseeing project tasks
## Hosting
![GitHub_Pages] ![Frontend_Mentor]
The Egg Omelette recipe page is currently live and hosted on **GitHub Pages**, making it easily accessible for anyone interested. You can explore the fully responsive web page at the following URL: **[Social Links Profile Page][website_link]**.
Additionally, my submission for this project is also available on **[Frontend Mentor][frontend_mentor_link]**, where you can view feedback and community interaction regarding the design and development process.
## Support
Should you wish to inquire, offer feedback, or propose ideas, don’t hesitate to contact me via the channels listed below:
[![Linkedin Badge][linkedinbadge]][linkedin] [![Twitter Badge][twitterbadge]][twitter] [![Gmail Badge][gmailbadge]][gmail]
Discover and engage with my content on these platforms:
[![Linktree Badge][linktreebadge]][linktree] [![Youtube Badge][youtubebadge]][youtube] [![GitHub Badge][githubbadge]][github] [![Medium Badge][mediumbadge]][medium] [![Substack Badge][substackbadge]][substack]
To express your support for my work, consider [buying me a coffee][buymeacoffee] or, [donate through Paypal][paypal]
[![Buy Me a Coffee][buymeacoffeebadge]][buymeacoffee] [![Paypal][paypalbadge]][paypal]
## License
This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format for noncommercial purposes only, and only so long as attribution is given to the creator. If you remix, adapt, or build upon the material, you must license the modified material under identical terms.
---
---
[project_logo]: ./resources/project_cover_image.png
[frontend_mentor_link]: https://www.frontendmentor.io/solutions/responsive-social-links-profile-using-flexbox-and-transitions-7EIVOER9Qg
[website_link]: https://quantumudit.github.io/Social-Links-Profile/
[linkedin]: https://www.linkedin.com/in/quantumudit/
[twitter]: https://twitter.com/quantumudit
[medium]: https://medium.com/@quantumudit
[linktree]: https://linktr.ee/quantumudit
[youtube]: https://www.youtube.com/@quantumudit
[github]: https://github.com/quantumudit/
[substack]: https://substack.com/
[gmail]: quantumudit@gmail.com
[buymeacoffee]: https://www.buymeacoffee.com/quantumudit
[paypal]: https://paypal.me/quantumudit
[linkedinbadge]: https://img.shields.io/badge/-uditkumarchatterjee-0e76a8?style=flat&labelColor=0e76a8&logo=linkedin&logoColor=white
[twitterbadge]: https://img.shields.io/badge/-quantumudit-000000?style=flat&labelColor=000000&logo=x&logoColor=white
[gmailbadge]: https://img.shields.io/badge/quantumudit@gmail.com-D14836?style=flat&logo=gmail&logoColor=white
[mediumbadge]: https://img.shields.io/badge/Medium-02b875?style=for-the-badge&logo=medium&logoColor=white
[linktreebadge]: https://img.shields.io/badge/Linktree-1de9b6?style=for-the-badge&logo=linktree&logoColor=white
[youtubebadge]: https://img.shields.io/badge/YouTube-%23FF0000.svg?style=for-the-badge&logo=YouTube&logoColor=white
[substackbadge]: https://img.shields.io/badge/Substack-%23006f5c.svg?style=for-the-badge&logo=substack&logoColor=FF6719
[githubbadge]: https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white
[buymeacoffeebadge]: https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black
[paypalbadge]: https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white
[HTML]: https://img.shields.io/badge/HTML5-E34F26.svg?style=for-the-badge&logo=html5&logoColor=white
[CSS]: https://img.shields.io/badge/CSS3-1572B6.svg?style=for-the-badge&logo=css3&logoColor=white
[Github_Pages]: https://img.shields.io/badge/GitHub%20Pages-222222.svg?style=for-the-badge&logo=github&logoColor=white
[Frontend_Mentor]: https://img.shields.io/badge/Frontend%20Mentor-3F54A3.svg?style=for-the-badge&logo=frontendmentor&logoColor=white
[VS_code]: https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white
[Notepad_plus_plus]: https://img.shields.io/badge/Notepad++-90E59A.svg?style=for-the-badge&logo=notepad%2b%2b&logoColor=black
[Figma]: https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white
[Obsidian]: https://img.shields.io/badge/Obsidian-%23483699.svg?style=for-the-badge&logo=obsidian&logoColor=white
[Clickup]: https://img.shields.io/badge/-Click%20Up-7B68EE?style=for-the-badge&labelColor=7B68EE&logo=clickup&logoColor=white