fdel/portfolio-redesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding in tailwindcss and configs

Browse Source
This commit is contained in:
Frank Delaguila
2022-03-12 19:41:39 -07:00
parent d8beede420
commit ef5cdba060
8 changed files with 59 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@@ -25,11 +25,15 @@
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"image-minimizer-webpack-plugin": "^3.2.3", "image-minimizer-webpack-plugin": "^3.2.3",
"mini-css-extract-plugin": "^2.6.0", "mini-css-extract-plugin": "^2.6.0",
"postcss": "^8.4.8",
"postcss-loader": "^6.2.1", "postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.4.2",
"querystring-es3": "^0.2.1",
"resolve-url-loader": "^5.0.0", "resolve-url-loader": "^5.0.0",
"sass": "^1.49.9", "sass": "^1.49.9",
"sass-loader": "^12.6.0", "sass-loader": "^12.6.0",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"tailwindcss": "^3.0.23",
"webpack": "^5.70.0", "webpack": "^5.70.0",
"webpack-cli": "^4.9.2", "webpack-cli": "^4.9.2",
"webpack-dev-middleware": "^5.3.1", "webpack-dev-middleware": "^5.3.1",
@@ -37,6 +41,7 @@
"webpack-merge": "^5.8.0" "webpack-merge": "^5.8.0"
}, },
"dependencies": { "dependencies": {
"@react-three/drei": "^8.16.5",
"@react-three/fiber": "^7.0.26", "@react-three/fiber": "^7.0.26",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",

7
postcss.config.js Normal file
View File

@@ -0,0 +1,7 @@
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
'postcss-preset-env',
tailwindcss
],
};

11
src/components/App.jsx
View File

@@ -1,6 +1,7 @@
import '../styles/styles.scss'; import '../styles/styles.scss';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { Canvas, useFrame } from '@react-three/fiber'; import { Canvas, useFrame } from '@react-three/fiber';
import { PresentationControls } from '@react-three/drei'
const Box = (props) => { const Box = (props) => {
// This reference gives us direct access to the THREE.Mesh object // This reference gives us direct access to the THREE.Mesh object
@@ -29,14 +30,18 @@ const App = () => {
return ( return (
<> <>
<nav> <nav>
nav <h1 className="underline text-xl">Nav</h1>
</nav> </nav>
<Canvas> <div id="canvas-container">
{/* <Canvas>
<PresentationControls global zoom={0.8} rotation={[0, -Math.PI / 4, 0]} polar={[0, Math.PI / 4]} azimuth={[-Math.PI / 4, Math.PI / 4]}>
<ambientLight /> <ambientLight />
<pointLight position={[10, 10, 10]} /> <pointLight position={[10, 10, 10]} />
<Box position={[-1.2, 0, 0]} /> <Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} /> <Box position={[1.2, 0, 0]} />
</Canvas> </PresentationControls>
</Canvas> */}
</div>
</> </>
); );
}; };

9
src/scripts/app.js
View File

@@ -1,8 +1,15 @@
import { Suspense } from 'react';
import { Loader } from '@react-three/drei';
import { render } from 'react-dom'; import { render } from 'react-dom';
import App from '../components/App'; import App from '../components/App';
render( render(
<App />, <>
<Suspense fallback={null}>
<App />
</Suspense>
<Loader />
</>,
document.getElementById("root") ); document.getElementById("root") );
if (module['hot']) { if (module['hot']) {

11
src/styles/styles.scss
View File

@@ -1,3 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
main { main {
background-color: black; #canvas-container {
canvas {
width: 100%;
height: 100%;
}
}
} }

4
src/views/index.html
View File

@@ -4,7 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Designer and Developer</title>
<link rel="stylesheet" href="https://use.typekit.net/bcf6wms.css">
</head> </head>
<body> <body>
<main id="root"></main> <main id="root"></main>

11
tailwind.config.js Normal file
View File

@@ -0,0 +1,11 @@
module.exports = {
purge: ['./src/**/*.html', './src/components/**/*.jsx'],
content: ["./src/**/*.{html,js,jsx}"],
theme: {
extend: {},
fontFamily: {
sans: ['Museo Sans']
}
},
plugins: [],
}

3
webpack.common.js
View File

@@ -14,6 +14,9 @@ const path = require('path');
module.exports = { module.exports = {
resolve: { resolve: {
extensions: ['.js', '.jsx'], extensions: ['.js', '.jsx'],
fallback: {
"querystring": require.resolve("querystring-es3")
}
}, },
module: { module: {
rules: [ rules: [