danylodude/server_home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Danylo Dotsenko 2024-05-30 12:44:57 -04:00
parent 0307d1de74
commit e237b1ff0f
11 changed files with 1469 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
Dockerfile Normal file
View File

@ -0,0 +1,17 @@
FROM node:20.10.0-slim
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm install -g serve
RUN npm run build
EXPOSE 3000
CMD ["serve", "-s", "build"]

14
generate-react-cli.json Normal file
View File

@ -0,0 +1,14 @@
{
"usesTypeScript": false,
"usesStyledComponents": true,
"testLibrary": "None",
"component": {
"default": {
"path": "src/components",
"withStyle": false,
"withTest": false,
"withStory": false,
"withLazy": false
}
}
}

1365
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -6,9 +6,12 @@
"@testing-library/jest-dom": "^5.17.0", "@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"generate-react-cli": "^8.4.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"serve": "^14.2.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {
@ -34,5 +37,8 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
},
"devDependencies": {
"sass": "^1.69.7"
} }
} }

8
public/index.html
View File

@ -2,14 +2,14 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <!--<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />-->
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Dotsenko Server Homepage"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <!--<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />-->
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Dotsenko.ca</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

22
public/manifest.json
View File

@ -1,23 +1,7 @@
{ {
"short_name": "React App", "short_name": "Dotsenko.ca",
"name": "Create React App Sample", "name": "Dotsenko.ca Homepage",
"icons": [ "icons": [],
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".", "start_url": ".",
"display": "standalone", "display": "standalone",
"theme_color": "#000000", "theme_color": "#000000",

4
src/App.css
View File

@ -36,3 +36,7 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
body > #root > div {
height: 100vh;
}

16
src/App.js
View File

@ -1,23 +1,11 @@
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; import './App.css';
import LandingPage from './components/LandingPage/LandingPage';
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <LandingPage style={{height: '100%'}}/>
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div> </div>
); );
} }

23
src/components/LandingPage/LandingPage.js Normal file
View File

@ -0,0 +1,23 @@
import React from 'react';
import '../../styles/landingPage.scss'
const LandingPage = () => (
<div className='main'>
<div className='main-paragraph'>
<h1 style={{textAlign: 'left', width: '80%%', fontSize: '80px', margin: 0}}>Hello!&nbsp;</h1>
<span style={{width: '80%%', textAlign: 'left', marginTop: '5px', marginBottom: '5px'}}>
My name is Danylo; welcome to my homepage. Feel free to reach me at the following <a className='link' href="mailto:danylo@dotsenko.ca">email</a>.
</span>
<span>
Thanks for visiting!
</span>
{/* spinning thingy */}
</div>
</div>
);
//LandingPage.propTypes = {};
//LandingPage.defaultProps = {};
export default LandingPage;

5
src/index.js
View File

@ -5,10 +5,11 @@ import App from './App';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
<React.StrictMode> //<React.StrictMode>
<App /> <App />
</React.StrictMode> //</React.StrictMode>
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function

27
src/styles/landingPage.scss Normal file
View File

@ -0,0 +1,27 @@
.main {
background-color: #d28800;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-size: 40px 40px;
background-image: radial-gradient(circle, #b0b0b0 1px, rgba(0, 0, 0, 0) 1px);
}
.main-paragraph {
font-size: 30px;
color: white;
font-family: 'Helvetica', 'Futura';
letter-spacing: -1px;
text-align: left;
span {
display: block;
}
}
.link {
text-decoration: underline;
color: inherit;
}