diff --git a/src/assets/bulb.svg b/src/assets/bulb.svg
new file mode 100644
index 0000000..dc4842c
--- /dev/null
+++ b/src/assets/bulb.svg
@@ -0,0 +1,155 @@
+
diff --git a/src/components/HomePage/SectionLayout.js b/src/components/HomePage/SectionLayout.js
index b6e5178..a7aeda4 100644
--- a/src/components/HomePage/SectionLayout.js
+++ b/src/components/HomePage/SectionLayout.js
@@ -9,7 +9,7 @@ function SectionLayout({ children, lastSection, onScrollClick, alternate }) {
return (
{children}
{lastSection ? null : (
diff --git a/src/components/HomePage/Welcome.js b/src/components/HomePage/Welcome.js
index 37c3297..b0d8dc0 100644
--- a/src/components/HomePage/Welcome.js
+++ b/src/components/HomePage/Welcome.js
@@ -1,14 +1,53 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
+import { Grid, Typography } from '@material-ui/core';
import SectionLayout from './SectionLayout';
+import { ReactComponent as ReactSvgImg } from '../../assets/bulb.svg';
function Welcome({ onScrollClick }) {
const classes = useStyle();
return (
- Welcome Section
+
+
+ {/*---the svg image (bulb)---*/}
+
+
+
+
+
+
+
+ {/*----- Text ----- */}
+
+
+
+
+ WELCOME TO
+
+
+
+
+ OPENCODE
+
+
+
);
}
@@ -16,8 +55,54 @@ function Welcome({ onScrollClick }) {
export default Welcome;
const useStyle = makeStyles((theme) => ({
- heading: {
+ svgContainer: {
+ position: 'absolute',
+ top: '0',
+ height: '100%',
+
+ '& svg': {
+ width: '600px',
+ height: '500px',
+ [theme.breakpoints.down('sm')]: {
+ width: '480px',
+ height: '400px',
+ },
+ [theme.breakpoints.down('xs')]: {
+ width: '340px',
+ height: '300px',
+ },
+ },
+ },
+
+ textContainer: {
fontFamily: theme.typography.fontFamily,
- fontSize: '3em',
+ color: 'white',
+
+ '& h2': {
+ [theme.breakpoints.up('sm')]: {
+ letterSpacing: '.5.0rem',
+ },
+ [theme.breakpoints.up('md')]: {
+ letterSpacing: '1.0rem',
+ },
+
+ fontWeight: '700',
+ mixBlendMode: 'difference',
+ },
+
+ '& h1': {
+ color: 'black',
+ [theme.breakpoints.up('sm')]: {
+ letterSpacing: '1.0rem',
+ },
+ [theme.breakpoints.up('md')]: {
+ letterSpacing: '2.0rem',
+ },
+
+ fontWeight: '700',
+ WebkitTextStroke: '1px whitesmoke',
+ textShadow: '1px 1px 0px #e3e3e3',
+ mixBlendMode: 'screen',
+ },
},
}));