From 94b5ee996676d5406bcb9b8eb6de1d304948ac86 Mon Sep 17 00:00:00 2001 From: Chandan Khatua Date: Mon, 16 Nov 2020 12:43:09 +0530 Subject: [PATCH 1/4] Assets folder added --- src/assets/bulb.svg | 155 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 src/assets/bulb.svg 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 680087c17dc18bb08fb2e990752d75a117c1d326 Mon Sep 17 00:00:00 2001 From: Chandan Khatua Date: Mon, 16 Nov 2020 12:44:54 +0530 Subject: [PATCH 2/4] backgroungcolor of container changed to 'black' from 'blue' --- src/components/HomePage/SectionLayout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 : ( From 05f359eab128f45434b1d1b955a4243333c6cb3a Mon Sep 17 00:00:00 2001 From: Chandan Khatua Date: Mon, 16 Nov 2020 12:46:18 +0530 Subject: [PATCH 3/4] welcome section is updated with a svg image and text --- src/components/HomePage/Welcome.js | 70 ++++++++++++++++++++++++++++-- 1 file changed, 67 insertions(+), 3 deletions(-) diff --git a/src/components/HomePage/Welcome.js b/src/components/HomePage/Welcome.js index 37c3297..3a12249 100644 --- a/src/components/HomePage/Welcome.js +++ b/src/components/HomePage/Welcome.js @@ -1,14 +1,54 @@ 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 +56,32 @@ function Welcome({ onScrollClick }) { export default Welcome; const useStyle = makeStyles((theme) => ({ - heading: { + svgContainer: { + position: 'absolute', + top: '0', + height: '100%', + }, + textContainer: { fontFamily: theme.typography.fontFamily, - fontSize: '3em', + alignSelf: 'center', + + '& h2': { + fontSize: '2.5rem', + lineHeight: '4.2rem', + letterSpacing: '1.2rem', + fontWeight: '700', + mixBlendMode: 'difference', + }, + + '& h1': { + color: 'black', + fontSize: '3rem', + lineHeight: '4.2rem', + letterSpacing: '3rem', + fontWeight: '700', + WebkitTextStroke: '1px whitesmoke', + textShadow: '1px 1px 0px #e3e3e3', + mixBlendMode: 'screen', + }, }, })); From 3eabe1759a66a0840d90a993a7200b87dc6aa22b Mon Sep 17 00:00:00 2001 From: Chandan Khatua Date: Thu, 19 Nov 2020 19:37:53 +0530 Subject: [PATCH 4/4] Made the text and svg responsive with the use of breakpoints --- src/components/HomePage/Welcome.js | 103 +++++++++++++++++------------ 1 file changed, 62 insertions(+), 41 deletions(-) diff --git a/src/components/HomePage/Welcome.js b/src/components/HomePage/Welcome.js index 3a12249..b0d8dc0 100644 --- a/src/components/HomePage/Welcome.js +++ b/src/components/HomePage/Welcome.js @@ -10,43 +10,42 @@ function Welcome({ onScrollClick }) { return ( - - {/*---the svg image (bulb)---*/} - - - - + + + {/*---the svg image (bulb)---*/} + + + + + - {/*----- Text ----- */} + {/*----- Text ----- */} - - - - WELCOME TO - - - - -
OPENCODE
- - + + + + WELCOME TO + + + + + OPENCODE + @@ -60,24 +59,46 @@ const useStyle = makeStyles((theme) => ({ 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, - alignSelf: 'center', + color: 'white', '& h2': { - fontSize: '2.5rem', - lineHeight: '4.2rem', - letterSpacing: '1.2rem', + [theme.breakpoints.up('sm')]: { + letterSpacing: '.5.0rem', + }, + [theme.breakpoints.up('md')]: { + letterSpacing: '1.0rem', + }, + fontWeight: '700', mixBlendMode: 'difference', }, '& h1': { color: 'black', - fontSize: '3rem', - lineHeight: '4.2rem', - letterSpacing: '3rem', + [theme.breakpoints.up('sm')]: { + letterSpacing: '1.0rem', + }, + [theme.breakpoints.up('md')]: { + letterSpacing: '2.0rem', + }, + fontWeight: '700', WebkitTextStroke: '1px whitesmoke', textShadow: '1px 1px 0px #e3e3e3',