fix: fixes image alignment and other todos

icydigital · Dec 14, 2023 · 6aea6c0 · 6aea6c0
1 parent c0b8157
commit 6aea6c0
Show file tree

Hide file tree

Showing 12 changed files with 263 additions and 206 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,25 @@
+name: ci
+
+on: push
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Set up Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Run the tests
+      run: npm test
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -0,0 +1,34 @@
+name: publish
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Set up Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Run the tests
+      run: npm test
+
+    - name: Create build folder
+      run: npm run build
+
+    - name: Upload build folder
+      run: ncftpput -R-v-u ${{ secrets.FTP_USER_NAME }} -p ${{ secrets.FTP_PW }} ${{ secrets.FTP_SERVER_ADDRESS }} ./ build/* 
diff --git a/README.md b/README.md
@@ -2,15 +2,11 @@
 
 lewine portfolio
 
-## todo 
+## todo
 
-- refactor code
-- change tab description from "React App to Lewein" 
 - optimize mobile appearance, breakpoints
 - review privacy policy, is bullet point 7) missing?
 - test, publish pipeline 
-- adds lewein.com/sound as subdomain/path
-- make language detection available
 
 ## build
 
@@ -21,7 +17,7 @@ npm run build
 ### upload
 
 ```
-ncftpput-R-v-u "username"-p "password" w0133587.kasserver.com ./ build/*
+ncftpput -R-v-u "username"-p "password" w0133587.kasserver.com ./ build/*
 ```
 ## Sources
 

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
-      name="description"
-      content="Web site created using create-react-app"
+      name="Lewein Website"
+      content="Showcase lewein production contributions and how to contact him"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Lewein</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -5,12 +5,6 @@
 .AppContainer {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-}
-
-.AppHeader {
-  display: flex;
-  flex-direction: column;
 }
 
 .HomeLogoHeader {
@@ -67,10 +61,6 @@
   color: #FFFFFF;
 }
 
-/* , */
-/* .musicLink, */
-/* .companyLink, */
-/* .helloLink,  */
 .serviceLink {
   display: flex;
   flex-direction: column;
@@ -121,18 +111,6 @@
   justify-content: center;
   text-decoration: none;
   color: #000000;
-
-}
-
-.VideoHeader {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  width: 100%;
-  height: 100vh;
-  position: relative;
-  overflow: hidden;
 }
 
 .lewineVideo {
@@ -153,7 +131,6 @@
   flex-direction: column;
   height: relative;
   width: 100%;
-  color: #000000;
   text-decoration: none;
 }
 
@@ -169,50 +146,74 @@
 
 .soundContainer .col2 {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  max-width: 100vw;
-  padding-left: 2.5vw;
-  padding-right: 2.5vw;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  flex-direction: column; 
+  flex-flow: row wrap; 
+  flex-wrap: wrap;
+  padding: 2.5vw;
+  -ms-flex-direction: column;
+  -ms-flex-wrap: wrap;
+  -webkit-flex-flow: row wrap; 
+}
+
+.soundProjectListContainer {
+  -webkit-box-flex: auto;
+  -ms-flex: auto;
+  flex: auto; 
+  width: 450px; 
+  margin: .5vw; 
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
 }
 
-.soundVideoContainer {
+.soundProjectListContainerChampion {
   display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  height: 100%;
-  /* padding-right: 1vw;
-  padding-left: 1vw; */
-  flex-direction : row;
-  justify-content : center;
-  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+  -ms-flex: auto;
+  -webkit-box-flex: auto;
+  flex: auto; 
+  margin: .5vw; 
+  width: 450px;
 }
 
-.soundPicBox {
+.soundProjectDescription {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
-  flex: 1;
-  min-width: 450px;
-  height: 42vmin;
-  padding-top: 1vh;
-  padding-bottom: 1vh;
+  /* height: 5vh; */
 }
 
-.videoDetailsContainer{
+.soundProject {
+  height: 100%;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 25vw;
-  height: auto;
+  align-items: center;
+  background-color: #000000;
 }
 
 .soundPic {
   display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
+  width: 100%; 
+  height: auto; 
+}
+
+.soundPicFirst {
+  width: 100%; 
+  height: auto; 
+}
+
+.soundPicLast {
+  width: 100%; 
+  height: auto; 
+}
+
+@media screen and (max-width: 500px) {
+  .soundProjectListContainer { margin: 0; }
+  .soundContainer .col2 { padding: 0; }
+
 }
 
 .InstagramIconCC {
@@ -239,7 +240,7 @@
 /* font-size ------------------------------------- */
 .OtherLogoHeader,
 .HomeLogoHeader {
-  font-size: 2.4vmin;
+  font-size: 2.6vmin;
 }
 
 .NavBarHeader {
@@ -257,8 +258,10 @@
 
 .soundContainer .col2,
 .musicContainer .col2,
-.artContainer .col2 {
-  font-size: 1.8vmin;
+.artContainer .col2,
+.PrivacyPolicyText,
+.ImprintText {
+  font-size: 2vmin;
 }
 
 .helloContainer .col2 {

diff --git a/src/App.js b/src/App.js
@@ -17,18 +17,16 @@ import {
 function App() {
     return (
       <Router>
-        <div className="AppContainer">
             <Switch>
-              <Route path="/sound" component={Sound}>
-              </Route>
+              {/* <Route path="/sound" component={Sound}>
+              </Route> */}
               <Route exact path="/" component={Sound}>
               </Route>
               <Route path="/imprint" component={Imprint}>
               </Route>
               <Route path="/privacypolicy" component={PrivacyPolicy}>
               </Route>
             </Switch>
-        </div>
       </Router>
     );
 }

diff --git a/src/assets/2227.jpg b/src/assets/2227.jpg
diff --git a/src/assets/2227.png b/src/assets/2227.png
diff --git a/src/assets/Chaampion Handy.mp4 → src/assets/Chaampion_Handy.mp4 b/src/assets/Chaampion Handy.mp4 → src/assets/Chaampion_Handy.mp4