Skip to content

Commit

Permalink
Quick commit
Browse files Browse the repository at this point in the history
  • Loading branch information
WomB0ComB0 committed Aug 5, 2023
1 parent d039877 commit 4d2130b
Show file tree
Hide file tree
Showing 20 changed files with 300 additions and 216 deletions.
2 changes: 1 addition & 1 deletion next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const nextConfig = {
},
images: {
domains: ['images.g2crowd.com', 'cdn.jsdelivr.net'],
}
},
}
// const withPWA = require('next-pwa')
// module.exports = withPWA({
Expand Down
35 changes: 34 additions & 1 deletion src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,20 @@
@tailwind components;
@tailwind utilities;
@tailwind variants;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
@layer components {
.hero-icon{
@apply flex items-center gap-2}
}
html, body, section {
overflow-y: hidden;
overflow-x: hidden;
scroll-behavior: smooth;
}
svg {
fill: #BA9BDD
}
.imageBorder {
border-radius: 50%;
object-fit: cover;
Expand All @@ -15,7 +24,8 @@ section {
scroll-snap-align: start;
}
::-webkit-scrollbar {
width: 10px;
width: 4px;
height: 5px;
}
.customScroll::-webkit-scrollbar-track {
background: transparent;
Expand Down Expand Up @@ -51,6 +61,8 @@ section {
position: relative;
background:conic-gradient(indigo, purple);
animation: 2s rotate linear infinite;
border: 5px solid #242424;
transition: 0.5s;
}

.loader:before{
Expand Down Expand Up @@ -90,6 +102,27 @@ section {
scroll-behavior: auto;
}
}
@media only screen and (max-width: 600px) {
.loader {
width: 300px;
height: 300px;
}
.heroButtons {
flex-direction: column;
}
}
@media only screen and (min-width: 600px) {
.loader {
width: 350px;
height: 350px;
}
}
@media only screen and (min-width: 768px) {
.loader {
width: 400px;
height: 400px;
}
}
@layer base {
:root {
--background: 0 0% 100%;
Expand Down
65 changes: 20 additions & 45 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,55 +1,30 @@
"use client"
import './globals.css'
import './global.scss'
import React,{ useState, useEffect } from 'react'
import { Inter } from 'next/font/google'
import Head from 'next/head'
import {Loader, Footer, Header} from '@/components'
import {Analytics} from "@vercel/analytics/react"
const inter = Inter({ subsets: ['latin'] })
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
const [isLoading, setIsLoading] = useState(true)
import React, { useState, useEffect } from 'react';
import { Footer, Loader } from '@/components';
import { Analytics } from '@vercel/analytics/react';

const RootLayout = ({ children }: { children: React.ReactNode }) => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const timeout = setTimeout(() => {
setIsLoading(false)
}, 2000)
return () => clearTimeout(timeout)
}, [])
setIsLoading(false);
}, 2000);
return () => clearTimeout(timeout);
}, []);
return (
<html lang="en">
<Head>
<meta charSet="utf-8" />
<title>Mike Odnis</title>
<meta name="description" content="Mike Odnis\' portfolio. Undergraduate, Computer Science student at Farmingdale State College." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#560BAD" />
<meta name="apple-mobile-web-app-status-bar" content="#560BAD" />
<meta name="apple-mobile-web-app-title" content="Mike Odnis" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="application-name" content="Mike Odnis" />
<meta name="msapplication-TileColor" content="#560BAD" />
<meta name="msapplication-TileImage" content="/icons/ms-icon-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="google-site-verification" content="UEQaFuTqVDx84-mVcEXzo-y2PmglIrDzOPjcetwCnrM"/>
</Head>
<body className={inter.className}>
{isLoading ? (
<Loader />) : (
<>
{/* {isLoading ? (
<Loader />
) : ( */}
<>
{/* <Header /> */}
{children}
<Footer />
<Analytics />
</>
)}
</body>
</html>
)
}
{/* )} */}
</>
);
};

export default RootLayout;
28 changes: 0 additions & 28 deletions src/app/page.tsx

This file was deleted.

26 changes: 19 additions & 7 deletions src/components/About.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,27 @@ export default function About({}: Props) {
<h4 className="text-4xl font-semibold">
Here is a{" "}<span className='underline decoration-[#560BAD]/50'>little </span> background
</h4>
{/* Couldve wrote a function */}
<p className='text-base leading-6'>
Mike Odnis is an ambitious and driven undergraduate Computer Science student at
<strong>{' '}Farmingdale State College</strong>, specializing in web development and programming. With a solid foundation in HTML, CSS, and SCSS, I craft beautiful and user-friendly websites. His proficiency in
I am an ambitious and driven undergraduate Computer Science student at
<strong>{' '}Farmingdale State College</strong>, specializing in web development and programming. With a solid foundation in
<strong>
JavaScript
{` HTML, `}
</strong>
<strong>
{`CSS`}
</strong>
, and
<strong>
{` SCSS`}
</strong>
, I craft beautiful and user-friendly websites. My proficiency in
<strong>
{` JavaScript `}
</strong>
, including
<strong>
TypeScript
{` TypeScript `}
</strong>
and various frameworks like
<strong>
Expand All @@ -68,7 +80,7 @@ export default function About({}: Props) {
<strong>
{` ViteJS `}
</strong>
, enables him to create dynamic web applications. Mike&apos;s expertise also extends to modern web tools like
, enables me to create dynamic web applications. My expertise also extends to modern web tools like
<strong>
{` Tailwind CSS `}
</strong>
Expand Down Expand Up @@ -96,11 +108,11 @@ export default function About({}: Props) {
<strong>
{` Java `}
</strong>
equips him for diverse software development projects. As a quick learner, I embraces new technologies with enthusiasm and is always eager to expand his skill-set. My passion for coding and problem-solving drives him to deliver exceptional results, and as a
equips me for diverse software development projects. As a quick learner, I embraces new technologies with enthusiasm and is always eager to expand his skill-set. My passion for coding and problem-solving drives me to deliver exceptional results, and as a
<strong>
{` first-generation `}
</strong>
student, I take pride in his achievements and aims to be a well-rounded addition to any team.
student, I take pride in my achievements and aim to be a well-rounded addition to any team.
</p>
</div>
</motion.div>
Expand Down
76 changes: 38 additions & 38 deletions src/components/CustomCursor.tsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
"use client"
import React, {useEffect, useRef} from 'react'
import {gsap} from 'gsap'
type Props = {}
const CustomCursor = (props: Props) => {
const cursorRef = useRef<HTMLDivElement>(null)
const followerRef = useRef<HTMLDivElement>(null)
const moveCursor = (e: MouseEvent): void => {
gsap.to(cursorRef.current, {
x: e.clientX,
y: e.clientY,
duration: 0.2,
})
gsap.to(followerRef.current, {
x: e.clientX,
y: e.clientY,
duration: 0.9,
})
}
useEffect(() => {
gsap.set(cursorRef, {
xPercent: 100,
yPercent: 100,
});
gsap.set(followerRef, {
xPercent: -20,
yPercent: -20,
});
window.addEventListener('mousemove', moveCursor)
}, []);
return (
<div>
<div ref={cursorRef} className="cursor"/>
<div ref={followerRef} className="follower-cursor"/>
</div>
)
}
export default CustomCursor
// "use client"
// import React, {useEffect, useRef} from 'react'
// import {gsap} from 'gsap'
// type Props = {}
// const CustomCursor = (props: Props) => {
// const cursorRef = useRef<HTMLDivElement>(null)
// const followerRef = useRef<HTMLDivElement>(null)
// const moveCursor = (e: MouseEvent): void => {
// gsap.to(cursorRef.current, {
// x: e.clientX,
// y: e.clientY,
// duration: 0.2,
// })
// gsap.to(followerRef.current, {
// x: e.clientX,
// y: e.clientY,
// duration: 0.9,
// })
// }
// useEffect(() => {
// gsap.set(cursorRef, {
// xPercent: 100,
// yPercent: 100,
// });
// gsap.set(followerRef, {
// xPercent: -20,
// yPercent: -20,
// });
// window.addEventListener('mousemove', moveCursor)
// }, []);
// return (
// <div>
// <div ref={cursorRef} className="cursor"/>
// <div ref={followerRef} className="follower-cursor"/>
// </div>
// )
// }
// export default CustomCursor
9 changes: 4 additions & 5 deletions src/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,11 @@ type Props = {}
const Footer = (props: Props) => {
return (
<footer
className="absolute z-20 flex items-center rounded-full justify-center w-[200px] bg-transparent cursor-pointer h-[100px] bottom-0 right-0 sm:justify-flex-end">
className="absolute z-20 flex items-center rounded-full justify-center w-[100px] bg-transparent cursor-pointer h-[100px] bottom-0 right-0 sm:justify-flex-end">
<TooltipProvider>
<Tooltip>
<TooltipTrigger className="flex items-center justify-center bg-purple-500/50 w-[75px] h-[75px] rounded-full hover:bg-transparent transition-all">
<button
className='flex items-center justify-center bg-purple-500/30 w-[75px] h-[75px] rounded-full hover:bg-transparent'>
<TooltipTrigger className="flex items-center justify-center bg-purple-500/50 w-[75px] h-[75px] rounded-full hover:bg-transparent transition-all ">
<>
<Link
onClick={() => scrollToElement('hero')}
href="#"
Expand All @@ -25,7 +24,7 @@ const Footer = (props: Props) => {
height={100}
/>
</Link>
</button>
</>
</TooltipTrigger>
<TooltipContent sideOffset={5} className="text-xs ">
Scroll to top
Expand Down
Loading

1 comment on commit 4d2130b

@vercel
Copy link

@vercel vercel bot commented on 4d2130b Aug 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.