diff --git a/angular.json b/angular.json index 6bfc39b..dbda5f9 100644 --- a/angular.json +++ b/angular.json @@ -37,7 +37,9 @@ "src/assets" ], "styles": [ - "src/styles.scss" + "src/styles.scss", + "src/stylesheets/colors.scss", + "src/stylesheets/media.scss" ], "scripts": [] }, @@ -97,12 +99,17 @@ "src/assets" ], "styles": [ - "src/styles.scss" + "src/styles.scss", + "src/stylesheets/colors.scss", + "src/stylesheets/media.scss" ], "scripts": [] } } } } + }, + "cli": { + "analytics": false } } diff --git a/desktop.ini b/desktop.ini new file mode 100644 index 0000000..c293c4e --- /dev/null +++ b/desktop.ini @@ -0,0 +1,6 @@ +[.ShellClassInfo] +IconResource=D:\Dokumente\GitHub\Private_Projects\portfolio\src\assets\img\folder.ico,0 +[ViewState] +Mode= +Vid= +FolderType=Documents diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..d5d2fdb 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1,8 @@ - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
+

{{title}}, welcome!

- - - - - - - - diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..97e2113 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,3 @@ +h1 { + color: var(--phtalo-green); +} \ No newline at end of file diff --git a/src/assets/img/folder.ico b/src/assets/img/folder.ico new file mode 100644 index 0000000..7b31154 Binary files /dev/null and b/src/assets/img/folder.ico differ diff --git a/src/assets/img/yqni13-small.png b/src/assets/img/yqni13-small.png new file mode 100644 index 0000000..f8f495b Binary files /dev/null and b/src/assets/img/yqni13-small.png differ diff --git a/src/index.html b/src/index.html index 68bc202..d417ee3 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,8 @@ Portfolio - + + diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..78e6a21 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,4 @@ /* You can add global styles to this file, and also import other style files */ + +@import "./stylesheets/colors.scss"; +@import "./stylesheets/media.scss"; \ No newline at end of file diff --git a/src/stylesheets/colors.scss b/src/stylesheets/colors.scss new file mode 100644 index 0000000..946bac0 --- /dev/null +++ b/src/stylesheets/colors.scss @@ -0,0 +1,55 @@ +:root { + /* yqni13 colors */ + --yqni13-purple: #650D88; + --yqni13-pink: #BC0C79; + + /* white type colors */ + --snow-white: #FFFAFA; + --ghost-white: #F8F8FF; + --alice-blue: #F0F8FF; + --antiflesh-white: #FAFAFA; + --gainsboro-white: #F1EFF2; + --off-white: #FBFBFB; + --ivory-white: #FFFFF0; + + /* dark mode theme#1 dark-red */ + --darkmode1-black1: #000000; + --darkmode1-red1: #3D0000; + --darkmode1-red2: #950101; + --darkmode1-red3: #FF0000; + + /* dark mode theme#2 dark-orange */ + --darkmode2-black1: #222831; + --darkmode2-grey1: #393E46; + --darkmode2-orange1: #FD7014; + --darkmode2-white1: #EEEEEE; + + /* dark mode theme#3 dark-pink */ + --darkmode3-black1: #000000; + --darkmode3-pink1: #86003C; + --darkmode3-pink2: #E41F7B; + --darkmode3-pink3: #FF8BA0; + + /* dark mode theme#4 dark-turquoise */ + --darkmode4-black1: #222831; + --darkmode4-grey1: #393E46; + --darkmode4-torquoise1: #00ADB5; + --darkmode4-torquoise2: #00FFF5; + + /* dark mode theme#5 dark-purple */ + --darkmode5-black1: #000000; + --darkmode5-purple1: #3E065F; + --darkmode5-purple2: #700B97; + --darkmode5-purple3: #8E05C2; + + /* dark mode theme6 dark-grey */ + --darkmode6-black1: #2A2438; + --darkmode6-grey1: #352F44; + --darkmode6-grey2: #5C5470; + --darkmode6-grey3: #DBD8E3; + + /* other defined colors */ + --phtalo-green: #0D413A; + --bordeau-red: #420116; + --formel1-red: #910001; +} \ No newline at end of file diff --git a/src/stylesheets/media.scss b/src/stylesheets/media.scss new file mode 100644 index 0000000..fe8c261 --- /dev/null +++ b/src/stylesheets/media.scss @@ -0,0 +1,31 @@ +/* media queries for responsive design regarding devices */ + +@media screen and (min-width: 1440px) { /* large desktop devices */ + body { + background-color: #4A516D; + } +} + +@media screen and (max-width: 1440px) { /* small desktop devices */ + body { + background-color: #d6f5d6; + } +} + +@media screen and (max-width: 1024px) { /* tablet device [landscape] */ + body { + background-color: #9999ff; + } +} + +@media screen and (max-width: 768px) { /* mobile devices [landscape] */ + body { + background-color: #ffb3cc; + } + +} +@media screen and (max-width: 480px) { /* mobile devices [portrait] */ + body { + background-color: #ffcc99; + } +} \ No newline at end of file