Denilson15/socialLinks
A custom-built social links profile page showcasing a profile image, bio, and social media links. Built from scratch using HTML and CSS to practice responsive design and layout styling.
Social Links Profile
This is a custom-built social links profile page developed from scratch using HTML and CSS. While the project idea was inspired by Frontend Mentor's Social Links Profile challenge, the entire design and codebase were independently created to practice building responsive web components and mastering layout techniques.
💡 No AI was used in the development of this project. AI tools were utilized solely for documentation purposes, such as generating this README. I believe in building a strong foundation in programming while also learning how to effectively use AI tools as part of a modern developer workflow.
✨ Overview
This project showcases a functional social links profile page that includes:
- A profile image and name
- A brief bio or description
- A list of social media links with hover and focus states
- Responsive design for optimal viewing on different devices
⚙️ How It Works
- The HTML structure defines the layout of the profile page, including sections for the profile image, name, bio, and social links.
- CSS is used to style the page, including layout, colors, typography, and interactive states, ensuring a clean and professional appearance.
- The project is structured to be easily expandable for future development.
🛠️ Personalization
Although the initial concept was provided by Frontend Mentor, the following customizations were implemented:
- Designed and styled the layout from scratch using CSS
- Implemented responsive design techniques to ensure compatibility across devices
- Structured the HTML for semantic clarity and accessibility
🚧 Planned Updates
- Add dark mode support using CSS variables
- Enhance accessibility features for better user experience
- Implement additional animations for interactive elements
🗂️ File Structure (basic)
index.html– Main structure of the webpagestyles.css– Styling for layout and designassets/– Folder containing image assets used in the project
⚙️ Getting Started
To run the project locally:
git clone https://github.com/Denilson15/socialLinks.git
cd socialLinks/docs