neon/saahildcom
1
0
Fork 0
mirror of https://github.com/NeonGamerBot-QK/saahild.com.git synced 2024-11-25 14:13:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix Mobile UI for AboutPage

Browse source
This commit is contained in:
Saahil dutta 2024-06-28 23:44:15 -04:00
parent bd6cfde293
commit e945704c46
Signed by: neon
GPG key ID: 8A8B64515254CFC6
3 changed files with 63 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
src/components/AboutPage/SkillSet.tsx
View file

@ -6,40 +6,40 @@ import './skillset.css'
import { SiKalilinux, SiPostman } from 'react-icons/si' import { SiKalilinux, SiPostman } from 'react-icons/si'
import { mdiArch, mdiConsole, mdiLinux, mdiUbuntu } from '@mdi/js' import { mdiArch, mdiConsole, mdiLinux, mdiUbuntu } from '@mdi/js'
export function SkillSet () { export function SkillSet () {
return<div className='text-center place-items-center items-center'> return<div className='items-center text-center place-items-center'>
<h1 className='project-heading'> <h1 className='project-heading'>
Professional <strong className='texthighlight'>Skillset </strong> Professional <strong className='texthighlight'>Skillset </strong>
</h1> </h1>
<div className='flex grid inline-flex' > <div className='flex inline-flex grid ' >
<div style={{ }} className='flex-1 content-center ms-auto me-auto'> <div style={{ }} className='flex-1 max-w-5xl text-center min-w-sm ms-auto me-auto'>
<div className='inline-flex'> <div className='inline-flex'>
<div className={"tech-icons inline-flex"}><Icon icon='css' className='w-20 p-2' width={2000} height={2000}/></div> <div className={"tech-icons inline-flex"}><Icon icon='css' className='w-40' width={2000} height={2000}/></div>
<div className={"tech-icons inline-flex"}><Icon icon='javascript' className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon='javascript' className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon='typescript' className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon='typescript' className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={next} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={next} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={npm} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={npm} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={prisma} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={prisma} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={puppeteer} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={puppeteer} className='w-40' /></div>
</div> </div>
<div className='inline-flex'> <div className='inline-flex'>
<div className={"tech-icons inline-flex"}><Icon icon={sass} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={sass} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={bash} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={bash} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={bun} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={bun} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={cpp} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={cpp} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={docker} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={docker} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={graphql} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={graphql} className='w-40' /></div>
</div> </div>
<div className='inline-flex'> <div className='inline-flex'>
<div className={"tech-icons inline-flex"}><Icon icon={html} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={html} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={javascriptReact} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={javascriptReact} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={python} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={python} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={csharp} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={csharp} className='w-40' /></div>
{/* for the sake of css coffeescript is out! */} {/* for the sake of css coffeescript is out! */}
{/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-20 p-2' /></div> */} {/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-40' /></div> */}
<div className={"tech-icons inline-flex"}><Icon icon={yarn} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={yarn} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={ejs} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={ejs} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={pnpm} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={pnpm} className='w-40' /></div>
</div> </div>
{/* {/*
@ -48,51 +48,51 @@ export function SkillSet () {
</div> </div>
{/* <br /> {/* <br />
<div style={{ justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'> <div style={{ justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'>
<div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div>
</div> */} </div> */}
</div> </div>
</div> </div>
} }
export function TechStack () { export function TechStack () {
return<div className='text-center place-items-center items-center'> return<div className='items-center text-center place-items-center'>
<h1 className='project-heading'> <h1 className='project-heading'>
<strong className='text-highlight'>Tools</strong> I use <strong className='text-highlight'>Tools</strong> I use
</h1> </h1>
<div className='flex grid inline-flex' > <div className='flex inline-flex grid' >
<div style={{ }} className='flex-1 content-center ms-auto me-auto'> <div style={{ }} className='content-center flex-1 max-w-5xl ms-auto me-auto min-w-sm'>
<div className='inline-flex'> <div className='inline-flex max-w-5xl min-w-sm'>
<div className={"tech-icons inline-flex"}><Icon icon={vscode} className='w-20 p-2' width={2000} height={2000}/></div> <div className={"tech-icons inline-flex"}><Icon icon={vscode} className='w-40' width={2000} height={2000}/></div>
<div className={"tech-icons inline-flex"}><Icon icon={git} className='w-20 p-2' width={2000} height={2000}/></div> <div className={"tech-icons inline-flex"}><Icon icon={git} className='w-40' width={2000} height={2000}/></div>
<div className={"tech-icons inline-flex"}><Icon icon={docker} className='w-20 p-2' width={2000} height={2000}/></div> <div className={"tech-icons inline-flex"}><Icon icon={docker} className='w-40' width={2000} height={2000}/></div>
<div className={"tech-icons inline-flex"}><Icon icon={figma} className='w-20 p-2' width={2000} height={2000}/></div> <div className={"tech-icons inline-flex"}><Icon icon={figma} className='w-40' width={2000} height={2000}/></div>
<div className={"tech-icons inline-flex"}><Icon icon={robots} className='w-20 p-2' width={2000} height={2000}/></div> <div className={"tech-icons inline-flex"}><Icon icon={robots} className='w-40' width={2000} height={2000}/></div>
<div className={"tech-icons inline-flex"}><Icon icon={vercel} className='w-20 p-2' width={2000} height={2000}/></div> <div className={"tech-icons inline-flex"}><Icon icon={vercel} className='w-40' width={2000} height={2000}/></div>
<div className={"tech-icons inline-flex"}><Icon icon={visualStudio} className='w-20 p-2' width={2000} height={2000}/></div> <div className={"tech-icons inline-flex"}><Icon icon={visualStudio} className='w-40' width={2000} height={2000}/></div>
{/* <div className={"tech-icons inline-flex"}><Icon icon=' className='w-20 p-2' /></div> */} {/* <div className={"tech-icons inline-flex"}><Icon icon=' className='w-40' /></div> */}
</div> </div>
<br /> <br />
<div className='inline-flex'> <div className='inline-flex'>
{/* <div className={"tech-icons inline-flex"}><Icon icon={figma} className='w-20 p-2' width={2000} height={2000}/></div> */} {/* <div className={"tech-icons inline-flex"}><Icon icon={figma} className='w-40' width={2000} height={2000}/></div> */}
<div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiLinux} size={2} className='w-full m-5' /></div> <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiLinux} size={2} className='m-0 md:m-5 lg:w-full' /></div>
<div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiConsole} size={2} className='w-full m-5' /></div> <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiConsole} size={2} className='m-0 md:m-5 lg:w-full' /></div>
<div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiUbuntu} size={2} className='w-full m-5' /></div> <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiUbuntu} size={2} className='m-0 md:m-5 lg:w-full' /></div>
<div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiArch} size={2} className='w-full m-5' /></div> <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiArch} size={2} className='m-0 md:m-5 lg:w-full' /></div>
<div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><SiPostman /></div> <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><SiPostman /></div>
<div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}> <SiKalilinux /></div> <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}> <SiKalilinux /></div>
{/* <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiKaliLinux} size={2} className='w-full m-5' /></div> */} {/* <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiKaliLinux} size={2} className='w-full m-5' /></div> */}
</div> </div>
{/* <div className='inline-flex'> {/* <div className='inline-flex'>
<div className={"tech-icons inline-flex"}><Icon icon={html} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={html} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={javascriptReact} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={javascriptReact} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={python} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={python} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={csharp} className='w-20 p-2' /></div> */} <div className={"tech-icons inline-flex"}><Icon icon={csharp} className='w-40' /></div> */}
{/* for the sake of css coffeescript is out! */} {/* for the sake of css coffeescript is out! */}
{/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-20 p-2' /></div> */} {/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-40' /></div> */}
{/* <div className={"tech-icons inline-flex"}><Icon icon={yarn} className='w-20 p-2' /></div> {/* <div className={"tech-icons inline-flex"}><Icon icon={yarn} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={ejs} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={ejs} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={pnpm} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={pnpm} className='w-40' /></div>
</div> */} </div> */}
{/* {/*
@ -101,14 +101,14 @@ export function TechStack () {
</div> </div>
{/* <br /> {/* <br />
<div style={{ justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'> <div style={{ justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'>
<div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-20 p-2' /></div> <div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div>
</div> */} </div> */}
</div> </div>
</div> </div>
} }
export default function() { export default function() {
return <> return <div className='-mt-20'>
<SkillSet /> <SkillSet />
<TechStack /></> <TechStack /></div>
} }

10
src/components/AboutPage/index.tsx
View file

@ -2,13 +2,13 @@ import { mdiBullet } from '@mdi/js'
import Icon from '@mdi/react' import Icon from '@mdi/react'
export default function AboutPage () { export default function AboutPage () {
return <div className={'hero min-h-screen'}> return <div className={'hero min-h-screen md:ml-0 ml-2'}>
<div className='container'> <div className='container'>
<h1 className='font-bold text-3xl'> <h1 className='text-3xl font-bold'>
Some info about <span className='text-highlight'>me</span> Some info about <span className='text-highlight'>me</span>
</h1> </h1>
<div> <div>
<blockquote className='blockquote mb-0'> <blockquote className='mb-0 blockquote'>
<p style={{ textAlign: 'justify' }}> <p style={{ textAlign: 'justify' }}>
Hi Everyone, I am{' '} Hi Everyone, I am{' '}
<span className='text-highlight '>Saahil dutta, </span> <span className='text-highlight '>Saahil dutta, </span>
@ -34,10 +34,10 @@ Some info about <span className='text-highlight'>me</span>
</ul> </ul>
<blockquote className='ml-10 text-xl italic font-semibold text-gray-900 dark:text-white' style={{ color: 'var(--text)'}}> <blockquote className='ml-10 text-xl italic font-semibold text-gray-900 dark:text-white' style={{ color: 'var(--text)'}}>
<svg className='w-8 h-8 text-gray-400 dark:text-gray-600 mb-4' xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 18 14'> <svg className='w-8 h-8 mb-4 text-gray-400 dark:text-gray-600' xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 18 14'>
<path d='M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z' /> <path d='M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z' />
</svg> </svg>
<p className='ml-5 hover:text-fuchsia-600 ease-linear duration-700 text-fuchsia-500 first-letter:font-2xl'> <p className='ml-5 duration-700 ease-linear hover:text-fuchsia-600 text-fuchsia-500 first-letter:font-2xl'>
"It has become appallingly obvious that our technology has exceeded "It has become appallingly obvious that our technology has exceeded
our humanity."{' '} our humanity."{' '}
</p> </p>

4
src/components/AboutPage/skillset.css
View file

@ -17,7 +17,9 @@
@media (max-width: 767px) { @media (max-width: 767px) {
.tech-icons { .tech-icons {
margin: 10px !important; margin: 5px !important;
padding: 5px !important;
font-size: 2.5em !important;
} }
} }