JohnCosta27/JohnTech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
John Costa
2021-12-14 19:09:03 +00:00
commit 0419c73f01
15 changed files with 13767 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
README.md Normal file
View File

@ -0,0 +1,12 @@
# johncosta.tech
This is the repo for my personal website
## Technologies Used
- React
- Webpack
- Babel
- React Router
- Tailwind CSS
- PostCSS

2
dist/bundle.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

32
dist/bundle.js.LICENSE.txt vendored Normal file
View File

@ -0,0 +1,32 @@
/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
/** @license React v0.20.2
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/** @license React v17.0.2
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/** @license React v17.0.2
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

1
dist/index.html vendored Normal file
View File

@ -0,0 +1 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Document</title><script defer="defer" src="bundle.js"></script></head><body><div id="root"></div></body></html>

13497
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

37
package.json Normal file
View File

@ -0,0 +1,37 @@
{
"name": "john.tech",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve",
"build": "webpack --mode production"
},
"keywords": [],
"author": "John Costa",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"@babel/preset-react": "^7.16.5",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.5.0",
"postcss": "^8.4.5",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.0.1",
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2",
"webpack": "^5.65.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
},
"dependencies": {
"clsx": "^1.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^6.1.1",
"react-router-dom": "^6.1.1"
}
}

3
postcss.config.js Normal file
View File

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

23
src/components/App.js Normal file
View File

@ -0,0 +1,23 @@
//============================================================
// Essential Imports
//============================================================
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
//============================================================
// Pages
//============================================================
import FrontPage from './pages/Front.page';
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<FrontPage />} />
</Routes>
</BrowserRouter>
);
};
export default App;

27
src/components/pages/Front.page.js Normal file
View File

@ -0,0 +1,27 @@
//============================================================
// Essential Imports
//============================================================
import React from 'react';
//============================================================
// Imported Components
//============================================================
import AppearText from '../text/AppearText';
//============================================================
// Component
//============================================================
const FrontPage = () => {
return (
<div className="w-full h-screen flex justify-center items-center bg-polar-night-400">
<div className="flex flex-col justify-center items-center">
<AppearText className="font-mono text-7xl text-frost-400" text="JOHN COSTA" delay={100} />
<AppearText className="font-mono text-5xl text-frost-200" text="DEVELOPER" delay={1200} />
</div>
</div>
);
};
export default FrontPage;

33
src/components/text/AppearText.js Normal file
View File

@ -0,0 +1,33 @@
//============================================================
// Essential Imports
//============================================================
import React, { useState, useEffect } from 'react';
import clsx from 'clsx';
//============================================================
// Component
//============================================================
const AppearText = ({ text, delay, className }) => {
const [showText, setShowText] = useState('');
useEffect(() => {
const timer = setTimeout(() => {
setShowText('opacity-100');
}, delay);
return () => {
clearTimeout(timer);
};
}, []);
return (
<>
<h1 className={clsx('transition-all ease-in-out delay-1000 opacity-0', className, showText)}>
{text}
</h1>
</>
);
};
export default AppearText;

3
src/index.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

12
src/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

7
src/index.js Normal file
View File

@ -0,0 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));

36
tailwind.config.js Normal file
View File

@ -0,0 +1,36 @@
module.exports = {
content: ['./src/**/*.{js, jsx}'],
theme: {
colors: {
'polar-night': {
100: '#4C566A',
200: '#434C5E',
300: '#3B4252',
400: '#2E3440',
},
'snow-storm': {
100: '#ECEFF4',
200: '#E5E9F0',
300: '#D8DEE9',
},
frost: {
100: '#8FBCBB',
200: '#88C0D0',
300: '#81A1C1',
400: '#5E81AC',
},
aurora: {
red: '#BF616A',
orange: '#D08770',
yellow: '#EBCB8B',
green: '#A3BE8C',
purple: '#B48EAD',
},
},
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};

42
webpack.config.js Normal file
View File

@ -0,0 +1,42 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
entry: path.join(__dirname, 'src', 'index.js'),
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
},
{
test: /\.css$/i,
include: path.resolve(__dirname, 'src'),
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
}),
//new BundleAnalyzerPlugin(),
],
devServer: {
historyApiFallback: true,
port: 8008,
},
};