├── card ├── .browserslistrc ├── src │ ├── assets │ │ ├── css │ │ │ └── index.css │ │ ├── image-header-desktop.jpg │ │ └── image-header-mobile.jpg │ ├── main.js │ ├── App.vue │ └── components │ │ └── Card.vue ├── babel.config.js ├── postcss.config.js ├── tailwind.config.js ├── .gitignore ├── .eslintrc.js ├── README.md ├── package.json └── public │ └── index.html ├── social-proof-section ├── src │ ├── assets │ │ ├── css │ │ │ └── index.css │ │ └── images │ │ │ ├── image-anne.jpg │ │ │ ├── image-colton.jpg │ │ │ ├── image-irene.jpg │ │ │ ├── icon-star.svg │ │ │ ├── bg-pattern-top-mobile.svg │ │ │ ├── bg-pattern-top-desktop.svg │ │ │ ├── bg-pattern-bottom-desktop.svg │ │ │ └── bg-pattern-bottom-mobile.svg │ ├── main.js │ ├── components │ │ ├── Rating.vue │ │ └── Review.vue │ └── App.vue ├── babel.config.js ├── postcss.config.js ├── .gitignore ├── README.md ├── tailwind.config.js ├── public │ └── index.html └── package.json ├── shortly-url-shortener ├── babel.config.js ├── public │ ├── favicon.ico │ └── index.html ├── postcss.config.js ├── src │ ├── assets │ │ ├── fonts │ │ │ ├── Poppins-Bold.ttf │ │ │ └── Poppins-Medium.ttf │ │ ├── styles │ │ │ └── index.css │ │ ├── images │ │ │ ├── BgShortenMobile.svg │ │ │ ├── BgShortenDesktop.svg │ │ │ ├── BgBoostMobile.svg │ │ │ ├── BgBoostDesktop.svg │ │ │ └── IllustrationWorking.svg │ │ └── icons │ │ │ ├── Facebook.svg │ │ │ ├── Twitter.svg │ │ │ ├── Pinterest.svg │ │ │ ├── Instagram.svg │ │ │ ├── DetailedRecords.svg │ │ │ ├── Github.svg │ │ │ ├── BrandRecognition.svg │ │ │ ├── FullyCustomizable.svg │ │ │ └── Logo.vue │ ├── components │ │ ├── SocialFooterLink.vue │ │ ├── GetStartedButton.vue │ │ ├── FooterSection.vue │ │ ├── InfoCard.vue │ │ ├── BoostLinks.vue │ │ ├── Header.vue │ │ ├── ContentTop.vue │ │ ├── Footer.vue │ │ ├── ResultContainer.vue │ │ ├── ContentMiddle.vue │ │ └── ShortenerForm.vue │ ├── main.js │ └── App.vue ├── .gitignore ├── tailwind.config.js ├── package.json └── README.md └── README.md /card/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /card/src/assets/css/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /card/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"], 3 | }; 4 | -------------------------------------------------------------------------------- /social-proof-section/src/assets/css/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /card/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /shortly-url-shortener/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /social-proof-section/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /card/src/assets/image-header-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punitkatiyar/frontendmentor/main/card/src/assets/image-header-desktop.jpg -------------------------------------------------------------------------------- /card/src/assets/image-header-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punitkatiyar/frontendmentor/main/card/src/assets/image-header-mobile.jpg -------------------------------------------------------------------------------- /shortly-url-shortener/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punitkatiyar/frontendmentor/main/shortly-url-shortener/public/favicon.ico -------------------------------------------------------------------------------- /shortly-url-shortener/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /social-proof-section/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /card/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import "./assets/css/index.css"; 4 | 5 | createApp(App).mount("#app"); 6 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/fonts/Poppins-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punitkatiyar/frontendmentor/main/shortly-url-shortener/src/assets/fonts/Poppins-Bold.ttf -------------------------------------------------------------------------------- /social-proof-section/src/assets/images/image-anne.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punitkatiyar/frontendmentor/main/social-proof-section/src/assets/images/image-anne.jpg -------------------------------------------------------------------------------- /social-proof-section/src/assets/images/image-colton.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punitkatiyar/frontendmentor/main/social-proof-section/src/assets/images/image-colton.jpg -------------------------------------------------------------------------------- /social-proof-section/src/assets/images/image-irene.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punitkatiyar/frontendmentor/main/social-proof-section/src/assets/images/image-irene.jpg -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/fonts/Poppins-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punitkatiyar/frontendmentor/main/shortly-url-shortener/src/assets/fonts/Poppins-Medium.ttf -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/styles/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss/base"; 2 | @import "tailwindcss/components"; 3 | @import "tailwindcss/utilities"; 4 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap'); -------------------------------------------------------------------------------- /social-proof-section/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import "./assets/css/index.css"; 4 | 5 | Vue.config.productionTip = false; 6 | 7 | new Vue({ 8 | render: (h) => h(App), 9 | }).$mount("#app"); 10 | -------------------------------------------------------------------------------- /social-proof-section/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /shortly-url-shortener/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /card/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "jit", 3 | purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"], 4 | darkMode: false, 5 | theme: { 6 | fontFamily: { 7 | inter: "Inter", 8 | lexend: ['"Lexend Deca"'], 9 | }, 10 | extend: {}, 11 | }, 12 | variants: { 13 | extend: {}, 14 | }, 15 | plugins: [], 16 | }; 17 | -------------------------------------------------------------------------------- /card/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist 4 | stats-preview-card-component-main/ 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /social-proof-section/src/assets/images/icon-star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor 2 | 3 | This is a repository to reunite my Front-end coding challenges from [Frontend Mentor](https://www.frontendmentor.io/). 4 | 5 | ## Table of contents 6 | 7 | - [Projects](#projects) 8 | - [Built with](#built-with) 9 | 10 | ### Projects 11 | 12 | - [Card](card/) 13 | - [Social Proof Section](social-proof-section/) 14 | - [Shortly - URL Shortener](shortly-url-shortener/) 15 | -------------------------------------------------------------------------------- /card/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"], 7 | parserOptions: { 8 | parser: "babel-eslint", 9 | }, 10 | rules: { 11 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 12 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /card/README.md: -------------------------------------------------------------------------------- 1 | # card 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /social-proof-section/README.md: -------------------------------------------------------------------------------- 1 | # social-proof-section 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/images/BgShortenMobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/icons/Facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/components/SocialFooterLink.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "@/App.vue"; 3 | import "@/assets/styles/index.css"; 4 | 5 | import { library } from "@fortawesome/fontawesome-svg-core"; 6 | import { faBars, faSpinnerThird } from "@fortawesome/pro-regular-svg-icons"; 7 | import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; 8 | 9 | library.add(faBars, faSpinnerThird); 10 | 11 | Vue.component("font-awesome-icon", FontAwesomeIcon); 12 | 13 | Vue.config.productionTip = false; 14 | 15 | new Vue({ 16 | render: (h) => h(App), 17 | }).$mount("#app"); 18 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/components/GetStartedButton.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/icons/Twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/components/FooterSection.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /social-proof-section/src/assets/images/bg-pattern-top-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /social-proof-section/src/assets/images/bg-pattern-top-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /social-proof-section/src/assets/images/bg-pattern-bottom-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /social-proof-section/src/assets/images/bg-pattern-bottom-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /card/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 40 | -------------------------------------------------------------------------------- /social-proof-section/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "jit", 3 | purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"], 4 | darkMode: false, // or 'media' or 'class' 5 | theme: { 6 | extend: { 7 | colors: { 8 | "primary-magenta": "hsl(300,43%,22%)", 9 | "primary-pink": "hsl(333,80%,67%)", 10 | "neutral-dark-magenta": "hsl(303,10%,53%)", 11 | "neutral-light-magenta": "hsl(300, 24%, 96%)", 12 | }, 13 | screens: { 14 | xs: "340px", 15 | desktop: "1440px", 16 | xg: "1880px", 17 | large: "2560px", 18 | }, 19 | }, 20 | }, 21 | variants: { 22 | extend: {}, 23 | }, 24 | plugins: [], 25 | }; 26 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/images/BgShortenDesktop.svg: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /shortly-url-shortener/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Shortly - URL Shortener 9 | 10 | 11 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/components/InfoCard.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/images/BgBoostMobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/icons/Pinterest.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /card/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "card", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "vue": "^3.0.0" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "~4.5.0", 16 | "@vue/cli-plugin-eslint": "~4.5.0", 17 | "@vue/cli-service": "~4.5.0", 18 | "@vue/compiler-sfc": "^3.0.0", 19 | "@vue/eslint-config-prettier": "^6.0.0", 20 | "autoprefixer": "^9.8.6", 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^6.7.2", 23 | "eslint-plugin-prettier": "^3.3.1", 24 | "eslint-plugin-vue": "^7.0.0", 25 | "postcss": "^7.0.35", 26 | "prettier": "^2.2.1", 27 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /social-proof-section/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | Social Proof Section 13 | 14 | 15 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 32 | 33 | 38 | -------------------------------------------------------------------------------- /card/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | Stats preview card component 14 | 15 | 16 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/components/BoostLinks.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 25 | 26 | 37 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/icons/Instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /social-proof-section/src/components/Rating.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/icons/DetailedRecords.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/images/BgBoostDesktop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /social-proof-section/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "social-proof-section", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "vue": "^2.6.11" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "~4.5.0", 16 | "@vue/cli-plugin-eslint": "~4.5.0", 17 | "@vue/cli-service": "~4.5.0", 18 | "autoprefixer": "^9.8.6", 19 | "babel-eslint": "^10.1.0", 20 | "eslint": "^6.7.2", 21 | "eslint-plugin-vue": "^6.2.2", 22 | "postcss": "^7.0.35", 23 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2", 24 | "vue-template-compiler": "^2.6.11" 25 | }, 26 | "eslintConfig": { 27 | "root": true, 28 | "env": { 29 | "node": true 30 | }, 31 | "extends": [ 32 | "plugin:vue/essential", 33 | "eslint:recommended" 34 | ], 35 | "parserOptions": { 36 | "parser": "babel-eslint" 37 | }, 38 | "rules": {} 39 | }, 40 | "browserslist": [ 41 | "> 1%", 42 | "last 2 versions", 43 | "not dead" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /shortly-url-shortener/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "jit", 3 | purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"], 4 | darkMode: false, 5 | theme: { 6 | fontFamily: { 7 | sans: "Poppins", 8 | }, 9 | extend: { 10 | colors: { 11 | violet: { 12 | default: "#3A3054", 13 | dark: "#34313D", 14 | light: "#4B3F6B", 15 | footer: "#232127", 16 | }, 17 | blue: { 18 | default: "#2BD0D0", 19 | light: "#9AE3E3", 20 | }, 21 | gray: { 22 | light: "#EFF1F7", 23 | dark: "#9E9AA8", 24 | footer: "#BFBFBF", 25 | }, 26 | "orange-red": "#F46363", 27 | }, 28 | fontSize: { 29 | s: [ 30 | "15px", 31 | { 32 | lineHeight: "26px", 33 | }, 34 | ], 35 | "7xl": [ 36 | "4.5rem", 37 | { 38 | letterSpacing: "-2px", 39 | lineHeight: "112%", 40 | }, 41 | ], 42 | "8xl": [ 43 | "6rem", 44 | { 45 | letterSpacing: "-2px", 46 | lineHeight: "112%", 47 | }, 48 | ], 49 | }, 50 | }, 51 | }, 52 | variants: { 53 | extend: {}, 54 | }, 55 | plugins: [], 56 | }; 57 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 41 | -------------------------------------------------------------------------------- /social-proof-section/src/components/Review.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /shortly-url-shortener/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shortly-url-shortener", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@fortawesome/fontawesome-svg-core": "^1.2.35", 12 | "@fortawesome/free-solid-svg-icons": "^5.15.3", 13 | "@fortawesome/pro-regular-svg-icons": "^5.15.3", 14 | "@fortawesome/pro-solid-svg-icons": "^5.15.3", 15 | "@fortawesome/vue-fontawesome": "^2.0.2", 16 | "axios": "^0.21.1", 17 | "core-js": "^3.6.5", 18 | "vue": "^2.6.11", 19 | "vue-clipboard2": "^0.3.1" 20 | }, 21 | "devDependencies": { 22 | "@vue/cli-plugin-babel": "~4.5.0", 23 | "@vue/cli-plugin-eslint": "~4.5.0", 24 | "@vue/cli-service": "~4.5.0", 25 | "autoprefixer": "^9.8.6", 26 | "babel-eslint": "^10.1.0", 27 | "eslint": "^6.7.2", 28 | "eslint-plugin-vue": "^6.2.2", 29 | "postcss": "^7.0.36", 30 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.2", 31 | "vue-template-compiler": "^2.6.11" 32 | }, 33 | "eslintConfig": { 34 | "root": true, 35 | "env": { 36 | "node": true 37 | }, 38 | "extends": [ 39 | "plugin:vue/essential", 40 | "eslint:recommended" 41 | ], 42 | "parserOptions": { 43 | "parser": "babel-eslint" 44 | }, 45 | "rules": {} 46 | }, 47 | "browserslist": [ 48 | "> 1%", 49 | "last 2 versions", 50 | "not dead" 51 | ] 52 | } 53 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/icons/Github.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/components/ContentTop.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 43 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 47 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/icons/BrandRecognition.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /shortly-url-shortener/README.md: -------------------------------------------------------------------------------- 1 | # Shortly - URL Shortener 2 | 3 | This is a solution to the [Shortly URL shortening API Challenge challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/url-shortening-api-landing-page-2ce3ob-G). 4 | 5 | ## Table of contents 6 | 7 | - [Overview](#overview) 8 | - [Links](#links) 9 | - [My process](#my-process) 10 | - [Built with](#built-with) 11 | - [What I learned](#what-i-learned) 12 | - [Continued development](#continued-development) 13 | - [Useful resources](#useful-resources) 14 | 15 | ## Overview 16 | 17 | ### Links 18 | 19 | - Live Site URL: [Shortly - URL Shortener](https://shortly-xi-five.vercel.app/) 20 | 21 | ## My process 22 | 23 | ### Built with 24 | 25 | - Semantic HTML5 markup 26 | - Flexbox 27 | - Mobile-first workflow 28 | - [Vue](https://vuejs.org/) - JS library 29 | - [Tailwind CSS](https://styled-components.com/) - For styles 30 | 31 | ### What I learned 32 | 33 | - Improve my ability to work with SVG and background images 34 | 35 | ```css 36 | #form { 37 | background: #3a3054 url("../assets/images/BgShortenMobile.svg") no-repeat 38 | right top; 39 | } 40 | ``` 41 | 42 | - Making useful code and maintaining it stylish 43 | 44 | ```html 45 | Get Started 46 | ``` 47 | 48 | ```js 49 | removeHash() { 50 | setTimeout(() => { 51 | history.replaceState("", document.title, window.location.pathname) 52 | }, 1); 53 | }, 54 | ``` 55 | 56 | ### Continued development 57 | 58 | Something I wish to continue to focus in future projects is responsive design best practices and accessibility features. 59 | 60 | ### Useful resources 61 | 62 | - [RegExr](https://regexr.com) - This is an amazing tool to build and test Regular Expressions, which helped me on the input validation for URLs. 63 | - [Font Awesome](https://fontawesome.com) - Really simple and useful icon library. 64 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/icons/FullyCustomizable.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/components/ResultContainer.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 70 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/components/ContentMiddle.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 61 | -------------------------------------------------------------------------------- /card/src/components/Card.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 69 | 70 | 86 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/icons/Logo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /social-proof-section/src/App.vue: -------------------------------------------------------------------------------- 1 | 80 | 81 | 93 | 94 | 124 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/components/ShortenerForm.vue: -------------------------------------------------------------------------------- 1 | 66 | 67 | 158 | 159 | 175 | -------------------------------------------------------------------------------- /shortly-url-shortener/src/assets/images/IllustrationWorking.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 18 | 19 | 20 | 21 | 28 | 29 | 30 | 31 | 38 | 39 | 40 | 41 | 48 | 49 | 50 | 51 | 58 | 59 | 60 | 61 | 68 | 69 | 70 | 71 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 92 | 93 | 94 | 95 | 102 | 103 | 104 | 105 | 112 | 113 | 114 | 115 | 122 | 123 | 124 | 125 | 132 | 133 | 134 | 135 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 157 | 158 | 159 | 160 | 161 | 168 | 169 | 170 | 171 | 172 | 179 | 180 | 181 | 182 | 189 | 190 | 191 | 192 | 193 | 194 | 198 | 202 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 216 | 220 | 224 | 228 | 232 | 237 | 242 | 246 | 250 | 254 | 258 | 263 | 267 | 272 | 276 | 280 | 284 | 288 | 292 | 296 | 300 | 304 | 308 | 312 | 313 | 314 | 318 | 322 | 326 | 330 | 334 | 338 | 342 | 347 | 351 | 355 | 359 | 363 | 367 | 371 | 375 | 379 | 383 | 387 | 391 | 392 | 393 | --------------------------------------------------------------------------------