Social Links Profile

A responsive and animated social links page built as a solution to a Frontend Mentor challenge. This project focuses on advanced SCSS usage and smooth CSS animations to create a visually appealing and interactive user experience.

./preview.jpg 🔺 Preview of the Social Links Profile page

🚀 Live Demo

You can view the live project here: https://usersociallinks.netlify.app

📁 Project Structure

social-links-profile/
├── assets/
│   └── preview.jpg          # Project preview image
├── css/
│   └── main.css            # Compiled CSS styles
├── design/
│   └── style-guide.md      # Design specifications
├── js/
│   └── main.js             # JavaScript functionality
├── scss/
│   └── main.scss           # SCSS source styles
├── .gitignore              # Git ignore file
├── index.html              # Main HTML file
├── package-lock.json       # NPM package lock
├── package.json            # NPM dependencies
└── README.md               # Project documentation

🛠️ Tech Stack

· HTML5: Semantic markup structure · SCSS/CSS: Advanced styling with Sass features · JavaScript: Interactive functionality · NPM: Package management · Git: Version control

✨ Features

· Responsive Design: Fully responsive layout for all device sizes · SCSS Architecture: Utilizes Sass features including: · Variables for consistent theming · Nesting for cleaner code structure · Mixins for reusable style patterns · CSS Animations: · Animated colorful blur-effect bubbles in background · Smooth hover effects on interactive elements · Micro-interactions for enhanced user experience · Modern Layout: Clean and professional UI design · Accessibility: Focus on accessible web practices

🎨 Design Implementation

This project follows the design specifications from Frontend Mentor challenge, implementing:

· Pixel-perfect layout matching the original design · Custom color scheme using SCSS variables · Typography hierarchy and spacing · Interactive element states (hover, focus, active)

🧠 Learning Objectives

This project was built to practice and demonstrate:

· Advanced SCSS features and architecture · Complex CSS animations and keyframes · Responsive web design principles · Clean and maintainable code structure · Frontend Mentor challenge completion

📦 Installation & Setup

1. Clone the repository

   git clone https://github.com/ehsanidev/social-links-profile.git
   cd social-links-profile

2. Install dependencies

   npm install

3. Run the development environment

   npm run dev

4. Build for production

   npm run build

🚀 Deployment

The project is deployed on Netlify and can be easily deployed by connecting your GitHub repository to Netlify for automatic deployments.

---

👩‍💻 Developer

· GitHub: @ehsanidev · LinkedIn: zahraehsani · Frontend Mentor: @ehsanidev