+
+ Tben.me
- -
-
- { children }
-
-
-
-
+
+ {children}
+
+
+ -
-
-
-
- -- -
- -
-
- -- -
- -
-
- -- -
- -
-
- -- -
- -
-
- -- -
- -
-
- -- -
- -
-
- -- -
- -
-
- -- -
- -
-
- -- -
-
-
-
-
-
- -- -
- -
-
- -- -
- -
-
- -- -
- -
-
- -- -
- -
-
- -- -
- -
-
- -- -
- -
-
- -- -
-
- See my resume
- Linkedin
-
- Message from ${name} | ${email}
Name:
${name}
Email:
${email}
Message:
${message}
`, // html body - }); - - console.log("Message sent: %s", info.messageId); - res.json({ msg: "Success", info: info }); - } catch (error) { - console.log(error); - res.json({ msg: "Failed" }); - } - } -} diff --git a/pages/api/contactForm.ts b/pages/api/contactForm.ts new file mode 100644 index 0000000..4d26856 --- /dev/null +++ b/pages/api/contactForm.ts @@ -0,0 +1,49 @@ +/** + * Imports + */ +const fs = require("fs"); +const sanitizeHtml = require("sanitize-html"); +const nodemailer = require("nodemailer"); + +import sanitizeHtmlOptions from "../../functions/backend/sanitizeHtmlOptions"; +import { NextApiRequest, NextApiResponse } from "next"; + +let transporter = nodemailer.createTransport({ + host: process.env.OUTLOOK_HOST, + port: 587, + auth: { + user: process.env.OUTLOOK_EMAIL, + pass: process.env.OUTLOOK_EMAIL_PASSWORD, + }, +}); + +/** + * API handler + * + */ +export default async function handler(req: NextApiRequest, res: NextApiResponse) { + if (req.method === "POST") { + let name = req.body.name; + let email = req.body.email; + let message = req.body.message; + + const html = `Message from ${name} | ${email}
Name:
${name}
Email:
${email}
Message:
${message}
`; + const sanitizedHtml = sanitizeHtml(html, sanitizeHtmlOptions); + + try { + let info = await transporter.sendMail({ + from: email, + to: "benoti.san@gmail.com, benoti.sanchez@gmail.com", + subject: "Tben.me | Client Message", + text: "Hello from tben", + html: sanitizedHtml, + }); + + console.log("Message sent: %s", info.messageId); + res.json({ msg: "Success", info: info }); + } catch (error) { + console.log(error); + res.json({ msg: "Failed" }); + } + } +} diff --git a/pages/blog/[single].jsx b/pages/blog/[single].jsx deleted file mode 100644 index 41342b5..0000000 --- a/pages/blog/[single].jsx +++ /dev/null @@ -1,302 +0,0 @@ -/** - * ============================================================================== - * Imports - * ============================================================================== - */ -import React from "react"; -import Head from "next/head"; -const https = require("https"); - -/** ********************************************** */ -/** ********************************************** */ -/** ********************************************** */ - -import GeneralLayout from "../../layouts/general_layout/GeneralLayout"; -import TextShuffler from "../../components/actions/TextShuffler"; - -/** ****************************************************************************** */ -/** ****************************************************************************** */ -/** ****************************************************************************** */ -/** ****************************************************************************** */ -/** ****************************************************************************** */ -/** ****************************************************************************** */ - -/** - * ============================================================================== - * Main Component { Functional } - * ============================================================================== - * @param {Object} props - Server props - */ -export default function BlogIndex({ blogPost }) { - // ## Get Contexts - - /** ********************************************** */ - /** ********************************************** */ - /** ********************************************** */ - - // ## Javascript Variables - - /** ********************************************** */ - /** ********************************************** */ - /** ********************************************** */ - - // ## React Hooks { useState, useEffect, useRef, etc ... } - - /** ********************************************** */ - /** ********************************************** */ - /** ********************************************** */ - - // ## Function Return - return ( -
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
- { props.blogPosts.map(post =>
-
-
-
Contact me
-
+
-
-
-
- )
-}
+ );
+};
-export default contact
+export default contact;
diff --git a/pages/index.jsx b/pages/index.jsx
deleted file mode 100644
index 840b922..0000000
--- a/pages/index.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import Head from 'next/head'
-import React from 'react'
-import TextShuffler from '../components/actions/TextShuffler'
-import threeJsAnimations from '../functions/frontend/threeJsAnimations'
-import GeneralLayout from '../layouts/general_layout/GeneralLayout'
-
-const index = () => {
-
- return (
-
-
- Benjamin Toby | Fullstack developer, UI UX designer
-
-
-
-
-
-
-
-
- )
-}
-
-export default index
diff --git a/pages/work.jsx b/pages/work.jsx
index cf44c4f..3b30c37 100644
--- a/pages/work.jsx
+++ b/pages/work.jsx
@@ -1,8 +1,8 @@
-import React from 'react'
-import Head from 'next/head'
-import TextShuffler from '../components/actions/TextShuffler'
-import GeneralLayout from '../layouts/general_layout/GeneralLayout'
-import PortfolioEntry from '../components/PortfolioEntry'
+import React from "react";
+import Head from "next/head";
+import TextShuffler from "../components/actions/TextShuffler";
+import GeneralLayout from "../layouts/general_layout/GeneralLayout";
+import PortfolioEntry from "../components/PortfolioEntry";
const myWork = () => {
const portfolioEntries = require("../components/portfolioEntries.json");
@@ -11,21 +11,40 @@ const myWork = () => {
My Work | Tben
-
+
-
-
-
+
+
+
);
/** ********************************************** */
-};
+}
/** ****************************************************************************** */
/** ****************************************************************************** */
@@ -97,27 +109,15 @@ export default function BlogIndex(props) {
/** ****************************************************************************** */
/**
- * ==============================================================================
* Server Side Props or Static Props
* ==============================================================================
- * @param {Object} req - http incoming request object
- * @param {Object} res - http response object
- * @param {Object} query - queries attached to the url
*/
-export async function getStaticProps({ req, res, query }) {
+export const getStaticProps: GetStaticProps = async ({ params }: GetStaticPropsContext) => {
/**
* User Auth
*
* @abstract grab user
*/
- // const contentfulClient = contentful.createClient({
- // space: process.env.CONTENTFUL_SPACE_ID,
- // accessToken: process.env.CONTENTFUL_API_KEY,
- // });
-
- // const posts = await contentfulClient.getEntries()
-
- // console.log(posts);
/** ********************************************** */
@@ -126,59 +126,19 @@ export async function getStaticProps({ req, res, query }) {
*
* @abstract fetch date from the server or externnal source
*/
- // let blogPosts = await httpFetch({
- // options: {
- // method:"DELETE",
- // path: "/api/tben-blogs"
- // },
- // paradigm:"https"
- // })
-
- // console.log(blogPosts.data);
- const postsResponse = await new Promise((resolve, reject) => {
- https
- .get(
- /** ********************* Get Options object */
- {
- host: "datasquirel.com",
- path: `/api/query/get?db=tbenme&query=select+title,slug,excerpt,date_created+from+blog_posts+limit+10`,
- headers: {
- Authorization: process.env.DATASQUIREL_API_KEY,
- },
- },
- /** ********************************************** */
- /** ********************************************** */
- /** ********************************************** */
-
- /** ********************* Callback function */
- (response) => {
- var str = "";
-
- // ## another chunk of data has been received, so append it to `str`
- response.on("data", function (chunk) {
- str += chunk;
- });
-
- // ## the whole response has been received, so we just print it out here
- response.on("end", function () {
- resolve(JSON.parse(str))
- });
-
- response.on("error", (err) => {
- console.log(err);
- });
- }
- )
- .end();
+ const postsResponse = await datasquirel.get({
+ key: process.env.DATASQUIREL_API_KEY,
+ db: "tbenme",
+ query: "select title,slug,excerpt,date_created from blog_posts limit 10",
});
if (!postsResponse.success) {
return {
redirect: {
destination: "/",
- permanent: false
- }
- }
+ permanent: false,
+ },
+ };
}
const posts = postsResponse.payload;
@@ -192,10 +152,10 @@ export async function getStaticProps({ req, res, query }) {
props: {
blogPosts: posts,
},
- revalidate: 3600
+ revalidate: 3600,
};
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
-}
+};
diff --git a/pages/contact.jsx b/pages/contact.jsx
index 95ad4ac..304b91a 100644
--- a/pages/contact.jsx
+++ b/pages/contact.jsx
@@ -1,36 +1,88 @@
-import React from 'react'
-import Head from 'next/head'
-import TextShuffler from '../components/actions/TextShuffler'
-import submitContactForm from '../functions/frontend/submitContactForm'
-import GeneralLayout from '../layouts/general_layout/GeneralLayout'
-import threeJsAnimations from '../functions/frontend/threeJsAnimations'
+import React from "react";
+import Head from "next/head";
+import TextShuffler from "../components/actions/TextShuffler";
+import submitContactForm from "../functions/frontend/submitContactForm";
+import GeneralLayout from "../layouts/general_layout/GeneralLayout";
+import threeJsAnimations from "../functions/frontend/threeJsAnimations";
const contact = () => {
-
let [success, setSuccess] = React.useState(false);
return (
+
+
+ {props.blogPosts.map((post: { slug: string; title: string; excerpt: string; date_created: string }, index: number) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- { portfolioEntries.map(entry => 's from expanding the number of files TypeScript should add to a project. */
+ /* JavaScript Support */
+ // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+ // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
+ // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+ /* Emit */
+ // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+ // "declarationMap": true, /* Create sourcemaps for d.ts files. */
+ // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
+ // "sourceMap": true, /* Create source map files for emitted JavaScript files. */
+ // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
+ // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+ // "outDir": "./", /* Specify an output folder for all emitted files. */
+ // "removeComments": true, /* Disable emitting comments. */
+ // "noEmit": true, /* Disable emitting files from a compilation. */
+ // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+ // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
+ // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+ // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
+ // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
+ // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
+ // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+ // "newLine": "crlf", /* Set the newline character for emitting files. */
+ // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+ // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
+ // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
+ // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
+ // "declarationDir": "./", /* Specify the output directory for generated declaration files. */
+ // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+ /* Interop Constraints */
+ // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
+ // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+ // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
+ "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */, // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+ "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */ /* Type Checking */,
+ "strict": true /* Enable all strict type-checking options. */, // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+ // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
+ // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+ // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+ // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
+ // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
+ // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
+ // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
+ // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
+ // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
+ // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
+ // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
+ // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
+ // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
+ // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
+ // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
+ // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
+ // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
+ /* Completeness */
+ // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
+ "skipLibCheck": true /* Skip type checking all .d.ts files. */,
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "noEmit": true,
+ "incremental": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "moduleResolution": "node",
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ]
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/_app.js", ".next/types/**/*.ts", "dump/index.jsx", "pages/_document.js"],
+ "exclude": ["node_modules"]
+}
+
+
+
+
- )
-}
+ );
+};
-export default myWork
+export default myWork;
// {
// "title": "Stirrmedia Social webapp",
diff --git a/public/documents/Benjamin-Toby-CV-7-27-2022.pdf b/public/documents/Benjamin-Toby-CV-7-27-2022.pdf
deleted file mode 100644
index ff3e75f..0000000
Binary files a/public/documents/Benjamin-Toby-CV-7-27-2022.pdf and /dev/null differ
diff --git a/public/documents/Benjamin_Toby_CV-min.pdf b/public/documents/Benjamin_Toby_CV-min.pdf
deleted file mode 100644
index de8af64..0000000
Binary files a/public/documents/Benjamin_Toby_CV-min.pdf and /dev/null differ
diff --git a/public/documents/Benjamin_Toby_CV-updated.pdf b/public/documents/Benjamin_Toby_CV-updated.pdf
deleted file mode 100644
index f974370..0000000
Binary files a/public/documents/Benjamin_Toby_CV-updated.pdf and /dev/null differ
diff --git a/public/documents/Benjamin_Toby_CV.pdf b/public/documents/Benjamin_Toby_CV.pdf
deleted file mode 100644
index 5f8a389..0000000
Binary files a/public/documents/Benjamin_Toby_CV.pdf and /dev/null differ
diff --git a/public/documents/Resume-Benjamin-Toby-Linkedin.pdf b/public/documents/Resume-Benjamin-Toby-Linkedin.pdf
new file mode 100644
index 0000000..ab76d87
Binary files /dev/null and b/public/documents/Resume-Benjamin-Toby-Linkedin.pdf differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 487dc36..b209400 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..b209400
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/icons/android-chrome-192x192.png b/public/icons/android-chrome-192x192.png
new file mode 100644
index 0000000..3e93875
Binary files /dev/null and b/public/icons/android-chrome-192x192.png differ
diff --git a/public/icons/apple-touch-icon.png b/public/icons/apple-touch-icon.png
new file mode 100644
index 0000000..b3b0988
Binary files /dev/null and b/public/icons/apple-touch-icon.png differ
diff --git a/public/icons/icon-192x192.png b/public/icons/icon-192x192.png
new file mode 100644
index 0000000..3e93875
Binary files /dev/null and b/public/icons/icon-192x192.png differ
diff --git a/public/icons/icon-256x256.png b/public/icons/icon-256x256.png
new file mode 100644
index 0000000..73a48e8
Binary files /dev/null and b/public/icons/icon-256x256.png differ
diff --git a/public/icons/icon-384x384.png b/public/icons/icon-384x384.png
new file mode 100644
index 0000000..c446f29
Binary files /dev/null and b/public/icons/icon-384x384.png differ
diff --git a/public/icons/icon-512x512.png b/public/icons/icon-512x512.png
new file mode 100644
index 0000000..eddc0fb
Binary files /dev/null and b/public/icons/icon-512x512.png differ
diff --git a/public/icons/touch-icon-ipad-retina.png b/public/icons/touch-icon-ipad-retina.png
new file mode 100644
index 0000000..73a48e8
Binary files /dev/null and b/public/icons/touch-icon-ipad-retina.png differ
diff --git a/public/icons/touch-icon-ipad.png b/public/icons/touch-icon-ipad.png
new file mode 100644
index 0000000..73a48e8
Binary files /dev/null and b/public/icons/touch-icon-ipad.png differ
diff --git a/public/icons/touch-icon-iphone-retina.png b/public/icons/touch-icon-iphone-retina.png
new file mode 100644
index 0000000..73a48e8
Binary files /dev/null and b/public/icons/touch-icon-iphone-retina.png differ
diff --git a/public/icons/touch-icon-iphone.png b/public/icons/touch-icon-iphone.png
new file mode 100644
index 0000000..73a48e8
Binary files /dev/null and b/public/icons/touch-icon-iphone.png differ
diff --git a/public/images/logo-icon.svg b/public/images/logo-icon.svg
new file mode 100644
index 0000000..0f33876
--- /dev/null
+++ b/public/images/logo-icon.svg
@@ -0,0 +1,15 @@
+
+
+
diff --git a/public/images/logo-v3.svg b/public/images/logo-v3.svg
new file mode 100644
index 0000000..7c553c0
--- /dev/null
+++ b/public/images/logo-v3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/images/logo-white.svg b/public/images/logo-white.svg
new file mode 100644
index 0000000..d165837
--- /dev/null
+++ b/public/images/logo-white.svg
@@ -0,0 +1,14 @@
+
+
+
diff --git a/public/images/my-photo.png b/public/images/my-photo.png
new file mode 100644
index 0000000..c68e19c
Binary files /dev/null and b/public/images/my-photo.png differ
diff --git a/public/images/rm378-07c-min.png b/public/images/rm378-07c-min.png
new file mode 100644
index 0000000..4b441ec
Binary files /dev/null and b/public/images/rm378-07c-min.png differ
diff --git a/public/styles/main.css b/public/styles/main.css
new file mode 100644
index 0000000..f646236
--- /dev/null
+++ b/public/styles/main.css
@@ -0,0 +1,441 @@
+@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap");
+
+html {
+ width: 100%;
+ /* overflow-x: hidden; */
+ scroll-behavior: smooth;
+ font-family: "Source Code Pro", Helvetica;
+ font-size: 16px;
+ line-height: 1.5;
+ color: #222;
+ letter-spacing: -0.8px;
+}
+
+* {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+:root {
+ --main-color: #1668e4;
+ --main-color-lighter: #5698fc;
+ --dark-color: #201e1e;
+ --sec-color-3: #688e26;
+ --sec-color-4: #adb2d3;
+ --sec-color-5: #c2a878;
+ --light-color-1: rgb(64, 37, 216);
+ --test-color: rgb(113, 116, 255);
+ --transparent-white: rgba(255, 255, 255, 0.2);
+}
+
+body {
+ width: 100%;
+ margin: 0px;
+ padding: 0px;
+ top: 0;
+ justify-content: center;
+ background-color: var(--dark-color);
+ color: white;
+}
+
+a {
+ text-decoration: none;
+ color: white;
+ border: 1px solid transparent;
+}
+
+a:hover {
+ color: var(--sec-color-2);
+}
+
+button {
+ padding: 10px 25px;
+ border: none;
+ cursor: pointer;
+ font-size: inherit;
+ border: 1px solid transparent;
+}
+
+hr {
+ opacity: 0.3;
+}
+
+button:hover {
+ background-color: var(--dark-color);
+ /* background-color: #c52532; */
+ color: white;
+ border-color: var(--transparent-white);
+}
+
+form * {
+ font-family: inherit;
+ font-size: inherit;
+}
+
+header {
+ z-index: 1000000;
+ margin-bottom: 40px;
+}
+
+h1 {
+ font-size: 52px;
+ margin-top: 0;
+ margin-bottom: 10px;
+}
+
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+
+p a,
+span a {
+ color: var(--main-color-lighter);
+ /* border-bottom: 1px solid var(--main-color-lighter); */
+}
+
+p a:hover,
+span a:hover {
+ color: var(--main-color);
+}
+
+/* ################################################# -- Sliders */
+aside,
+.side-nav-block {
+ scrollbar-width: none;
+}
+/* width */
+aside::-webkit-scrollbar,
+.side-nav-block::-webkit-scrollbar {
+ width: 5px;
+}
+
+/* Track */
+aside::-webkit-scrollbar-track,
+.side-nav-block::-webkit-scrollbar-track {
+ background: #f1f1f1;
+}
+
+/* Handle */
+aside::-webkit-scrollbar-thumb,
+.side-nav-block::-webkit-scrollbar-thumb {
+ background: #dbe1eb;
+ border-radius: 10px;
+}
+
+/* Handle on hover */
+aside::-webkit-scrollbar-thumb:hover,
+.side-nav-block::-webkit-scrollbar-thumb:hover {
+ background: #555;
+}
+
+/*############################################# -- Common Actions */
+
+.visible {
+ display: flex;
+}
+
+.hidden {
+ display: none;
+}
+
+.fixed {
+ position: fixed;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.relative {
+ position: relative;
+}
+
+.no-pointer-events {
+ pointer-events: none;
+}
+
+.pointer-events {
+ pointer-events: visible;
+}
+
+.spacer {
+ display: block;
+ width: 100%;
+ height: 80px;
+}
+
+/*############################################# -- Header */
+
+header {
+ color: white;
+}
+
+.logo-link-block h1 {
+ font-size: 28px;
+ margin: 0;
+ margin-bottom: 5px;
+}
+
+nav {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+nav a {
+ opacity: 0.5;
+ cursor: pointer;
+}
+
+nav a:hover {
+ opacity: 1;
+}
+
+.active-page {
+ opacity: 1;
+ border-bottom: 2px solid white;
+}
+
+/*############################################# -- Shuffled Text */
+
+#__next {
+ max-width: 1200px;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ animation-name: shuffle;
+ animation-timing-function: ease-out;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+}
+
+/* .shuffled-text-span span {
+ animation-name: shuffle;
+ animation-timing-function: ease-out;
+ animation-delay: 0.5s;
+} */
+
+@keyframes shuffle {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+/*############################################# -- Hero Section */
+.hero-sub-text {
+ font-size: 24px;
+ color: rgba(255, 255, 255, 0.7);
+}
+
+.hero-ctas-section {
+ display: flex;
+ align-items: center;
+ margin-top: 40px;
+ gap: 20px;
+}
+
+.hero-ctas-section a {
+ padding: 10px 25px;
+ border: none;
+ cursor: pointer;
+ font-size: inherit;
+ color: var(--dark-color);
+ background-color: white;
+ font-size: 18px;
+}
+
+.hero-ctas-section a:hover {
+ background-color: var(--dark-color);
+ color: white;
+ border-color: var(--transparent-white);
+}
+
+/*############################################# -- 404 page */
+.not-found-page-wrapper {
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+
+/*############################################# -- Portfolio page */
+.portfolio-entries-block {
+ display: grid;
+ gap: 40px;
+ grid-template-columns: 1fr 1fr;
+ width: 100%;
+}
+
+.portfolio-entry-block {
+ max-width: 700px;
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ padding: 20px;
+}
+/*############################################# -- Contact Forms */
+form {
+ margin-top: 40px;
+ max-width: 1000px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ position: relative;
+}
+
+input,
+textarea {
+ padding: 15px 20px;
+ background-color: transparent;
+ color: white;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ width: 100%;
+ resize: none;
+}
+
+.message-response {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background-color: var(--dark-color);
+ border: 2px solid #688e26;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ gap: 10px;
+}
+
+.message-response.failed {
+ border: 2px solid #d42222;
+}
+
+#homepage-animation-wrapper {
+ width: 150%;
+ height: 100%;
+ background-color: var(--dark-color);
+}
+
+.tech-stack-header {
+ color: rgb(113, 116, 255);
+ margin-bottom: 3px;
+}
+
+.portfolio-image-wrapper {
+ width: 100%;
+ height: 300px;
+ margin-bottom: 15px;
+ overflow: hidden;
+}
+
+.portfolio-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ width: 100%;
+ height: 300px;
+ object-position: left top;
+ margin-bottom: 20px;
+}
+
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+
+span img {
+ width: 100%;
+ height: auto;
+ object-fit: contain;
+}
+
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+
+/* .transition-fade {
+ transition: 0.4s;
+ opacity: 1;
+}
+
+html.is-animating .transition-fade {
+ opacity: 0;
+} */
+
+/* ###############################################################################################
+##################################################################################################
+##################################################################################################
+##################################################################################################
+##################################### -- Mobile Styles -- ########################################
+##################################################################################################
+##################################################################################################
+##################################################################################################
+############################################################################################### */
+
+@media (max-width: 1200px) {
+}
+
+@media (max-width: 990px) {
+ .portfolio-entries-block {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 800px) {
+ h1 {
+ font-size: 28px;
+ }
+
+ nav {
+ flex-wrap: wrap;
+ gap: 15px;
+ }
+
+ body {
+ padding: 20px;
+ padding-bottom: 80px;
+ }
+
+ .hero-ctas-section {
+ flex-wrap: wrap;
+ }
+}
+
+@media (max-width: 600px) {
+ .portfolio-image-wrapper {
+ height: auto;
+ }
+
+ .portfolio-image {
+ object-fit: contain;
+ height: auto;
+ margin: 0;
+ }
+}
+
+@media (max-width: 450px) {
+}
+
+@media (max-width: 350px) {
+}
diff --git a/styles/main.css b/styles/main.css
index a4e8595..a5e2bed 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,10 +1,9 @@
-@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Cutive+Mono&display=swap");
html {
width: 100%;
- /* overflow-x: hidden; */
scroll-behavior: smooth;
- font-family: "Source Code Pro", Helvetica;
+ font-family: "Cutive Mono", Helvetica;
font-size: 16px;
line-height: 1.5;
color: #222;
@@ -18,9 +17,9 @@ html {
}
:root {
- --main-color: #1668e4;
- --main-color-lighter: #5698fc;
- --dark-color: #201e1e;
+ --main-color: #7174ff;
+ --main-color-lighter: #9d9eff;
+ --dark-color: #181515;
--sec-color-3: #688e26;
--sec-color-4: #adb2d3;
--sec-color-5: #c2a878;
@@ -32,7 +31,6 @@ html {
body {
width: 100%;
margin: 0px;
- padding: 40px;
top: 0;
justify-content: center;
background-color: var(--dark-color);
@@ -49,19 +47,25 @@ a:hover {
color: var(--sec-color-2);
}
-button {
+button,
+.button {
padding: 10px 25px;
border: none;
cursor: pointer;
font-size: inherit;
border: 1px solid transparent;
+ color: var(--dark-color);
+ background-color: white;
+ font-size: 18px;
+ font-weight: 600;
}
hr {
opacity: 0.3;
}
-button:hover {
+button:hover,
+.button:hover {
background-color: var(--dark-color);
/* background-color: #c52532; */
color: white;
@@ -75,7 +79,6 @@ form * {
header {
z-index: 1000000;
- margin-bottom: 40px;
}
h1 {
@@ -84,6 +87,18 @@ h1 {
margin-bottom: 10px;
}
+h2 {
+ font-size: 38px;
+}
+
+h3 {
+ font-size: 30px;
+}
+
+h4 {
+ font-size: 22px;
+}
+
/* * */
/* * */
/* * */
@@ -204,9 +219,7 @@ nav a:hover {
/*############################################# -- Shuffled Text */
#__next {
- max-width: 1200px;
width: 100%;
- height: 100%;
opacity: 0;
animation-name: shuffle;
animation-timing-function: ease-out;
@@ -329,7 +342,7 @@ textarea {
}
.tech-stack-header {
- color: rgb(113, 116, 255);
+ color: #7174ff;
margin-bottom: 3px;
}
@@ -412,11 +425,6 @@ html.is-animating .transition-fade {
gap: 15px;
}
- body {
- padding: 20px;
- padding-bottom: 80px;
- }
-
.hero-ctas-section {
flex-wrap: wrap;
}
diff --git a/styles/tw_main.css b/styles/tw_main.css
index 034b832..2455d0c 100644
--- a/styles/tw_main.css
+++ b/styles/tw_main.css
@@ -1,4 +1,6 @@
*, ::before, ::after {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@@ -10,6 +12,59 @@
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia:
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
@@ -47,32 +102,56 @@
position: fixed
}
-.top-0 {
- top: 0px
+.absolute {
+ position: absolute
+}
+
+.relative {
+ position: relative
}
.left-0 {
left: 0px
}
-.-z-10 {
- z-index: -10
+.top-0 {
+ top: 0px
+}
+
+.z-10 {
+ z-index: 10
+}
+
+.z-\[-1\] {
+ z-index: -1
+}
+
+.z-\[-2\] {
+ z-index: -2
}
.m-0 {
margin: 0px
}
-.mt-4 {
- margin-top: 1rem
+.-mb-4 {
+ margin-bottom: -1rem
}
-.mt-10 {
- margin-top: 2.5rem
+.-mt-10 {
+ margin-top: -2.5rem
}
-.mb-1 {
- margin-bottom: 0.25rem
+.-mt-64 {
+ margin-top: -16rem
+}
+
+.-mt-\[120px\] {
+ margin-top: -120px
+}
+
+.mb-2 {
+ margin-bottom: 0.5rem
}
.mb-4 {
@@ -83,34 +162,42 @@
margin-bottom: 2rem
}
-.mb-0 {
- margin-bottom: 0px
+.mr-0 {
+ margin-right: 0px
}
-.mb-3 {
- margin-bottom: 0.75rem
+.mt-10 {
+ margin-top: 2.5rem
}
-.mb-2 {
- margin-bottom: 0.5rem
+.mt-20 {
+ margin-top: 5rem
+}
+
+.mt-4 {
+ margin-top: 1rem
}
.flex {
display: flex
}
-.h-6 {
- height: 1.5rem
+.h-20 {
+ height: 5rem
+}
+
+.h-44 {
+ height: 11rem
+}
+
+.h-full {
+ height: 100%
}
.w-full {
width: 100%
}
-.max-w-xl {
- max-width: 36rem
-}
-
.max-w-2xl {
max-width: 42rem
}
@@ -119,18 +206,66 @@
max-width: 48rem
}
-.max-w-4xl {
- max-width: 56rem
+.max-w-6xl {
+ max-width: 72rem
+}
+
+.max-w-\[450px\] {
+ max-width: 450px
+}
+
+.grow {
+ flex-grow: 1
+}
+
+.cursor-pointer {
+ cursor: pointer
}
.flex-col {
flex-direction: column
}
+.flex-col-reverse {
+ flex-direction: column-reverse
+}
+
+.flex-wrap {
+ flex-wrap: wrap
+}
+
.items-start {
align-items: flex-start
}
+.items-center {
+ align-items: center
+}
+
+.items-stretch {
+ align-items: stretch
+}
+
+.justify-center {
+ justify-content: center
+}
+
+.justify-between {
+ justify-content: space-between
+}
+
+.gap-0 {
+ gap: 0px
+}
+
+.gap-1 {
+ gap: 0.25rem
+}
+
+.gap-10 {
+ gap: 2.5rem
+}
+
.gap-2 {
gap: 0.5rem
}
@@ -139,6 +274,22 @@
gap: 1rem
}
+.gap-8 {
+ gap: 2rem
+}
+
+.overflow-hidden {
+ overflow: hidden
+}
+
+.whitespace-nowrap {
+ white-space: nowrap
+}
+
+.rounded-full {
+ border-radius: 9999px
+}
+
.border {
border-width: 1px
}
@@ -151,30 +302,23 @@
border-style: solid
}
-.border-blue-500 {
- --tw-border-opacity: 1;
- border-color: rgb(59 130 246 / var(--tw-border-opacity))
-}
-
-.border-white\/40 {
- border-color: rgb(255 255 255 / 0.4)
-}
-
-.border-white\/20 {
- border-color: rgb(255 255 255 / 0.2)
-}
-
-.border-white\/50 {
- border-color: rgb(255 255 255 / 0.5)
-}
-
-.bg-blue-600 {
+.bg-\[\#343680\] {
--tw-bg-opacity: 1;
- background-color: rgb(37 99 235 / var(--tw-bg-opacity))
+ background-color: rgb(52 54 128 / var(--tw-bg-opacity))
}
-.bg-transparent {
- background-color: transparent
+.bg-\[\#3e3f9c\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(62 63 156 / var(--tw-bg-opacity))
+}
+
+.bg-primary\/10 {
+ background-color: rgb(113 116 255 / 0.1)
+}
+
+.object-cover {
+ -o-object-fit: cover;
+ object-fit: cover
}
.p-4 {
@@ -185,8 +329,58 @@
padding: 2rem
}
-.text-xl {
- font-size: 1.25rem;
+.p-\[100px\] {
+ padding: 100px
+}
+
+.p-\[150px\] {
+ padding: 150px
+}
+
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem
+}
+
+.py-2 {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem
+}
+
+.py-20 {
+ padding-top: 5rem;
+ padding-bottom: 5rem
+}
+
+.py-4 {
+ padding-top: 1rem;
+ padding-bottom: 1rem
+}
+
+.pb-40 {
+ padding-bottom: 10rem
+}
+
+.pt-\[450px\] {
+ padding-top: 450px
+}
+
+.text-5xl {
+ font-size: 3rem;
+ line-height: 1
+}
+
+.text-\[300px\] {
+ font-size: 300px
+}
+
+.text-base {
+ font-size: 1rem;
+ line-height: 1.5rem
+}
+
+.text-lg {
+ font-size: 1.125rem;
line-height: 1.75rem
}
@@ -195,63 +389,66 @@
line-height: 1.25rem
}
-.text-lg {
- font-size: 1.125rem;
+.text-\[20px\] {
+ font-size: 20px
+}
+
+.text-xl {
+ font-size: 1.25rem;
line-height: 1.75rem
}
-.text-base {
- font-size: 1rem;
- line-height: 1.5rem
+.uppercase {
+ text-transform: uppercase
}
-.font-bold {
- font-weight: 700
+.leading-snug {
+ line-height: 1.375
}
-.text-white {
+.text-primary-light {
--tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity))
-}
-
-.text-white\/50 {
- color: rgb(255 255 255 / 0.5)
-}
-
-.opacity-50 {
- opacity: 0.5
-}
-
-.opacity-40 {
- opacity: 0.4
-}
-
-.opacity-90 {
- opacity: 0.9
-}
-
-.opacity-60 {
- opacity: 0.6
+ color: rgb(157 158 255 / var(--tw-text-opacity))
}
.opacity-20 {
opacity: 0.2
}
-.opacity-30 {
- opacity: 0.3
+.opacity-40 {
+ opacity: 0.4
}
-.opacity-70 {
- opacity: 0.7
+.opacity-5 {
+ opacity: 0.05
+}
+
+.opacity-50 {
+ opacity: 0.5
}
.opacity-80 {
opacity: 0.8
}
-.outline {
- outline-style: solid
+.blur {
+ --tw-blur: blur(8px);
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
+.blur-sm {
+ --tw-blur: blur(4px);
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
+.contrast-\[140\%\] {
+ --tw-contrast: contrast(140%);
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
+.grayscale {
+ --tw-grayscale: grayscale(100%);
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.filter {
@@ -264,7 +461,65 @@
transition-duration: 150ms
}
-.hover\:bg-blue-600:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(37 99 235 / var(--tw-bg-opacity))
+.hover\:opacity-60:hover {
+ opacity: 0.6
+}
+
+@media (min-width: 600px) {
+ .md\:relative {
+ position: relative
+ }
+
+ .md\:items-start {
+ align-items: flex-start
+ }
+
+ .md\:px-10 {
+ padding-left: 2.5rem;
+ padding-right: 2.5rem
+ }
+
+ .md\:px-6 {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem
+ }
+
+ .md\:py-10 {
+ padding-top: 2.5rem;
+ padding-bottom: 2.5rem
+ }
+
+ .md\:pt-0 {
+ padding-top: 0px
+ }
+}
+
+@media (min-width: 1200px) {
+ .xl\:-mr-14 {
+ margin-right: -3.5rem
+ }
+
+ .xl\:-mt-\[160px\] {
+ margin-top: -160px
+ }
+
+ .xl\:w-\[120\%\] {
+ width: 120%
+ }
+
+ .xl\:w-\[40\%\] {
+ width: 40%
+ }
+
+ .xl\:w-\[60\%\] {
+ width: 60%
+ }
+
+ .xl\:flex-row {
+ flex-direction: row
+ }
+
+ .xl\:flex-col {
+ flex-direction: column
+ }
}
diff --git a/tailwind.config.js b/tailwind.config.js
index 16100d9..284a66f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,5 @@
module.exports = {
- content: ["./components/**/*.{html,js,jsx}", "./pages/**/*.jsx", , "./layouts/**/*.jsx"],
+ content: ["./components/**/*.{html,js,jsx}", "./pages/**/*.{jsx,tsx}", "./app/**/*.{html,js,jsx,tsx}", "./layouts/**/*.{jsx,tsx}"],
theme: {
screens: {
xs: "350px",
@@ -9,7 +9,10 @@ module.exports = {
lg: "976px",
xl: "1200px",
},
- // colors: {},
+ colors: {
+ primary: "#7174ff",
+ "primary-light": "#9d9eff",
+ },
fontFamily: {
sans: ["Graphik", "sans-serif"],
serif: ["Merriweather", "serif"],
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..01f3ace
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,111 @@
+{
+ "compilerOptions": {
+ /* Visit https://aka.ms/tsconfig to read more about this file */
+ /* Projects */
+ // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+ // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
+ // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
+ // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
+ // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
+ // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
+ /* Language and Environment */
+ "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+ // "jsx": "preserve", /* Specify what JSX code is generated. */
+ // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
+ // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
+ // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+ // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+ // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+ // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+ // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
+ // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
+ // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
+ /* Modules */
+ "module": "commonjs" /* Specify what module code is generated. */, // "rootDir": "./", /* Specify the root folder within your source files. */
+ // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
+ // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
+ // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
+ // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
+ // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
+ // "types": [], /* Specify type package names to be included without being referenced in a source file. */
+ // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
+ // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
+ // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+ // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
+ // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
+ // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+ // "resolveJsonModule": true, /* Enable importing .json files. */
+ // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
+ // "noResolve": true, /* Disallow 'import's, 'require's or '
+
+
+
+ {portfolioEntries.map((entry) => (
+