diff --git a/package.json b/package.json
index 8ae3740..7f289fe 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "cors": "^2.8.5",
"node-sass": "^4.13.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
diff --git a/server/app.js b/server/app.js
new file mode 100644
index 0000000..a5d044d
--- /dev/null
+++ b/server/app.js
@@ -0,0 +1,36 @@
+const express = require('express')
+const cors = require('cors')
+const bodyParser = require('body-parser')
+const fs = require('fs')
+
+const app = express()
+const port = 8000
+
+app.use(cors())
+
+app.get('/', (req, res) => {
+ fs.readdir('./assets/', (err, items) => {
+ result = items.map(el => 'image/' + el)
+ const pageSize = req.query.size || 3;
+ const pagesAmount = Math.ceil(items.length / pageSize );
+ const page = (req.query.page > pagesAmount) ? pagesAmount : req.query.page || 1;
+ console.log(`Page=${page}, server acessed`)
+ res.json({
+ "page": page,
+ "pagesAmount": pagesAmount,
+ "list": result.slice(page * pageSize - pageSize, page * pageSize),
+ })
+ })
+})
+app.get('/image/:name.:subname', (req, res) => {
+ res.sendFile(__dirname + '/assets/' + req.params.name + '.' + req.params.subname, (err) => {
+ console.log(__dirname + '/assets/' + req.params.name + '.' + req.params.subname)
+ if (err) {
+ next(err)
+ } else {
+ console.log('Sent:', req.query.path)
+ }
+ })
+})
+
+app.listen(port, () => console.log(`Example app listening on port ${port}!`))
\ No newline at end of file
diff --git a/server/assets/1-early-morning-walk.jpeg b/server/assets/1-early-morning-walk.jpeg
new file mode 100644
index 0000000..9eb8cc5
Binary files /dev/null and b/server/assets/1-early-morning-walk.jpeg differ
diff --git a/server/assets/10-early-morning-walk.jpeg b/server/assets/10-early-morning-walk.jpeg
new file mode 100644
index 0000000..fbdfc33
Binary files /dev/null and b/server/assets/10-early-morning-walk.jpeg differ
diff --git a/server/assets/11-early-morning-walk.jpeg b/server/assets/11-early-morning-walk.jpeg
new file mode 100644
index 0000000..be3f903
Binary files /dev/null and b/server/assets/11-early-morning-walk.jpeg differ
diff --git a/server/assets/12-early-morning-walk.jpeg b/server/assets/12-early-morning-walk.jpeg
new file mode 100644
index 0000000..3a0e2ce
Binary files /dev/null and b/server/assets/12-early-morning-walk.jpeg differ
diff --git a/server/assets/13-early-morning-walk.jpeg b/server/assets/13-early-morning-walk.jpeg
new file mode 100644
index 0000000..9eaf8ed
Binary files /dev/null and b/server/assets/13-early-morning-walk.jpeg differ
diff --git a/server/assets/14-early-morning-walk.jpeg b/server/assets/14-early-morning-walk.jpeg
new file mode 100644
index 0000000..c2d6611
Binary files /dev/null and b/server/assets/14-early-morning-walk.jpeg differ
diff --git a/server/assets/15-early-morning-walk.jpeg b/server/assets/15-early-morning-walk.jpeg
new file mode 100644
index 0000000..201461b
Binary files /dev/null and b/server/assets/15-early-morning-walk.jpeg differ
diff --git a/server/assets/16-early-morning-walk.jpeg b/server/assets/16-early-morning-walk.jpeg
new file mode 100644
index 0000000..4487ca2
Binary files /dev/null and b/server/assets/16-early-morning-walk.jpeg differ
diff --git a/server/assets/17-early-morning-walk.jpeg b/server/assets/17-early-morning-walk.jpeg
new file mode 100644
index 0000000..f396a9c
Binary files /dev/null and b/server/assets/17-early-morning-walk.jpeg differ
diff --git a/server/assets/18-early-morning-walk.jpeg b/server/assets/18-early-morning-walk.jpeg
new file mode 100644
index 0000000..6c7d267
Binary files /dev/null and b/server/assets/18-early-morning-walk.jpeg differ
diff --git a/server/assets/19-early-morning-walk.jpeg b/server/assets/19-early-morning-walk.jpeg
new file mode 100644
index 0000000..bfe5f3b
Binary files /dev/null and b/server/assets/19-early-morning-walk.jpeg differ
diff --git a/server/assets/2-early-morning-walk.jpeg b/server/assets/2-early-morning-walk.jpeg
new file mode 100644
index 0000000..dfa2188
Binary files /dev/null and b/server/assets/2-early-morning-walk.jpeg differ
diff --git a/server/assets/20-early-morning-walk.jpeg b/server/assets/20-early-morning-walk.jpeg
new file mode 100644
index 0000000..a68e07c
Binary files /dev/null and b/server/assets/20-early-morning-walk.jpeg differ
diff --git a/server/assets/21-early-morning-walk.jpeg b/server/assets/21-early-morning-walk.jpeg
new file mode 100644
index 0000000..27b3231
Binary files /dev/null and b/server/assets/21-early-morning-walk.jpeg differ
diff --git a/server/assets/22-early-morning-walk.jpeg b/server/assets/22-early-morning-walk.jpeg
new file mode 100644
index 0000000..ed84566
Binary files /dev/null and b/server/assets/22-early-morning-walk.jpeg differ
diff --git a/server/assets/23-early-morning-walk.jpeg b/server/assets/23-early-morning-walk.jpeg
new file mode 100644
index 0000000..e91ac11
Binary files /dev/null and b/server/assets/23-early-morning-walk.jpeg differ
diff --git a/server/assets/24-early-morning-walk.jpeg b/server/assets/24-early-morning-walk.jpeg
new file mode 100644
index 0000000..97b657f
Binary files /dev/null and b/server/assets/24-early-morning-walk.jpeg differ
diff --git a/server/assets/25-early-morning-walk.jpeg b/server/assets/25-early-morning-walk.jpeg
new file mode 100644
index 0000000..d73b7c8
Binary files /dev/null and b/server/assets/25-early-morning-walk.jpeg differ
diff --git a/server/assets/26-early-morning-walk.jpeg b/server/assets/26-early-morning-walk.jpeg
new file mode 100644
index 0000000..f1a326f
Binary files /dev/null and b/server/assets/26-early-morning-walk.jpeg differ
diff --git a/server/assets/3-early-morning-walk.jpeg b/server/assets/3-early-morning-walk.jpeg
new file mode 100644
index 0000000..fa4fc2b
Binary files /dev/null and b/server/assets/3-early-morning-walk.jpeg differ
diff --git a/server/assets/4-early-morning-walk.jpeg b/server/assets/4-early-morning-walk.jpeg
new file mode 100644
index 0000000..61af1e3
Binary files /dev/null and b/server/assets/4-early-morning-walk.jpeg differ
diff --git a/server/assets/5-early-morning-walk.jpeg b/server/assets/5-early-morning-walk.jpeg
new file mode 100644
index 0000000..e317e69
Binary files /dev/null and b/server/assets/5-early-morning-walk.jpeg differ
diff --git a/server/assets/6-early-morning-walk.jpeg b/server/assets/6-early-morning-walk.jpeg
new file mode 100644
index 0000000..ad1f7db
Binary files /dev/null and b/server/assets/6-early-morning-walk.jpeg differ
diff --git a/server/assets/7-early-morning-walk.jpeg b/server/assets/7-early-morning-walk.jpeg
new file mode 100644
index 0000000..23cbaaf
Binary files /dev/null and b/server/assets/7-early-morning-walk.jpeg differ
diff --git a/server/assets/8-early-morning-walk.jpeg b/server/assets/8-early-morning-walk.jpeg
new file mode 100644
index 0000000..5609e8e
Binary files /dev/null and b/server/assets/8-early-morning-walk.jpeg differ
diff --git a/server/assets/9-early-morning-walk.jpeg b/server/assets/9-early-morning-walk.jpeg
new file mode 100644
index 0000000..d5bd596
Binary files /dev/null and b/server/assets/9-early-morning-walk.jpeg differ
diff --git a/src/App.js b/src/App.js
index 8e6b6d7..b48ee1a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,10 +8,12 @@ import {
Navbar,
Home,
Gallery,
+ Footer,
} from './components'
-import './app.css';
+import './app.scss';
+
+const App = () => {
-export default function App() {
return (
@@ -23,6 +25,8 @@ export default function App() {
+
);
}
+export default App;
\ No newline at end of file
diff --git a/src/app.css b/src/app.scss
similarity index 69%
rename from src/app.css
rename to src/app.scss
index 3ee0085..b9240ad 100644
--- a/src/app.css
+++ b/src/app.scss
@@ -1,9 +1,11 @@
@import url('https://fonts.googleapis.com/css?family=Assistant|Kaushan+Script&display=swap');
-#root {
- padding-top: 10vh;
-}
+
a, p, span {
font-family: 'Assistant', sans-serif;
font-size: 3vh;
font-weight: 300;
+ color: var(--text-color);
+}
+body {
+ background-color: var(--background-color);
}
\ No newline at end of file
diff --git a/src/components.js b/src/components.js
index 03a156d..9bd18d9 100644
--- a/src/components.js
+++ b/src/components.js
@@ -1,9 +1,11 @@
import Navbar from './components/Navbar';
import Home from './components/Home';
-import Gallery from './components/Gallety'
+import { GalleryView as Gallery } from './components/GalleryView'
+import Footer from './components/Footer'
export {
Navbar,
Home,
- Gallery
+ Gallery,
+ Footer
};
\ No newline at end of file
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..89b8579
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import './footer.scss'
+import { ReactComponent as Telegram} from './telegram.svg'
+
+const Footer = () => {
+ return (
+
+ );
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/Gallery.js b/src/components/Gallery.js
new file mode 100644
index 0000000..f2659f2
--- /dev/null
+++ b/src/components/Gallery.js
@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+import GalleryItem from "./GalleryItem";
+import './gallery.scss';
+
+const GalleryList = (json) => {
+ let result = [];
+ let key = 0;
+ for (const el of json) {
+ result.push(
+
+ );
+ }
+ return result;
+}
+
+const Gallery = props => {
+ const [galleryData, setGalleryData] = useState([]);
+ const size = (props.type === "galleryList") ? 4 : 9;
+
+ useEffect( () => {
+ async function fetchData() {
+ const res = await fetch(`http://localhost:8000/?size=${size}`);
+ const json = await res.json();
+ setGalleryData(json.list);
+ }
+ fetchData();
+ }, [size]);
+
+ return (
+
+ {GalleryList(galleryData)}
+
+ );
+}
+
+export default Gallery;
\ No newline at end of file
diff --git a/src/components/GalleryItem.js b/src/components/GalleryItem.js
new file mode 100644
index 0000000..83a65a7
--- /dev/null
+++ b/src/components/GalleryItem.js
@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import ViewBox from './ViewBox'
+import './GalleryItem.scss';
+
+const GalleryItem = props => {
+ const [showViewBox, setShowViewbox] = useState(false);
+ const src = 'http://localhost:8000/' + props.src;
+
+ return (
+ setShowViewbox(true) }>
+

+
+ {showViewBox &&
}
+
+ );
+}
+
+export default GalleryItem;
\ No newline at end of file
diff --git a/src/components/GalleryItem.scss b/src/components/GalleryItem.scss
new file mode 100644
index 0000000..55862e4
--- /dev/null
+++ b/src/components/GalleryItem.scss
@@ -0,0 +1,14 @@
+.galleryItem {
+ margin-bottom: 3vh;
+
+ & > img {
+ z-index: 5;
+ max-width: 100%;
+ max-height: 75vh;
+ cursor: pointer;
+
+ &:hover {
+ filter: contrast(75%) brightness(120%);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/GalleryView.js b/src/components/GalleryView.js
new file mode 100644
index 0000000..8dcfe51
--- /dev/null
+++ b/src/components/GalleryView.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import Gallery from './Gallery'
+import './galleryView.scss';
+
+const GalleryView = () => {
+
+ return (
+
+
Gallery
+
+
+ );
+}
+export { GalleryView };
\ No newline at end of file
diff --git a/src/components/Gallety.js b/src/components/Gallety.js
deleted file mode 100644
index bec4e4f..0000000
--- a/src/components/Gallety.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import './gallery.css';
-
-export default function Gallery () {
- return (
-
- Gallery
-
- );
-}
\ No newline at end of file
diff --git a/src/components/Home.js b/src/components/Home.js
index 5f676f2..6cf80d0 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,10 +1,19 @@
import React from 'react';
-import './home.css';
+import Gallery from './Gallery'
+import './home.scss';
-export default function Home () {
+const Home = () => {
return (
- Home
+
+
+ I'm Dmitriy Shishkov — photographer, programmer, filmmaker and writer. Here you can see some of my works. I'll upload more soon.
+
+
);
}
+export default Home;
\ No newline at end of file
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index c28a925..e8552f9 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -2,7 +2,7 @@ import React from 'react';
import { Link } from 'react-router-dom';
import './navbar.scss'
import { ReactComponent as Logo } from './logo.svg'
-export default function Navbar () {
+const Navbar = () => {
return (
);
-}
\ No newline at end of file
+}
+export default Navbar;
\ No newline at end of file
diff --git a/src/components/ViewBox.js b/src/components/ViewBox.js
new file mode 100644
index 0000000..4cea41e
--- /dev/null
+++ b/src/components/ViewBox.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import './viewBox.scss';
+
+const ViewBox = props => {
+ return (
+
+

{
+ setTimeout(() => props.click(false), 100);
+ }} />
+
+ );
+}
+export default ViewBox;
\ No newline at end of file
diff --git a/src/components/footer.scss b/src/components/footer.scss
new file mode 100644
index 0000000..25ec6e2
--- /dev/null
+++ b/src/components/footer.scss
@@ -0,0 +1,10 @@
+footer {
+ width: 100vw;
+ min-height: 25vh;
+ display: flex;
+
+ .telegram {
+ fill: #2a9fd9;
+ height: 10vh;
+ }
+}
\ No newline at end of file
diff --git a/src/components/gallery.css b/src/components/gallery.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/gallery.scss b/src/components/gallery.scss
new file mode 100644
index 0000000..32a6061
--- /dev/null
+++ b/src/components/gallery.scss
@@ -0,0 +1,17 @@
+.galleryGrid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-gap: 3vh;
+ padding: 10vh 10vw;
+}
+.galleryList {
+ width: 100%;
+
+ .galleryItem {
+ max-width: 50vw;
+
+ &:nth-child(2n) {
+ float: right;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/galleryView.scss b/src/components/galleryView.scss
new file mode 100644
index 0000000..1bfd2a9
--- /dev/null
+++ b/src/components/galleryView.scss
@@ -0,0 +1,11 @@
+.galleryView {
+ h1 {
+ grid-column: span 3;
+ font-family: 'Kaushan Script', cursive;
+ font-size: 10vh;
+ text-align: center;
+ padding-top: 10vh;
+ padding-bottom: 7vh;
+ color: var(--text-color);
+ }
+}
\ No newline at end of file
diff --git a/src/components/header_bg.jpeg b/src/components/header_bg.jpeg
new file mode 100644
index 0000000..be3f903
Binary files /dev/null and b/src/components/header_bg.jpeg differ
diff --git a/src/components/home.css b/src/components/home.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/home.scss b/src/components/home.scss
new file mode 100644
index 0000000..70cfc34
--- /dev/null
+++ b/src/components/home.scss
@@ -0,0 +1,31 @@
+header {
+ height: 100vh;
+ width: 100vw;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ background-image: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ), url(./header_bg.jpeg);
+ background-size: cover;
+ background-position: bottom;
+
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
+ h1 {
+ font-family: 'Kaushan Script', cursive;
+ font-size: 10vh;
+ color: #ffffff;
+ }
+ p {
+ color: white;
+ }
+}
+main {
+ padding: 15vmin;
+ display: inline-block;
+
+ & > p {
+ font-size: 5vh;
+ margin-bottom: 15vmin;
+ }
+}
\ No newline at end of file
diff --git a/src/components/logo.svg b/src/components/logo.svg
index ed77636..eb9dfe4 100644
--- a/src/components/logo.svg
+++ b/src/components/logo.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/components/navbar.scss b/src/components/navbar.scss
index d60c174..41d77fb 100644
--- a/src/components/navbar.scss
+++ b/src/components/navbar.scss
@@ -5,10 +5,16 @@ nav {
display: flex;
padding: 2vh 4vw;
width: 100vw;
- box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+ background-color: var(--background-color);
+ z-index: 100;
+
+ &.showShadow {
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+ }
.logo {
height: 6vh;
+ fill: var(--text-color);
}
div {
diff --git a/src/components/telegram.svg b/src/components/telegram.svg
new file mode 100644
index 0000000..704be0e
--- /dev/null
+++ b/src/components/telegram.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/viewBox.scss b/src/components/viewBox.scss
new file mode 100644
index 0000000..c3a27dc
--- /dev/null
+++ b/src/components/viewBox.scss
@@ -0,0 +1,16 @@
+.viewBox {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: var(--background-color);
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ z-index: 1000;
+
+ img {
+ object-fit: contain;
+ }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index f5185c1..4cb9410 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import './index.css';
+import './index.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';
diff --git a/src/index.css b/src/index.scss
similarity index 59%
rename from src/index.css
rename to src/index.scss
index aecc6c9..4e9be53 100644
--- a/src/index.css
+++ b/src/index.scss
@@ -1,5 +1,16 @@
+:root {
+ color-scheme: light dark;
+ --background-color: #ffffff;
+ --text-color: #282627;
+}
+
* {
box-sizing: inherit;
+ margin: 0;
+ scrollbar-width: none;
+}
+*::-webkit-scrollbar {
+ display: none;
}
a {
@@ -21,3 +32,11 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ color-scheme: light dark;
+ --background-color: #1c1c1e;
+ --text-color: #ffffff;
+ }
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 49f2634..c210ca6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2975,6 +2975,14 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
+cors@^2.8.5:
+ version "2.8.5"
+ resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
+ integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
+ dependencies:
+ object-assign "^4"
+ vary "^1"
+
cosmiconfig@^5.0.0, cosmiconfig@^5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
@@ -7110,7 +7118,7 @@ oauth-sign@~0.9.0:
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -10526,7 +10534,7 @@ value-equal@^1.0.1:
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
-vary@~1.1.2:
+vary@^1, vary@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=