Skip to content

Commit b8dbf5e

Browse files
author
Micha Huhn
committed
initial commit
0 parents  commit b8dbf5e

28 files changed

+2053
-0
lines changed

‎.eslintrc.cjs

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* eslint-env node */
2+
module.exports = {
3+
root: true,
4+
'extends': [
5+
'plugin:vue/vue3-essential',
6+
'eslint:recommended'
7+
],
8+
parserOptions: {
9+
ecmaVersion: 'latest'
10+
}
11+
}

‎.gitignore

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
.DS_Store
12+
dist
13+
dist-ssr
14+
coverage
15+
*.local
16+
17+
/cypress/videos/
18+
/cypress/screenshots/
19+
20+
# Editor directories and files
21+
.vscode/*
22+
!.vscode/extensions.json
23+
.idea
24+
*.suo
25+
*.ntvs*
26+
*.njsproj
27+
*.sln
28+
*.sw?
29+
30+
*.tsbuildinfo

‎README.md

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Frontend Mentor - Social links profile solution
2+
3+
This is a solution to the [Social links profile challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/social-links-profile-UG32l9m6dQ). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
4+
5+
## Table of contents
6+
7+
- [Overview](#overview)
8+
- [The challenge](#the-challenge)
9+
- [Screenshot](#screenshot)
10+
- [Links](#links)
11+
- [My process](#my-process)
12+
- [Built with](#built-with)
13+
- [What I learned](#what-i-learned)
14+
- [Useful resources](#useful-resources)
15+
16+
## Overview
17+
18+
### The challenge
19+
20+
Users should be able to:
21+
22+
- See hover and focus states for all interactive elements on the page
23+
24+
### Screenshot
25+
26+
Desktop:
27+
28+
![](./screenshot-desktop.png)
29+
30+
Mobile:
31+
32+
![](./screenshot-mobile.png)
33+
34+
### Links
35+
36+
- Live site: [Add live site URL here](https://your-live-site-url.com)
37+
- Challenge solution: [Add solution URL here](https://your-solution-url.com)
38+
39+
## My process
40+
41+
### Built with
42+
43+
- Vue
44+
- SCSS
45+
- Semantic HTML5 markup
46+
- Accessibility
47+
- Mobile-first workflow
48+
- Custom CSS properties
49+
- CSS Grid
50+
51+
### What I learned
52+
53+
I made the card responsive by using a media query and by using fluid design.
54+
The card's width automatically adapts to the viewport on mobile screen sizes.
55+
56+
I also used the `<q>` tag to create the quote.
57+
58+
### Useful resources
59+
60+
- [Unfamiliar CSS patterns that improve on the classics - YouTube](https://www.youtube.com/watch?v=OtqZKLdDNXY) - How I created the `max-width-wrapper` class to make the card responsive.
61+
- [Get your stylesheets more organized with Sass partials - YouTube](https://www.youtube.com/watch?v=9Ld-aOKsEDk) - My SCSS folder structure is inspired by this video.

‎design/active-states.jpg

16.3 KB
Loading

‎design/destkop-design.jpg

15.1 KB
Loading

‎design/mobile-design.jpg

12.3 KB
Loading

‎design/preview.jpg

28.6 KB
Loading

‎design/style-guide.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Front-end Style Guide
2+
3+
## Layout
4+
5+
The designs were created to the following widths:
6+
7+
- Mobile: 375px
8+
- Desktop: 1440px
9+
10+
> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.
11+
12+
## Colors
13+
14+
- Green: hsl(75, 94%, 57%)
15+
16+
- White: hsl(0, 0%, 100%)
17+
18+
- Grey 700: hsl(0, 0%, 20%)
19+
- Grey 800: hsl(0, 0%, 12%)
20+
- Grey 900: hsl(0, 0%, 8%)
21+
22+
## Typography
23+
24+
### Body Copy
25+
26+
- Font size (paragraph): 14px
27+
28+
### Font
29+
30+
- Family: [Inter](https://fonts.google.com/specimen/Inter)
31+
- Weights: 400, 600, 700
32+
33+
> 💎 [Upgrade to Pro](https://www.frontendmentor.io/pro?ref=style-guide) for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma. The design file for this challenge also includes a basic design system to help you build a more accurate solution faster.

‎index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Social links profile</title>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
12+
13+
<link rel="icon" href="/favicon.png">
14+
</head>
15+
<body>
16+
<div id="app"></div>
17+
<script type="module" src="/src/main.js"></script>
18+
</body>
19+
</html>

‎jsconfig.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"compilerOptions": {
3+
"paths": {
4+
"@/*": ["./src/*"]
5+
}
6+
},
7+
"exclude": ["node_modules", "dist"]
8+
}

‎package.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "social-links-profile",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
11+
},
12+
"dependencies": {
13+
"vue": "^3.4.29"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^5.0.5",
17+
"eslint": "^8.57.0",
18+
"eslint-plugin-vue": "^9.23.0",
19+
"sass": "^1.77.8",
20+
"vite": "^5.3.1"
21+
}
22+
}

0 commit comments

Comments
 (0)