diff --git a/package.json b/package.json index d843434..95706b4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "name": "playing-with-react", "version": "0.1.0", + "homepage": ".", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", diff --git a/public/index.html b/public/index.html index aa069f2..ee82a27 100644 --- a/public/index.html +++ b/public/index.html @@ -2,14 +2,23 @@ - + - + + + + - React App + Hello There :) diff --git a/public/looking.png b/public/looking.png new file mode 100644 index 0000000..af8dc36 Binary files /dev/null and b/public/looking.png differ diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..806cfb8 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,19 +1,19 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "Hello There :)", + "name": "Kodo", "icons": [ { - "src": "favicon.ico", + "src": "looking.png", "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" + "type": "image/png" }, { - "src": "logo192.png", + "src": "looking.png", "type": "image/png", "sizes": "192x192" }, { - "src": "logo512.png", + "src": "looking.png", "type": "image/png", "sizes": "512x512" } diff --git a/src/App.js b/src/App.js index 7c96152..bf0a030 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,39 @@ -import React from 'react'; +import React from "react"; +import k from "./asset/bat.png"; +import MyInfo from "./components/MyInfo"; +import "./index.css"; function App() { + const all = { + fb: `https://www.facebook.com/koko.like99/`, + gt: `https://github.com/kodo-yousif`, + lin: `https://www.linkedin.com/in/kodo-yousif-92b217199/`, + src: k, + name: "Kodo Yousif", + info: [ + "Helo im a software devloper from Kurdistan", + `i like most + fields of technology and try to make my way into them as the fields:`, + `(back end , front end , database , mobile app , AI , desktop app + ...etc)`, + ], + vec: [ + `as every persons you will meet in your life i like vecations ,`, + `and + thos are best places for me to rest in my vecations if i could go to + them:`, + ], + placesv: [ + { color: "#34568B", place: "Paris" }, + { color: "#FF6F61", place: "Alaska’s Coast" }, + { color: "#6B5B95", place: "Big Sky, Montana" }, + { color: "#88B04B", place: "Birmingham, Alabama" }, + { color: "#DD4124", place: "The Catskills" }, + ], + }; return ( -
-

Hello World!!

+
+
); } diff --git a/src/asset/background.jpg b/src/asset/background.jpg new file mode 100644 index 0000000..cecf5be Binary files /dev/null and b/src/asset/background.jpg differ diff --git a/src/asset/bat.png b/src/asset/bat.png new file mode 100644 index 0000000..f447212 Binary files /dev/null and b/src/asset/bat.png differ diff --git a/src/components/MyInfo.jsx b/src/components/MyInfo.jsx new file mode 100644 index 0000000..57f7315 --- /dev/null +++ b/src/components/MyInfo.jsx @@ -0,0 +1,66 @@ +import React from "react"; + +export default function MyInfo(props) { + var places = props.all.placesv.map((p) => ( +
  • + {p.place} +
    • + )); + var info = props.all.info.map((pa) => ( +

    + {pa}
    +

    + )); + var vec = props.all.vec.map((pa) => ( +

    + {pa}
    +

    + )); + + return ( +
    +
    +

    + {props.all.name}{" "} + + 😃 + +

    + rasm +
    + +
    +

    Who Am I ?

    +

    {info}

    +
    + +
    +

    + Vacations Times + + 😍 + +

    +

    {vec}

    +

    +
      {places}
    +

    +
    + +
    +

    Contact Me!!!

    +
    + + + + + + + + + +
    +
    +
    + ); +} diff --git a/src/index.css b/src/index.css index ec2585e..85de37a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,128 @@ +/* +* Prefixed by https://autoprefixer.github.io +* PostCSS: v7.0.29, +* Autoprefixer: v9.7.6 +* Browsers: last 4 version +*/ + body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +.container-kk { + width: 100vw; + height: 100vh; + overflow-y: auto; + overflow-x: hidden; + background: url(./asset/background.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.ffoonntt { + font-family: "Courgette", cursive; +} + +.card { + width: 700px; + height: auto; + padding: 25px; + padding-top: 25px; + background: -o-radial-gradient( + 0% 0%, + 100% 100%, + rgba(255, 255, 255, 0.4) 0%, + rgba(255, 255, 255, 0) 100% + ); + background: radial-gradient( + 100% 100% at 0% 0%, + rgba(255, 255, 255, 0.4) 0%, + rgba(255, 255, 255, 0) 100% + ); + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + border-radius: 20px; + padding-left: 10px; + padding-right: 10px; + -webkit-box-shadow: 0px 0px 12px rgb(82, 79, 79); + box-shadow: 0px 0px 12px rgb(82, 79, 79); + margin-top: 50px; +} + +.card:hover { + -webkit-backdrop-filter: blur(15px); + backdrop-filter: blur(15px); + background: -o-radial-gradient( + 0% 0%, + 100% 100%, + rgba(255, 255, 255, 0.5) 0%, + rgba(255, 255, 255, 0.2) 100% + ); + background: radial-gradient( + 100% 100% at 0% 0%, + rgba(255, 255, 255, 0.5) 0%, + rgba(255, 255, 255, 0.2) 100% + ); + -webkit-box-shadow: 0px 0px 16px rgb(82, 79, 79); + box-shadow: 0px 0px 16px rgb(82, 79, 79); +} +.rasm { + width: 40%; + height: 60%; +} + +.shadoww { + text-shadow: 3px 2px 7px rgb(84, 122, 192); +} + +.bshadow { + text-shadow: 3px 2px 10px white; + -webkit-text-stroke: 0.001px rgb(59, 55, 55); +} + +ul { + list-style-type: none; + margin: 0px; + padding: 0px; +} + +.card:last-child { + margin-bottom: 100px; +} + +.flexxx { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.irsm { + width: 1000px; + height: 1000px; +} + +.set { + color: white; +} + +* { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +}