diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..d41a940 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +*.gif filter=lfs diff=lfs merge=lfs -text diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..37d8576 --- /dev/null +++ b/.gitignore @@ -0,0 +1,177 @@ +# Logs +logs +*.log +npm-debug.log* + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules +jspm_packages + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history +.next + +############################ +# OS X +############################ + +.DS_Store +.AppleDouble +.LSOverride +Icon +.Spotlight-V100 +.Trashes +._* + + +############################ +# Linux +############################ + +*~ + + +############################ +# Windows +############################ + +Thumbs.db +ehthumbs.db +Desktop.ini +$RECYCLE.BIN/ +*.cab +*.msi +*.msm +*.msp + + +############################ +# Packages +############################ + +*.7z +*.csv +*.dat +*.dmg +*.gz +*.iso +*.jar +*.rar +*.tar +*.zip +*.com +*.class +*.dll +*.exe +*.o +*.seed +*.so +*.swo +*.swp +*.swn +*.swm +*.out +*.pid + + +############################ +# Logs and databases +############################ + +.tmp +*.log +*.sql +*.sqlite + + +############################ +# Misc. +############################ + +*# +.idea +nbproject +.vscode/ + + +############################ +# Node.js +############################ + +lib-cov +lcov.info +pids +logs +results +build +node_modules +.node_history +package-lock.json +**/package-lock.json +!docs/package-lock.json +*.heapsnapshot + + +############################ +# Tests +############################ + +testApp +coverage +cypress/screenshots +cypress/videos + + +############################ +# Documentation +############################ + +dist + +############################ +# Builds +############################ + +packages/generators/app/files/public/ +schema.graphql + +############################ +# Example app +############################ + +.dev +# *.cache + +############################ +# Visual Studio Code +############################ + +front-workspace.code-workspace +.yarn +.yarnrc \ No newline at end of file diff --git a/components/Header/header.module.css b/components/Header/header.module.css new file mode 100644 index 0000000..e69de29 diff --git a/components/Header/index.jsx b/components/Header/index.jsx new file mode 100644 index 0000000..d2ced11 --- /dev/null +++ b/components/Header/index.jsx @@ -0,0 +1,37 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; + +const Header = () => { + const router = useRouter(); + const menu = [ + { path: "/", name: "Home" }, + { path: "/works", name: "Works" }, + ]; + return ( +
+
+
+

+ Lofigrammer +

+
+
+
    + {menu.map(({ path, name }, key) => ( +
  • + {name} + {path === router.asPath && ( +
    + )} +
    • + ))} +
+
+
+
+ ); +}; +export default Header; diff --git a/components/icons/Github/index.jsx b/components/icons/Github/index.jsx new file mode 100644 index 0000000..b9a3db6 --- /dev/null +++ b/components/icons/Github/index.jsx @@ -0,0 +1,30 @@ +const Github = () => { + return ( + + ); +}; + +export default Github; diff --git a/components/icons/Instagram/index.jsx b/components/icons/Instagram/index.jsx new file mode 100644 index 0000000..48ef1e0 --- /dev/null +++ b/components/icons/Instagram/index.jsx @@ -0,0 +1,29 @@ +const Instagram = () => { + return ( + + ); +}; +export default Instagram; diff --git a/components/icons/Linkedin/index.jsx b/components/icons/Linkedin/index.jsx new file mode 100644 index 0000000..7cf739b --- /dev/null +++ b/components/icons/Linkedin/index.jsx @@ -0,0 +1,29 @@ +const Linkedin = () => { + return ( + + ); +}; +export default Linkedin; diff --git a/components/icons/Telegram/index.jsx b/components/icons/Telegram/index.jsx new file mode 100644 index 0000000..7eccd70 --- /dev/null +++ b/components/icons/Telegram/index.jsx @@ -0,0 +1,29 @@ +const Telegram = () => { + return ( + + ); +}; +export default Telegram; diff --git a/components/icons/Twitter/index.jsx b/components/icons/Twitter/index.jsx new file mode 100644 index 0000000..7793107 --- /dev/null +++ b/components/icons/Twitter/index.jsx @@ -0,0 +1,29 @@ +const Twitter = () => { + return ( + + ); +}; +export default Twitter; diff --git a/markdowns/game_of_life.md b/markdowns/game_of_life.md new file mode 100644 index 0000000..7672da5 --- /dev/null +++ b/markdowns/game_of_life.md @@ -0,0 +1,6 @@ +--- +title: Game Of Life +link: http://golbyaram.herokuapp.com +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada. Tincidunt nunc pulvinar sapien et ligula. Suscipit tellus mauris a diam maecenas sed enim ut. Tellus in metus vulputate eu scelerisque felis imperdiet proin. Egestas fringilla phasellus faucibus scelerisque eleifend. Ultrices neque ornare aenean euismod. Non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Vitae turpis massa sed elementum. Placerat duis ultricies lacus sed turpis. Eget nunc lobortis mattis aliquam faucibus. Cras pulvinar mattis nunc sed blandit libero volutpat sed. Mi quis hendrerit dolor magna eget est lorem. Eget dolor morbi non arcu. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Odio facilisis mauris sit amet massa vitae tortor condimentum. Luctus venenatis lectus magna fringilla. diff --git a/markdowns/perlinnoise_and_flowfields.md b/markdowns/perlinnoise_and_flowfields.md new file mode 100644 index 0000000..bf75df4 --- /dev/null +++ b/markdowns/perlinnoise_and_flowfields.md @@ -0,0 +1,6 @@ +--- +title: Perlin Noise And Flowfields +link: https://lofigrammer.github.io/perlinnoise_and_flowfields/ +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada. Tincidunt nunc pulvinar sapien et ligula. Suscipit tellus mauris a diam maecenas sed enim ut. Tellus in metus vulputate eu scelerisque felis imperdiet proin. Egestas fringilla phasellus faucibus scelerisque eleifend. Ultrices neque ornare aenean euismod. Non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Vitae turpis massa sed elementum. Placerat duis ultricies lacus sed turpis. Eget nunc lobortis mattis aliquam faucibus. Cras pulvinar mattis nunc sed blandit libero volutpat sed. Mi quis hendrerit dolor magna eget est lorem. Eget dolor morbi non arcu. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Odio facilisis mauris sit amet massa vitae tortor condimentum. Luctus venenatis lectus magna fringilla. diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..a6acc23 --- /dev/null +++ b/next.config.js @@ -0,0 +1,24 @@ +/** @type {import('next').NextConfig} */ +const withMDX = require("@next/mdx")({ + extension: /\.mdx?$/, + options: { + providerImportSource: "@mdx-js/react", + + // If you use remark-gfm, you'll need to use next.config.mjs + // as the package is ESM only + // https://github.com/remarkjs/remark-gfm#install + remarkPlugins: [], + rehypePlugins: [], + // If you use `MDXProvider`, uncomment the following line. + // providerImportSource: "@mdx-js/react", + }, +}); +const nextConfig = { + reactStrictMode: true, + swcMinify: true, +}; +module.exports = withMDX({ + // Append the default value with md extensions + pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"], +}); +module.exports = nextConfig; diff --git a/package.json b/package.json new file mode 100644 index 0000000..0d659c4 --- /dev/null +++ b/package.json @@ -0,0 +1,31 @@ +{ + "name": "frontend", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build:static": "next build && next export", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "@fullpage/react-fullpage": "^0.1.30", + "@mdx-js/loader": "^2.1.5", + "@mdx-js/react": "^2.1.5", + "@next/mdx": "^13.0.3", + "autoprefixer": "^10.4.12", + "gray-matter": "^4.0.3", + "next": "12.3.1", + "postcss": "^8.4.17", + "react": "18.2.0", + "react-bootstrap": "^2.6.0", + "react-dom": "18.2.0", + "react-page-scroller": "^2.3.1", + "tailwindcss": "^3.1.8" + }, + "devDependencies": { + "eslint": "8.24.0", + "eslint-config-next": "12.3.1" + } +} diff --git a/pages/_app.js b/pages/_app.js new file mode 100644 index 0000000..0dfce11 --- /dev/null +++ b/pages/_app.js @@ -0,0 +1,15 @@ +import "../styles/globals.css"; +import Header from "../components/Header"; + +function MyApp({ Component, pageProps }) { + return ( +
+
+
+ +
+
+ ); +} + +export default MyApp; diff --git a/pages/_document.js b/pages/_document.js new file mode 100644 index 0000000..93f3c9d --- /dev/null +++ b/pages/_document.js @@ -0,0 +1,13 @@ +import { Html, Head, Main, NextScript } from "next/document"; + +const Document = () => ( + + + +
+ + + +); + +export default Document; diff --git a/pages/index.jsx b/pages/index.jsx new file mode 100644 index 0000000..9bf683e --- /dev/null +++ b/pages/index.jsx @@ -0,0 +1,85 @@ +import Image from "next/image"; +import Github from "../components/icons/Github"; +import Instagram from "../components/icons/Instagram"; +import Linkedin from "../components/icons/Linkedin"; +import Telegram from "../components/icons/Telegram"; +import Twitter from "../components/icons/Twitter"; +import * as matter from "gray-matter"; +import fs from "fs"; + +const Home = () => { + return ( +
+
+
+
+ Avatar +
+
+

+ Aram
Khachatryan +

+
+
+
+
+

HI I'M ARAM AND I LOVE PROGRAMMING

+
+
+
+
+
+ + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ ); +}; +export async function getStaticProps() { + const projects = []; + const files = fs.readdirSync("markdowns"); + + files.map((file, i) => { + const content = matter(fs.readFileSync(`markdowns/${file}`, "utf8")); + + projects.push({ + id: i, + slug: file.replace(".md", ""), + title: content.data.title, + link: content.data.link, + content: content.content, + }); + }); + + return { + props: { + projects, + }, + }; +} +export default Home; diff --git a/pages/works/index.jsx b/pages/works/index.jsx new file mode 100644 index 0000000..1f49ed4 --- /dev/null +++ b/pages/works/index.jsx @@ -0,0 +1,91 @@ +import React, { useState } from "react"; +import Image from "next/image"; +import fs from "fs"; +import path from "path"; +import * as matter from "gray-matter"; +import Link from "next/link"; + +const Works = ({ projects }) => { + return ( +
+
+ {projects.map(({ id, slug, title, link, content }, i) => { + return ( +
+
+
+ {title} +
+
+
+
+
+ {title} +
+
+ + See + +
+
+
+

{content}

+
+
+
+
+
+ ); + })} +
+
+ ); +}; + +export async function getStaticProps() { + const projects = []; + const MDS_PATHS = path.join("markdowns"); + const files = fs.readdirSync(MDS_PATHS); + + files.map((file, i) => { + const content = matter(fs.readFileSync(`${MDS_PATHS}/${file}`, "utf8")); + + projects.push({ + id: i, + slug: file.replace(".md", ""), + title: content.data.title, + link: content.data.link, + content: content.content, + }); + }); + + return { + props: { + projects, + }, + }; +} + +export default Works; diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..33ad091 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/public/ArtiRegular.otf b/public/ArtiRegular.otf new file mode 100644 index 0000000..9ff73cc Binary files /dev/null and b/public/ArtiRegular.otf differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/game_of_life.png b/public/game_of_life.png new file mode 100644 index 0000000..1ece1ea Binary files /dev/null and b/public/game_of_life.png differ diff --git a/public/perlinnoise_and_flowfields.gif b/public/perlinnoise_and_flowfields.gif new file mode 100644 index 0000000..cb7543a --- /dev/null +++ b/public/perlinnoise_and_flowfields.gif @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:90c40e7192b52f159e033c549531b86ee2f11c628abd78edde2c3d2d2bf6d406 +size 22744849 diff --git a/public/profile-picture.jpg b/public/profile-picture.jpg new file mode 100644 index 0000000..549ed38 Binary files /dev/null and b/public/profile-picture.jpg differ diff --git a/styles/globals.css b/styles/globals.css new file mode 100644 index 0000000..67c2498 --- /dev/null +++ b/styles/globals.css @@ -0,0 +1,10 @@ +@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&family=Roboto:wght@100;400&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap"); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +* { + transition: 0.3s; +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..649e59f --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,34 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./pages/**/*.{js,ts,jsx,tsx}", + "./components/**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: { + fontFamily: { + "fredoka-one": ['"Fredoka One"', "cursive"], + roboto: ['"Roboto"', "sans-serif"], + }, + backgroundImage: { + bgPhoto: "url('/bg.jpg')", + }, + backgroundColor: { + apricot: "rgba(224, 157, 11, 1)", + }, + boxShadow: { + card: "inset 0px 0px 13px 4px rgba(175, 117, 4, 1)", + }, + colors: { + ownBlue: "rgba(224, 157, 11, 1)", + }, + borderColor: { + apricot: "rgba(224, 157, 11, 1)", + }, + textColor: { + "favorite-purple": "#531752", + }, + }, + }, + plugins: [], +};