diff --git a/portfolio/.eslintrc.json b/.eslintrc.json similarity index 100% rename from portfolio/.eslintrc.json rename to .eslintrc.json diff --git a/.gitignore b/.gitignore index f8274d9..8f322f0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,184 +1,35 @@ -# Byte-compiled / optimized / DLL files -__pycache__/ -*.py[cod] -*$py.class +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. -# C extensions -*.so - -# Distribution / packaging -.Python -build/ -develop-eggs/ -dist/ -downloads/ -eggs/ -.eggs/ -lib/ -lib64/ -parts/cd -sdist/ -var/ -wheels/ -share/python-wheels/ -*.egg-info/ -.installed.cfg -*.egg -MANIFEST - -# PyInstaller -# Usually these files are written by a python script from a template -# before PyInstaller builds the exe, so as to inject date/other infos into it. -*.manifest -*.spec - -# Installer logs -pip-log.txt -pip-delete-this-directory.txt - -# Unit test / coverage reports -htmlcov/ -.tox/ -.nox/ -.coverage -.coverage.* -.cache -nosetests.xml -coverage.xml -*.cover -*.py,cover -.hypothesis/ -.pytest_cache/ -cover/ - -# Translations -*.mo -*.pot - -# Django stuff: -*.log -local_settings.py -db.sqlite3 -db.sqlite3-journal - -# Flask stuff: -instance/ -.webassets-cache - -# Scrapy stuff: -.scrapy - -# Sphinx documentation -docs/_build/ - -# PyBuilder -.pybuilder/ -target/ - -# Jupyter Notebook -.ipynb_checkpoints - -# IPython -profile_default/ -ipython_config.py - -# pyenv -# For a library or package, you might want to ignore these files since the code is -# intended to run in multiple environments; otherwise, check them in: -# .python-version - -# pipenv -# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. -# However, in case of collaboration, if having platform-specific dependencies or dependencies -# having no cross-platform support, pipenv may install dependencies that don't work, or not -# install all needed dependencies. -#Pipfile.lock - -# poetry -# Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control. -# This is especially recommended for binary packages to ensure reproducibility, and is more -# commonly ignored for libraries. -# https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control -#poetry.lock - -# pdm -# Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control. -#pdm.lock -# pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it -# in version control. -# https://pdm.fming.dev/#use-with-ide -.pdm.toml - -# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm -__pypackages__/ - -# Celery stuff -celerybeat-schedule -celerybeat.pid - -# SageMath parsed files -*.sage.py - -# Environments -.env -.venv -env/ -venv/ -ENV/ -env.bak/ -venv.bak/ - -# Spyder project settings -.spyderproject -.spyproject - -# Rope project settings -.ropeproject - -# mkdocs documentation -/site - -# mypy -.mypy_cache/ -.dmypy.json -dmypy.json - -# Pyre type checker -.pyre/ - -# pytype static type analyzer -.pytype/ - -# Cython debug symbols -cython_debug/ - -# PyCharm -# JetBrains specific template is maintained in a separate JetBrains.gitignore that can -# be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore -# and can be added to the global gitignore or merged into this file. For a more nuclear -# option (not recommended) you can uncomment the following to ignore the entire idea folder. -.idea/ # dependencies -node_modules +/node_modules /.pnp .pnp.js # testing /coverage +# next.js +/.next/ +/out/ + # production /build # misc .DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local +*.pem +# debug npm-debug.log* yarn-debug.log* yarn-error.log* -.idea -next-env.d.ts \ No newline at end of file +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/README.md b/README.md index 361cb2a..26d5ae1 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,16 @@ +

🚀 Installation & Run

-

- Hi hi, I'm Szymon -

+• Clone this repository: -As a self-taught developer, I'm actively seeking **challenging career opportunities**. I have a no-commerce mastery of **JavaScript** (**TypeScript**), **Python** and mostly use **React**, **Django** frameworks. Intermediate in creating a visually attractive and user-friendly frontend using **HTML5, CSS3**/**Tailwind** and **Material UI**. +``` +git clone -b portfolio https://github.com/SzymCode/SzymCode.git +``` -
+• **portfolio** directory: -| 💻 **Portfolio**| [szymco.de](https://szymco.de)| -|:-|:-| -| 🚀 **Exists on**| [![CodeWars](https://img.shields.io/badge/CodeWars-4%20KYU-1f5be7?logo=codewars&logoColor=white)](https://www.codewars.com/users/SzymCode) [![Sphere Judge](https://img.shields.io/badge/SPOJ-szymcode-blue?logo=spoj&logoColor=white)](https://www.spoj.com/users/szymcode) -| 🔍 **Find me**| [![Gmail](https://img.shields.io/badge/-Gmail-informational?style=flat&logo=gmail&color=white)](mailto:s.radomski19@gmail.com) [![LinkedIn](https://img.shields.io/badge/LinkedIn-0A66C2?logo=linkedin&logoColor=white)](https://www.linkedin.com/in/szymon-radomski/) [![Facebook](https://img.shields.io/badge/Facebook-1877F2?logo=facebook&logoColor=white)](https://www.facebook.com/s.radomski16) | - -
- - -

💡 Latest Projects

- -[![ContactBook](https://github-readme-stats-sigma-five.vercel.app/api/pin/?username=szymcode&repo=contactbook)](https://github.com/szymcode/contactbook) -[![RecruitmentTasks](https://github-readme-stats-sigma-five.vercel.app/api/pin/?username=szymcode&repo=recruitmenttasks)](https://github.com/szymcode/recruitmenttasks) -[![ECommerceTemplate](https://github-readme-stats-sigma-five.vercel.app/api/pin/?username=szymcode&repo=ecommercetemplate)](https://github.com/szymcode/ecommercetemplate) -[![TinyProjects](https://github-readme-stats-sigma-five.vercel.app/api/pin/?username=szymcode&repo=tinyprojects)](https://github.com/szymcode/tinyprojects) - -
- - -

🛠️ Tech Stack

- - -Languages| CSS3 --|:- -Main| Bootstrap -Have experienced| nginx -IDEs| Jupyter Notebook -Tools| -Forgotten| -
- - -

💬 Some Things About Me

- -* 📓 I'm gaining knowledge from documentations in addition to books, courses and YouTube videos. -* 🏊 Really love swimming. -* 🧠 Rubik's cube CFOP sub 20 | Blindfold 4 min with memorize. -* 📚 Books that have impacted me: "Be Obsessed or Be Average" (G.Cardone), "The Power of Now" (E.Tolle) and "Beyond the Pleasure Principle" (S. Freud). - -
- - -

📊 GitHub Stats

- -![Top Langs](https://github-readme-stats-sigma-five.vercel.app/api/top-langs/?username=SzymCode&layout=compact) - -
+``` +npm install +npm run dev +``` diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..62b8a52 --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/portfolio/next.config.js b/next.config.js similarity index 100% rename from portfolio/next.config.js rename to next.config.js diff --git a/portfolio/package-lock.json b/package-lock.json similarity index 100% rename from portfolio/package-lock.json rename to package-lock.json diff --git a/portfolio/package.json b/package.json similarity index 100% rename from portfolio/package.json rename to package.json diff --git a/portfolio/.gitignore b/portfolio/.gitignore deleted file mode 100644 index 8f322f0..0000000 --- a/portfolio/.gitignore +++ /dev/null @@ -1,35 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env*.local - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts diff --git a/portfolio/README.md b/portfolio/README.md deleted file mode 100644 index 965a122..0000000 --- a/portfolio/README.md +++ /dev/null @@ -1,38 +0,0 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. - -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. - -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. - -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/portfolio/public/contactbook.png b/portfolio/public/contactbook.png deleted file mode 100644 index 61762d8..0000000 Binary files a/portfolio/public/contactbook.png and /dev/null differ diff --git a/portfolio/public/ecommerce.png b/portfolio/public/ecommerce.png deleted file mode 100644 index 13ee8e0..0000000 Binary files a/portfolio/public/ecommerce.png and /dev/null differ diff --git a/portfolio/src/components/ArchiveCard.tsx b/portfolio/src/components/ArchiveCard.tsx deleted file mode 100644 index f6ba129..0000000 --- a/portfolio/src/components/ArchiveCard.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { FaRegFolder } from "react-icons/fa" -import { RxOpenInNewWindow } from "react-icons/rx" - -export interface ArchiveCardProps { - title: string - description: string - listItem: string[] - githubLink: string - link: string -} - -export default function ArchiveCard({ title, description, listItem, githubLink, link }: ArchiveCardProps) { - return ( -
-
- - - - - - -
-
-

- {title} -

-

- {description} -

-
-
-
    - {listItem.map((item, i) => ( -
  • - {item} -
    • - ))} -
-
- ) -} diff --git a/portfolio/src/components/Footer.tsx b/portfolio/src/components/Footer.tsx deleted file mode 100644 index 497c9dd..0000000 --- a/portfolio/src/components/Footer.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { motion } from "framer-motion" -import { TbBrandGithub } from "react-icons/tb" -import { SlSocialLinkedin, SlSocialFacebook } from "react-icons/sl" -import { BiLogoFacebook, BiLogoLinkedin } from "react-icons/bi" - -export default function Footer() { - return ( -
- - - - - - - - - - - - - - - - - -
- ) -} diff --git a/portfolio/src/components/LeftSide.tsx b/portfolio/src/components/LeftSide.tsx deleted file mode 100644 index eee2830..0000000 --- a/portfolio/src/components/LeftSide.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { TbBrandGithub } from "react-icons/tb" -import { BiLogoGmail, BiLogoFacebook, BiLogoLinkedin, BiLogoDiscordAlt } from "react-icons/bi" - - -export default function LeftSide() { - return ( -
-
- - - - - - - - - - - - - - - - - -
-
-
- ) -} diff --git a/portfolio/src/components/RightSide.tsx b/portfolio/src/components/RightSide.tsx deleted file mode 100644 index aa73bec..0000000 --- a/portfolio/src/components/RightSide.tsx +++ /dev/null @@ -1,13 +0,0 @@ - -export default function RightSide() { - return ( -
- -

- s.radomski19@gmailc.om -

- - -
- ) -} diff --git a/portfolio/src/components/SectionTitle.tsx b/portfolio/src/components/SectionTitle.tsx deleted file mode 100644 index 0fb96ef..0000000 --- a/portfolio/src/components/SectionTitle.tsx +++ /dev/null @@ -1,12 +0,0 @@ -interface Props { - title: string -} - -export default function SectionTitle({ title }: Props) { - return ( -
- { title } - -
- ) -} diff --git a/portfolio/src/pages/api/hello.ts b/portfolio/src/pages/api/hello.ts deleted file mode 100644 index f8bcc7e..0000000 --- a/portfolio/src/pages/api/hello.ts +++ /dev/null @@ -1,13 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction -import type { NextApiRequest, NextApiResponse } from 'next' - -type Data = { - name: string -} - -export default function handler( - req: NextApiRequest, - res: NextApiResponse -) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/portfolio/src/styles/globals.css b/portfolio/src/styles/globals.css deleted file mode 100644 index 9938130..0000000 --- a/portfolio/src/styles/globals.css +++ /dev/null @@ -1,37 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); - -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - html { - scroll-behavior: smooth; - } - body { - font-family: 'Montserrat', sans-serif; - @apply - bg-primary-white dark:bg-primary-dark text-primary-black dark:text-primary-white - } - h1, h2, h3, h4, h5, h6 { - font-family: 'Inter', sans-serif; - @apply - text-primary-black dark:text-primary-white - } -} - -@layer components { - .nav { - @apply - fixed top-0 left-0 z-40 h-16 md:h-24 justify-center items-center - bg-white dark:bg-black shadow-md md:shadow-lg py-0 w-full - } - .nav-link { - @apply - flex items-center gap-1 - font-medium text-primary-black transition - text-primary-black dark:text-primary-white - hover:text-primary dark:hover:text-primary duration-300 - - } -} \ No newline at end of file diff --git a/portfolio/postcss.config.js b/postcss.config.js similarity index 100% rename from portfolio/postcss.config.js rename to postcss.config.js diff --git a/portfolio/public/favicon.png b/public/favicon.png similarity index 100% rename from portfolio/public/favicon.png rename to public/favicon.png diff --git a/portfolio/src/components/About.tsx b/src/components/AboutMe.tsx similarity index 76% rename from portfolio/src/components/About.tsx rename to src/components/AboutMe.tsx index 0c9aaad..f2901f2 100644 --- a/portfolio/src/components/About.tsx +++ b/src/components/AboutMe.tsx @@ -13,7 +13,7 @@ interface AboutProps { darkMode: boolean } -export default function About({ darkMode }: AboutProps) { +export default function AboutMe({ darkMode }: AboutProps) { const theme = darkMode ? 'dark' : 'light' const techStack: Tech[] = [ { @@ -109,7 +109,7 @@ export default function About({ darkMode }: AboutProps) { ] return ( -
+
-
+ className="about-me-description-container"> +
Greetings! I am Szymon Radomski, a passionate web developer with a deep curiosity for technology and its possibilities. Always seeking opportunities to expand my knowledge and stay up-to-date with the latest trends and best practices. If you are looking for a passionate developer who is committed to delivering high-quality solutions, I would @@ -132,9 +132,9 @@ export default function About({ darkMode }: AboutProps) { initial={{ y: 5, opacity: 0 }} whileInView={{ y: 0, opacity: 1 }} transition={{ duration: 0.2, delay: 0.3 }} - className="block text-center mx-auto mt-14 text-xl md:text-2xl"> + className="technologies-container"> Technologies: -
+
{techStack.map((tech, index) => ( - {tech.alt} - + {tech.alt} + {tech.alt} diff --git a/portfolio/src/components/Archive.tsx b/src/components/Archive.tsx similarity index 72% rename from portfolio/src/components/Archive.tsx rename to src/components/Archive.tsx index fff2487..3a590cf 100644 --- a/portfolio/src/components/Archive.tsx +++ b/src/components/Archive.tsx @@ -15,17 +15,17 @@ export default function Archive() { initial={{ y: 5, opacity: 0 }} whileInView={{ y: 0, opacity: 1 }} transition={{ duration: 0.2, delay: 0.4 }} - className="max-w-container mx-auto py-10 md:py-32" + className="archive-container" > -
-

+
+

Some things I have built

-

+

view the archive

-
+
{archiveCardsData.slice(0, visibleCardsCount).map((cardData, index) => ( ))}
-
-
-

) @@ -62,14 +61,29 @@ const archiveCardsData: ArchiveCardProps[] = [ githubLink: "https://github.com/SzymCode/ContactBook", link: "https://contactbook-szymcode.herokuapp.com/lists" }, + { + title: "AdminPanel", + description: + "Responsive admin panel, made for ONX Center company recruitment process.", + listItem: ["PHP", "Laravel", "Vue", "Tailwind", "Bootstrap"], + githubLink: "https://github.com/SzymCode/RecruitmentTasks/tree/admin-panel", + link: "https://github.com/SzymCode/RecruitmentTasks/tree/admin-panel" + }, { title: "GiardDesign", description: "Fully responsive website with photo gallery, made for adRespect company recruitment process. Graphic design is their own.", - listItem: ["HTML", "Javascript", "Tailwind", "Bootstrap"], + listItem: ["HTML", "JavaScript", "Tailwind", "Bootstrap"], githubLink: "https://github.com/SzymCode/RecruitmentTasks/tree/giard-design", link: "https://szymcode.github.io/RecruitmentTasks/" }, + { + title: "RecruitmentTasks", + description: "This repository contains my solutions for the recruitment tasks.", + listItem: ["React", "Material UI", "TypeScript"], + githubLink: "https://github.com/SzymCode/RecruitmentTasks", + link: "https://github.com/SzymCode/RecruitmentTasks" + }, { title: "ECommerceTemplate", description: @@ -78,6 +92,13 @@ const archiveCardsData: ArchiveCardProps[] = [ githubLink: "https://github.com/SzymCode/ECommerceTemplate", link: "https://e-commerce-template-szymcode.vercel.app/" }, + { + title: "DiscordClone", + description: "Discord clone built by following a step-by-step YouTube tutorial by Ali Codes.", + listItem: ["React", "Tailwind", "Firebase", "Redux"], + githubLink: "https://github.com/SzymCode/SzymCode/DiscordClone", + link: "https://discord-clone-szymcode.vercel.app" + }, { title: "TodoApp", description: @@ -86,6 +107,14 @@ const archiveCardsData: ArchiveCardProps[] = [ githubLink: "https://github.com/SzymCode/TodoApp", link: "https://github.com/SzymCode/TodoApp" }, + { + title: "RWD - exercises", + description: + "Repository with Responsive Web Design exercises.", + listItem: ["HTML5", "CSS3", "JavaScript", "Bootstrap"], + githubLink: "https://github.com/SzymCode/RWD-exercises", + link: "https://rwd-exercises-navbar.vercel.app/" + }, { title: "RegistrationDjango", description: "User registration and login template connected with database.", @@ -100,13 +129,6 @@ const archiveCardsData: ArchiveCardProps[] = [ githubLink: "https://github.com/SzymCode/TinyProjects", link: "https://github.com/SzymCode/TinyProjects" }, - { - title: "RecruitmentTasks", - description: "This repository contains my solutions for the recruitment tasks.", - listItem: ["React", "Material UI", "TypeScript"], - githubLink: "https://github.com/SzymCode/RecruitmentTasks", - link: "https://github.com/SzymCode/RecruitmentTasks" - }, { title: "SzymCode/Portfolio", description: "This project is showcase of my programming skills to potential employers or clients.", @@ -125,28 +147,21 @@ const archiveCardsData: ArchiveCardProps[] = [ title: "Snake", description: "Classic snake game built with Pygame library.", listItem: ["Python", "Pygame"], - githubLink: "https://github.com/SzymCode/Snake", - link: "https://github.com/SzymCode/Snake" + githubLink: "https://github.com/SzymCode/TinyProjects/blob/main/Others/Python/snake.py", + link: "https://github.com/SzymCode/TinyProjects/blob/main/Others/Python/snake.py" }, { title: "ClipboardManager", description: "Small and simple multi-line clipboard manager.", listItem: ["Python", "Tkinter", "Pyperclip"], - githubLink: "https://github.com/SzymCode/ClipboardManager", - link: "https://github.com/SzymCode/ClipboardManager" + githubLink: "https://github.com/SzymCode/TinyProjects/blob/main/Others/Python/clipboard_manager.py", + link: "https://github.com/SzymCode/TinyProjects/blob/main/Others/Python/clipboard_manager.py" }, { title: "YoutubeDownloader", description: "Simple youtube downloader made with tkinter. You can choose file extension .mp3, .mp4 or .3gpp.", listItem: ["Python", "Tkinter", "Pytube"], - githubLink: "https://github.com/SzymCode/YoutubeDownloader", - link: "https://github.com/SzymCode/YoutubeDownloader" - }, - { - title: "DiscordClone", - description: "Not finished yet.", - listItem: ["React", "Tailwind", "Firebase", "Redux"], - githubLink: "https://github.com/SzymCode/SzymCode/DiscordClone", - link: "https://github.com/SzymCode/SzymCode/DiscordClone" + githubLink: "https://github.com/SzymCode/TinyProjects/blob/main/Others/Python/youtube_downloader.py", + link: "https://github.com/SzymCode/TinyProjects/blob/main/Others/Python/youtube_downloader.py" }, ] \ No newline at end of file diff --git a/src/components/ArchiveCard.tsx b/src/components/ArchiveCard.tsx new file mode 100644 index 0000000..6b77b38 --- /dev/null +++ b/src/components/ArchiveCard.tsx @@ -0,0 +1,41 @@ +import { FaRegFolder } from "react-icons/fa" +import { RxOpenInNewWindow } from "react-icons/rx" + +export interface ArchiveCardProps { + title: string + description: string + listItem: string[] + githubLink: string + link: string +} + +export default function ArchiveCard({ title, description, listItem, githubLink, link }: ArchiveCardProps) { + return ( +
+ +
+

+ {title} +

+

+ {description} +

+
+
+
    + {listItem.map((item, i) => ( +
  • + {item} +
    • + ))} +
+
+ ) +} diff --git a/portfolio/src/components/Banner.tsx b/src/components/Banner.tsx similarity index 58% rename from portfolio/src/components/Banner.tsx rename to src/components/Banner.tsx index e012e1c..dd09b81 100644 --- a/portfolio/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -1,21 +1,22 @@ import { motion } from "framer-motion" + export default function Banner() { return ( -
+
+ className="banner-h3"> Hi, my name is + className="banner-h1"> Szymon Radomski. - + Im self-taught fullstack developer. @@ -23,13 +24,13 @@ export default function Banner() { initial={{ y: 10, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.5, delay: 0.9 }} - className="text-base md:max-w-[650px] font-medium text-black dark:text-primary-lightgray"> + className="banner-description"> As a self-taught developer, Im actively seeking challenging career opportunities. I have a no-commerce mastery of JavaScript (TypeScript), Python and mostly use React, Django frameworks. Intermediate in creating a visually attractive and user-friendly frontend using HTML5, CSS3/Tailwind and MUI.
- + Check out my main project! - + diff --git a/portfolio/src/components/ChangeTheme.tsx b/src/components/ChangeTheme.tsx similarity index 51% rename from portfolio/src/components/ChangeTheme.tsx rename to src/components/ChangeTheme.tsx index 89ec37d..3254a21 100644 --- a/portfolio/src/components/ChangeTheme.tsx +++ b/src/components/ChangeTheme.tsx @@ -10,15 +10,11 @@ interface ChangeThemeProps { export default function ChangeTheme({ darkMode, toggleChangeTheme }: ChangeThemeProps): JSX.Element { return ( - ) diff --git a/portfolio/src/components/Contact.tsx b/src/components/ContactMe.tsx similarity index 54% rename from portfolio/src/components/Contact.tsx rename to src/components/ContactMe.tsx index 9872e3b..a76a898 100644 --- a/portfolio/src/components/Contact.tsx +++ b/src/components/ContactMe.tsx @@ -1,22 +1,22 @@ import { motion } from "framer-motion" -export default function Contact() { +export default function ContactMe() { return ( -

+ id="contact" className="contact-me-section"> +

Contact Me

-

+

Are you looking for a passionate Fullstack Developer to join your team? I would love to be part of your organization and contribute my skills and expertise to help achieve your goals. Please use the contact form below to get in touch.

- diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..851fd11 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,27 @@ +import { motion } from "framer-motion" +import { TbBrandGithub } from "react-icons/tb" +import { SlSocialLinkedin, SlSocialFacebook } from "react-icons/sl" +import {BiLogoFacebook, BiLogoGmail, BiLogoLinkedin} from "react-icons/bi" + +export default function Footer() { + return ( + + ) +} diff --git a/src/components/LeftSide.tsx b/src/components/LeftSide.tsx new file mode 100644 index 0000000..a22504d --- /dev/null +++ b/src/components/LeftSide.tsx @@ -0,0 +1,30 @@ +import { TbBrandGithub } from "react-icons/tb" +import { BiLogoGmail, BiLogoLinkedin, BiLogoDiscordAlt } from "react-icons/bi" + + +export default function LeftSide() { + return ( +
+ +
+
+ ) +} diff --git a/portfolio/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx similarity index 53% rename from portfolio/src/components/MobileMenu.tsx rename to src/components/MobileMenu.tsx index eb31f2f..ba7df49 100644 --- a/portfolio/src/components/MobileMenu.tsx +++ b/src/components/MobileMenu.tsx @@ -3,7 +3,7 @@ import { motion } from "framer-motion" import { MdOutlineClose } from "react-icons/md" import Link from "next/link" import { TbBrandGithub } from "react-icons/tb" -import { BiLogoFacebook, BiLogoLinkedin } from "react-icons/bi" +import { BiLogoGmail, BiLogoLinkedin } from "react-icons/bi" import { HandleScroll } from "@/utils" @@ -14,20 +14,20 @@ export default function MobileMenu() { return ( <> -
{ setShowMenu(true) }} className="w-5 h-5 -mr-3 flex flex-col justify-between items-center md:hidden text-4xl duration-300 cursor-pointer overflow-hidden group"> - - - +
{ setShowMenu(true) }} className="mobile-menu-container group"> + + +
{showMenu && ( -
(ref.current = node)} className="absolute mdl:hidden top-0 right-0 w-full h-screen bg-black bg-opacity-50 flex flex-col items-end overflow-hidden"> +
(ref.current = node)} className="mobile-menu"> - { setShowMenu(false) }} className="text-3xl text-primary-black dark:text-primary-lightgray cursor-pointer hover:text-primary dark:hover:text-primary absolute top-4 right-4 duration-300"/> -
    + className="mobile-menu-inner scrollbarHide"> + { setShowMenu(false) }} className="mobile-menu-close"/> +
      - + - + - - - + + +

      s.radomski19@gmail.com

      diff --git a/portfolio/src/components/Navbar.tsx b/src/components/Navbar.tsx similarity index 75% rename from portfolio/src/components/Navbar.tsx rename to src/components/Navbar.tsx index ebdb63a..263911c 100644 --- a/portfolio/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -19,12 +19,12 @@ export default function Navbar({ darkMode, toggleChangeTheme }: NavbarProps) { const ref = useRef("") return ( -
      -
      - +
      +
      +
      -
      + ) +} diff --git a/src/components/SectionTitle.tsx b/src/components/SectionTitle.tsx new file mode 100644 index 0000000..d0f8791 --- /dev/null +++ b/src/components/SectionTitle.tsx @@ -0,0 +1,12 @@ +interface Props { + title: string +} + +export default function SectionTitle({ title }: Props) { + return ( +
      + { title } + +
      + ) +} diff --git a/portfolio/src/components/index.ts b/src/components/index.ts similarity index 82% rename from portfolio/src/components/index.ts rename to src/components/index.ts index 9c3397b..6e63024 100644 --- a/portfolio/src/components/index.ts +++ b/src/components/index.ts @@ -1,9 +1,9 @@ -export { default as About } from "./About" +export { default as AboutMe } from "./AboutMe" export { default as Archive } from "./Archive" export { default as ArchiveCard } from "./ArchiveCard" export { default as Banner } from "./Banner" export { default as ChangeTheme } from "./ChangeTheme" -export { default as Contact } from "./Contact" +export { default as ContactMe } from "./ContactMe" export { default as Footer } from "./Footer" export { default as LeftSide } from "./LeftSide" export { default as MobileMenu } from "./MobileMenu" diff --git a/portfolio/src/pages/_app.tsx b/src/pages/_app.tsx similarity index 100% rename from portfolio/src/pages/_app.tsx rename to src/pages/_app.tsx diff --git a/portfolio/src/pages/_document.tsx b/src/pages/_document.tsx similarity index 100% rename from portfolio/src/pages/_document.tsx rename to src/pages/_document.tsx diff --git a/portfolio/src/pages/index.tsx b/src/pages/index.tsx similarity index 59% rename from portfolio/src/pages/index.tsx rename to src/pages/index.tsx index d1bf219..30a1c53 100644 --- a/portfolio/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,7 +2,7 @@ import Head from "next/head" import { motion } from "framer-motion" -import { About, Archive, Banner, Contact, Footer, LeftSide, Navbar, RightSide } from "@/components" +import { AboutMe, Archive, Banner, ContactMe, Footer, LeftSide, Navbar, RightSide } from "@/components" import { HandleChangeTheme } from "@/utils" export default function Home() { @@ -15,29 +15,28 @@ export default function Home() { {/* made with https://redketchup.io/favicon-generator :) */} -
      +
      -
      +
      + className="index-side left-0"> -
      +
      - + - +
      + className="index-side right-0">
      diff --git a/src/styles/globals.css b/src/styles/globals.css new file mode 100644 index 0000000..90419f0 --- /dev/null +++ b/src/styles/globals.css @@ -0,0 +1,244 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + html { + scroll-behavior: smooth; + } + body { + font-family: 'Montserrat', sans-serif; + @apply + bg-primary-white dark:bg-primary-dark text-primary-black dark:text-primary-white + } + h1, h2, h3, h4, h5, h6 { + font-family: 'Inter', sans-serif; + @apply + text-primary-black dark:text-primary-white + } +} + +@layer components { + /* index.tsx styles */ + .index-main { + @apply w-full h-screen bg-primary-white dark:bg-primary-darkest text-primary-black overflow-x-hidden overflow-y-auto scrollbar scrollbar-track-primary-dark/20 scrollbar-thumb-primary-dark/40 + } + .index-container { + @apply w-full h-[88vh] xl:flex items-center gap-20 justify-between + } + .index-side { + @apply hidden xl:inline-flex w-28 h-full fixed bottom-0 + } + .index-content { + @apply h-[88vh] w-full mx-auto p-4 xl:p-0 pt-14 xl:pt-32 + } + + /* AboutMe.tsx styles */ + .about-me-section { + @apply max-w-containerSmall mx-auto py-10 md:py-32 flex flex-col gap-8 text-primary + } + .about-me-description-container { + @apply flex flex-col lgl:flex-row gap-16 + } + .about-me-description { + @apply w-full text-base text-primary-black dark:text-primary-lightgray font-medium gap-4 + } + .technologies-container { + @apply block text-center mx-auto mt-14 text-xl md:text-2xl + } + .technologies-list { + @apply grid grid-cols-9 py-4 gap-2 md:gap-3 mt-0 md:mt-5 mx-auto + } + .technology-link { + @apply w-8 h-8 md:w-10 md:h-10 xl:w-12 xl:h-12 + } + .technology-icon { + @apply w-8 h-8 md:w-10 md:h-10 xl:w-12 xl:h-12 group-hover:-translate-y-1.5 transition-all duration-300 ease-in-out z-0 mb-2 + } + .technology-name { + @apply p-1 md:p-2 relative -top-10 md:-top-12 left-2 md:left-6 rounded-md shadow-md text-primary-white dark:text-primary-lightgray bg-primary-dark text-[10px] md:text-xs font-bold invisible opacity-0 group-hover:opacity-100 group-hover:visible z-40 transition-all duration-300 + } + + /* Archive.tsx styles */ + .archive-container { + @apply max-w-container mx-auto py-10 md:py-32 + } + .archive-header { + @apply w-full flex flex-col items-center + } + .archive-header-1 { + @apply text-3xl font-semibold + } + .archive-header-2 { + @apply mt-2 text-sm text-primary + } + .archive-cards-container { + @apply grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 lgl:px-10 + } + .archive-button-container { + @apply mt-12 flex items-center justify-center + } + .archive-button { + @apply w-36 h-12 rounded-md text-primary text-[13px] border border-primary hover:bg-primary-lightblue dark:hover:bg-primary-darker duration-300 + } + + /* ArchiveCard.tsx styles */ + .archive-card-container { + @apply w-full h-full rounded-lg p-8 bg-primary-lightblue dark:bg-primary-darker flex flex-col gap-6 hover:-translate-y-2 transition-transform duration-300 + } + .archive-card-icons { + @apply flex justify-between items-center mb-4 + } + .archive-card-icon { + @apply text-4xl hover:text-primary dark:text-primary-lightgray dark:hover:text-primary duration-300 + } + .archive-card-title { + @apply text-2xl font-semibold tracking-wide group-hover:text-primary -mt-1 duration-300 + } + .archive-card-description { + @apply text-sm mt-4 mb-2 text-primary-black dark:text-primary-lightgray + } + .archive-card-technologies { + @apply text-xs mdl:text-sm text-primary-gray px-10 sm:px-0 flex items-center text-center gap-6 mt-1 + } + + /* Banner.tsx styles */ + .banner-section { + @apply max-w-containerSmall mx-auto py-10 md:py-32 flex flex-col gap-4 lgl:gap-8 + } + .banner-h3 { + @apply text-lg tracking-wide text-black dark:text-primary-white font-semibold + } + .banner-h1 { + @apply text-4xl lgl:text-6xl font-semibold flex flex-col text-primary -mt-3 text-primary dark:text-primary + } + .banner-span { + @apply text-primary-black mt-2 lgl:mt-4 text-black dark:text-primary-lightgray + } + .banner-description { + @apply text-base md:max-w-[650px] font-medium text-black dark:text-primary-lightgray + } + .banner-project { + @apply mt-4 text-xl inline-flex relative text-primary cursor-pointer h-7 overflow-x-hidden + } + .banner-project-hover { + @apply absolute w-full h-[1px] bg-primary left-0 bottom-0.5 -translate-x-[110%] group-hover:translate-x-0 transition-transform duration-500 + } + + /* ChangeTheme.tsx styles */ + .change-theme-buttons { + @apply invisible text-primary-black dark:text-primary-lightgray mt-0.5 md:mt-0 -ml-48 md:ml-0 + } + .change-theme-icon { + @apply visible flex text-2xl mr-2 + } + + /* ContactMe.tsx styles */ + .contact-me-section { + @apply max-w-contentContainer mx-auto py-10 xl:py-32 flex flex-col gap-4 items-center justify-center + } + .contact-me-header { + @apply text-4xl text-primary font-bold flex items-center tracking-wide + } + .contact-me-description { + @apply max-w-[700px] text-center text-primary-black dark:text-primary-lightgray + } + .contact-me-button { + @apply w-36 h-12 border border-primary mt-6 text-sm text-primary tracking-wider rounded-md hover:bg-primary-lightblue dark:hover:bg-primary-darker duration-300 + } + + /* Footer.tsx styles */ + .footer-container { + @apply inline-flex xl:hidden items-center justify-center w-full py-12 gap-4 + } + .footer-icon { + @apply w-14 h-14 text-4xl rounded-full inline-flex items-center justify-center cursor-pointer bg-primary-white dark:bg-primary-dark outline outline-[1px] text-primary-gray dark:text-primary-lightgray hover:-translate-y-2 transition-all duration-300 + } + + /* LeftSide.tsx styles */ + .left-side-container { + @apply w-full h-full flex flex-col items-center justify-end gap-4 + } + .left-side-icons { + @apply flex flex-col gap-4 items-center + } + .left-side-icon { + @apply w-14 h-14 text-4xl rounded-full inline-flex items-center justify-center cursor-pointer bg-primary-white dark:bg-primary-dark outline outline-[1px] text-primary-gray dark:text-primary-lightgray hover:-translate-y-1.5 transition-all duration-300 + } + .left-side-line { + @apply w-[2px] h-32 -mt-1 bg-primary-gray + } + + /* MobileMenu.tsx styles */ + .mobile-menu-container { + @apply w-5 h-5 -mr-3 flex flex-col justify-between items-center md:hidden text-4xl duration-300 cursor-pointer overflow-hidden + } + .mobile-menu-icon { + @apply w-full h-[2px] bg-primary-black dark:bg-primary-lightgray inline-flex transform transition-all ease-in-out duration-300 + } + .mobile-menu-icon-line-1 { + @apply group-hover:translate-x-2 + } + .mobile-menu-icon-line-2 { + @apply translate-x-3 group-hover:translate-x-0 + } + .mobile-menu-icon-line-3 { + @apply translate-x-1 group-hover:translate-x-3 + } + .mobile-menu { + @apply absolute mdl:hidden top-0 right-0 w-full h-screen bg-black bg-opacity-50 flex flex-col items-end overflow-hidden + } + .mobile-menu-inner { + @apply w-[80%] h-full overflow-y-scroll bg-primary-white dark:bg-primary-darker flex flex-col items-center px-4 py-10 relative overflow-hidden + } + .mobile-menu-close { + @apply text-3xl text-primary-black dark:text-primary-lightgray cursor-pointer hover:text-primary dark:hover:text-primary absolute top-4 right-4 duration-300 + } + .mobile-menu-ul { + @apply flex flex-col text-base gap-7 + } + .mobile-menu-icon { + @apply w-10 h-10 text-2xl rounded-full inline-flex items-center justify-center cursor-pointer bg-primary-white dark:bg-primary-dark outline outline-[1px] text-primary-gray dark:text-primary-lightgray hover:-translate-y-2 transition-all duration-300 + } + .mobile-menu-email { + @apply text-sm w-72 tracking-widest text-primary text-center relative top-4 + } + + /* Navbar.tsx styles */ + .navbar-container { + @apply fixed top-0 left-0 z-40 h-16 md:h-24 justify-center items-center bg-white dark:bg-black shadow-md md:shadow-lg py-0 w-full + } + .navbar { + @apply container flex items-center justify-between h-16 md:h-24 + } + .navbar-logo { + @apply w-16 md:w-24 h-16 md:h-24 -ml-6 md:-ml-12 + } + .navbar-items { + @apply flex text-[16px] gap-7 invisible md:visible + } + .navbar-link { + @apply flex items-center gap-1 font-medium text-primary-black transition text-primary-black dark:text-primary-white hover:text-primary dark:hover:text-primary duration-300 + } + + /* RightSide.tsx styles */ + .right-side-container { + @apply w-full h-full flex flex-col items-center justify-end gap-6 + } + .right-side-gmail { + @apply rotate-90 w-96 tracking-wide text-primary-black dark:text-primary-lightgray hover:text-primary dark:hover:text-primary duration-300 + } + .right-side-line { + @apply w-[2px] h-32 mt-4 bg-primary-gray inline-flex + } + + /* SectionTitle.tsx styles */ + .section-title-container { + @apply text-2xl font-semibold flex + } + .section-title-line { + @apply hidden md:inline-flex md:w-60 lgl:w-72 h-[1px] bg-primary-black mt-4 ml-6 + } +} \ No newline at end of file diff --git a/portfolio/src/utils/handleChangeTheme.ts b/src/utils/handleChangeTheme.ts similarity index 100% rename from portfolio/src/utils/handleChangeTheme.ts rename to src/utils/handleChangeTheme.ts diff --git a/portfolio/src/utils/handleScroll.ts b/src/utils/handleScroll.ts similarity index 100% rename from portfolio/src/utils/handleScroll.ts rename to src/utils/handleScroll.ts diff --git a/portfolio/src/utils/handleShowMore.tsx b/src/utils/handleShowMore.tsx similarity index 100% rename from portfolio/src/utils/handleShowMore.tsx rename to src/utils/handleShowMore.tsx diff --git a/portfolio/src/utils/index.ts b/src/utils/index.ts similarity index 100% rename from portfolio/src/utils/index.ts rename to src/utils/index.ts diff --git a/portfolio/tailwind.config.js b/tailwind.config.js similarity index 95% rename from portfolio/tailwind.config.js rename to tailwind.config.js index 82482e5..61a66a7 100644 --- a/portfolio/tailwind.config.js +++ b/tailwind.config.js @@ -47,8 +47,8 @@ module.exports = { white: '#ffffff', linkedin: '#0072b1', - facebook: '#3b5998', - discord: '#5865F2' + discord: '#5865F2', + gmail: '#BB001B', } } }, diff --git a/portfolio/tsconfig.json b/tsconfig.json similarity index 100% rename from portfolio/tsconfig.json rename to tsconfig.json