diff --git a/src/3dModel.js b/src/3dModel.js deleted file mode 100644 index 43c3548..0000000 --- a/src/3dModel.js +++ /dev/null @@ -1,130 +0,0 @@ -import React, { useRef, useState, Suspense } from 'react'; -import './App.scss'; - -import { Canvas, useFrame } from "react-three-fiber"; -import { useSpring, a } from 'react-spring/three'; - -import { softShadows, MeshWobbleMaterial, useGLTFLoader, Html } from 'drei'; -import Home from './Home' -import GoldenRatio from './GoldenRatio' -import Menu from './Clickable' - -softShadows(); - -// eslint-disable-next-line -const SpinningMesh = ({ position, color, args, speed }) => -{ - const mesh = useRef(null); - useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01)); - - const [expand, setExpand] = useState(false); - - const props = useSpring( - { - scale: expand ? [1.4, 1.4, 1.4] : [1, 1, 1] - }); - return ( - setExpand(!expand)} - scale={props.scale} - castShadow - position={position} - ref={mesh}> - - - - ); -} - -const Lights = () => -{ - return ( - <> - - - - - - ); -}; - -const Laptop = () => -{ - const gltf = useGLTFLoader('/models/scene.gltf', true); - return ( - - ); - -} - -const HTMLContent = () => -{ - const [active, setActive] = useState(false); - const { ...props } = useSpring({ - position: active ? [0, -6, 3] : [0, -2, 0], - rotation: active ? [Math.PI / 15, Math.PI * 1.5, 0] : [0, -Math.PI / 2, 0], - scale: active ? [4, 4, 4] : [1, 1, 1], - config: { mass: 5, tension: 300, friction: 100, precision: 0.0001 } - }); - // const rotation = spring.to([0, 1], [0, Math.PI]); - - const ref = useRef(); - // useFrame(() => (ref.current.rotation.y += 0.01)); - return ( - - setActive(true)}> - - - -
-

Hello

-
- - - - ); -}; - - // return ( - // - // - // - // - // - // - // - // - // {/* - // - // */} - // - // - // - - - // {/* */} - - // - // ) \ No newline at end of file diff --git a/src/App.js b/src/App.js index dd70da0..6a0cff8 100644 --- a/src/App.js +++ b/src/App.js @@ -80,8 +80,10 @@ function App()

For the past six years, I have been working and travelling on cruise ships as a Musical Director and Pianist, then Sales Manager.

My passions include coding, solving puzzles, music performance, travel, and playing games.

*/}

Hello, and thank you for checking out my site.

-

I'm Nick Worrall and I'm a web developer. I'll make your website and teach you how to use the software I used to build it so that you can easily upload new content yourself.

-

I create beautiful and functional websites using HTML, CSS, PHP, JavaScript, WordPress, React and many other tools.

+

I'm Nick, a Freelance Full Stack Web Developer.

+

I create beautiful and functional websites using React, JavaScript, Node.js, Gatsby,js, Next.js, WordPress and many other tools.

+

I integrate my sites with a content management system, usually Netlify CMS, Strapi or Headless WordPress, so clients can easily edit the data on existing pages or create new pages/blog posts from a template I have created.

+

Clients are impressed with my knowledge and speed of delivery when it comes to developing websites for them.

After graduating in 2014 from Warwick University with an Integrated Master's Degree (First Class Honours) in Mathematics, I have been working and travelling on cruise ships as a Musical Director and Pianist, then Sales Manager.

During that time I have learned how to code so I can make websites, games and applications. I am a great problem solver, logical strategist, learn new concepts quickly and work swiftly and efficiently.

When I am not working, I like to perform music, solve puzzles, travel the world, and play games.

@@ -109,9 +111,9 @@ function App()

Languages

    +
  • JavaScript
  • HTML
  • CSS
    • -
  • JavaScript
  • Python
  • PHP
  • C#
    • @@ -122,11 +124,11 @@ function App()
    • React
      • +
    • Gastby.js
      • +
    • Next.js
      • +
    • Node.js
      • +
    • StrapiCMS
    • WordPress
      • -
    • Flutter
      • -
    • Unity
      • -
    • jQuery
      • -
    • Netlify CMS
    @@ -144,49 +146,20 @@ function App()
    - {/*
    -

    Services

    -
    -
    -

    Ecommerce

    -
    -
    -

    Blogs

    -
    -
    -

    Something else

    -
    - -
    -
    */} - {/*
    -

    Testimonials

    -
    - {Testimonials.map(item => - -
    -

    {item.name}

    -

    {item.title}

    -
    -

    "{item.testimonial}"

    -
    - )} -
    -
    */}

    Contact

    Interested in working with me?

    Contact me now and we will work together to create your dream website.

    -

    Email: nick97000@gmail.com

    +

    Email: nick@nickworrall.co.uk

    {/*

    Phone: (+44)7533232346

    */}

    LinkedIn: Nick Worrall

    - {/*

    If you need words for your website — whether that be content, copywriting, blogs, advertising features, editing or proofreading — I work closly with writer Karen Worrall, who I highly recommend and we can offer you a package deal.

    */} +

    GitHub: XylophoneHero

    diff --git a/src/Portfolio.json b/src/Portfolio.json index 6f63bc3..574842f 100644 --- a/src/Portfolio.json +++ b/src/Portfolio.json @@ -1,11 +1,19 @@ [ { - "id": 0, - "title": "Cruise Ship Karen", - "image": "Cruiseshipkaren.jpg", - "link": "https://cruiseshipkaren.com", - "tagline": "WordPress travel website", - "description": "This website has information on calls of port for cruise ship itineraries, blogs and advice articles. *nI created a template for the port guide section so that information could be easily added by the writer whenever they write a new guide. *nI also created and edited footage for the YouTube Channel Cruise Ship Karen." + "id": -1, + "title": "ISJ Photography", + "image": "isj.png", + "link": "https://isjphotography.com", + "tagline": "Photography portfolio", + "description": "This is Gatsby site for a photographer and uses Netlify CMS so they can easily edit content on the pages as well create new pages/blog posts from templates I have created. *nI used Bulma for styling which really helped creating a responsive design and responsive photo galleries. *nGatsby's Image API was also invaluable to create lazy loaded, blurry images to hasten the percieved performance of the site." + }, + { + "id": 2, + "title": "KarenWorrall.co.uk", + "image": "karenworrall.jpg", + "link": "https://karenworrall.co.uk", + "tagline": "React writer portfolio website", + "description": "This is the portfolio website of a writer featuring their services, selected works and testimonials. *nI built the website from the ground up, writing all the JavaScript and CSS and implemented third party React libraries. *nThe website uses Netlify CMS as a backend to load information for the portfolio, testimonials and services section so the client can easily add or update the content." }, { "id": 1, @@ -16,12 +24,12 @@ "description": "On this website, you can buy a subscription for a monthly care package designed for night health workers. The website uses the Genesis framework and implements the Subbly platform to handle the e-commerce side of it. *nI have also taught the client to use WordPress so they can update the website themselves with new pictures every month." }, { - "id": 2, - "title": "KarenWorrall.co.uk", - "image": "karenworrall.jpg", - "link": "https://karenworrall.co.uk", - "tagline": "React writer portfolio website", - "description": "This is the portfolio website of a writer featuring their services, selected works and testimonials. *nI built the website from the ground up, writing all the JavaScript and CSS and implemented third party React libraries. *nThe website uses Netlify CMS as a backend to load information for the portfolio, testimonials and services section so the client can easily add or update the content." + "id": 0, + "title": "Cruise Ship Karen", + "image": "Cruiseshipkaren.jpg", + "link": "https://cruiseshipkaren.com", + "tagline": "WordPress travel website", + "description": "This website has information on calls of port for cruise ship itineraries, blogs and advice articles. *nI created a template for the port guide section so that information could be easily added by the writer whenever they write a new guide. *nI also created and edited footage for the YouTube Channel Cruise Ship Karen." }, { "id": 3, diff --git a/src/Services.json b/src/Services.json index b54bed1..67c135c 100644 --- a/src/Services.json +++ b/src/Services.json @@ -2,17 +2,27 @@ { "id": 0, "title": "Website Design", - "info": "I'll start shaping your website from a pen and paper draft and mould it so your ideas come to life. Once you are happy with the initial design, I will start building the website, taking great care for it to match your needs." + "info": "I'll start shaping your website from a pen and paper draft and mould it so your ideas come to life. Once you are happy with the initial design, I will start building the website, taking great care for it to match your needs. If you already have designs for your site, I will use my magic to convert them into a website." }, { "id": 1, - "title": "WordPress Theme Development", - "info": "WordPress is my go-to content management system I will use to build your website. 30% of the web is powered by it because it's easy to use and very functional. After finishing your website, I will provide you with login details and together we will go through editing the fine detail of the site." + "title": "React - Static and Dynamic Sites", + "info": "React is my go to choice for web development and I will use either Gatsby.js or Next.js on top of it depending on the requirements of your site. Gatsby is a blazingly fast static site generator and great for content that doesn't change very often. Next is great for large multi-user and big e-commerce sites with lots of dynamic content" + }, + { + "id": 1.5, + "title": "WordPress - Monolithic and Headless", + "info": "I can also create WordPress sites if you would like more control of the layout and just need help setting up the theme and pages (Monolithic). If you already have a WordPress site and are in need of a redesign, I can create a React site for you which sources its data from your existing WordPress databases (Headless). I recommend this way as you get the benefits of a faster, more secure, SEO-friendly website." + }, + { + "id": 6, + "title": "Content Management System", + "info": "After your website is complete, I will teach you how to use the content management system I integrated so you can edit existing content or update new content, whether it be photos, blogs or new items in your store. My go to choices for CMS are Strapi, NetlifyCMS and Contentful." }, { "id": 2, "title": "E-Commerce Solution", - "info": "I'll create your online store for you to sell your goods or services on your selected platform, such as Subbly, Shopify, WooCommerce etc. Credit card payments will be taken safely from your customers and you can easily add any discounts or coupon campaigns to create a buzz as well." + "info": "I'll create your online store for you to sell your goods or services on your selected platform, such as Shopify, Snipcart, Stripe etc. Credit card payments will be taken safely from your customers and you can easily add any discounts or coupon campaigns to create a buzz as well." }, { "id": 3, @@ -22,18 +32,13 @@ { "id": 4, "title": "Responsive Site Design", - "info": "All websites can be viewed on laptops, phones, tablets and more. If a user has a bad experience on one of these, then they probably won't stay on your site for very long. I will make sure this never happens as websites that I design function and look great on all devices." + "info": "All websites can be viewed on laptops, phones, tablets and more. If a user has a bad experience on one of these, then they probably won't stay on your site for very long. I will make sure this never happens as websites that I design function and look great on all devices. I usually use a CSS framework Bulma/Chakra-UI to help build responsive sites." }, { "id": 5, "title": "Cross-browser Testing", "info": "As well as different screen sizes, websites can be viewed on many different browsers. The most popular are Firefox, Chrome, Safari, Edge and native mobile browsers. I will make sure that your website is correctly implemented on all of these different browsers." }, - { - "id": 6, - "title": "WordPress Training", - "info": "After your website is complete, I will teach you the basics of WordPress so that you can add and update new content, whether it be photos, blogs or new items in your store. WordPress is beginner-friendly and I am a patient teacher." - }, { "id": 7, "title": "Copywriting/Content Writing/SEO Writing", diff --git a/src/Testimonials.json b/src/Testimonials.json index 283976f..ba9ff07 100644 --- a/src/Testimonials.json +++ b/src/Testimonials.json @@ -9,6 +9,6 @@ "id": 1, "name": "Karen Worrall", "title": "Copy and Content Writer", - "testimonial": "Nick created both my portfolio site and travel website. He works quickly and is very reliable. He has a lot of knowledge adn understanding on how to make a fantastic looking website that runs smoothly on all devices. If I needed another website made, I will hire him." + "testimonial": "Nick created both my portfolio site and travel website. He works quickly and is very reliable. He has a lot of knowledge and understanding on how to make a fantastic looking website that runs smoothly on all devices. If I needed another website made, I will hire him." } ] \ No newline at end of file diff --git a/src/Title.scss b/src/Title.scss index ab2e4c4..17c470c 100644 --- a/src/Title.scss +++ b/src/Title.scss @@ -21,6 +21,7 @@ .explode-letter{ font-size: 150px; + user-select: none; } .scroll{ diff --git a/src/img/isj.png b/src/img/isj.png new file mode 100644 index 0000000..005724b Binary files /dev/null and b/src/img/isj.png differ diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - -