Created the Profile Template

axios/index.tsx

@@ -0,0 +1,3 @@
+import axios from 'axios';
+
+export default axios.create({ baseURL: process.env.serverURL });

components/Content/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Layout } from 'antd';
+const { Content } = Layout;
+
+export default ({ children }) => {
+    return (
+        <Content>
+            {children}
+        </Content>
+    )
+};

components/Footer/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Layout } from 'antd';
+import '../../css/Footer.module.css';
+const { Footer } = Layout;
+
+export default () => {
+	return (
+		<Footer id="footer">
+			The Alcoding Club PESU © 2020
+		</Footer>
+	);
+};

components/Header/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Layout } from 'antd';
+import '../../css/Header.module.css';
+
+const { Header } = Layout;
+
+export default () => {
+	return (
+		<Header id="navbar">
+			<ul className="navbar-list">
+				<li>
+					<a className="navbar-link" href="/">
+						<img src="/LOGO.jpg" className="logo" alt="logo" />
+					</a>
+				</li>
+				<li className="navbar-end-li">
+					<a className="navbar-link" href="/login">
+						Login
+					</a>
+				</li>
+			</ul>
+		</Header >
+	);
+};

components/Layout/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Layout } from 'antd';
+import '../../css/Layout.module.css';
+
+export default ({ children }) => {
+    return (
+        <Layout className="main-layout">
+            {children}
+        </Layout>
+    )
+}

components/Page/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Layout from '../Layout';
+import Content from '../Content';
+import Header from '../Header';
+import Footer from '../Footer';
+import withRedux from '../../redux/store/with-redux-store';
+
+const Page = ({ children }) => (
+	<>
+		<Layout> 
+			<Header />
+			<Content>
+				{children}
+			</Content>
+			<Footer />
+		</Layout>
+	</>
+);
+
+export default withRedux(Page);

css/Edit-Profile.module.css

@@ -0,0 +1,68 @@
+  .ant-layout-sider {
+    background: rgb(247, 248, 248);
+    color: rgb(213, 52, 52);
+    line-height: 120px;
+    text-align:center;
+  }
+
+  .ant-layout-content {
+    background: rgb(247, 248, 248);
+    color: rgb(182, 49, 49);
+    min-height: 10px;
+    line-height: 10px;
+    text-align:right;
+  }
+
+  .space {
+    margin: 0vh 0 7vh 0;
+  }
+
+  .Info {
+    color: rgb(12, 11, 1);
+    text-align: right;
+    font-size: 21px; 
+    margin: 1vh 0 4vh 0;
+  }
+
+  .ant-form-item {
+    margin-bottom: 10px;
+  }
+
+  .links-container {
+    margin: 1vh 3vw 6vh 5vw ;
+  }
+
+  .vertical-container {
+    margin: 1vh 3vw 4vh 5vw;
+  }
+
+  .links-sec {
+    height : 50px;
+    text-align: center;
+    color: black;
+    font-size: 1.6em;
+  }
+  .col-1 {width: 8.33%;}
+  .col-2 {width: 16.66%;}
+  .col-3 {width: 25%;}
+  .col-4 {width: 33.33%;}
+  .col-5 {width: 41.66%;}
+  .col-6 {width: 50%;}
+  .col-7 {width: 58.33%;}
+  .col-8 {width: 66.66%;}
+  .col-9 {width: 75%;}
+  .col-10 {width: 83.33%;}
+  .col-11 {width: 91.66%;}
+  .col-12 {width: 100%;}
+
+  @media (max-width: 600px) {
+    .cont {
+        margin: 10 10%;
+        margin-top: 20%;
+
+    }
+}
+
+  .deg {
+    display: inline;
+  }

css/Footer.module.css

@@ -0,0 +1,3 @@
+#footer {
+    text-align: center;
+}

css/Header.module.css

@@ -0,0 +1,25 @@
+.logo {
+    width: 64px;
+    height: 64px;
+    padding: 0;
+    margin: 0;
+}
+
+.navbar-link {
+    color: white;
+}
+
+.navbar-end-li {
+    margin-left: auto;
+}
+
+.navbar-list {
+    list-style: none;
+    display: flex;
+}
+
+#navbar {
+    color: white;
+    padding: 0;
+    padding-right: 50px;
+}

css/Index.module.css

@@ -0,0 +1,3 @@
+.index-container {
+    text-align: center;
+}

css/Layout.module.css

@@ -0,0 +1,4 @@
+.main-layout {
+	height: 100vh;
+	background: #e5e5e5;
+}

css/Login.module.css

@@ -0,0 +1,31 @@
+#components-form-demo-normal-login .login-form {
+    max-width: 300px;
+}
+
+#components-form-demo-normal-login .login-form-forgot {
+    float: right;
+}
+
+#components-form-demo-normal-login .ant-col-rtl .login-form-forgot {
+    float: left;
+}
+
+#components-form-demo-normal-login .login-form-button {
+    width: 100%;
+}
+
+#login-form-button {
+    margin-right: 10px;
+}
+
+.login-container {
+    margin: 0 30%;
+    margin-top: 5%;
+}
+
+@media (max-width: 600px) {
+    .login-container {
+        margin: 0 10%;
+        margin-top: 20%;
+    }
+}

css/Profile.module.css

@@ -0,0 +1,67 @@
+.center-class {
+	display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.profile-container {
+	margin: 2vh 5vw 0 5vw;
+	padding: 0;
+}
+
+.profile-grid {
+	display: grid;
+	grid-template-columns: 35fr 65fr;
+	grid-gap: 1em;
+	grid-auto-rows: minmax(82vh, auto);
+}
+
+.profile-details {
+	margin: 0;
+	padding: 0;
+}
+
+.profile-details-container {
+	margin: 2% 10% 2% 0;
+}
+
+.username-div {
+	padding-top: 1vh;
+}
+
+.interests-div {
+	margin-top: 2vh;
+}
+
+.links-div {
+	margin-top: 3.5vh;
+}
+
+.edit-button {
+	margin-top: 8vh;
+}
+
+.contact-div {
+	margin-top: 3.5vh;;
+	display: grid;
+	grid-template-columns: 5fr 95fr;
+	grid-gap: 1em;
+}
+
+/* Content side */
+
+.profile-content {
+	margin: 0;
+	padding: 0;
+	border-left: #999 1pt solid;
+}
+
+.profile-content-container {
+	margin: 2% 5% 2% 12.5%;
+}
+
+.user-ranking-box {
+	background: rgba(211, 211, 211, 0.4);
+	height: 45vh;
+	max-height: 486px;
+}

css/index.css

@@ -0,0 +1 @@
+@import "~antd/dist/antd.css";

next.config.js

@@ -1 +1,18 @@
-const isProduction = (process.env.NODE_ENV || 'production') === 'production';
+const webpack = require('webpack');
+const withCSS = require('@zeit/next-css');
+
+const isProduction = (process.env.NODE_ENV || 'production') === 'production';
+const serverURL = isProduction ? "https://posterior.herokuapp.com" : "http://localhost:4000/api";
+
+module.exports = withCSS({
+    exportTrailingSlash: true,
+    serverURL: serverURL,
+    webpack: config => {
+        config.plugins.push(
+            new webpack.DefinePlugin({
+                'process.env.serverURL': JSON.stringify(serverURL),
+            }),
+        );
+        return config
+    },
+});